下面是对 opensingleComDialog 方法的详细解析，并给出优化建议和优化后的代码。
方法解析
作用
opensingleComDialog(index) 方法用于在输入框失去焦点时（@blur 事件）自动根据输入内容进行唯一性查询，如果查到唯一结果则自动填充相关字段，减少用户手动选择的步骤。
主要逻辑
-
防止重复弹窗
首先判断当前是否有任意一个弹窗（comDialog、comDialog1…comDialog10）已经打开，若有则直接返回，避免重复弹窗。 -
根据 index 区分不同字段的唯一性查询
- 0：保险公司代码/名称
- 1：保险机构代码/名称
- 2：佰盈机构代码/名称
- 3~8：新增/修改弹窗下的公司、机构、佰盈机构
- 9~10：险种代码/名称
- 11~12：险种代码/名称（特殊处理）
-
唯一性查询
每个 case 都会调用不同的接口（如commissionConfigdblqueryCom1、commissionConfigdblqueryCom2等），传入当前输入的内容，clickType设为 1，表示唯一性校验。
如果接口返回的数据只有一条，则自动填充对应的字段。
存在的问题
- 大量重复代码
每个 case 结构类似，只有参数和回填字段不同，代码冗余严重。 - 维护性差
新增字段或调整字段时需要多处修改，容易出错。 - 部分 case 逻辑可以合并
比如公司、机构、佰盈机构的唯一性校验逻辑基本一致。
优化思路
- 抽取通用唯一性校验方法
将唯一性校验的接口调用和回填逻辑抽成一个通用方法。 - 用配置对象映射 index 与参数、回填字段的关系
通过配置对象减少 case 分支。 - 减少冗余，提升可维护性
只需维护配置对象即可。
优化后代码
methods: {// ... 其他方法 .../*** 通用唯一性校验* @param {Function} apiFunc 接口方法* @param {Object} params 查询参数* @param {Array} fields 需要回填的字段，格式：[[目标对象, 字段名, 返回字段名], ...]*/async uniqueQuery(apiFunc, params, fields) {try {const res = await apiFunc(params);if (res.data.code !== '000000' && !IsEmpty(res.data.code)) {this.openToast('warning', res.data.msg);} else {const data = res.data.data.data || res.data.data;if (data && data.length === 1) {fields.forEach(([target, field, resField]) => {this[target][field] = data[0][resField];});}}} catch (e) {console.log(e);}},opensingleComDialog(index) {if (this.comDialog || this.comDialog1 || this.comDialog2 || this.comDialog3 ||this.comDialog4 || this.comDialog5 || this.comDialog6 || this.comDialog7 ||this.comDialog8 || this.comDialog9 || this.comDialog10) {return;}// 配置映射const config = {0: {api: this.commissionConfigdblqueryCom1,params: {companycode: this.queryInfo.companycode,insurerName: this.queryInfo.insurerName,clickType: '1'},fields: [['queryInfo', 'companycode', 'companycode'],['queryInfo', 'insurerName', 'insurername']]},1: {api: this.commissionConfigdblqueryCom2,params: {companycode: this.queryInfo.companycode,orgCode: this.queryInfo.orgCode,orgName: this.queryInfo.orgName,clickType: '1'},fields: [['queryInfo', 'orgCode', 'orgcode'],['queryInfo', 'orgName', 'orgname']]},2: {api: this.commissionConfigdblqueryCom4,params: {comCodeOrName: this.queryInfo.comcode || this.queryInfo.comname || '',clickType: '1'},fields: [['queryInfo', 'comcode', 'comcode'],['queryInfo', 'comname', 'comCName']]},3: {api: this.commissionConfigdblqueryCom1,params: {companycode: this.queryInfoAdddialog.companycode,insurerName: this.queryInfoAdddialog.companyname,clickType: '1'},fields: [['queryInfoAdddialog', 'companycode', 'companycode'],['queryInfoAdddialog', 'companyname', 'insurername']]},4: {api: this.commissionConfigdblqueryCom2,params: {companycode: this.queryInfoAdddialog.companycode,orgCode: this.queryInfoAdddialog.orgCode,orgName: this.queryInfoAdddialog.orgName,clickType: '1'},fields: [['queryInfoAdddialog', 'orgCode', 'orgcode'],['queryInfoAdddialog', 'orgName', 'orgname']]},5: {api: this.commissionConfigdblqueryCom3,params: {comCodeOrName: this.queryInfoAdddialog.comcode || this.queryInfoAdddialog.comname || '',clickType: '1'},fields: [['queryInfoAdddialog', 'comcode', 'comcode'],['queryInfoAdddialog', 'comname', 'comCName']]},6: {api: this.commissionConfigdblqueryCom1,params: {companycode: this.queryInfoXiugaiDialog.companycode,insurerName: this.queryInfoXiugaiDialog.insurerName,clickType: '1'},fields: [['queryInfoXiugaiDialog', 'companycode', 'companycode'],['queryInfoXiugaiDialog', 'insurerName', 'insurername']]},7: {api: this.commissionConfigdblqueryCom2,params: {companycode: this.queryInfoXiugaiDialog.companycode,orgCode: this.queryInfoXiugaiDialog.orgCode,orgName: this.queryInfoXiugaiDialog.orgName,clickType: '1'},fields: [['queryInfoXiugaiDialog', 'orgCode', 'orgcode'],['queryInfoXiugaiDialog', 'orgName', 'orgname']]},8: {api: this.commissionConfigdblqueryCom3,params: {comCodeOrName: this.queryInfoXiugaiDialog.comcode || this.queryInfoXiugaiDialog.comname || '',clickType: '1'},fields: [['queryInfoXiugaiDialog', 'comcode', 'comcode'],['queryInfoXiugaiDialog', 'comCName', 'comCName']]},9: {api: this.commissionConfigdblqueryXianzhong,params: {companycode: this.queryInfoAdddialog.companycode,riskcode: this.queryInfoAdddialog.riskcode,riskname: this.queryInfoAdddialog.riskname,clickType: '1'},fields: [['queryInfoAdddialog', 'riskcode', 'riskcode'],['queryInfoAdddialog', 'riskname', 'riskname'],['queryInfoAdddialog', 'period', 'paymentperiod']]},10: {api: this.commissionConfigdblqueryXianzhong,params: {companycode: this.queryInfoXiugaiDialog.companycode,riskcode: this.queryInfoXiugaiDialog.riskcode,riskname: this.queryInfoXiugaiDialog.riskname,clickType: '1'},fields: [['queryInfoXiugaiDialog', 'riskcode', 'riskcode'],['queryInfoXiugaiDialog', 'riskname', 'riskname']]},11: {api: (params) => api('/salaryCommission/getSalary_riskCode', 'post', params),params: {riskCode: this.queryInfo.riskcode,riskName: this.queryInfo.riskname,clickType: '1'},fields: [['queryInfo', 'riskcode', 'riskcode'],['queryInfo', 'riskname', 'riskname']]},12: {api: (params) => api('/salaryCommission/getSalary_riskCode', 'post', params),params: {riskCode: this.queryInfoXiugaiDialog.riskcode,riskName: this.queryInfoXiugaiDialog.riskname,clickType: '1'},fields: [['queryInfoXiugaiDialog', 'riskcode', 'riskcode'],['queryInfoXiugaiDialog', 'riskname', 'riskname']]}};if (config[index]) {this.uniqueQuery(config[index].api, config[index].params, config[index].fields);}}
}
优化说明
- 只需维护
config配置对象即可，新增唯一性校验场景时只需添加配置项。 - 通过
uniqueQuery方法统一处理接口调用和字段回填，减少重复代码。 - 结构清晰，易于维护和扩展。
如需进一步精简或有特殊业务逻辑，可继续细化配置对象或抽象参数。
如需直接替换原方法，可将 opensingleComDialog 及 uniqueQuery 方法复制到 methods 中即可。
如有特殊接口返回结构差异，可在 uniqueQuery 方法中做兼容处理。
如需进一步优化或有其他相关问题，欢迎继续提问！
)
