要实现您所描述的功能,即在下拉框中只展示产品名称,但在传递时需要包括借据编号与产品名称,可以通过调整 generateOptions
函数和相关逻辑来完成。以下是如何修改您的代码以实现这个需求:
修改
generateOptions
函数:在这个函数中,仅将产品名称作为标签,并保留借据编号与产品名称的映射关系。更新
handleProductNameChange
逻辑:当用户选择了产品名称后,确保依然可以使用相应的借据编号进行后续操作。
下面是修改后的代码示例:
const generateOptions = (values) => {
return values.map((value) => ({
label: value.split(':')[1], // 仅显示产品名称
value: value, // 保存完整的 "借据号:产品名称" 格式
}));
};
const parseProductNameMap = (productNames) => {
const productMap = {};
const loanMap = {};
productNames.forEach((productName) => {
const [loanInfoCode, productNameLabel] = productName.split(':');
if (!productMap[productNameLabel]) {
productMap[productNameLabel] = [];
}
// 保留对 loanInfoCode 的映射,以便后续使用
productMap[productNameLabel].push({
label: loanInfoCode,
value: loanInfoCode,
});
if (!loanMap[productNameLabel]) {
loanMap[productNameLabel] = [];
}
loanMap[productNameLabel].push(loanInfoCode);
});
return { productMap, loanMap };
};
const handleAssociateCustomer = () => {
getCustomerByIdent(formModal.ident)
.then((response) => {
if (response.success) {
isCustomerAssociated.value = true;
formModal.customerName = response.data.customerName;
formModal.phoneNumber = response.data.phoneNumber;
// 使用解析方法获取映射信息
const { productMap, loanMap } = parseProductNameMap(response.data.productNames);
productNameMap.value = productMap;
loanInfoMap.value = loanMap;
// 将选项生成器应用于返回的数据
productNameOptions.value = generateOptions(Object.keys(productMap));
// 清空借据号选项
loanInfoOptions.value=[];
} else {
message.error(response.message);
}
});
};
const handleProductNameChange = (selectedProductNames) => {
if (selectedProductNames.length === 0) {
loanInfoOptions.value = [];
formModal.loanInfoCode = [];
return;
}
const filteredLoanInfoCodes = [];
selectedProductNames.forEach((name) => {
if (loanInfoMap.value[name]) {
filteredLoanInfoCodes.push(...loanInfoMap.value[name]);
}
});
const uniqueLoanInfoCodes = [...new Set(filteredLoanInfoCodes)];
// 更新贷款信息选项以用于下拉选择
loanInfoOptions.value = generateOptions(uniqueLoanInfoCodes);
};
修改说明:
generateOptions
:现在将每个选项的标签设置为只包含产品名称,而值则保存整个"借据号:产品名称"
字符串。其他部分保持不变,主要是在获取客户数据并处理产品名和借据信息时进行了一些适配,以确保逻辑能够正确运作。
注意:
- 在其他地方(如提交表单等),你需要根据新的结构提取对应的信息。如果你需要在后端发送数据时也携带这些信息,确保从
formModal.loanInfoCode
中获得正确的数据格式即可。
内容由零声教学AI助手提供,问题来源于学员提问