-Go服务器开发

要实现你描述的功能，可以使用 Vue.js 的动态渲染来根据 workOrderLoans 的数量生成相应数量的输入框。以下是一个更新后的示例，展示如何将产品名称和借据号变为可输入的框，并且在接收到多个贷款信息时展示相应数量的字段。

<template>
  <div v-for="(loan, index) in workOrderLoans" :key="index">
    <a-row>
      <a-col :span="12">
        <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
          <a-input
            v-model:value="loan.productName"
            placeholder="请输入产品名称"
            :disabled="isEditing"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="12">
        <a-form-item label="借据号" style="width: 250%; margin-left: -130px">
          <a-input
            v-model:value="loan.loanInfoCode"
            placeholder="请输入借据号"
            :disabled="isEditing"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="12">
        <a-form-item label="结清状态">
          <a-select v-model:value="loan.remainingStatus" placeholder="请选择结清状态">
            <a-select-option value=""></a-select-option>
            <a-select-option value="已结清">已结清</a-select-option>
            <a-select-option value="未结清">未结清</a-select-option>
            <a-select-option value="代偿结清">代偿结清</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item label="货款金额">
          <a-input v-model:value="loan.totalAmount" placeholder="请输入贷款金额" />
        </a-form-item>
      </ a-col >
    </ a-row >

    < a-row >
      <
      a-col : span = "12" >
      <
      a-form-item label = "逾期天数" >
      <
      a-input v-model:value = "loan.dpd" placeholder = "请输入逾期天数" /
      >
  <
  / a-form-item >
<
  / a-col >

<
  a-col : span = "12" >
<
  a-form-item label = "转账余额" >
<
  a-input v-model:value = "loan.transferAmount" placeholder = "请输入转账金额"
/ >
<
/ a-form-item >
<
/ a-col >
<
/ a-row >

< hr />
</div > <!-- 分隔线 -->
</template >

<script setup>
// Import statements remain the same as before
import { ref } from 'vue';

const isEditing = ref(false); // Example flag for edit mode

// Sample data for workOrderLoans
const workOrderLoans = ref([
  { productName: '', loanInfoCode: '', remainingStatus: '', totalAmount: '', dpd: '', transferAmount: '' },
]);

// Function to add an empty loan entry (optional)
function addLoan() {
  workOrderLoans.value.push({
    productName: '',
    loanInfoCode: '',
    remainingStatus: '',
    totalAmount: '',
    dpd: '',
    transferAmount: ''
  });
}

// Call this function whenever you want to add another set of fields.
// For example, you could bind it to an "Add Loan" button.
</script>

<style scoped>
// Add any additional styles here if needed
</style>