ZBLOG

要实现您所描述的功能,即在下拉框中只展示产品名称,但在传递时需要包括借据编号与产品名称,可以通过调整 generateOptions 函数和相关逻辑来完成。以下是如何修改您的代码以实现这个需求:

  1. 修改 generateOptions 函数:在这个函数中,仅将产品名称作为标签,并保留借据编号与产品名称的映射关系。

  2. 更新 handleProductNameChange 逻辑:当用户选择了产品名称后,确保依然可以使用相应的借据编号进行后续操作。

下面是修改后的代码示例:

  1. const generateOptions = (values) => {
  2. return values.map((value) => ({
  3. label: value.split(':')[1], // 仅显示产品名称
  4. value: value, // 保存完整的 "借据号:产品名称" 格式
  5. }));
  6. };
  7. const parseProductNameMap = (productNames) => {
  8. const productMap = {};
  9. const loanMap = {};
  10. productNames.forEach((productName) => {
  11. const [loanInfoCode, productNameLabel] = productName.split(':');
  12. if (!productMap[productNameLabel]) {
  13. productMap[productNameLabel] = [];
  14. }
  15. // 保留对 loanInfoCode 的映射,以便后续使用
  16. productMap[productNameLabel].push({
  17. label: loanInfoCode,
  18. value: loanInfoCode,
  19. });
  20. if (!loanMap[productNameLabel]) {
  21. loanMap[productNameLabel] = [];
  22. }
  23. loanMap[productNameLabel].push(loanInfoCode);
  24. });
  25. return { productMap, loanMap };
  26. };
  27. const handleAssociateCustomer = () => {
  28. getCustomerByIdent(formModal.ident)
  29. .then((response) => {
  30. if (response.success) {
  31. isCustomerAssociated.value = true;
  32. formModal.customerName = response.data.customerName;
  33. formModal.phoneNumber = response.data.phoneNumber;
  34. // 使用解析方法获取映射信息
  35. const { productMap, loanMap } = parseProductNameMap(response.data.productNames);
  36. productNameMap.value = productMap;
  37. loanInfoMap.value = loanMap;
  38. // 将选项生成器应用于返回的数据
  39. productNameOptions.value = generateOptions(Object.keys(productMap));
  40. // 清空借据号选项
  41. loanInfoOptions.value=[];
  42. } else {
  43. message.error(response.message);
  44. }
  45. });
  46. };
  47. const handleProductNameChange = (selectedProductNames) => {
  48. if (selectedProductNames.length === 0) {
  49. loanInfoOptions.value = [];
  50. formModal.loanInfoCode = [];
  51. return;
  52. }
  53. const filteredLoanInfoCodes = [];
  54. selectedProductNames.forEach((name) => {
  55. if (loanInfoMap.value[name]) {
  56. filteredLoanInfoCodes.push(...loanInfoMap.value[name]);
  57. }
  58. });
  59. const uniqueLoanInfoCodes = [...new Set(filteredLoanInfoCodes)];
  60. // 更新贷款信息选项以用于下拉选择
  61. loanInfoOptions.value = generateOptions(uniqueLoanInfoCodes);
  62. };

修改说明:

  1. generateOptions:现在将每个选项的标签设置为只包含产品名称,而值则保存整个 "借据号:产品名称" 字符串。

  2. 其他部分保持不变,主要是在获取客户数据并处理产品名和借据信息时进行了一些适配,以确保逻辑能够正确运作。

注意:

  • 在其他地方(如提交表单等),你需要根据新的结构提取对应的信息。如果你需要在后端发送数据时也携带这些信息,确保从 formModal.loanInfoCode 中获得正确的数据格式即可。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22637

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?