<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="projectDialogState.title" v-model="projectDialogState.projectDialogVisible" width="70%">
|
<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>
|
<tr>
|
<td class="w-25 m-color">实验名称</td>
|
<td class="w-75 m-color">
|
<el-form-item prop="experimentName">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentName" placeholder="请输入实验名称" />
|
</el-form-item>
|
</td>
|
</tr>
|
<tr>
|
<td class="w-25 m-color">实验类型</td>
|
<td class="w-75 m-color">
|
|
<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>
|
<el-radio :label="3">辐射类</el-radio>
|
<el-radio :label="4">机电类</el-radio>
|
<el-radio :label="5">特种设备类</el-radio>
|
<el-radio :label="6">其他类</el-radio>
|
</el-radio-group>
|
|
|
</td>
|
</tr>
|
<tr>
|
<td class="w-25 m-color">部门</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">
|
<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>
|
</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>
|
</tr>
|
<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-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-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-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-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">
|
<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">
|
<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">
|
<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">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.unclosedManager" />
|
</td>
|
</tr>
|
<tr>
|
<td class="w-25 m-color">实验场所防爆措施条件和设施情况</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-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-75 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.poisonProof" placeholder="请输入" />
|
</td>
|
</tr>
|
|
|
<select-danger ref="selectDangerRef" v-model:data="projectDialogState.projectForm.hazardousWasteList" v-model:disabled="projectDialogState.disabled"></select-danger>
|
<select-person ref="selectPersonRef" v-model:data="projectDialogState.projectForm.persons" v-model:disabled="projectDialogState.disabled"></select-person>
|
|
|
<!-- <tr>-->
|
<!-- <td class="w-25 m-color">安全信息化系统使用情况</td>-->
|
<!-- <td class="w-25 m-color">-->
|
<!-- <el-radio-group v-model="projectDialogState.projectForm.useIT">-->
|
<!-- <el-radio value="1">是</el-radio>-->
|
<!-- <el-radio value="2">否</el-radio>-->
|
<!-- </el-radio-group>-->
|
<!-- </td>-->
|
<!-- <td class="w-25 m-color">系统名称</td>-->
|
<!-- <td class="w-25 m-color">-->
|
<!-- <el-input v-model="projectDialogState.projectForm.systemName" placeholder="请输入" />-->
|
<!-- </td>-->
|
<!-- </tr>-->
|
<tr>
|
<td class="w-25 m-color">安全管理制度</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>
|
</tr>
|
<tr>
|
<td class="w-25 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlan" />
|
</td>
|
<td class="w-25 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlanName" />
|
</td>
|
<td class="w-25 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrillStatus" />
|
</td>
|
<td class="w-25 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrill" />
|
</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 :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.partitionCondition" placeholder="请输入" />
|
</td>
|
</tr>
|
<tr>
|
<td class="w-25 m-color">其它基础信息（详细描述）</td>
|
<td class="w-75 m-color">
|
<el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.note" placeholder="请输入" />
|
</td>
|
</tr>
|
</table>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer" style="padding-top:10px;text-align: center !important;">
|
<el-button @click="projectDialogState.projectDialogVisible = !projectDialogState.projectDialogVisible" size="default">取 消</el-button>
|
<el-button type="primary" v-if="!projectDialogState.disabled" @click="onSubmitProject" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {defineAsyncComponent, nextTick, onMounted, reactive, ref} from "vue";
|
import {ElMessage} from "element-plus";
|
import {projectApi} from "/@/api/experiment/project";
|
import {personApi} from "/@/api/basic/person";
|
import {userApi} from "/@/api/systemManage/user";
|
|
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 ProjectFormRef = ref()
|
const selectPersonRef = ref()
|
const selectEquipmentRef = ref()
|
const selectMaterialRef = ref()
|
const selectDangerRef = ref()
|
|
const projectDialogState = reactive<ProjectDialogType>({
|
title: '',
|
disabled: false,
|
projectDialogVisible: false,
|
projectForm: {
|
id: null,
|
experimentName: "",
|
experimentType: null,
|
liabilityUserId: null,
|
safeLiabilityUserId: null,
|
dep: "",
|
siteId: null,
|
experimentStep: "",
|
experimentMethod: "",
|
process: "",
|
keyProcess: "",
|
timeout: null,
|
timeoutManager: "",
|
closed: null,
|
unclosedManager: "",
|
explosionProof: "",
|
fireProof: "",
|
poisonProof: "",
|
hazardousWaste: null,
|
safeManagerMethod: "",
|
emergencyPlan: "",
|
emergencyDrill: "",
|
emergencyPlanName: "",
|
emergencyDrillStatus: "",
|
partitionCondition: "",
|
note: "",
|
expectStartTime: null,
|
persons: [
|
],
|
deviceList: [
|
],
|
stuffList: [
|
],
|
hazardousWasteList: [
|
]
|
},
|
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 showProjectDialog = (title: string, value: ProjectType, allRoomList: RoomType []) => {
|
projectDialogState.projectDialogVisible = true;
|
projectDialogState.allRoomList = allRoomList
|
setTimeout(() => {
|
ProjectFormRef.value.clearValidate();
|
});
|
if(title === '新增'){
|
projectDialogState.disabled = false
|
projectDialogState.title = '新增';
|
projectDialogState.projectForm = {
|
id: null,
|
experimentName: "",
|
experimentType: null,
|
liabilityUserId: null,
|
safeLiabilityUserId: null,
|
dep: "",
|
siteId: null,
|
experimentStep: "",
|
experimentMethod: "",
|
process: "",
|
keyProcess: "",
|
timeout: null,
|
timeoutManager: "",
|
closed: null,
|
unclosedManager: "",
|
explosionProof: "",
|
fireProof: "",
|
poisonProof: "",
|
hazardousWaste: 1,
|
safeManagerMethod: "",
|
emergencyPlan: "",
|
emergencyDrill: "",
|
emergencyPlanName: "",
|
emergencyDrillStatus: "",
|
partitionCondition: "",
|
note: "",
|
expectStartTime: null,
|
persons: [
|
],
|
deviceList: [
|
],
|
stuffList: [
|
],
|
hazardousWasteList: [
|
]
|
};
|
}else{
|
projectDialogState.title = '查看';
|
projectDialogState.disabled = true
|
for(let i in projectDialogState.projectForm) {
|
if(isValidKey(i, projectDialogState.projectForm)) {
|
projectDialogState.projectForm[i] = value[i];
|
}
|
}
|
}
|
};
|
|
const isValidKey = (key: string | number | symbol, object:object): key is keyof typeof object =>{
|
return key in object;
|
};
|
|
const onSubmitProject = () => {
|
ProjectFormRef.value.validate(async(valid: boolean) => {
|
if(valid){
|
if(projectDialogState.title === '新增'){
|
projectDialogState.projectForm.persons = selectPersonRef.value.dataList
|
projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList
|
projectDialogState.projectForm.stuffList = selectMaterialRef.value.dataList
|
projectDialogState.projectForm.deviceList = selectEquipmentRef.value.dataList
|
let res = await projectApi().addProject(projectDialogState.projectForm);
|
if(res.data.code === 100){
|
emit('refresh')
|
projectDialogState.projectDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}else{
|
let res = await projectApi().modProject(projectDialogState.projectForm)
|
if(res.data.code === 100){
|
emit('refresh')
|
projectDialogState.projectDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
};
|
|
const getPersonList = async () => {
|
let res = await userApi().getUserList({
|
roleId: 1,
|
usePage: false,
|
pageIndex: 1,
|
pageSize: 10
|
});
|
if(res.data.code === 100){
|
debugger
|
projectDialogState.systemPersonList = JSON.parse(JSON.stringify(res.data.data));
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
})
|
}
|
};
|
|
const getAllPersonList = async () => {
|
let res = await personApi().getAllPerson();
|
if(res.data.code === 100){
|
projectDialogState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
})
|
}
|
};
|
|
const emit = defineEmits(['refresh']);
|
|
defineExpose({
|
showProjectDialog,
|
});
|
|
onMounted(() => {
|
getAllPersonList();
|
getPersonList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.site-layout-background {
|
background: #fff;
|
}
|
|
.report-table {
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #337ecc;
|
margin: 20px 0;
|
|
th {
|
padding: 10px 0;
|
border: 1px solid #337ecc;
|
border-left: none;
|
}
|
|
tr {
|
width: 100%;
|
height: 44px;
|
line-height: 42px;
|
border-bottom: 1px solid #ccc;
|
|
&:last-of-type {
|
border-bottom: none;
|
}
|
|
td {
|
border-right: 1px solid #ccc;
|
display: inline-block;
|
height: 44px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 42px;
|
|
&:last-of-type {
|
border-right: none;
|
}
|
|
&.w-14 {
|
width: calc((100/7)/100 * 100%);
|
}
|
|
&.w-16 {
|
width: calc((100/6)/100 * 100%);
|
}
|
|
&.w-18 {
|
width: 16.59%;
|
}
|
|
&.w-20 {
|
width: 20%;
|
}
|
|
&.w-25 {
|
width: 25%;
|
}
|
|
&.w-50 {
|
width: 50%;
|
}
|
|
&.w-75 {
|
width: 75%;
|
}
|
|
.ant-input {
|
height: 100%;
|
border: none;
|
background: #f5f7fa;
|
}
|
|
.ant-picker {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.b-font {
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
}
|
|
.m-color {
|
color: #0c4995;
|
}
|
:deep(.el-input__wrapper ){
|
box-shadow: none;
|
margin-top: 6px;
|
}
|
:deep(.el-dialog__footer){
|
padding-top: 20px;
|
display: flex;
|
justify-content: center;
|
}
|
|
|
</style>
|
