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

要实现当查询返回特定信息（如”身份证号未匹配到客户信息请排查”）时，使得产品名称和借据号可以手动输入，可以通过添加一个状态来控制输入模式，并在相应的条件下更新这个状态。

你可以按以下步骤进行修改：

添加一个状态变量：用于控制是否允许手动输入。
根据条件更新这个变量：在 handleAssociateCustomer 函数中，判断返回的信息并更新该状态变量。
使用该变量来控制输入组件的类型：根据状态变量选择 a-select 组件或 a-input 组件。

以下是修改后的代码示例：

<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">
          <!-- 根据 isManualInput 控制显示 a-select 或 a-input -->
          <template v-if="isManualInput">
            <a-input 
              v-model:value="formModal.productName"
              placeholder="请输入产品名称" 
            />
          </template>
          <template v-else>
            <a-select
              v-model:value="formModal.productName"
              mode="multiple"
              placeholder="请选择产品名称"
              :options="productOptions"
              :disabled="isEditing || isManualInput"
            />
          </template>
        </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">
          <!-- 根据 isManualInput 控制显示 a-select 或 a-input -->
          <template v-if="isManualInput">
            <a-input 
              v-model:value="formModal.loanInfoCode"
              placeholder="请输入借据号" 
            />
          </template>
          <template v-else>
            <a-select
              v-model:value="formModal.loanInfoCode"
              mode="multiple"
              placeholder="请选择借据号"
              :options="loanOptions"
              :disabled="!formModal.productName.length || isEditing || isManualInput"
            />
          </template>
        </a-form-item>
      </a-col>
    </a-row>
</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 formModal = ref({
  ident: '',
  customerName: '',
  phoneNumber: '',
  productName: [],
  loanInfoCode: ''
});
const workOrderLoans = ref([]);
const isManualInput = ref(false); // 新增手动输入标志

// Computed for product options
const productOptions = computed(() => {
  const uniqueProducts = new Set();
  workOrderLoans.value.forEach((loan) => uniqueProducts.add(loan.productName));
  
  return Array.from(uniqueProducts).map((product) => ({
    value: product,
    label: product,
  }));
});

// Computed for loan options
const loanOptions = 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,
  }));
});

// Associate customer handler
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;
       
       // Reset manual input flag in case of successful association
       isManualInput.value = false; 
     } else if (response.message === '身份证号未匹配到客户信息请排查') {
       message.error('身份证号未匹配到客户信息请手动输入');
       isCustomerAssociated.value = true;
       // 设置手动输入为真以启用文本框
       isManualInput.value = true; 
     } else {
       message.error(response.message);
     }
   });
};
</script>

修改说明：

引入新的 ref 状态 isManualInput：此状态用于控制是否允许用户手动输入。
在 handleAssociateCustomer 函数中设置 isManualInput 的值：当收到 “身份证号未匹配到客户信息请排查” 时，将其设为 true，否则设为 false。
使用条件渲染切换输入框与选择框：使用 <template> 标签，根据 isManualInput 的值渲染不同的输入方式。

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