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