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