saas_masterPlatform/src/views/financed/accountsPayable/supplierSettlement/quantitySettleMent/index.vue

<template>
  <div>
    <BaseDialog
      width="600px"
      :isShow.sync="isShow"
      title="添加"
      @submit="submitForm"
      @close="close"
      confirmName="下一步"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="100px"
        class="demo-ruleForm"
        ><el-form-item label="标题：" prop="title">
          <el-input
            clearable
            v-model="formData.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="成本分类：" prop="costCatId">
          <el-select v-model="formData.costCatId" placeholder="请选择成本分类">
            <el-option
              v-for="(item, index) in topinstcategoryList"
              :key="index"
              :label="item.categoryName"
              :value="item.costCatId"
              @click.native="formData.costCatName = item.categoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商：" prop="instId">
          <el-select v-model="formData.instId" placeholder="请选择供应商">
            <el-option
              v-for="(item, index) in topinstitutionList"
              :key="index"
              :label="item.instName"
              :value="item.instId"
              @click.native="formData.instName = item.instName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教育类型：" prop="educationTypeId">
          <el-select
            v-model="formData.educationTypeId"
            placeholder="请选择教育类型"
          >
            <el-option
              v-for="(item, index) in eduList"
              :key="index"
              :label="item.educationName"
              :value="item.id"
              @click.native="formData.educationName = item.educationName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训项目：" prop="businessId">
          <el-select v-model="formData.businessId" placeholder="请选择培训项目">
            <el-option
              v-for="(item, index) in businessList(formData.educationTypeId)"
              :key="index"
              :label="item.businessName + item.projectName"
              :value="item.businessId"
              @click.native="changeFormDataBusiness(item)"
            >
            </el-option>
          </el-select> </el-form-item
        ><el-form-item label="备注：" prop="remark">
          <el-input
            type="textarea"
            clearable
            v-model="formData.remark"
            placeholder="请输入备注"
          ></el-input> </el-form-item
        ><el-form-item label="收款信息：" prop="bankName">
          <el-input
            disabled
            clearable
            v-model="formData.bankName"
            placeholder="开户名"
          ></el-input> </el-form-item
        ><el-form-item label="" prop="bank">
          <el-input
            disabled
            clearable
            v-model="formData.bank"
            placeholder="开户行"
          ></el-input> </el-form-item
        ><el-form-item label="" prop="bankAccount">
          <el-input
            disabled
            clearable
            v-model="formData.bankAccount"
            placeholder="收款账号"
          ></el-input>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        title: "",
        costCatId: "",
        instId: "",
        educationTypeId: "",
        businessId: "",
        remark: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        costCatId: [
          { required: true, message: "请选择成本分类", trigger: "change" },
        ],
        instId: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
        educationTypeId: [
          { required: true, message: "请选择教育类型", trigger: "change" },
        ],
        businessId: [
          { required: true, message: "请选择培训项目", trigger: "change" },
        ],
        remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
      },
      topinstitutionList: [], //供应商
      eduList: [], //教育类型
      disabledChange: false,
    };
  },
  watch: {
    "formData.costCatId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.instId) {
          this.$set(this.formData, "instId", null);
          this.$set(this.formData, "bank", null);
          this.$set(this.formData, "bankAccount", null);
          this.$set(this.formData, "bankName", null);
        }
        if (newVal) {
          this.$api
            .topinstitutionlistByCat({
              costCatId: newVal,
            })
            .then((res) => {
              this.topinstitutionList = res.rows;
            });
        } else {
          this.topinstitutionList = [];
        }
      },
    },
    "formData.instId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.educationTypeId) {
          this.$set(this.formData, "educationTypeId", null);
        }
        if (newVal) {
          this.$api
            .topcostinsttpbusinessList({
              costCatId: this.formData.costCatId,
              instId: this.formData.instId,
            })
            .then((res) => {
              this.eduList = res.data;
            });
          const INDEX = this.topinstitutionList.findIndex(
            (i) => i.instId == newVal
          );
          if (INDEX !== -1) {
            this.$set(
              this.formData,
              "bank",
              this.topinstitutionList[INDEX].bank
            );
            this.$set(
              this.formData,
              "bankAccount",
              this.topinstitutionList[INDEX].bankAccount
            );
            this.$set(
              this.formData,
              "bankName",
              this.topinstitutionList[INDEX].bankName
            );
          }
        } else {
          this.eduList = [];
        }
      },
    },
    "formData.educationTypeId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.businessId) {
          this.$set(this.formData, "businessId", null);
        }
      },
    },
  },
  methods: {
    init() {
      if (this.activeData.title) {
        this.disabledChange = true;
        this.formData = Object.assign({}, this.activeData);
        setTimeout(() => {
          this.disabledChange = false;
        }, 300);
      } else {
        this.formData = {
          title: "",
          costCatId: "",
          instId: "",
          educationTypeId: "",
          businessId: "",
          remark: "",
        };
      }
      this.$nextTick(() => {
        this.$refs["formData"].clearValidate();
      });
    },
    close() {
      this.$refs["formData"].resetFields();
    },
    submitForm(type) {
      var self = this;
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, self.formData);
          data.settleType = 1;
          self.$emit("openSupplier", data);
          self.isShow = false;
        } else {
          return false;
        }
      });
    },
    changeFormDataBusiness(item) {
      this.formData.projectId = item.projectId;
      this.formData.businessName = item.businessName + item.projectName;
    },
  },
  computed: {
    ...mapGetters(["topinstcategoryList"]),
    businessList: function () {
      return function (id) {
        const INDEX = this.eduList.findIndex((i) => i.id == id);
        return INDEX !== -1 ? this.eduList[INDEX].businessList || [] : [];
      };
    },
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.dis_play {
  display: flex;
  .gz {
    flex: 1;
  }
  .el-divider {
    height: auto;
    margin: 30px;
  }
  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 368px;
  }
}
.el-input {
  width: 220px;
  margin-right: 10px;
}
.el-select {
  width: 220px;
  margin-right: 10px;
}
</style>