必选处理

src/views/projectManage/addProject.vue

@@ -20,10 +20,10 @@
             <div class="project-tab-content">
               <el-tabs v-model="lxTabActiveName">
                 <el-tab-pane label="基本信息" name="基本信息">
-                  <LixiangBasicInfo />
+                  <LixiangBasicInfo ref="lxBasicInfoRef" />
                 </el-tab-pane>
                 <el-tab-pane label="立项批复" name="立项批复">
-                  <LixiangApproval />
+                  <LixiangApproval ref="lxApprovalRef" />
                 </el-tab-pane>
               </el-tabs>
             </div>
@@ -36,16 +36,16 @@
           >
             <el-tabs v-model="jcTabActiveName">
               <el-tab-pane label="基本信息" name="基本信息">
-                <JueceBasicInfo />
+                <JueceBasicInfo ref="jcBasicInfoRef" />
               </el-tab-pane>
               <el-tab-pane label="财务评价" name="财务评价">
                 <JueceFinance />
               </el-tab-pane>
               <el-tab-pane label="决策批复" name="决策批复">
-                <JueceApproval />
+                <JueceApproval ref="jcApprovalRef" />
               </el-tab-pane>
               <el-tab-pane label="申请报告" name="申请报告">
-                <JueceReport />
+                <JueceReport ref="jcReportRef" />
               </el-tab-pane>
             </el-tabs>
           </el-tab-pane>
@@ -233,6 +233,12 @@ const flowType = computed(() => {
   return "complex";
 });
 
+const lxBasicInfoRef = ref();
+const lxApprovalRef = ref();
+const jcBasicInfoRef = ref();
+const jcApprovalRef = ref();
+const jcReportRef = ref();
+
 // tab相关
 const pageActiveName = ref("立项填报");
 const lxTabActiveName = ref("基本信息");
@@ -572,7 +578,34 @@ const backClick = () => {
 };
 
 // 保存数据
