From af18fd6fb9e1a500be5369550b737ccce12a7d23 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 18 四月 2023 14:29:22 +0800
Subject: [PATCH] 修改表单校验

---
 src/views/experiment/project/components/projectDialog.vue |  189 +++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 164 insertions(+), 25 deletions(-)

diff --git a/src/views/experiment/project/components/projectDialog.vue b/src/views/experiment/project/components/projectDialog.vue
index fdbd79c..104df10 100644
--- a/src/views/experiment/project/components/projectDialog.vue
+++ b/src/views/experiment/project/components/projectDialog.vue
@@ -3,7 +3,7 @@
         <el-dialog :title="projectDialogState.title" v-model="projectDialogState.projectDialogVisible" width="80%">
             <el-form ref="ProjectFormRef" :rules="projectDialogState.projectFormRules" :model="projectDialogState.projectForm" size="default" label-width="0">
                 <table class="report-table">
-                    <th class="m-color b-font" style="text-align: center">***研究所/***大学<br />科学研究实验项目安全风险基础信息录入表(新立项)(带*为必填项)</th>
+                  <th class="m-color b-font" style="text-align: center">***研究所/***大学<br />科学研究实验项目安全风险基础信息录入表(新立项)(带<span style="color: red">*</span>为必填项)</th>
                     <tr>
                         <td class="w-25 m-color required">实验名称</td>
                         <td class="w-75 m-color">
@@ -15,7 +15,7 @@
                     <tr>
                         <td class="w-25 m-color required">实验类型</td>
                         <td class="w-75 m-color">
-
+                          <el-form-item prop="experimentType" style="display: flex;justify-content: center">
                             <el-radio-group style="text-align: center" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentType">
                                 <el-radio :label="1">化学类</el-radio>
                                 <el-radio :label="2">生物类</el-radio>
@@ -24,31 +24,38 @@
                                 <el-radio :label="5">特种设备类</el-radio>
                                 <el-radio :label="6">其他类</el-radio>
                             </el-radio-group>
-
-
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">部门</td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="dep">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.dep" />
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color required">立项时间</td>
                         <td class="w-25 m-color">
-                          <el-date-picker :disabled="projectDialogState.disabled"  type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="projectDialogState.projectForm.createExperimentTime" />
+                          <el-form-item prop="createExperimentTime">
+                            <el-date-picker :disabled="projectDialogState.disabled"  type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="projectDialogState.projectForm.createExperimentTime" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                       <td class="w-25 m-color required">负责人</td>
                       <td class="w-25 m-color">
-                        <el-select style="width: 100%" disabled v-model="projectDialogState.projectForm.liabilityUserId" clearable filterable>
-                          <el-option :key="userInfos.uid" :value="userInfos.uid" :label="userInfos.userName"></el-option>
-                        </el-select>
+                        <el-form-item prop="liabilityUserId">
+                          <el-select style="width: 100%" disabled v-model="projectDialogState.projectForm.liabilityUserId" clearable filterable>
+                            <el-option :key="userInfos.uid" :value="userInfos.uid" :label="userInfos.userName"></el-option>
+                          </el-select>
+                        </el-form-item>
 <!--                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserId"/>-->
                       </td>
                       <td class="w-25 m-color required">电话</td>
                       <td class="w-25 m-color">
-                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserPhone" />
+                        <el-form-item prop="liabilityUserPhone">
+                          <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserPhone" />
+                        </el-form-item>
                       </td>
                     </tr>
                     <tr>
@@ -62,11 +69,15 @@
 <!--                              :label="item.personName"-->
 <!--                          ></el-option>-->
 <!--                        </el-select>-->
-                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" />
+                        <el-form-item prop="safeLiabilityUser">
+                          <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" />
+                        </el-form-item>
                       </td>
                       <td class="w-25 m-color required">电话</td>
                       <td class="w-25 m-color">
+                        <el-form-item prop="safeLiabilityUserPhone">
                         <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUserPhone" />
+                        </el-form-item>
                       </td>
                     </tr>
                     <select-room ref="selectRoomRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.siteList"></select-room>
@@ -75,75 +86,99 @@
                     <tr>
                         <td class="w-25 m-color required">实验步骤</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="experimentStep">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentStep" placeholder="请输入实验步骤" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">操作方法</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="experimentMethod">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentMethod" placeholder="请输入操作方法" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">工艺过程</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="process">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.process" placeholder="请输入工艺过程" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">特殊/关键过程</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="keyProcess">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.keyProcess" placeholder="请输入特殊/关键过程" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                       <td class="w-25 m-color required">预防措施</td>
                       <td class="w-75 m-color">
+                        <el-form-item prop="measure">
                         <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.measure" placeholder="请输入预防措施" />
+                        </el-form-item>
                       </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">是否存在过夜、老化实验</td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="timeout">
                             <el-radio-group :disabled="projectDialogState.disabled"  v-model="projectDialogState.projectForm.timeout">
                                 <el-radio :label="1">存在</el-radio>
                                 <el-radio :label="2">不存在</el-radio>
                             </el-radio-group>
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color required">过夜、老化保障措施</td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="timeoutManager">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.timeoutManager" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">是否在封闭条件下</td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="closed">
                             <el-radio-group :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.closed">
                                 <el-radio :label="1">存在</el-radio>
                                 <el-radio :label="2">不存在</el-radio>
                             </el-radio-group>
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color required">封闭条件保障措施</td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="unclosedManager">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.unclosedManager" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">实验场所防爆措施条件和设施情况</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="explosionProof">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.explosionProof" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">实验场所防火措施条件和设施情况</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="fireProof">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.fireProof" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color required">实验场所防中毒措施条件和设施情况</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="poisonProof">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.poisonProof" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
 
@@ -168,7 +203,9 @@
                     <tr>
                         <td class="w-25 m-color required">安全管理制度</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="safeManagerMethod">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeManagerMethod" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr class="m-color b-font" style="text-align: center">应急预案/应急演练</tr>
@@ -180,29 +217,41 @@
                     </tr>
                     <tr>
                         <td class="w-25 m-color">
+                          <el-form-item prop="emergencyPlan">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlan" />
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="emergencyPlanName">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlanName" />
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="emergencyDrillStatus">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrillStatus" />
+                          </el-form-item>
                         </td>
                         <td class="w-25 m-color">
+                          <el-form-item prop="emergencyDrill">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrill" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr class="m-color b-font" style="  text-align: center">其他信息</tr>
                     <tr>
                         <td class="w-25 m-color required">实验场所是否需要分区隔断</td>
                         <td class="w-75 m-color">
+                          <el-form-item prop="partitionCondition">
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.partitionCondition" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
                     <tr>
                         <td class="w-25 m-color">其它基础信息(详细描述)</td>
                         <td class="w-75 m-color">
+                          <el-form-item>
                             <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.note" placeholder="请输入" />
+                          </el-form-item>
                         </td>
                     </tr>
                 </table>
@@ -223,14 +272,15 @@
 import {projectApi} from "/@/api/experiment/project";
 import {personApi} from "/@/api/basic/person";
 import {userApi} from "/@/api/systemManage/user";
-import SelectRoom from "/@/views/experiment/project/components/selectRoom.vue";
 import {useUserInfo} from "/@/stores/userInfo";
 import {storeToRefs} from "pinia";
+import {checkChineseName, verifyPhone} from "/@/utils/toolsValidate";
 
 const SelectEquipment = defineAsyncComponent(() => import('./selectEquipment.vue'))
 const SelectMaterial = defineAsyncComponent(() => import('./selectMaterial.vue'))
 const SelectDanger = defineAsyncComponent(() => import('./selectDanger.vue'))
 const SelectPerson = defineAsyncComponent(() => import('./selectPerson.vue'))
+const SelectRoom = defineAsyncComponent(() => import('./selectRoom.vue'))
 const ProjectFormRef = ref()
 const selectPersonRef = ref()
 const selectEquipmentRef = ref()
@@ -286,7 +336,33 @@
         ]
     },
     projectFormRules: {
-
+      experimentName: [{ required: true, message: '', trigger: 'blur' }],
+      experimentType: [{ required: true, message: '', trigger: 'blur' }],
+      liabilityUserId: [{ required: true, message: '', trigger: 'blur' }],
+      liabilityUserPhone: [{ required: true, message: '', trigger: 'blur' }],
+      safeLiabilityUser: [{ required: true, message: '', trigger: 'blur' }],
+      safeLiabilityUserPhone: [{ required: true, message: '', trigger: 'blur' }],
+      dep: [{ required: true, message: '', trigger: 'blur' }],
+      experimentStep: [{ required: true, message: '', trigger: 'blur' }],
+      experimentMethod: [{ required: true, message: '', trigger: 'blur' }],
+      process: [{ required: true, message: '', trigger: 'blur' }],
+      keyProcess: [{ required: true, message: '', trigger: 'blur' }],
+      measure: [{ required: true, message: '', trigger: 'blur' }],
+      timeout: [{ required: true, message: '', trigger: 'blur' }],
+      timeoutManager: [{ required: true, message: '', trigger: 'blur' }],
+      closed: [{ required: true, message: '', trigger: 'blur' }],
+      unclosedManager: [{ required: true, message: '', trigger: 'blur' }],
+      explosionProof: [{ required: true, message: '', trigger: 'blur' }],
+      fireProof: [{ required: true, message: '', trigger: 'blur' }],
+      poisonProof: [{ required: true, message: '', trigger: 'blur' }],
+      hazardousWaste: [{ required: true, message: '', trigger: 'blur' }],
+      safeManagerMethod: [{ required: true, message: '', trigger: 'blur' }],
+      emergencyPlan: [{ required: true, message: '', trigger: 'blur' }],
+      emergencyDrill: [{ required: true, message: '', trigger: 'blur' }],
+      emergencyPlanName: [{ required: true, message: '', trigger: 'blur' }],
+      emergencyDrillStatus: [{ required: true, message: '', trigger: 'blur' }],
+      partitionCondition: [{ required: true, message: '', trigger: 'blur' }],
+      createExperimentTime: [{ required: true, message: '', trigger: 'blur' }]
     },
     allPersonList: [],
     allRoomList: [],
@@ -342,15 +418,11 @@
             partitionCondition: "",
             note: "",
             createExperimentTime: '',
-            persons: [
-            ],
+            persons: [],
             siteList: [],
-            deviceList: [
-            ],
-            stuffList: [
-            ],
-            hazardousWasteList: [
-            ]
+            deviceList: [],
+            stuffList: [],
+            hazardousWasteList: []
         };
     }else if(title === '整改'){
       projectDialogState.title = '整改';
@@ -379,12 +451,69 @@
     ProjectFormRef.value.validate(async(valid: boolean) => {
         if(valid){
             if(projectDialogState.title === '新增'){
+                if(checkChineseName(projectDialogState.projectForm.safeLiabilityUser) == false){
+                  ElMessage({
+                    type: 'warning',
+                    message: '安全负责人姓名格式有误',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(verifyPhone(projectDialogState.projectForm.safeLiabilityUserPhone) == false || verifyPhone(projectDialogState.projectForm.liabilityUserPhone) == false){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请输入正确的手机号',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(projectDialogState.projectForm.siteList.length === 0){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请至少添加一处实验场所',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(projectDialogState.projectForm.stuffList.length === 0){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请至少选择一种试剂/材料',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(projectDialogState.projectForm.deviceList.length === 0){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请至少选择一种仪器/设备',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(projectDialogState.projectForm.hazardousWasteList.length === 0){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请选择添加危废数据',
+                    duration: 1000
+                  });
+                  return
+                }
+                if(projectDialogState.projectForm.persons.length === 0){
+                  ElMessage({
+                    type: 'warning',
+                    message: '请至少添加一名实验人员',
+                    duration: 1000
+                  });
+                  return
+                }
                 projectDialogState.projectForm.persons = selectPersonRef.value.dataList
                 projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList
-                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({siteId}))
+              // projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({siteId}))
+                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(obj => ({siteId:obj.siteId}))
                 projectDialogState.projectForm.stuffList = selectMaterialRef.value.dataList
                 projectDialogState.projectForm.deviceList = selectEquipmentRef.value.dataList
-                let res = await projectApi().addProject(projectDialogState.projectForm);
+                let res = await projectApi().addProject(projectDialogState.projectForm)
                 if(res.data.code === 100){
                     emit('refresh')
                     projectDialogState.projectDialogVisible = false;
@@ -392,6 +521,7 @@
                         type: 'success',
                         message: '新增成功'
                     })
+
                 }else{
                     ElMessage({
                         type: 'warning',
@@ -399,7 +529,9 @@
                     });
                 }
             }else{
-                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({siteId}))
+              console.log(selectRoomRef.value.dataList,'selectRoomRef.value.dataList',selectMaterialRef.value.dataList)
+                // projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({siteId}))
+                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(obj => ({siteId:obj.siteId}))
                 projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList.map(obj => ({classify:obj.classify,wasteStorage:obj.wasteStorage,handAmount:obj.handAmount}))
                 let res = await projectApi().modProject(projectDialogState.projectForm)
                 if(res.data.code === 100){
@@ -463,7 +595,6 @@
 onMounted(() => {
     getAllPersonList();
     getPersonList();
-    console.log(userInfos.value,typeof userInfos.value.uid,'u')
 });
 </script>
 
@@ -569,7 +700,15 @@
 .m-color {
     color: #0c4995;
 }
-
+::v-deep(.el-form-item){
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  .el-form-item__content{
+    display: flex;
+    justify-content: center;
+  }
+}
 .roomSelect{
   ::v-deep(.el-popper){
     .el-select-dropdown__item{

--
Gitblit v1.9.2