<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="recordDialogState.title" v-model="recordDialogState.recordDialogVisible" width="600px">
|
<el-form ref="recordFormRef" :rules="recordDialogState.recordFormRules" :model="recordDialogState.recordForm" size="default" label-width="135px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="区域" prop="region">
|
<el-input v-model="recordDialogState.recordForm.region" :disabled="recordDialogState.disabled" ></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="潜在事故" prop="potentialAccident">
|
<el-input type="textarea" v-model="recordDialogState.recordForm.potentialAccident" :disabled="recordDialogState.disabled" ></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="危险、有害因素" prop="dangerReason">
|
<el-input v-model="recordDialogState.recordForm.dangerReason" :disabled="recordDialogState.disabled" ></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="触发条件" prop="triggerFactor">
|
<el-input type="textarea" v-model="recordDialogState.recordForm.triggerFactor" :disabled="recordDialogState.disabled"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
|
<el-form-item label="事故后果" prop="accidentResult">
|
<el-input v-model="recordDialogState.recordForm.accidentResult" :disabled="recordDialogState.disabled" ></el-input>
|
</el-form-item>
|
</el-col>
|
<el-row :gutter="22">
|
<el-col :span="11" class="mb20 ml18 ">
|
<el-form-item label="L" prop="l">
|
<el-input v-model="recordDialogState.recordForm.l" :disabled="recordDialogState.disabled"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" class="mb20 ">
|
<el-form-item label="E" prop="e">
|
<el-input v-model="recordDialogState.recordForm.e" :disabled="recordDialogState.disabled"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="22">
|
<el-col :span="11" class="mb20 ml18 ">
|
<el-form-item label="C" prop="c">
|
<el-input v-model="recordDialogState.recordForm.c" :disabled="recordDialogState.disabled"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" class="mb20 ">
|
<el-form-item label="D" prop="d">
|
<el-input v-model="recordDialogState.recordForm.d" :disabled="recordDialogState.disabled" ></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 ">
|
<el-form-item label="危险等级" prop="dangerLevel">
|
<el-select style="width: 100%" :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.dangerLevel" clearable>
|
<el-option v-for="item in recordDialogState.dangerTypeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 ">
|
<el-form-item label="现有安全控制措施" prop="controlMeasure">
|
<el-input type="textarea" v-model="recordDialogState.recordForm.controlMeasure" :disabled="recordDialogState.disabled" placeholder="现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect" >
|
<el-form-item label="管控层级" prop="controlLevel">
|
<el-select style="width: 100%" multiple :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.controlLevel" clearable>
|
<el-option v-for="item in recordDialogState.manageLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="recordDialogState.recordDialogVisible = !recordDialogState.recordDialogVisible" size="default">取 消</el-button>
|
<el-button v-if="!recordDialogState.disabled" type="primary" @click="onSubmitPlan" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, getCurrentInstance } from "vue";
|
import {ElMessage} from "element-plus";
|
import {planApi} from "/@/api/analyse/plan";
|
import {isValidKey} from "/@/utils/methods";
|
import {recordApi} from "/@/api/analyse/record";
|
|
const recordFormRef = ref()
|
|
const recordDialogState = reactive<RecordDialogType>({
|
title: '',
|
disabled: false,
|
recordDialogVisible: false,
|
recordForm: {
|
id:null,
|
region:'',
|
potentialAccident: '',
|
dangerReason: '',
|
triggerFactor: '',
|
accidentResult: '',
|
l: null,
|
e: null,
|
c: null,
|
d: null,
|
dangerLevel: null,
|
controlMeasure: '',
|
controlLevel: [],
|
},
|
recordFormRules: {
|
region: [{ required: true, message: '请输入区域', trigger: 'change' }],
|
potentialAccident: [{ required: true, message: '请输入潜在事故', trigger: 'blur' }],
|
dangerReason: [{ required: true, message: '请输入危险、有害因素', trigger: 'blur' }],
|
triggerFactor: [{ required: true, message: '请输入触发条件', trigger: 'change' }],
|
accidentResult: [{ required: true, message: '请输入事故后果', trigger: 'change' }],
|
l: [{ required: true, message: '请输入L', trigger: 'change' }],
|
e: [{ required: true, message: '请输入E', trigger: 'change' }],
|
c: [{ required: true, message: '请输入C', trigger: 'change' }],
|
d: [{ required: true, message: '请输入D', trigger: 'change' }],
|
dangerLevel: [{ required: true, message: '请选择评危险等级', trigger: 'change' }],
|
controlMeasure: [{ required: true, message: '请输入现有安全控制措施', trigger: 'change' }],
|
controlLevel: [{ required: true, message: '请选择管理层级', trigger: 'change' }],
|
|
},
|
dangerTypeList: [
|
{id: 1, name: '低风险'},
|
{id: 2, name: '一般风险'},
|
{id: 3, name: '较大风险'},
|
],
|
manageLevelList: [
|
{id: 1, name: '公司级'},
|
{id: 2, name: '部门级'},
|
{id: 3, name: '岗位级'},
|
]
|
})
|
|
const showRecordDialog = (title: string, value: any) => {
|
recordDialogState.recordDialogVisible = true;
|
|
recordDialogState.disabled = false
|
setTimeout(() => {
|
recordFormRef.value.clearValidate();
|
});
|
if(title === '新增'){
|
recordDialogState.title = '新增';
|
recordDialogState.recordForm = {
|
region:'',
|
potentialAccident: '',
|
dangerReason: '',
|
triggerFactor: '',
|
accidentResult: '',
|
l: null,
|
e: null,
|
c: null,
|
d: null,
|
dangerLevel: null,
|
controlMeasure: '',
|
controlLevel: [],
|
};
|
}else if(title === '查看' || title === '编辑') {
|
for (let i in recordDialogState.recordForm) {
|
if (isValidKey(i, recordDialogState.recordForm)) {
|
if (i === 'controlLevel') {
|
let arr = []
|
arr = value[i].split('\n')
|
recordDialogState.recordForm[i] = arr
|
} else {
|
recordDialogState.recordForm[i] = value[i]
|
}
|
}
|
}
|
if (title === '查看') {
|
recordDialogState.title = '查看';
|
recordDialogState.disabled = true
|
} else {
|
recordDialogState.title = '编辑';
|
recordDialogState.recordForm.id = value.id
|
}
|
}
|
|
};
|
|
const onSubmitPlan = () => {
|
recordFormRef.value.validate(async(valid: boolean) => {
|
if(valid){
|
recordDialogState.recordForm.controlLevel = recordDialogState.recordForm.controlLevel.join('\n')
|
if(recordDialogState.title === '新增'){
|
let res = await recordApi().addRecord(recordDialogState.recordForm);
|
if(res.data.code === 100){
|
emit('getList')
|
recordDialogState.recordDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}else{
|
|
let res = await recordApi().modRecord(recordDialogState.recordForm)
|
if(res.data.code === 100){
|
emit('getList')
|
recordDialogState.recordDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
}
|
|
const emit = defineEmits(['getList'])
|
|
defineExpose({
|
showRecordDialog
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep(.pickTime){
|
position: absolute !important;
|
top: 0 !important;
|
}
|
.valueSelect{
|
::v-deep(.el-popper){
|
.el-select-dropdown__item{
|
width: 100%;
|
height: auto;
|
white-space: normal;
|
word-break: break-all;
|
word-wrap: break-word;
|
overflow: auto;
|
padding: 10px 25px;
|
border-bottom: 1px solid #ccc;
|
|
.valueTable{
|
&>div{
|
line-height: 1.5;
|
margin-bottom: 6px;
|
display: flex;
|
align-items: center;
|
|
div{
|
color: #999;
|
}
|
|
span{
|
font-weight: bolder;
|
}
|
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