-const saveClick = (type) => {
+const saveClick = async (type) => {
+  if (type === "submit") {
+    const allErrors = [];
+    const isJuece =
+      formData.projectLzType && Number(formData.projectLzType) > 4;
+    const refs = isJuece
+      ? [jcBasicInfoRef, jcApprovalRef, jcReportRef]
+      : [lxBasicInfoRef, lxApprovalRef];
+    for (const r of refs) {
+      try {
+        await r.value?.validate();
+      } catch (fields) {
+        const msgs = Object.values(fields || {})
+          .flat()
+          .map((e) => e.message)
+          .filter(Boolean);
+        allErrors.push(...msgs);
+      }
+    }
+    if (allErrors.length) {
+      ElMessageBox.alert(
+        allErrors.map((msg) => `• ${msg}`).join("<br/>"),
+        "以下必填项未填写",
+        { dangerouslyUseHTMLString: true, type: "warning" },
+      );
+      return;
+    }
+  }
   if (!formData.projectLzType || Number(formData.projectLzType) <= 4) {
     let url = formData.id
       ? type === "submit"

src/views/projectManage/addProject/components/JueceApproval.vue

 <template>
   <div class="tab-content">
     <div class="tab-content">
-      <el-form :model="jcFormData" :label-width="150" :disabled="isPreview">
+      <el-form ref="jcApprovalFormRef" :model="jcFormData" :rules="formRules" :validate-on-rule-change="false" :label-width="150" :disabled="isPreview">
         <el-collapse v-model="activeCollapse">
           <el-collapse-item
             title="项目投资总额（全口径）"
@@ -529,7 +529,7 @@
             </el-table>
             <el-row :gutter="20">
               <el-col :span="24">
-                <el-form-item label="其他会议审议情况">
+                <el-form-item label="其他会议审议情况" prop="jcqthysyqk">
                   <el-input
                     v-model="jcFormData.jcqthysyqk"
                     type="textarea"
@@ -542,7 +542,7 @@
           <el-collapse-item title="项目批复信息" name="项目批复信息">
             <el-row :gutter="20">
               <el-col :span="6">
-                <el-form-item label="最终审批意见" label-width="160">
+                <el-form-item label="最终审批意见" label-width="160" prop="jczzpfyj">
                   <CommonSelector
                     v-model="jcFormData.jczzpfyj"
                     dictName="spyj"
@@ -550,7 +550,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item label="项目批复时间">
+                <el-form-item label="项目批复时间" prop="jcxmpfsj">
                   <el-date-picker
                     v-model="jcFormData.jcxmpfsj"
                     type="date"
@@ -559,17 +559,17 @@
                 </el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item label="项目批复文号">
+                <el-form-item label="项目批复文号" prop="jcxmpfwh">
                   <el-input v-model="jcFormData.jcxmpfwh" />
                 </el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item label="审核处室" label-width="160">
+                <el-form-item label="审核处室" label-width="160" prop="jcpfshcs">
                   <el-input v-model="jcFormData.jcpfshcs" />
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item label="未通过主要原因与要求" label-width="160">
+                <el-form-item label="未通过主要原因与要求" label-width="160" prop="jcwtgzyyyyyq">
                   <el-input
                     v-model="jcFormData.jcwtgzyyyyyq"
                     type="textarea"
@@ -675,7 +675,7 @@
           <el-collapse-item title="其他" name="其他">
             <el-row :gutter="20">
               <el-col :span="8">
-                <el-form-item label-width="160" label="投资主体首次申报时间">
+                <el-form-item label-width="160" label="投资主体首次申报时间" prop="tzztscsbsj">
                   <el-date-picker
                     v-model="jcFormData.tzztscsbsj"
                     type="date"
@@ -684,12 +684,12 @@
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label-width="160" label="审核人">
+                <el-form-item label-width="160" label="审核人" prop="shr">
                   <el-input v-model="jcFormData.shr" />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label-width="160" label="会签完成时间">
+                <el-form-item label-width="160" label="会签完成时间" prop="hqwcsj">
                   <el-date-picker
                     v-model="jcFormData.hqwcsj"
                     type="date"
@@ -698,7 +698,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label-width="160" label="首次发函时间">
+                <el-form-item label-width="160" label="首次发函时间" prop="scfhsj">
                   <el-date-picker
                     v-model="jcFormData.scfhsj"
                     type="date"
@@ -707,7 +707,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label-width="160" label="补充资料时间">
+                <el-form-item label-width="160" label="补充资料时间" prop="bczlsj">
                   <el-date-picker
                     v-model="jcFormData.bczlsj"
                     type="date"
@@ -724,10 +724,43 @@
 </template>
 
 <script setup>
-import { inject } from "vue";
+import { inject, ref } from "vue";
 import CommonSelector from "@/components/CommonSelector.vue";
 import FileUploader from "@/components/FileUploader/index.vue";
 
+const jcApprovalFormRef = ref();
+
+const requiredInput = (msg) => ({
+  required: true,
+  message: `请输入${msg}`,
+  trigger: "blur",
+});
+const requiredSelect = (msg) => ({
+  required: true,
+  message: `请选择${msg}`,
+  trigger: [],
+});
+
+const formRules = {
+  jcqthysyqk: [requiredInput("其他会议审议情况")],
+  jczzpfyj: [requiredSelect("最终审批意见")],
+  jcxmpfsj: [requiredSelect("项目批复时间")],
+  jcxmpfwh: [requiredInput("项目批复文号")],
+  jcpfshcs: [requiredInput("审核处室")],
+  jcwtgzyyyyyq: [requiredInput("未通过主要原因与要求")],
+  tzztscsbsj: [requiredSelect("投资主体首次申报时间")],
+  shr: [requiredInput("审核人")],
+  hqwcsj: [requiredSelect("会签完成时间")],
+  scfhsj: [requiredSelect("首次发函时间")],
+  bczlsj: [requiredSelect("补充资料时间")],
+};
+
+const validate = () => {
+  return jcApprovalFormRef.value?.validate();
+};
+
+defineExpose({ validate });
+
 const {
   jcFormData,
   isPreview,
@@ -757,3 +790,9 @@ const {
   token,
 } = inject("jcShared");
 </script>
+
+<style scoped>
+.tab-content :deep(.el-form-item__error) {
+  display: none;
+}
+</style>

src/views/projectManage/addProject/components/LixiangApproval.vue

@@ -2,7 +2,10 @@
   <div class="tab-content">
     <div class="tab-content">
       <el-form
+        ref="lxApprovalFormRef"
         :model="formData"
+        :rules="formRules"
+        :validate-on-rule-change="false"
         :label-width="150"
         :disabled="isPreview || Number(formData.projectLzType) >= 5"
       >
@@ -198,17 +201,17 @@
           <el-collapse-item title="项目立项信息" name="项目立项信息">
             <el-row :gutter="20">
               <el-col :span="24">
-                <el-form-item label="其他会议审议情况">
+                <el-form-item label="其他会议审议情况" prop="qthysyqk">
                   <el-input v-model="formData.qthysyqk" type="textarea" />
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
-                <el-form-item label="立项最终审批意见">
+              <el-col :span="6">
+                <el-form-item label="立项最终审批意见" prop="lxzzpfyj">
                   <CommonSelector v-model="formData.lxzzpfyj" dictName="spyj" />
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
-                <el-form-item label="项目立项批复时间">
+              <el-col :span="6">
+                <el-form-item label="项目立项批复时间" prop="lxxmpfsj">
                   <el-date-picker
                     v-model="formData.lxxmpfsj"
                     type="date"
@@ -216,13 +219,18 @@
                   />
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
-                <el-form-item label="立项项目批复文号">
+              <el-col :span="6">
+                <el-form-item label="立项项目批复文号" prop="lxxmpfwh">
                   <el-input v-model="formData.lxxmpfwh" />
                 </el-form-item>
               </el-col>
+              <el-col :span="6">
+                <el-form-item label="审核处室" prop="jcpfshcs">
+                  <el-input v-model="formData.jcpfshcs" />
+                </el-form-item>
+              </el-col>
               <el-col :span="24">
-                <el-form-item label="未通过主要原因与要求">
+                <el-form-item label="未通过主要原因与要求" prop="wtgzyyyyyq">
                   <el-input v-model="formData.wtgzyyyyyq" type="textarea" />
                 </el-form-item>
               </el-col>
@@ -250,11 +258,39 @@
 </template>
 
 <script setup>
-import { inject } from "vue";
+import { inject, ref } from "vue";
 import CommonSelector from "@/components/CommonSelector.vue";
 import FormDynamicTable from "@/components/FormDynamicTable/index.vue";
 import FileUploader from "@/components/FileUploader/index.vue";
 
+const lxApprovalFormRef = ref();
+
+const requiredInput = (msg) => ({
+  required: true,
+  message: `请输入${msg}`,
+  trigger: "blur",
+});
+const requiredSelect = (msg) => ({
+  required: true,
+  message: `请选择${msg}`,
+  trigger: [],
+});
+
+const formRules = {
+  qthysyqk: [requiredInput("其他会议审议情况")],
+  lxzzpfyj: [requiredSelect("立项最终审批意见")],
+  lxxmpfsj: [requiredSelect("项目立项批复时间")],
+  lxxmpfwh: [requiredInput("立项项目批复文号")],
+  jcpfshcs: [requiredInput("审核处室")],
+  wtgzyyyyyq: [requiredInput("未通过主要原因与要求")],
+};
+
+const validate = () => {
+  return lxApprovalFormRef.value?.validate();
+};
+
+defineExpose({ validate });
+
 const {
   formData,
   isPreview,
@@ -302,3 +338,9 @@ const updateSpyjTable = (val) => {
   spyjTableData.splice(0, spyjTableData.length, ...val);
 };
 </script>
+
+<style scoped>
+.tab-content :deep(.el-form-item__error) {
+  display: none;
+}
+</style>