费用管理，财务报销，数组类型的表单校验

src/views/expense/finReimburse/record.vue

@@ -6,14 +6,14 @@
         <div class="hac-expense-record-body">
             <div class="record-form-box">
                 <el-scrollbar>
-                    <el-form ref="formRef" :model="detailsData.details" :rules="formRules" label-position="left" label-width="auto" size="large">
-                        <HcCardItem :title="'报销明细' + (index + 1)" v-for="(item, index) in detailsData.details" ui="hac-bg-grey mb-5">
-                            <template #extra>
-                                <el-button type="danger" size="small" @click="delDetailsData(index)" v-if="index > 0">
-                                    <HcIcon name="delete-bin"/>
-                                    <span>删除明细</span>
-                                </el-button>
-                            </template>
+                    <HcCardItem :title="'报销明细' + (index + 1)" v-for="(item, index) in detailsData.details" ui="hac-bg-grey mb-5">
+                        <template #extra>
+                            <el-button type="danger" size="small" @click="delDetailsData(index)" v-if="index > 0">
+                                <HcIcon name="delete-bin"/>
+                                <span>删除明细</span>
+                            </el-button>
+                        </template>
+                        <el-form :ref="(el) => setFormItemRefs(el, index)" :model="item" :rules="formRules" label-position="left" label-width="auto" size="large">
                             <div class="hc-form-item">
                                 <el-form-item label="所属项目：" prop="projectId">
                                     <el-select block v-model="item.projectId">
@@ -59,8 +59,8 @@
                                               @change="fileItemChange($event, index)"
                                 />
                             </el-form-item>
-                        </HcCardItem>
-                    </el-form>
+                        </el-form>
+                    </HcCardItem>
                     <div class="record-form-action-box mt-11">
                         <el-divider content-position="right" border-style="dashed">
                             <el-button type="primary" hc-btn @click="addDetailsData">
@@ -152,7 +152,7 @@ import {useRoute, useRouter} from 'vue-router'
 import mainApi from "~api/expense/finReimburse";
 import {getDictInfo} from "~api/system/parameter";
 import {getTokenHeader} from "~src/api/request/header";
-import {deepClone, formValidate, getArrValue, getObjValue} from "js-fast-way";
+import {arrIndex, deepClone, formValidate, getArrValue, getObjValue} from "js-fast-way";
 import {getProjectList} from "~api/other";
 import {delMessage} from "~uti/tools";
 
@@ -250,7 +250,7 @@ const detailsObj1 = {
 
 //添加明细
 const addDetailsData = () => {
-    detailsData.value?.details.push(detailsObj1)
+    detailsData.value?.details.push({})
 }
 
 //删除明细
@@ -336,7 +336,27 @@ const getDetailsData = async () => {
 }
 
 //明细表单
-const formRef = ref(null)
+const formRefs = ref([])
+const setFormItemRefs = (el, index) => {
+    if (el) {
+        let indexs = arrIndex(formRefs.value, 'index', index)
+        if (indexs !== -1) {
+            formRefs.value[index].ref = el
+        } else {
+            formRefs.value.push({
+                index: index,
+                ref: el
+            });
+        }
+    }
+}
+
+//获取表单的ref
+const getFormRef = async (index) => {
+    const indexs = arrIndex(formRefs.value, 'index', index)
+    return formRefs.value[indexs].ref
+}
+
 const formRules = {
     projectId: [{required: true, message: '请选择所属项目', trigger: 'change'}],
     frMoney: [{required: true, message: '请输入报销金额', trigger: 'blur'}],
@@ -542,19 +562,25 @@ const tempDraftData = async () => {
 //提交报销申请
 const submitLoading = ref(false)
 const submitFormData = async () => {
-    const res = await formValidate(formRef.value)
-    if (res) {
-        submitLoading.value = true
-        const form = getFormData(2)
-        const {error, code, msg} = await mainApi.submit(form)
-        //判断状态
-        submitLoading.value = false
-        if (!error && code === 200) {
-            window.$message?.success('提交成功')
-        } else {
-            window.$message?.error(msg)
+    submitLoading.value = true
+    const form = getFormData(2)
+    for (let i = 0; i < form.length; i++) {
+        const refs = await getFormRef(i)
+        const res = await formValidate(refs)
+        if (!res) {
+            submitLoading.value = false
+            return
         }
     }
+    //发起请求
+    const {error, code, msg} = await mainApi.submit(form)
+    //判断状态
+    submitLoading.value = false
+    if (!error && code === 200) {
+        window.$message?.success('提交成功')
+    } else {
+        window.$message?.error(msg)
+    }
 }
 </script>