关联客户 ...-Go服务器开发

你可以通过在响应中检查特定消息并相应地更新组件的状态，以允许用户手动输入产品名称和借据号。可以在 Vue 组件中增加一个状态变量来控制是否允许手动输入。

以下是如何实现这一点的示例代码：

<template>
  <a-button
    class="margin-right-10 button-light-blue"
    type="primary"
    @click="handleAssociateCustomer"
  >
    关联客户
  </a-button>
  <a-form-item>
    <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="productOptions"
            :disabled="isEditing && !canManuallyInput" 
            allowClear
          />
          <a-input
            v-if="canManuallyInput"
            v-model:value="manualProductName"
            placeholder="请输入产品名称，多个用逗号隔开"
            @keyup.enter.prevent="addManualProductName"
          />
        </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.loanInfoCode"
            mode="multiple"
            placeholder="请选择借据号或手动输入"
            :options="loanOptions"
            :disabled="!formModal.productName.length || isEditing && !canManuallyInput" 
            allowClear
          />
          <a-input
            v-if="canManuallyInput"
            v-model:value="manualLoanInfoCode"
            placeholder="请输入借据号，多个用逗号隔开"
            @keyup.enter.prevent="addManualLoanInfoCode"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form-item>
</template>
<script setup>
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import { getCustomerByIdent } from './api';
const isCustomerAssociated = ref(false);
const isEditing = ref(false);
const canManuallyInput = ref(false); // 新增变量用于控制是否可手动输入
const formModal = ref({
  ident: '',
  customerName: '',
  phoneNumber: '',
  productName: [],
  loanInfoCode: ''
});
const productOptions = ref([]);
const loanOptions = ref([]);
const workOrderLoans = ref([]);
// 手动输入的变量
const manualProductName = ref('');
const manualLoanInfoCode = ref('');
const filteredProductOptions = computed(() => {
   const uniqueProducts = new Set();
   workOrderLoans.value.forEach((loan) => uniqueProducts.add(loan.productName));
   return Array.from(uniqueProducts).map((product) => ({
     value: product,
     label: product,
   }));
});
const filteredLoanOptions = computed(() => {
   if (!formModal.value.productName || formModal.value.productName.length === 0) {
       return [];
   }
   const filteredLoans = workOrderLoans.value.filter((loan) =>
       formModal.value.productName.includes(loan.productName)
   );
   return filteredLoans.map((loan) => ({
       value: loan.loanInfoCode,
       label: loan.loanInfoCode,
   }));
});
const handleAssociateCustomer = () => {
    getCustomerByIdent({ ident: formModal.value.ident }).then((response) => {
        if (response.success) {
           isCustomerAssociated.value = true;
           formModal.value.customerName = response.data.customerName;
           formModal.value.phoneNumber = response.data.phoneNumber;
           workOrderLoans.value = response.data.workOrderLoans;
        } else if (response.message === '身份证号未匹配到客户信息请排查') {
           message.error('身份证号未匹配到客户信息，请手动输入');
           isCustomerAssociated.value = true;
           canManuallyInput.value = true; // 当收到该消息时允许手动输入产品和借据编号
        } else {
           message.error(response.message);
        }
    });
};
// 添加手动输入的功能（根据需要进行处理）
const addManualProductName = () => {
    if (manualProductName.value.trim()) {
       const productsToAdd = manualProductName.value.split(',').map(item => item.trim()).filter(item => item);
       formModal.value.productName.push(...productsToAdd);
       manualProductName.value ='';
    }
};
const addManualLoanInfoCode= () => {
    if (manualLoanInfoCode.value.trim()) {
        const loansToAdd= manualLoanInfoCode.value.split(',').map(item=>item.trim()).filter(item=>item);
        formModal.value.loanInfoCode.push(...loansToAdd);
         manualLoanInfoCode .value='';
     }
};
</script>
<style scoped>
// 在此添加样式，如果需要的话。
</style>

改动说明：

新增 canManuallyInput 状态：当接收到“身份证号未匹配到客户信息请排查”的响应时，设置为 true，以启用手动输入功能。
使用 <input> 元素：在下拉框旁边添加了文本框，用于用户直接键入多个选项（以逗号分隔）。
分割字符串：新增了方法 addManualProductName 和 addManualLoanInfoCode 来将用户键入的值添加到对应的数组中。

这样一来，当查询结果返回特定信息时，用户就能够直接在下拉框旁边进行手动输入。

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