kd-aiot-frontend-eom/src/views/saleManage/contact/components/addContactDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="80%"
    @close="cancel"
  >

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="base">
        <el-form
          label-width="100px"
          ref="form"
          :model="form"
          :rules="rules"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="客户分类"
                prop="categoryId"
              >
                <ele-tree-select
                  :data="categoryTreeList"
                  v-model="form.categoryId"
                  valueKey="id"
                  labelKey="name"
                  placeholder="请选择"
                  default-expand-all
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称" prop="name">
                <el-input placeholder="请输入" v-model="form.name" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户代码" prop="serialNo">
                <el-input placeholder="请输入" v-model="form.serialNo" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户简称" prop="simpleName">
                <el-input
                  placeholder="请输入"
                  v-model="form.simpleName"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度" prop="authorizationLimit">
                <el-input
                  placeholder="请输入"
                  v-model="form.authorizationLimit"
                  maxlength="17"
                  oninput ="value=value.replace(/[^0-9.]/g,'')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位电话" prop="phone">
                <el-input placeholder="请输入" v-model="form.phone" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址" prop="addressId">
                <el-cascader
                  clearable
                  v-model="form.addressId"
                  :options="options.cityData"
                  ref="address"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  placeholder="请输入"
                  v-model="form.address"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="统一社会信用代码	"
                prop="unifiedSocialCreditCode"
                label-width="130px"
              >
                <el-input
                  placeholder="请输入"
                  v-model="form.unifiedSocialCreditCode"
                  maxlength="18"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业" prop="industry">
                <el-cascader
                  :options="options.categoryData"
                  v-model="form.industry"
                  style="width: 100%"
                  ref="industry"
                >
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业类型" prop="companyCategoryId">
                <DictSelection
                  dictName="企业类型"
                  clearable
                  v-model="form.companyCategoryId"
                >
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期" prop="registerDate">
                <el-date-picker
                  style="width: 100%"
                  clearable
                  v-model="form.registerDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input
                  placeholder="请输入"
                  v-model="form.businessScope"
                  maxlength="100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主营产品" prop="mainProduct">
                <el-input
                  placeholder="请输入"
                  v-model="form.mainProduct"
                  maxlength="100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="是否存在上级集团公司"
                prop="hasParentGroup"
                label-width="155px"
              >
                <el-radio v-model="form.hasParentGroup" :label="1">是</el-radio>
                <el-radio v-model="form.hasParentGroup" :label="0">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="businessLicenseFiles" label="营业执照附件">
                <fileUpload
                  v-model="form.businessLicenseFiles"
                  module="main"
                  :showLib="false"
                  :limit="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  resize="none"
                  v-model="form.remark"
                  :rows="2"
                  placeholder="请输入"
                  size="small"
                  maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="银行信息" name="bank">
        <ele-pro-table
          ref="table"
          :columns="bankColumns"
          :datasource="tableBankData"
          height="350px"
          :toolkit="[]"
          :need-page="false"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="addBank">添加</el-button>
          </template>
          <template v-slot:action="{ row, $index }">
            <el-link type="primary" @click="handleBankDel(row, $index)"
              >删除</el-link
            >
          </template>
          <template v-slot:accountNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:accountName="{ row }">
            <el-input v-model="row.accountName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:accountNo="{ row }">
            <el-input v-model="row.accountNo" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:bankName="{ row }">
            <el-input v-model="row.bankName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:interbankNo="{ row }">
            <el-input v-model="row.interbankNo" placeholder="请输入" maxlength="50"></el-input>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="联系人信息" name="link">
        <ele-pro-table
          ref="linkTable"
          :columns="linkColumns"
          :datasource="tableLinkData"
          :toolkit="[]"
          height="350px"
          :need-page="false"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="addLink">添加</el-button>
          </template>
          <template v-slot:action="{ row, $index }">
            <el-link type="primary" @click="handleLinkDel(row, $index)"
              >删除</el-link
            >
          </template>
          <template v-slot:linkNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:mobilePhoneHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:statusHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:linkName="{ row }">
            <el-input v-model="row.linkName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:mobilePhone="{ row }">
            <el-input v-model="row.mobilePhone" placeholder="请输入" maxlength="20"></el-input>
          </template>
          <template v-slot:phone="{ row }">
            <el-input v-model="row.phone" placeholder="请输入" maxlength="20"></el-input>
          </template>
          <template v-slot:email="{ row }">
            <el-input v-model="row.email" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:post="{ row }">
            <el-input v-model="row.post" placeholder="请输入" maxlength="20"></el-input>
          </template>
          <template v-slot:ifChief="{ row, $index }">
            <el-select v-model="row.ifChief" placeholder="请选择" class="w100" @change="((value)=>{ifChiefChange(value, $index)})">
              <el-option
                v-for="item in ifChiefList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-slot:status="{ row }">
            <DictSelection
              dictName="客户联系人状态"
              v-model="row.status"
            ></DictSelection>
          </template>
          <template v-slot:remark="{ row }">
            <el-input v-model="row.remark" placeholder="请输入" maxlength="50"></el-input>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="other">
        <el-form
          label-width="100px"
          ref="otherForm"
          :model="otherForm"
          :rules="otherRules"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式" prop="settlementMode">
                <DictSelection
                  dictName="结算方式"
                  clearable
                  @itemChange="settlementModeChange"
                  v-model="otherForm.settlementMode"
                >
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率" prop="taxRate">
                <el-input v-model="otherForm.taxRate" maxlength="5" oninput ="value=value.replace(/[^0-9.]/g,'')">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣率" prop="discount">
                <el-input v-model="otherForm.discount" maxlength="5" oninput ="value=value.replace(/[^0-9.]/g,'')">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="分管部门"
                prop="deptId"
                style="margin-bottom: 22px"
              >
                <ele-tree-select
                  clearable
                  :data="groupTreeData"
                  v-model="otherForm.deptId"
                  valueKey="id"
                  labelKey="name"
                  placeholder="请选择"
                  @change="change_principalDep"
                  default-expand-all
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员" prop="salesmanId">
                <personSelect
                  ref="directorRef"
                  v-model="otherForm.salesmanId"
                  @selfChange="salesmanChange"
                  :init="false"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="寄件人" prop="sender">
                <el-input placeholder="请输入" v-model="otherForm.sender" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人电话" prop="senderPhone">
                <el-input
                  placeholder="请输入"
                  v-model="otherForm.senderPhone"
                  maxlength="20"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人地址" prop="addressId">
                <el-cascader
                  clearable
                  v-model="otherForm.addressId"
                  :options="options.cityData"
                  ref="sendAddress"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人详细地址" prop="address"
                 label-width="130px">
                <el-input
                  placeholder="请输入"
                  v-model="otherForm.address"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {contactDetail, contactSave, contactUpdate} from '@/api/saleManage/contact';
