kd-aiot-frontend-eom/src/views/purchasingManage/supplierManage/components/contactDetailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    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="160px"
          ref="formRef"
          :model="form"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="供应商分类："
                prop="categoryId"
              >
                {{ form.categoryName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称：" prop="name">
                {{ form.name }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商代号：" prop="serialNo">
                {{ form.serialNo }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商简称：" prop="simpleName">
                {{ form.simpleName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法定代表人：" prop="legalPerson">
                {{ form.legalPerson }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册资金：" prop="registeredCapital">
                {{ form.registeredCapital }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度：" prop="authorizationLimit">
                {{ form.authorizationLimit }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位电话：" prop="phone">
                {{ form.phone }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址：" prop="addressId">
                {{ form.addressName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址：" prop="address">
                {{ form.address }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="统一社会信用代码："
                prop="unifiedSocialCreditCode"
              >
                {{ form.unifiedSocialCreditCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业：" prop="industry">
                {{ form.industryFullName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业类型：" prop="companyCategoryId">
                {{ form.companyCategoryName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期：" prop="registerDate">
                {{ form.registerDate }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围：" prop="businessScope">
                {{ form.businessScope }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主营产品：" prop="mainProduct">
                {{ form.mainProduct }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="是否存在上级集团公司："
                prop="hasParentGroup"
                label-width="170px"
              >
                {{ form.hasParentGroup === 1 ? "是" : "否" }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="businessLicenseFile" label="营业执照附件：">
                <el-link v-if="form.businessLicenseFile && form.businessLicenseFile !== ''"
                         type="primary" :underline="false"
                         @click="downloadFile(form.businessLicenseFile)"> {{ form.businessLicenseFile.name }}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注：" prop="remark">
                {{ form.remark }}
              </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:accountNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:accountName="{ row }">
            {{ row.accountName }}
          </template>
          <template v-slot:accountNo="{ row }">
            {{ row.accountNo }}
          </template>
          <template v-slot:bankName="{ row }">
            {{ row.bankName }}
          </template>
          <template v-slot:interbankNo="{ row }">
            {{ row.interbankNo }}
          </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: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 }">
            {{ row.linkName }}
          </template>
          <template v-slot:mobilePhone="{ row }">
            {{ row.mobilePhone }}
          </template>
          <template v-slot:phone="{ row }">
            {{ row.phone }}
          </template>
          <template v-slot:email="{ row }">
            {{ row.email }}
          </template>
          <template v-slot:post="{ row }">
            {{ row.post }}
          </template>
          <template v-slot:ifChief="{ row, $index }">
            <el-select v-model="row.ifChief" class="w100" disabled>
              <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"
              :disabled="true"
            ></DictSelection>
          </template>
          <template v-slot:remark="{ row }">
            {{ row.remark }}
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="other">
        <el-form
          label-width="160px"
          ref="otherFormRef"
          :model="otherForm"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式：" prop="settlementMode">
                {{ otherForm.settlementModeName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率：" prop="taxRate">
                {{ otherForm.taxRate }} %
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣率：" prop="discount">
                {{ otherForm.discount }} %
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item
                label="分管部门："
                prop="deptId"
                style="margin-bottom: 22px"
              >
                {{otherForm.deptName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员：" prop="salesmanId">
                {{otherForm.salesmanName}}
              </el-form-item>
            </el-col> -->

            <el-col :span="8">
              <el-form-item label="寄件人：" prop="sender">
                {{ otherForm.sender }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人电话：" prop="senderPhone">
                {{ otherForm.senderPhone }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人地址：" prop="addressId">
                {{ otherForm.addressName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人详细地址：" prop="address">
                {{ otherForm.address }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

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

<script>
import {contactDetail} from '@/api/saleManage/contact';
import {getFile} from '@/api/system/file';
import {getInfoById as getCategoryInfo} from '@/api/classifyManage/index';
import fileUpload from '@/components/upload/fileUpload';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
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,
      businessLicenseFile: {},
      businessScope: '',
      categoryId: '',
      categoryName: '',
      companyCategoryId: '',
      companyCategoryName: '',
      hasParentGroup: 0,
      industry: '',
      industryCode: '',
      industryFullName: '',
      mainProduct: '',
      name: '',
      officialIndustry: '',
      phone: '',
      registerDate: '',
      legalPerson: '',
      registeredCapital: '',
      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),
      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'
        },
      ],
      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: 'wechat',
          slot: 'wechat',
          action: 'wechat'
        },
        {
          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'
        },
      ],
    };
  },
  methods: {
    async open(row) {
      this.row = row;
      this.visible = true;
      await this._getById(row.id);
    },

    cancel() {
      this.$nextTick(() => {
        // 关闭后，销毁所有的表单数据
        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 (this.tableLinkData && this.tableLinkData.length > 0) {
        this.tableLinkData.forEach(e => e.status = e.status + "");
      }

      await getCategoryInfo(this.form.categoryId).then((res) => {
        this.$set(this.form, 'categoryName', res.data.name)
      });
    },

    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },

  }
};
</script>