refactor(customer): 重构客户管理模块的数据映射逻辑
This commit is contained in:
parent
1e256c0bd4
commit
71721d6840
@ -29,29 +29,29 @@
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属行业" prop="industryClass">
|
||||
<JnpfInput :value="getIndustryClassName(dataForm.industryClass)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('industryClass', dataForm.industryClass)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="合作状态" prop="coopStatus">
|
||||
<JnpfInput :value="getCoopStatusName(dataForm.coopStatus)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('coopStatus', dataForm.coopStatus)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业性质" prop="enterpriseType">
|
||||
<JnpfInput :value="getEnterpriseTypeName(dataForm.enterpriseType)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('enterpriseType', dataForm.enterpriseType)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="客户等级" prop="custReg">
|
||||
<JnpfInput :value="getCustRegName(dataForm.custReg)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('custReg', dataForm.custReg)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="信用等级" prop="creditRate">
|
||||
<JnpfInput :value="getCreditRateName(dataForm.creditRate)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('creditRate', dataForm.creditRate)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -130,7 +130,7 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="付款方式" prop="payMeth">
|
||||
<JnpfInput :value="getPayMethName(dataForm.payMeth)"></JnpfInput>
|
||||
<JnpfInput :value="getLabel('payMeth', dataForm.payMeth)"></JnpfInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -144,6 +144,7 @@
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import { customerOptions, customerMaps, getCustomerLabel } from './options'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -174,42 +175,13 @@ export default {
|
||||
remark: undefined,
|
||||
enabledStatus: undefined,
|
||||
},
|
||||
industryClassOptions: [],
|
||||
coopStatusOptions: [],
|
||||
enterpriseTypeOptions: [],
|
||||
custRegOptions: [],
|
||||
creditRateOptions: [],
|
||||
payMethOptions: [],
|
||||
enabledStatusOptions: [],
|
||||
dictProps: {label: "fullName", value: "enCode"},
|
||||
...customerOptions,
|
||||
dictProps: {label: "fullName", value: "id"},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getIndustryClassName(val) {
|
||||
|
||||
const map = {'1': '钢铁', '2': '电力', '3': '化工'};
|
||||
return map[val] || val;
|
||||
},
|
||||
getCoopStatusName(val) {
|
||||
const map = {'1': '潜在', '2': '意向', '3': '正式', '4': '暂停', '5': '终止'};
|
||||
return map[val] || val;
|
||||
},
|
||||
getEnterpriseTypeName(val) {
|
||||
const map = {'1': '国有企业', '2': '民营企业', '3': '外资企业'};
|
||||
return map[val] || val;
|
||||
},
|
||||
getCustRegName(val) {
|
||||
const map = {'1': '核心', '2': '重点', '3': '一般'};
|
||||
return map[val] || val;
|
||||
},
|
||||
getCreditRateName(val) {
|
||||
const map = {'1': '优', '2': '良', '3': '中', '4': '差'};
|
||||
return map[val] || val;
|
||||
},
|
||||
getPayMethName(val) {
|
||||
const map = {'1': '预付', '2': '月付', '3': '承兑'};
|
||||
return map[val] || val;
|
||||
getLabel(type, val) {
|
||||
return getCustomerLabel(type, val)
|
||||
},
|
||||
init(id) {
|
||||
this.dataForm.id = id || '';
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import {getDict} from "@/api/systemData/dictionary";
|
||||
import { customerOptions } from './options'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -182,36 +182,19 @@ export default {
|
||||
custSimName: [{required: true, message: '请输入客户简称', trigger: 'blur'}],
|
||||
enabledStatus: [{required: true, message: '请选择状态', trigger: 'change'}],
|
||||
},
|
||||
industryClassOptions: [],
|
||||
coopStatusOptions: [],
|
||||
enterpriseTypeOptions: [],
|
||||
custRegOptions: [],
|
||||
creditRateOptions: [],
|
||||
payMethOptions: [],
|
||||
enabledStatusOptions: [],
|
||||
dictProps: {label: "fullName", value: "enCode"},
|
||||
...customerOptions,
|
||||
dictProps: {label: "fullName", value: "id"},
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async mounted() {
|
||||
const [industryClass, coopStatus, enterpriseType, custReg, creditRate, payMeth, enabledStatus] = await Promise.all([
|
||||
getDict("industryClass"),
|
||||
getDict("coopStatus"),
|
||||
getDict("enterpriseType"),
|
||||
getDict("custReg"),
|
||||
getDict("creditRate"),
|
||||
getDict("payMeth"),
|
||||
getDict("enabledStatus"),
|
||||
]);
|
||||
|
||||
this.industryClassOptions = industryClass;
|
||||
this.coopStatusOptions = coopStatus;
|
||||
this.enterpriseTypeOptions = enterpriseType;
|
||||
this.custRegOptions = custReg;
|
||||
this.creditRateOptions = creditRate;
|
||||
this.payMethOptions = payMeth;
|
||||
this.enabledStatusOptions = enabledStatus;
|
||||
created() {
|
||||
// 初始化选项数据
|
||||
this.industryClassOptions = customerOptions.industryClass
|
||||
this.coopStatusOptions = customerOptions.coopStatus
|
||||
this.enterpriseTypeOptions = customerOptions.enterpriseType
|
||||
this.custRegOptions = customerOptions.custReg
|
||||
this.creditRateOptions = customerOptions.creditRate
|
||||
this.payMethOptions = customerOptions.payMeth
|
||||
this.enabledStatusOptions = customerOptions.enabledStatus
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
|
||||
@ -40,23 +40,23 @@
|
||||
<el-table-column prop="custSimName" label="客户简称" align="center"/>
|
||||
<el-table-column prop="industryClass" label="所属行业" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ getIndustryClassName(scope.row.industryClass) }}
|
||||
{{ getCustomerLabel('industryClass', scope.row.industryClass) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="enterpriseType" label="企业性质" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ getEnterpriseTypeName(scope.row.enterpriseType) }}
|
||||
{{ getCustomerLabel('enterpriseType', scope.row.enterpriseType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coopStatus" label="合作状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ getCoopStatusName(scope.row.coopStatus) }}
|
||||
{{ getCustomerLabel('coopStatus', scope.row.coopStatus) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="custReg" label="客户等级" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ getCustRegName(scope.row.custReg) }}
|
||||
{{ getCustomerLabel('custReg', scope.row.custReg) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contact1" label="联系人1" align="center"/>
|
||||
@ -76,19 +76,20 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData"/>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
|
||||
<JNPF-Detail v-if="detailVisible" ref="JNPFDetail" @close="closeDetail" />
|
||||
<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh"/>
|
||||
<JNPF-Detail v-if="detailVisible" ref="JNPFDetail" @close="closeDetail"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "@/utils/request";
|
||||
import { mapGetters } from "vuex";
|
||||
import {mapGetters} from "vuex";
|
||||
import JNPFForm from "./form";
|
||||
import JNPFDetail from "./detail";
|
||||
import {customerOptions, getCustomerLabel} from "./options";
|
||||
|
||||
export default {
|
||||
name: "customer_list",
|
||||
@ -117,62 +118,28 @@ export default {
|
||||
},
|
||||
formVisible: false,
|
||||
detailVisible: false,
|
||||
industryClassOptions: [
|
||||
{ fullName: "钢铁", id: "1" },
|
||||
{ fullName: "电力", id: "2" },
|
||||
{ fullName: "化工", id: "3" },
|
||||
],
|
||||
industryClassProps: { label: "fullName", value: "id" },
|
||||
coopStatusOptions: [
|
||||
{ fullName: "潜在", id: "1" },
|
||||
{ fullName: "意向", id: "2" },
|
||||
{ fullName: "正式", id: "3" },
|
||||
{ fullName: "暂停", id: "4" },
|
||||
{ fullName: "终止", id: "5" },
|
||||
],
|
||||
coopStatusProps: { label: "fullName", value: "id" },
|
||||
enterpriseTypeOptions: [
|
||||
{ fullName: "国有企业", id: "1" },
|
||||
{ fullName: "民营企业", id: "2" },
|
||||
{ fullName: "外资企业", id: "3" },
|
||||
],
|
||||
enterpriseTypeProps: { label: "fullName", value: "id" },
|
||||
custRegOptions: [
|
||||
{ fullName: "核心", id: "1" },
|
||||
{ fullName: "重点", id: "2" },
|
||||
{ fullName: "一般", id: "3" },
|
||||
],
|
||||
custRegProps: { label: "fullName", value: "id" },
|
||||
enabledStatusOptions: [
|
||||
{ fullName: "启用", id: "1" },
|
||||
{ fullName: "未启用", id: "2" },
|
||||
],
|
||||
enabledStatusProps: { label: "fullName", value: "id" },
|
||||
...customerOptions,
|
||||
industryClassProps: {label: "fullName", value: "id"},
|
||||
coopStatusProps: {label: "fullName", value: "id"},
|
||||
enterpriseTypeProps: {label: "fullName", value: "id"},
|
||||
custRegProps: {label: "fullName", value: "id"},
|
||||
enabledStatusProps: {label: "fullName", value: "id"},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["userInfo"]),
|
||||
},
|
||||
created() {
|
||||
// 初始化选项数据
|
||||
this.industryClassOptions = customerOptions.industryClass || []
|
||||
this.coopStatusOptions = customerOptions.coopStatus || []
|
||||
this.enterpriseTypeOptions = customerOptions.enterpriseType || []
|
||||
this.custRegOptions = customerOptions.custReg || []
|
||||
this.enabledStatusOptions = customerOptions.enabledStatus || []
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
getIndustryClassName(val) {
|
||||
const map = { '1': '钢铁', '2': '电力', '3': '化工' };
|
||||
return map[val] || val;
|
||||
},
|
||||
getCoopStatusName(val) {
|
||||
const map = { '1': '潜在', '2': '意向', '3': '正式', '4': '暂停', '5': '终止' };
|
||||
return map[val] || val;
|
||||
},
|
||||
getEnterpriseTypeName(val) {
|
||||
const map = { '1': '国有企业', '2': '民营企业', '3': '外资企业' };
|
||||
return map[val] || val;
|
||||
},
|
||||
getCustRegName(val) {
|
||||
const map = { '1': '核心', '2': '重点', '3': '一般' };
|
||||
return map[val] || val;
|
||||
},
|
||||
getCustomerLabel,
|
||||
initData() {
|
||||
this.listLoading = true;
|
||||
let _query = {
|
||||
@ -231,7 +198,8 @@ export default {
|
||||
}
|
||||
});
|
||||
});
|
||||
}).catch(() => {});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.listQuery.currentPage = 1;
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
// 客户管理字典映射配置（id -> 名称）
|
||||
export const customerMaps = {
|
||||
industryClass: { '1': '钢铁', '2': '电力', '3': '化工' },
|
||||
coopStatus: { '1': '潜在', '2': '意向', '3': '正式', '4': '暂停', '5': '终止' },
|
||||
enterpriseType: { '1': '国有企业', '2': '民营企业', '3': '外资企业' },
|
||||
custReg: { '1': '核心', '2': '重点', '3': '一般' },
|
||||
creditRate: { '1': '优', '2': '良', '3': '中', '4': '差' },
|
||||
payMeth: { '1': '预付', '2': '月付', '3': '承兑' },
|
||||
enabledStatus: { '1': '启用', '2': '未启用' },
|
||||
}
|
||||
|
||||
// 根据映射自动生成下拉选项
|
||||
export const customerOptions = {}
|
||||
for (const key in customerMaps) {
|
||||
const map = customerMaps[key]
|
||||
customerOptions[key] = Object.entries(map).map(([id, fullName]) => ({ id, fullName }))
|
||||
}
|
||||
|
||||
// 获取显示名称
|
||||
export function getCustomerLabel(type, value) {
|
||||
const map = customerMaps[type]
|
||||
return map ? (map[value] || value) : value
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user