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

你可以通过条件渲染来动态更改 a-select 的 mode 属性。根据你的需求，你需要在处理响应的逻辑中设置一个状态来指示是否应该将模式更改为 tags。以下是如何实现这个功能的示例代码：

修改后的代码

<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="isCustomerNotFound ? 'tags' : 'multiple'"
            placeholder="请选择产品名称"
            :options="productOptions"
            :disabled="isEditing"
          />
        </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="isCustomerNotFound ? 'tags' : 'multiple'"
            placeholder="请选择借据号"
            :options="loanOptions"
            :disabled="!formModal.productName.length || isEditing"
          />
        </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 isCustomerNotFound = ref(false); // 新增状态，用于判断是否未找到客户

const formModal = ref({
  ident: '',
  customerName: '',
  phoneNumber: '',
  productName: [],
  loanInfoCode: ''
});

const workOrderLoans = ref([]);

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,
  }));
});

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,
  }));
});

const handleAssociateCustomer = () => {
  getCustomerByIdent({ ident: formModal.value.ident }).then((response) => {
    if (response.success) {
      isCustomerAssociated.value = true;
      isCustomerNotFound.value = false; // 客户已找到，重置状态
      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;
      isCustomerNotFound.value = true; // 设置状态为未找到客户
      
    } else {
      message.error(response.message);
    }
  });
};

</script>

更新说明

新增了一个 isCustomerNotFound 的响应式变量：该变量用于跟踪是否找到了客户。
根据 isCustomerNotFound 来动态修改 mode：如果找不到客户，将 mode 设置为 'tags'，否则保持为 'multiple'.
在处理 API 响应时，根据返回的信息更新 isCustomerNotFound 的值。