为了实现通过选择产品名称展示对应的借据编号，并确保在产品名称相同但借据编号不同的情况下正确地过滤借据编号，我们需要对现有代码进行一些修改。

以下是您需要做的更改：

1. 更新 handleLoanInfoChange 函数，以便根据选择的产品名称获取相应的借据编号。
2. 添加一个新的数据状态来存储显示的借据编号。

以下是更新后的代码示例：

<template>
  <a-row>
    <a-col :span="12" v-if="isCustomerAssociated">
      <a-form-item label="借据号" style="width: 250%; margin-left: -130px">
        <a-select
          v-model:value="formModal.loanInfoCode"
          mode="multiple"
          placeholder="请选择借据号"
          :options="loanInfoOptions"
        />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="12" v-if="isCustomerAssociated">
      <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
        <a-select
          v-model:value="formModal.productName"
          mode="multiple"
          placeholder="请选择产品名称"
          :options="productNameOptions"
          @change="handleProductNameChange"
        />
      </a-form-item>
    </a-col>
  </a-row>

  <!-- 新增展示对应借据号 -->
  <div v-if="displayedLoanInfoCodes.length > 0">
    <p>对应的借据号：</p>
    <ul>
      <li v-for="(code) in displayedLoanInfoCodes" :key="code">{{ code }}</li>
    </ul>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';

// Data references
const isCustomerAssociated = ref(false);
const formModal = ref({
  ident: '',
  customerName: '',
  phoneNumber: '',
  loanInfoCode: [],
  productName: [],
});

// Added for displaying loan info codes based on selected product names
const displayedLoanInfoCodes = ref([]);

const loanInfoOptions = ref([]);
const productNameOptions = ref([]);
const productNameMap = ref({});
const generateOptions = (values) => {
  return values.map((value) => ({
    label: value,
    value: value
  }));
};

const parseProductNameMap = (productNames) => {
  const map = {};
  
// Create a mapping of products to their respective loan info codes.
productNames.forEach((productName) => {
    const [loanInfoCode, productNameLabel] = productName.split(':');
    if (!map[productNameLabel]) {
      map[productNameLabel] = [];
    }
    
// Map the respective loan info code to the product name.
    map[productNameLabel].push(loanInfoCode);
    
// If there's a duplicate entry, ensure it’s stored correctly without overwriting previous ones.
    
});

return map;
};

// Handle customer association and data retrieval
const handleAssociateCustomer = () => {
  
getCustomerByIdent({ ident: formModal.value.ident }).then((response) => {
  
if (response.success) {
    
isCustomerAssociated.value = true;
    
formModal.customerName = response.data.customerName;
    
formModal.phoneNumber = response.data.phoneNumber;
    
loanInfoOptions.value = generateOptions(response.data.loanInfoCode);
    
productNameMap.value = parseProductNameMap(response.data.productName);
    
productNameOptions.value = []; 
} else {
  
message.error(response.message);
}
});
};

// Change event for product selection and filter related loan numbers.
const handleProductNameChange = (selectedProductNames) => {

if (selectedProductNames.length === 0) {
displayedLoanInfoCodes.value = [];
return;
}

const uniqueLoanNumbersSet = new Set();
selectedProductNames.forEach((name) => {

if (productNameMap.value[name]) {
// Collect all associated loan numbers corresponding to selected products into a Set to avoid duplicates.
uniqueLoanNumbersSet.add(...productNameMap.value[name]);
}
});

// Convert the Set back to an array and store it for display purposes.
displayedLoanInfoCodes.value = Array.from(uniqueLoanNumbersSet);
};

</script>

修改说明：

1. handleProductChange 方法：这个方法现在接收选中的产品名称，并根据这些名称从 productNameMap 中提取相关联的借据信息。我们使用一个 Set 来避免重复的借据信息。
2. displayedLoanInfoCodes：这是一个新创建的数据引用，用于保存与选中产品名称相对应的唯一借据信息。
3. 模板部分：增加了一个用于显示匹配到的借据信息列表。

这样，当用户选择某个或多个产品名称时，界面会动态展示与之对应的不重复的借据信息。


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