ZBLOG

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

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

  2. 更新 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);
};

修改说明:

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

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

注意:

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


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?