import {categoryData} from 'element-china-category-data';
import fileUpload from '@/components/upload/fileUpload';
import {cityData} from 'ele-admin/packages/utils/regions';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
import {listOrganizations} from '@/api/system/organization';
import {copyObj} from '@/utils/util';


export default {
    props: {
      categoryTreeList: Array
    },
    mixins: [dictMixins],
    components: {
      fileUpload,
      deptSelect,
      personSelect
    },
    data() {
      let formDef = {
          address: '',
          addressId: 0,
          addressName: '',
          authorizationLimit: 0,
          businessLicenseFiles: [],
          businessLicenseFile: {},
          businessScope: '',
          categoryId: '',
          companyCategoryId: '',
          companyCategoryName: '',
          hasParentGroup: 0,
          industry: '',
          industryCode: '',
          industryFullName: '',
          mainProduct: '',
          name: '',
          officialIndustry: '',
          phone: '',
          registerDate: '',
          remark: '',
          serialNo: '',
          simpleName: '',
          type: 1,
          unifiedSocialCreditCode: ''
        };
      let otherFormDef = {
        settlementMode: '',
        settlementModeName: '',
        taxRate: 0,
        address: '',
        addressId: '',
        deptId: '',
        deptName: '',
        discount: 0,
        salesmanId: '',
        salesmanName: '',
        sender: '',
        senderPhone: ''
      };
      return {
        visible: false,
        title: '',
        row: {},
        activeName: 'base',
        formDef,
        otherFormDef,
        form: copyObj(formDef),
        otherForm: copyObj(otherFormDef),
        // removeBankList: [],
        // removeLinkList: [],
        tableBankData: [],
        tableLinkData: [],
        ifChiefList: [
          {
            value: 0,
            label: '否'
          },
          {
            value: 1,
            label: '是'
          }
        ],
        bankColumns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '单位名称',
            prop: 'accountName',
            slot: 'accountName',
            action: 'accountName',
            headerSlot: 'accountNameHeader'
          },
          {
            label: '银行账号',
            prop: 'accountNo',
            slot: 'accountNo',
            action: 'accountNo'
          },
          {
            label: '开户行',
            prop: 'bankName',
            slot: 'bankName',
            action: 'bankName'
          },
          {
            label: '银行银联号',
            prop: 'interbankNo',
            slot: 'interbankNo',
            action: 'interbankNo'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        linkColumns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '联系人名称',
            prop: 'linkName',
            slot: 'linkName',
            action: 'linkName',
            headerSlot: 'linkNameHeader'
          },
          {
            label: '手机',
            prop: 'mobilePhone',
            slot: 'mobilePhone',
            action: 'mobilePhone',
            headerSlot: 'mobilePhoneHeader'
          },
          {
            label: '电话',
            prop: 'phone',
            slot: 'phone',
            action: 'phone'
          },
          {
            label: '邮箱',
            prop: 'email',
            slot: 'email',
            action: 'email'
          },
          {
            label: '职务',
            prop: 'post',
            slot: 'post',
            action: 'post'
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            action: 'status',
            headerSlot: 'statusHeader'
          },
          {
            label: '是否首要',
            prop: 'ifChief',
            slot: 'ifChief',
            action: 'ifChief'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            action: 'remark'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        rules: {
          categoryId: [
            { required: true, message: '请选择客户分类', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入客户名称', trigger: 'blur' }
          ],
          authorizationLimit: [
            { required: true, message: '请输入授信额度', trigger: 'change' }
          ]
        },
        otherRules: {
          settlementMode: [
            { required: true, message: '请输入结算方式', trigger: 'blur' }
          ],
          taxRate: [
            { required: true, message: '请输入税率', trigger: 'change' }
          ]
        },
        options: {
          cityData,
          categoryData,
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,

        // 组织机构树形结构数据
        groupTreeData: [],
        // 组织机构平铺数据
        groupData: [],
      };
    },
    created () {
      this.getGroupAll();
    },
    methods: {
      async open(type, row, contactCategoryId) {
        this.title = type;
        this.row = row;
        this.visible = true;
        if (type == '新建客户') {
          this.isUpdate = false;
          // 默认带出列表页面选中的分类
          this.form.categoryId = contactCategoryId;
        } else {
          this.isUpdate = true;
          await this._getById(row.id);
        }
      },

      // 获取公司数据
      getGroupAll () {
        listOrganizations().then((list) => {
          this.groupData = list;
          this.groupTreeData = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        });
      },

      // 选择负责人部门
      change_principalDep(id) {
        const info = this.groupData.find(e => e.id == id);
        this.otherForm.deptName = info.name;
        this.otherForm.salesmanId = '';
        this.otherForm.salesmanName = '';
        // 根据部门获取人员
        const params = { groupId: id };
        this.$nextTick(() => {
          this.$refs.directorRef.getList(params);
        });
      },
      salesmanChange(val, info){
        this.otherForm.salesmanName = info.name;
      },
      settlementModeChange(info){
        this.otherForm.settlementModeName = info.dictValue;
      },
      ifChiefChange(value, idx){
        if(value === 1){
          this.tableLinkData.forEach(e => e.ifChief = 0);
          this.tableLinkData[idx].ifChief = 1;
        }
      },
      addBank() {
        this.tableBankData.push({
          accountName: '',
          accountNo: '',
          bankName: '',
          interbankNo: ''
        });
      },
      addLink() {
        this.tableLinkData.push({
          linkName: '',
          mobilePhone: '',
          phone: '',
          email: '',
          post: '',
          status: '',
          ifChief: 0,
          remark: ''
        });
      },
      handleBankDel(row, index) {
        this.tableBankData.splice(index, 1);
        if (row?.id) {
        //   this.removeBankList.push(row.id);
        }
      },
      handleLinkDel(row, index) {
        this.tableLinkData.splice(index, 1);
        if (row?.id) {
        //   this.removeLinkList.push(row.id);
        }
      },
      async save() {
        const isBaseValid = await this.$refs.form.validate();
        const isOtherValid = await this.$refs.otherForm.validate();
        if (!isBaseValid) {
          this.activeName = 'base';
          return false;
        }
        if (!isOtherValid) {
          this.activeName = 'other';
          return false;
        }
        if(this.tableLinkData && this.tableLinkData.length === 0){
          this.$message.error("联系人信息至少有1条");
          this.activeName = 'link';
          return false;
        }

        this.loading = true;
        // 基本信息处理
        if (this.$refs.address.getCheckedNodes()) {
          let node = this.$refs.address.getCheckedNodes()[0];
          if (node) {
            this.form.addressId = node.path.join();
            this.form.addressName = node.pathLabels.join();
          } else {
            this.form.addressId = '';
            this.form.addressName = '';
          }
        }
        if (this.$refs.industry.getCheckedNodes()) {
          let node = this.$refs.industry.getCheckedNodes()[0];
          if (node) {
            this.form.industryCode = node.path.join();
            this.form.industryFullName = node.pathLabels.join();
          } else {
            this.form.industryCode = '';
            this.form.industryFullName = '';
          }
        }
        if (this.form.companyCategoryId) {
          this.form.companyCategoryName = this.getDictValue(
            '企业类型',
            this.form.companyCategoryId
          );
        }
        if(this.form.businessLicenseFiles && this.form.businessLicenseFiles.length > 0){
          this.form.businessLicenseFile = this.form.businessLicenseFiles[0];
        } else {
          this.form.businessLicenseFile = null;
        }

        // 其他信息处理
        if (this.form.settlementMode) {
          this.form.settlementModeName = this.getDictValue(
            '结算方式',
            this.form.settlementMode
          );
        }
        if (this.$refs.sendAddress.getCheckedNodes()) {
          let node = this.$refs.sendAddress.getCheckedNodes()[0];
          if (node) {
            this.otherForm.addressId = node.path.join();
            this.otherForm.addressName = node.pathLabels.join();
          } else {
            this.otherForm.addressId = '';
            this.otherForm.addressName = '';
          }
        }

        if (!this.isUpdate) {
          delete this.form.id;
        } else {
        //   this.form.removeBankList = this.removeBankList;
        //   this.form.removeLinkList = this.removeLinkList;
        }
        const data = {
          base: this.form,
          other: this.otherForm,
          bankList: this.tableBankData,
          linkList: this.tableLinkData
        };
        if (this.isUpdate) {
          contactUpdate(data)
            .then((res) => {
              this.loading = false;
              this.$message.success("修改成功");
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
        } else {
          contactSave(data)
            .then((res) => {
              this.loading = false;
              this.$message.success("新增成功");
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
        }
      },
      cancel() {
        this.$nextTick(() => {
          this.activeName = 'base';
          // 关闭后，销毁所有的表单数据
          this.$refs['otherForm'] &&  this.$refs['otherForm'].resetFields();
          this.$refs['formRef'] &&  this.$refs['formRef'].resetFields();
          this.form = copyObj(this.formDef),
          this.otherForm = copyObj(this.otherFormDef),
          this.tableBankData = []
          this.tableLinkData = []
          this.visible = false;
        })
      },
      async _getById(id) {
        const data = await contactDetail(id);
        this.form = data.base;
        this.otherForm = data.other;
        this.tableBankData = data.bankList;
        this.tableLinkData = data.linkList;
        if(data.base.businessLicenseFile && data.base.businessLicenseFile !== ""){
          this.$set(this.form,'businessLicenseFiles',[data.base.businessLicenseFile])
        }

        if(this.tableLinkData && this.tableLinkData.length > 0){
          this.tableLinkData.forEach(e => e.status = e.status+"");
        }
        this.otherForm.settlementMode = this.otherForm.settlementMode + "";
        // 回显地址选择器
        if(this.form.addressId && this.form.addressId.length > 0){
          this.form.addressId = this.form.addressId.split(",");
        }
        if(this.otherForm.addressId && this.otherForm.addressId.length > 0){
          this.otherForm.addressId = this.otherForm.addressId.split(",");
        }
        // 回显行业
        if(this.form.industryCode && this.form.industryCode.length > 0){
          this.form.industry = this.form.industryCode.split(",");
        }
        if(this.otherForm.deptId) {
          // 编辑时，默认查询组织相关的用户列表，用于回显
          this.$nextTick(async () => {
            await this.$refs.directorRef.getList({groupId: this.otherForm.deptId});
          })
        }
      },

    }
  };
</script>