马宇豪
2023-04-12 8d14fec97344df49d58db115852c03b466482bc6
src/views/experiment/project/components/projectDialog.vue
@@ -1,11 +1,11 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="projectDialogState.title" v-model="projectDialogState.projectDialogVisible" width="70%">
        <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 />科学研究实验项目安全风险基础信息录入表(已开展B)</th>
                    <th class="m-color b-font" style="text-align: center">***研究所/***大学<br />科学研究实验项目安全风险基础信息录入表(新立项)(带*为必填项)</th>
                    <tr>
                        <td class="w-25 m-color">实验名称</td>
                        <td class="w-25 m-color required">实验名称</td>
                        <td class="w-75 m-color">
                            <el-form-item prop="experimentName">
                                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentName" placeholder="请输入实验名称" />
@@ -13,7 +13,7 @@
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验类型</td>
                        <td class="w-25 m-color required">实验类型</td>
                        <td class="w-75 m-color">
                            <el-radio-group style="text-align: center" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentType">
@@ -29,130 +29,119 @@
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">部门</td>
                        <td class="w-25 m-color required">部门</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.dep" />
                        </td>
                        <td class="w-25 m-color">负责人</td>
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserId" clearable filterable>
                                <el-option
                                    v-for="item in projectDialogState.systemPersonList"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.realName"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">立项时间</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.expectStartTime" />
                        </td>
<!--                        <td class="w-16 m-color">开展时间</td>-->
<!--                        <td class="w-16 m-color">-->
<!--                            <el-date-picker v-model="projectDialogState.projectForm.startTime" />-->
<!--                        </td>-->
                        <td class="w-25 m-color">安全负责人</td>
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUserId" clearable filterable>
                                <el-option
                                v-for="item in projectDialogState.allPersonList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.personName"
                                ></el-option>
                            </el-select>
                          <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" />
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="text-align: center">实验场所</tr>
<!--                    <tr>-->
<!--                        <td class="w-25 m-color">楼宇</td>-->
<!--                        <td class="w-75 m-color">-->
<!--                            <el-input v-model="projectDialogState.projectForm.building" placeholder="请输入楼栋名称" />-->
<!--                        </td>-->
<!--                    </tr>-->
                    <tr>
                        <td class="w-25 m-color">房间号</td>
<!--                        <td class="w-75 m-color">-->
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.siteId" placeholder="请输入房间号" >
                                <el-option
                                    v-for="item in projectDialogState.allRoomList"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.room"
                                ></el-option>
                            </el-select>
                        </td>
                      <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-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" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-25 m-color required">安全负责人</td>
                      <td class="w-25 m-color">
<!--                        <el-select style="width: 100%" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" @change="getSafeLiabilityUserPhone($event)" clearable filterable>-->
<!--                          <el-option-->
<!--                              v-for="item in projectDialogState.allPersonList"-->
<!--                              :key="item.id"-->
<!--                              :value="item.id"-->
<!--                              :label="item.personName"-->
<!--                          ></el-option>-->
<!--                        </el-select>-->
                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" />
                      </td>
                      <td class="w-25 m-color required">电话</td>
                      <td class="w-25 m-color">
                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUserPhone" />
                      </td>
                    </tr>
                    <select-room ref="selectRoomRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.siteList"></select-room>
                    <select-material ref="selectMaterialRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.stuffList"></select-material>
                    <select-equipment ref="selectEquipmentRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.deviceList"></select-equipment>
                    <tr>
                        <td class="w-25 m-color">实验步骤</td>
                        <td class="w-25 m-color required">实验步骤</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentStep" placeholder="请输入实验步骤" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">操作方法</td>
                        <td class="w-25 m-color required">操作方法</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentMethod" placeholder="请输入操作方法" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">工艺过程</td>
                        <td class="w-25 m-color required">工艺过程</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.process" placeholder="请输入工艺过程" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">特殊/关键过程</td>
                        <td class="w-25 m-color required">特殊/关键过程</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.keyProcess" placeholder="请输入特殊/关键过程" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">是否存在过夜、老化实验</td>
                      <td class="w-25 m-color required">预防措施</td>
                      <td class="w-75 m-color">
                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.measure" placeholder="请输入预防措施" />
                      </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color required">是否存在过夜、老化实验</td>
                        <td class="w-25 m-color">
                            <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>
                        </td>
                        <td class="w-25 m-color">过夜、老化保障措施</td>
                        <td class="w-25 m-color required">过夜、老化保障措施</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.timeoutManager" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">是否在封闭条件下</td>
                        <td class="w-25 m-color required">是否在封闭条件下</td>
                        <td class="w-25 m-color">
                            <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>
                        </td>
                        <td class="w-25 m-color">封闭条件保障措施</td>
                        <td class="w-25 m-color required">封闭条件保障措施</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.unclosedManager" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防爆措施条件和设施情况</td>
                        <td class="w-25 m-color required">实验场所防爆措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.explosionProof" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防火措施条件和设施情况</td>
                        <td class="w-25 m-color required">实验场所防火措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.fireProof" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防中毒措施条件和设施情况</td>
                        <td class="w-25 m-color required">实验场所防中毒措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.poisonProof" placeholder="请输入" />
                        </td>
@@ -177,21 +166,17 @@
<!--                        </td>-->
<!--                    </tr>-->
                    <tr>
                        <td class="w-25 m-color">安全管理制度</td>
                        <td class="w-25 m-color required">安全管理制度</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeManagerMethod" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="text-align: center">应急预案/应急演练</tr>
                    <tr>
                        <td class="w-25 m-color">有无预案</td>
                        <td class="w-25 m-color">
                            预案名称
                        </td>
                        <td class="w-25 m-color">是否演练</td>
                        <td class="w-25 m-color">
                            演练情况
                        </td>
                        <td class="w-25 m-color required">有无预案</td>
                        <td class="w-25 m-color required">预案名称</td>
                        <td class="w-25 m-color required">是否演练</td>
                        <td class="w-25 m-color required">演练情况</td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">
@@ -207,9 +192,9 @@
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrill" />
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="  text-align: center">实验人员</tr>
                    <tr class="m-color b-font" style="  text-align: center">其他信息</tr>
                    <tr>
                        <td class="w-25 m-color">实验场所是否需要分区隔断</td>
                        <td class="w-25 m-color required">实验场所是否需要分区隔断</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.partitionCondition" placeholder="请输入" />
                        </td>
@@ -238,6 +223,9 @@
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";
const SelectEquipment = defineAsyncComponent(() => import('./selectEquipment.vue'))
const SelectMaterial = defineAsyncComponent(() => import('./selectMaterial.vue'))
@@ -246,8 +234,12 @@
const ProjectFormRef = ref()
const selectPersonRef = ref()
const selectEquipmentRef = ref()
const selectRoomRef = ref()
const selectMaterialRef = ref()
const selectDangerRef = ref()
const userInfo = useUserInfo();
const { userInfos } = storeToRefs(userInfo);
const projectDialogState = reactive<ProjectDialogType>({
    title: '',
@@ -257,14 +249,16 @@
        id: null,
        experimentName: "",
        experimentType: null,
        liabilityUserId: null,
        safeLiabilityUserId: null,
        liabilityUserId: Number(userInfos.value.uid),
        liabilityUserPhone: '',
        safeLiabilityUser: '',
        safeLiabilityUserPhone: '',
        dep: "",
        siteId: null,
        experimentStep: "",
        experimentMethod: "",
        process: "",
        keyProcess: "",
        measure: "",
        timeout: null,
        timeoutManager: "",
        closed: null,
@@ -280,9 +274,10 @@
        emergencyDrillStatus: "",
        partitionCondition: "",
        note: "",
        expectStartTime: null,
        createExperimentTime: '',
        persons: [
        ],
        siteList: [],
        deviceList: [
        ],
        stuffList: [
@@ -291,15 +286,22 @@
        ]
    },
    projectFormRules: {
        experimentName: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
    },
    allPersonList: [],
    allRoomList: [],
    systemPersonList: [],
})
const getLiabilityUserPhone = (value: number)=>{
  const data = projectDialogState.systemPersonList.find(item => item.id === value) as AllPersonListType
  projectDialogState.projectForm.liabilityUserPhone = data.phone
}
const getSafeLiabilityUserPhone = (value: number)=>{
  const data = projectDialogState.allPersonList.find(item => item.id === value) as AllPersonListType
  projectDialogState.projectForm.safeLiabilityUserPhone = data.phone
}
const showProjectDialog = (title: string, value: ProjectType, allRoomList: RoomType []) => {
    projectDialogState.projectDialogVisible = true;
@@ -314,14 +316,16 @@
            id: null,
            experimentName: "",
            experimentType: null,
            liabilityUserId: null,
            safeLiabilityUserId: null,
            liabilityUserId: Number(userInfos.value.uid),
            liabilityUserPhone: '',
            safeLiabilityUser: '',
            safeLiabilityUserPhone: '',
            dep: "",
            siteId: null,
            experimentStep: "",
            experimentMethod: "",
            process: "",
            keyProcess: "",
            measure: "",
            timeout: null,
            timeoutManager: "",
            closed: null,
@@ -337,9 +341,10 @@
            emergencyDrillStatus: "",
            partitionCondition: "",
            note: "",
            expectStartTime: null,
            createExperimentTime: '',
            persons: [
            ],
            siteList: [],
            deviceList: [
            ],
            stuffList: [
@@ -347,6 +352,14 @@
            hazardousWasteList: [
            ]
        };
    }else if(title === '整改'){
      projectDialogState.title = '整改';
      projectDialogState.disabled = false
      for(let i in projectDialogState.projectForm) {
        if(isValidKey(i, projectDialogState.projectForm)) {
          projectDialogState.projectForm[i] = value[i];
        }
      }
    }else{
        projectDialogState.title = '查看';
        projectDialogState.disabled = true
@@ -368,6 +381,7 @@
            if(projectDialogState.title === '新增'){
                projectDialogState.projectForm.persons = selectPersonRef.value.dataList
                projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList
                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({siteId}))
                projectDialogState.projectForm.stuffList = selectMaterialRef.value.dataList
                projectDialogState.projectForm.deviceList = selectEquipmentRef.value.dataList
                let res = await projectApi().addProject(projectDialogState.projectForm);
@@ -385,13 +399,15 @@
                    });
                }
            }else{
                projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(({siteId}) => ({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){
                    emit('refresh')
                    projectDialogState.projectDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                        message: '整改已提交'
                    })
                }else{
                    ElMessage({
@@ -447,6 +463,7 @@
onMounted(() => {
    getAllPersonList();
    getPersonList();
    console.log(userInfos.value,typeof userInfos.value.uid,'u')
});
</script>
@@ -485,9 +502,22 @@
    text-align: center;
    line-height: 42px;
  :deep(.el-input__wrapper ){
    box-shadow: none;
    margin-top: 6px;
  }
&:last-of-type {
     border-right: none;
 }
&.required {
  &::before {
    content: "*";
    display: inline-block;
    color: red;
  }
}
&.w-14 {
     width: calc((100/7)/100 * 100%);
@@ -539,10 +569,47 @@
.m-color {
    color: #0c4995;
}
:deep(.el-input__wrapper ){
    box-shadow: none;
    margin-top: 6px;
.roomSelect{
  ::v-deep(.el-popper){
    .el-select-dropdown__item{
      height: auto;
      padding: 0;
      .roomTable{
        width: 100%;
        display: flex;
        border-bottom: 1px solid #ebeef5;
        &:last-of-type{
          border-bottom: none;
        }
        &>div{
          width: 25%;
          border-right: 1px dashed #ebeef5;
          &:last-of-type{
            border-right: none;
          }
          div{
            width: 100%;
          }
          .roomTit{
            border-bottom: 1px solid #ebeef5;
          }
        }
      }
    }
    .el-select-dropdown__item.selected{
      .roomTit{
        color: #606266;
        font-weight: normal;
      }
    }
  }
}
:deep(.el-dialog__footer){
    padding-top: 20px;
    display: flex;