AuditCloudClient/src/pages/customerManagement/modules/IndustryEdit.vue

<template>
  <CustomDrawer ref="IndustryEdit" title="市场调研" :destroyOnClose="true">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" layout="vertical">
      <a-form-model-item label="所在行业" prop="industry">
        <a-select
          v-model="form.industry"
          @change="handleChangeIndustry"
        >
          <a-select-option
            v-for="item in industryTypes"
            :key="item.code + item.id"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="从业领域" prop="categoryId">
        <a-select
          v-model="form.categoryId"
          @change="getIndustryCategoryCheck"
        >
          <a-select-option
            v-for="item in industryTypesTwo"
            :key="item.code + item.id"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="领域详细"
        class="specailitem"
        v-if="industryTypesCheck.length > 0"
      >
        <a-checkbox-group
          v-model="form.childCategoryIds"
          name="checkboxgroup"
          :options="industryTypesCheck"
        />
      </a-form-model-item>
      <a-form-model-item label="主营业务">
        <a-input v-model.trim="form.businessScope" />
      </a-form-model-item>
      <a-form-model-item label="行业地位">
        <a-input v-model.trim="form.rank" />
      </a-form-model-item>
      <a-form-model-item label="市场占比">
        <a-input-number
          v-model="form.marketShare"
          :min="0"
          :max="100"
          :precision="0"
          style="width:95%;"
        />%
      </a-form-model-item>
      <a-form-model-item label="市场客户">
        <a-input v-model.trim="form.marketCustomer" />
      </a-form-model-item>
      <a-form-model-item label="年度销售金额">
        <a-input-number v-model="form.yearSalesAmount" :min="0" :precision="2" style="width:100%;" />
      </a-form-model-item>
      <a-form-model-item label="年度销售数量">
        <a-input-number v-model="form.yearSalesNum" :min="0" :max="2000000000" :precision="0" style="width:100%;" />
      </a-form-model-item>
    </a-form-model>
    <a-space :size="10">
      <a-button type="primary" :loading="loading" @click="handleSave">确认</a-button>
      <a-button :loading="loading" @click="hideDrawer">取消</a-button>
    </a-space>
  </CustomDrawer>
</template>

<script>
import { putUpdateIndustry, putUpdateProjectIndustry } from '@/services/fileManagement/customer';
import {
  getIndustryCategoryById,
} from '@/services/fileManagement/industryCategory';
export default {
  props: {
    isCompany: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      form: {},
      rules: {
        industry:[
          {required:true,message:'请选择行业',trigger:'change'}
        ],
        categoryId:[
          // {required:true,message:'请选择领域',trigger:'change'}
        ]
      },
      industryTypes: [],
      industryTypesMap: {},
      industryTypesTwo: [],
      industryTypesTwoMap: {},
      industryTypesCheck: [],
      loading: false,
      id: ''
    };
  },
  mounted() {
    this.getDropDown();
  },
  methods: {
    showDrawer(id, industryInfo) {
      this.id = id;
      const categoryIds = industryInfo.categoryIds || []
      this.form = {
        industry: categoryIds[0],
        categoryId: categoryIds[1],
        categoryName: industryInfo.categoryName,
        childCategoryIds: industryInfo.domainDetail?.split(','),
        businessScope: industryInfo.businessScope,
        marketShare: industryInfo.marketShare,
        rank: industryInfo.rank,
        marketCustomer: industryInfo.marketCustomer,
        yearSalesAmount: industryInfo.yearSalesAmount,
        yearSalesNum: industryInfo.yearSalesNum,
      };
      if (categoryIds.length > 0) {
        this.getIndustryCategoryChild(categoryIds[0], () => {
          this.getIndustryCategoryCheck(categoryIds[1])
        });
      }
      this.$refs.IndustryEdit.showDrawer();
    },
    hideDrawer() {
      this.$refs.IndustryEdit.hideDrawer();
    },
    getDropDown() {
      getIndustryCategoryById(0).then((res) => {
        res.forEach((item) => {
          this.industryTypesMap[item.id] = item;
        });
        this.industryTypes = res;
      });
    },
    handleChangeIndustry(id) {
      this.form.categoryId = '';
      this.form.childCategoryIds = [];
      this.getIndustryCategoryChild(id);
    },
    getIndustryCategoryChild(id, callback) {
      this.industryTypesTwo = [];
      this.industryTypesCheck = [];
      getIndustryCategoryById(id).then((res) => {
        res.forEach((item) => {
          this.industryTypesTwoMap[item.id] = item;
        });
        this.industryTypesTwo = res;
        callback && callback();
      });
    },
    getIndustryCategoryCheck(id) {
      this.industryTypesCheck = this.industryTypesTwoMap[id].attributes;
    },
    getLogo(list) {
      this.form.logo = list;
    },
    handleSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let categoryName = '';
          if (this.form.industry) {
            categoryName = `${this.industryTypesMap[this.form.industry].name}`;
          }
          if (this.form.categoryId) {
            categoryName = `${this.industryTypesMap[this.form.industry].name}|${this.industryTypesTwoMap[this.form.categoryId].name}`;
          }
          const params = {
            categoryId: this.form.categoryId || this.form.industry,
            categoryName,
            domainDetail: this.form.childCategoryIds.join(),
            businessScope: this.form.businessScope,
            marketShare: this.form.marketShare,
            marketCustomer: this.form.marketCustomer,
            yearSalesAmount: this.form.yearSalesAmount,
            yearSalesNum: this.form.yearSalesNum,
            rank: this.form.rank
          };
          this.loading = true;
          if (this.isCompany) {
            putUpdateIndustry(this.id, params)
              .then((res) => {
                this.$message.success('保存成功');
                this.$emit('ok');
                this.hideDrawer();
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            putUpdateProjectIndustry(this.id, params)
              .then((res) => {
                this.$message.success('保存成功');
                this.$emit('ok');
                this.hideDrawer();
              })
              .finally(() => {
                this.loading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style></style>