ZBLOG

看起来你在尝试编写一个 Vue.js 组件,可能是与贷款信息相关的表单。代码中存在一些语法和逻辑错误。以下是我对你提供的代码进行了修改和补充,使其更完整且符合 Vue.js 的规范:

  1. <template>
  2. <div class="loanInfo" :style="isCustomerNotFound && productRows.length > 0 ? { height: '100px' } : {}">
  3. <a-row v-if="isCustomerNotFound" v-for="(item, index) in productRows" :key="index">
  4. <a-col :span="12" v-if="isCustomerNotFound">
  5. <a-form-item label="产品名称" style="width: 101%">
  6. <a-input v-model:value="item.productName" />
  7. </a-form-item>
  8. </a-col>
  9. <a-col :span="12" v-if="isCustomerNotFound">
  10. <a-form-item label="借据号" style="width: 102%; margin-left: -5px">
  11. <a-input v-model:value="item.loanInfoCode" />
  12. </a-form-item>
  13. </a-col>
  14. </a-row>
  15. <span
  16. v-if="productRows.length > 0 && isCustomerNotFound"
  17. class="jiahao"
  18. @click="addProductRow"
  19. >
  20. +
  21. </span>
  22. </div>
  23. <a-row v-if="!isCustomerNotFound">
  24. <a-col :span="12" v-if="isCustomerAssociated">
  25. <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
  26. <a-select
  27. v-model:value="formModal.productName"
  28. mode='multiple'
  29. placeholder="请选择产品名称"
  30. :options='productOptions'
  31. :disabled='isEditing'
  32. />
  33. </a-form-item>
  34. </a-col>
  35. </a-row>
  36. </template>
  37. <script setup>
  38. import { ref } from 'vue';
  39. import { message } from 'ant-design-vue'; // 假设使用 Ant Design Vue
  40. const isCustomerNotFound = ref(true); // 示例状态
  41. const isCustomerAssociated = ref(false); // 示例状态
  42. const productRows = ref([{ productName: '', loanInfoCode: '' }]); // 初始一行数据
  43. const formModal = ref({
  44. productName: [],
  45. loanInfoCode: []
  46. });
  47. // 添加新的空行
  48. const addProductRow = () => {
  49. productRows.value.push({ productName: '', loanInfoCode: '' });
  50. };
  51. // 新增客户信息的函数
  52. const addCustomer = (values) => {
  53. console.log(productRows.value);
  54. const selectedData = formModal.value.productName.map((productName) => {
  55. const loanCodes = formModal.value.loanInfoCode.filter((loanCode) =>
  56. workOrderLoans.value.some(
  57. (loan) => loan.productName === productName && loan.loanInfoCode === loanCode
  58. )
  59. );
  60. return {
  61. productName,
  62. loanInfoCode: loanCodes,
  63. };
  64. });
  65. const workOrderLoansTosend = [...selectedData, ...productRows.value];
  66. const params = {
  67. workOrderType: formModal.value.workOrderType,
  68. callType: formModal.value.callType,
  69. complainType: formModal.value.complainType,
  70. ident: formModal.value.ident,
  71. customerName: formModal.value.customerName,
  72. phoneNumber: formModal.value.phoneNumber,
  73. workOrderLoans: workOrderLoansTosend,
  74. customerProblem: formModal.value.customerProblem,
  75. customerAppeal: formModal.value.customerAppeal,
  76. };
  77. console.log(params, productRows);
  78. // 假设有一个 addWorkOrder 函数来处理添加工作订单请求
  79. addWorkOrder(params).then((response) => {
  80. if (response.success) {
  81. message.success(response.message);
  82. } else {
  83. message.error(response.message);
  84. }
  85. });
  86. };
  87. </script>
  88. <style scoped>
  89. .jiahao {
  90. cursor:pointer;
  91. }
  92. </style>

改动说明:

  1. 语法修正:修正了部分标签和指令中的括号、引号不匹配的问题。
  2. Vue 响应式数据:确保使用 ref 来定义响应式数据。
  3. 添加了缺失的 import:假设你使用的是 Ant Design Vue,因此导入了 message 模块。
  4. CSS 样式:在 <style> 中增加了简单的样式以使点击区域可交互。

请根据你的具体需求进一步调整这段代码。


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

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22880

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?