看起来你在尝试编写一个 Vue.js 组件,可能是与贷款信息相关的表单。代码中存在一些语法和逻辑错误。以下是我对你提供的代码进行了修改和补充,使其更完整且符合 Vue.js 的规范:
<template>
<div class="loanInfo" :style="isCustomerNotFound && productRows.length > 0 ? { height: '100px' } : {}">
<a-row v-if="isCustomerNotFound" v-for="(item, index) in productRows" :key="index">
<a-col :span="12" v-if="isCustomerNotFound">
<a-form-item label="产品名称" style="width: 101%">
<a-input v-model:value="item.productName" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="isCustomerNotFound">
<a-form-item label="借据号" style="width: 102%; margin-left: -5px">
<a-input v-model:value="item.loanInfoCode" />
</a-form-item>
</a-col>
</a-row>
<span
v-if="productRows.length > 0 && isCustomerNotFound"
class="jiahao"
@click="addProductRow"
>
+
</span>
</div>
<a-row v-if="!isCustomerNotFound">
<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='multiple'
placeholder="请选择产品名称"
:options='productOptions'
:disabled='isEditing'
/>
</a-form-item>
</a-col>
</a-row>
</template>
<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue'; // 假设使用 Ant Design Vue
const isCustomerNotFound = ref(true); // 示例状态
const isCustomerAssociated = ref(false); // 示例状态
const productRows = ref([{ productName: '', loanInfoCode: '' }]); // 初始一行数据
const formModal = ref({
productName: [],
loanInfoCode: []
});
// 添加新的空行
const addProductRow = () => {
productRows.value.push({ productName: '', loanInfoCode: '' });
};
// 新增客户信息的函数
const addCustomer = (values) => {
console.log(productRows.value);
const selectedData = formModal.value.productName.map((productName) => {
const loanCodes = formModal.value.loanInfoCode.filter((loanCode) =>
workOrderLoans.value.some(
(loan) => loan.productName === productName && loan.loanInfoCode === loanCode
)
);
return {
productName,
loanInfoCode: loanCodes,
};
});
const workOrderLoansTosend = [...selectedData, ...productRows.value];
const params = {
workOrderType: formModal.value.workOrderType,
callType: formModal.value.callType,
complainType: formModal.value.complainType,
ident: formModal.value.ident,
customerName: formModal.value.customerName,
phoneNumber: formModal.value.phoneNumber,
workOrderLoans: workOrderLoansTosend,
customerProblem: formModal.value.customerProblem,
customerAppeal: formModal.value.customerAppeal,
};
console.log(params, productRows);
// 假设有一个 addWorkOrder 函数来处理添加工作订单请求
addWorkOrder(params).then((response) => {
if (response.success) {
message.success(response.message);
} else {
message.error(response.message);
}
});
};
</script>
<style scoped>
.jiahao {
cursor:pointer;
}
</style>
改动说明:
- 语法修正:修正了部分标签和指令中的括号、引号不匹配的问题。
- Vue 响应式数据:确保使用
ref
来定义响应式数据。 - 添加了缺失的 import:假设你使用的是 Ant Design Vue,因此导入了
message
模块。 - CSS 样式:在
<style>
中增加了简单的样式以使点击区域可交互。
请根据你的具体需求进一步调整这段代码。
内容由零声教学AI助手提供,问题来源于学员提问