修改表单校验

马宇豪

2023-04-18 af18fd6fb9e1a500be5369550b737ccce12a7d23

修改表单校验

 src/views/analyse/applyReview/components/reportDialog.vue

@@ -178,7 +178,7 @@
                        <td class="w-25 m-color">{{item.approveStage}}</td>
                        <td class="w-25">{{item.approvePerson}}</td>
                        <td class="w-25 m-color">审批结果</td>
                        <td class="w-25" :class="item.approveStatus==3?'redTit':''">{{item.approveStatus==1?'未审批':item.approveStatus==2?'通过':'未通过'}}</td>
                        <td class="w-25">{{item.approveStatus==1?'未审批':item.approveStatus==2?'通过':'未通过'}}</td>
                      </tr>
                      <tr>
                        <td class="w-25 m-color autoheight">审批意见</td>

 src/views/analyse/assessApply/index.vue

@@ -67,7 +67,7 @@
                                <el-button size="small" v-if="scope.row.stage == 3" text type="primary" :icon="Edit" @click="toReport(scope.row)">生成评估报告</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openRiskDialog(scope.row)">管理实验现实风险</el-button>
                                <el-button size="small" v-if="scope.row.stage == 4 && !scope.row.assessPerson" text type="primary" :icon="View" @click="openReportDialog('提交', scope.row)">提交审批</el-button>
                                <el-button size="small" v-if="scope.row.stage == 4 && scope.row.assessPerson" text type="primary" :icon="View" @click="openReportDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" v-if="scope.row.stage == 4 && !scope.row.assessPerson" text type="primary" :icon="View" @click="openReportDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" v-if="scope.row.stage == 4 && scope.row.assessPerson" text type="primary" :icon="Edit" @click="openReportDialog('查看',scope.row)">查看</el-button>
                            </template>
                        </el-table-column>

 src/views/experiment/developing/components/developDialog.vue

@@ -3,8 +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">

 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{

 src/views/experiment/project/components/selectMaterial.vue

@@ -89,7 +89,6 @@
};

watchEffect(() => {
    console.log(selectMaterialState.materialList,'selectMaterialState.materialList')
    selectMaterialState.materialList = props.data as Array<AllMaterialListType>
    selectMaterialState.disabled = props.disabled
});

 src/views/experiment/project/components/selectRoom.vue

@@ -11,7 +11,7 @@
    </tr>
    <tr v-for="(item,index) in selectRoomState.roomList" :key="index">
        <td class="w-14">
            <el-select :disabled="selectRoomState.disabled" filterable v-model="item.siteId" @change="giveOtherMaterialValue($event, index)" @focus="checkAllRoom($event, index)">
            <el-select :disabled="selectRoomState.disabled" filterable v-model="item.siteId" @change="giveOtherRoomValue($event, index)" @focus="checkAllRoom($event, index)">
                <el-option
                    v-for="item in selectRoomState.allRoomList"
                    :key="item.id"
@@ -135,8 +135,8 @@
    }
};

const giveOtherMaterialValue = (value: number, index:number) => {
    const data = selectRoomState.allRoomList.find(item => item.id === value) as roomListType
const giveOtherRoomValue = (value: number, index:number) => {
    const data = selectRoomState.allRoomList.find(item => item.id === value) as allRoomListType
    selectRoomState.roomList[index] = {
        siteId: data.id,
        siteName: data.siteName,
@@ -149,6 +149,7 @@
};

const formatList = (formatList: Array<roomListType>) => {
  console.log(formatList,'formatList')
    selectRoomState.roomList = formatList
};


 src/views/experiment/project/index.ts

@@ -155,7 +155,7 @@
declare interface SelectRoomType {
    disabled: boolean
    roomList: Array<roomListType>,
    allRoomList: Array<roomListType>,
    allRoomList: Array<allRoomListType>,
    specialDeviceList: Array<stuffType>
    memberList: Array<any>
    typeList: Array<any>
@@ -164,13 +164,23 @@
}

declare interface roomListType {
    siteId?: null | number,
    siteName?: string,
    floor?: string,
    room?: string,
    fireFacilities?: null | number,
    partitionStatus?: null | number,
    siteType?: string,
    siteId: null | number,
    siteName: string,
    floor: string,
    room: string,
    fireFacilities: null | number,
    partitionStatus: null | number,
    siteType: string,
}

declare interface allRoomListType {
    id: null | number,
    siteName: string,
    floor: string,
    room: string,
    fireFacilities: null | number,
    partitionStatus: null | number,
    siteType: string,
}

declare interface stuffType {