-Go服务器开发

要实现你的需求，我们可以通过对 isCustomerAssociated 和 isEditing 这两个状态的判断来动态控制产品名称和借据号的输入框。这是需要在UI上显示输入框而不是选择框的逻辑。

以下是你可以调整的代码段，以支持这些新要求：

更新后的模板

<template>
  <a-col :span="12">
    <a-form-item label="身份证号">
      <a-row>
        <a-col :span="isCustomerAssociated ? 24 : 16">
          <a-input
            v-model:value="formModal.ident"
            placeholder="请输入身份证号"
            :disabled="isEditing"
          />
        </a-col>
        <a-col
          :span="6"
          style="padding-left: 10px"
          v-if="!isCustomerAssociated && modalType === 'add'"
        >
          <a-button
            class="margin-right-10 button-light-blue"
            type="primary"
            @click="handleAssociateCustomer"
          >
            关联客户
          </a-button>
        </a-col>
      </a-row>
    </a-form-item>
  </a-col>

  <a-row v-if="isCustomerAssociated">
    <a-col :span="12">
      <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
        <template v-if="isEditing || modalType === 'add'">
          <!-- 可手动输入 -->
          <a-input
            v-model:value="formModal.productNameInput"
            placeholder="请输入产品名称（可手动输入）"
          />
        </template>
        <template v-else>
          <!-- 可选择 -->
          <a-select
            v-model:value="formModal.productName"
            mode="multiple"
            placeholder="请选择产品名称"
            :options="productOptions"
            :disabled="isEditing"
          />
        </template>
      </a-form-item>
    </a-col>
  </a-row>

  <a-row v-if="isCustomerAssociated">
    <a-col :span="12">
      <a-form-item label="借据号" style="width: 250%; margin-left: -130px">
        <template v-if="isEditing || modalType === 'add'">
          <!-- 可手动输入 -->
          <a-input
            v-model:value "formModal.loanInfoCodeInput"
            placeholder "请输入借据号（可手动输入）"
          />
        </template>
        <template v-else>
         <!-- 可选择 -->
         < a-select 
           v-model:value = "formModal.loanInfoCode" 
           mode = "multiple" 
           placeholder = "请选择借据号" 
           :options = "loanOptions" 
           :disabled = "!formModal.productName || formModal.productName.length === 0 || isEditing" 
         />  
       </template>  
     </ a-form-item >  
   </ a-col >  
</ a-row >
</ template >

<script setup>
// Importing Vue and other necessary modules remains unchanged

// Define additional state variables for manual input fields
const formModal = ref({
   ident: '',
   productName: [],
   loanInfoCode: [],
   customerName: '',
   phoneNumber: '',
   productNameInput: '', // 新增字段，用于存储手动输入的产品名称
   loanInfoCodeInput: '' // 新增字段，用于存储手动输入的借据号
});

// The rest of your script remains unchanged...

修改点说明：

新增字段：为 formModal 中新增了 productNameInput 和 loanInfoCodeInput 字段，分别用于存储用户手动输入的产品名称和借据号。
条件渲染：使用了 <template> 标签，根据 modalType 和 isEditing 的值判断显示哪个组件。对于新增和编辑时，如果是在可编辑模式，则展示文本框供用户手动输入；如果是在查看模式下，则展示选择器。
绑定修改：将新的数据模型与UI元素进行绑定，这样能够保证用户的每次更改都会反映在数据模型中。