|
|
@@ -0,0 +1,482 @@
|
|
|
+<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="160px"
|
|
|
+ ref="formRef"
|
|
|
+ :model="form"
|
|
|
+ style="margin-top: 30px"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ label="客户分类:"
|
|
|
+ prop="categoryId"
|
|
|
+ >
|
|
|
+ {{form.categoryId}}
|
|
|
+ </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="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="otherForm"
|
|
|
+ :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 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: '',
|
|
|
+ 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),
|
|
|
+ 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: '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+"");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ downloadFile(file){
|
|
|
+ getFile({ objectName: file.storePath }, file.name);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|