<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="identifyQueryState.title" v-model="identifyQueryState.identifyQueryVisible" :close-on-click-modal="false" width="800px">
|
<el-form ref="identifyFormRef" :rules="identifyQueryState.identifyFormRules" :model="identifyQueryState.identifyQueryForm" size="default" label-width="100px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="评估计划" prop="id">
|
<el-select class="input-length" :disabled="true" v-model="identifyQueryState.identifyQueryForm.id" style="width:100%" placeholder="评估计划" clearable>
|
<el-option v-for="item in identifyQueryState.planList" :key="item.id" :label="item.assessPlanName" :value="item.id"></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="identificationMethod">
|
<el-select class="input-length" :disabled="identifyQueryState.disabled" v-model="identifyQueryState.identifyQueryForm.identificationMethod" style="width:100%" placeholder="辨识方法" clearable>
|
<el-option v-for="item in identifyQueryState.identificationMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="checkUnit-point">
|
<el-tabs class="active" v-model="identifyQueryState.activeName">
|
<el-tab-pane label="辨识信息" name="identify">
|
<div style="padding-bottom: 10px" v-if="identifyQueryState.identifyForm.planExecStatus === 2">
|
<el-button size="default" type="primary" @click="openIdentifyDialog('新增', '')">
|
<el-icon>
|
<ele-FolderAdd />
|
</el-icon>
|
新增
|
</el-button>
|
</div>
|
|
<el-table :data="identifyQueryState.list" border fit highlight-current-row style="width: 100%">
|
<el-table-column type="index" label="序号" width="80" />
|
<el-table-column prop="technologyMeasure" label="技术措施" show-overflow-tooltip align="center"></el-table-column>
|
<el-table-column prop="manageMeasure" label="管理措施" show-overflow-tooltip align="center"></el-table-column>
|
<el-table-column prop="educationMeasure" label="教育措施" show-overflow-tooltip align="center"></el-table-column>
|
<el-table-column prop="personalProtectionMeasure" label="防护措施" show-overflow-tooltip align="center"></el-table-column>
|
<el-table-column label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button size="default" text type="primary" @click="openIdentifyDialog('查看', scope.row)">查看</el-button>
|
<el-button size="default" text type="primary" v-if="identifyQueryState.identifyForm.planExecStatus === 2" @click="openIdentifyDialog('编辑', scope.row)">编辑</el-button>
|
<el-button size="default" text type="danger" v-if="identifyQueryState.identifyForm.planExecStatus === 2" @click="onDelIdentifyQuery(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<template #footer>
|
<span class="Query-footer">
|
<el-button @click="identifyQueryState.identifyQueryVisible = !identifyQueryState.identifyQueryVisible" size="default">取 消</el-button>
|
<el-button v-if="identifyQueryState.identifyForm.planExecStatus === 2" type="primary" @click="identifyQueryState.identifyQueryVisible = !identifyQueryState.identifyQueryVisible" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<identify-dialog ref="identifyDialogRef" @refresh="refreshList"></identify-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {defineAsyncComponent, reactive, ref} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {identifyApi} from "/@/api/analyse/identify";
|
import {isValidKey} from "/@/utils/methods";
|
|
const identifyDialogRef = ref()
|
const IdentifyDialog = defineAsyncComponent(() => import('./identifyDialog.vue'))
|
|
const identifyQueryState = reactive<IdentifyQueryType>({
|
title: '',
|
activeName: 'identify',
|
list: [],
|
identifyQueryVisible: false,
|
identifyQueryForm: {
|
id: null,
|
identificationMethod: null,
|
},
|
identifyForm: {},
|
identificationMethodList: [
|
{id:1, name: 'PHA'},
|
{id:2, name: 'JHA'},
|
{id:3, name: 'SCL'},
|
{id:4, name: 'HAZOP'},
|
{id:5, name: '类比法'},
|
],
|
planList: [],
|
})
|
|
const showIdentifyQuery = (title: string, value: IdentifyType, planList: PlanType [], personList: SystemPersonType []) => {
|
identifyQueryState.identifyQueryVisible = true;
|
identifyQueryState.identifyForm = value;
|
identifyQueryState.planList = planList;
|
identifyQueryState.list = value.factorQueryDTOList;
|
for(let i in identifyQueryState.identifyQueryForm){
|
if(isValidKey(i, identifyQueryState.identifyQueryForm)){
|
identifyQueryState.identifyQueryForm[i] = value[i]
|
}
|
}
|
if(title === '编辑'){
|
identifyQueryState.title = '编辑';
|
}else {
|
identifyQueryState.title = '查看';
|
}
|
};
|
|
const openIdentifyDialog = (title: string, value: IdentifyType) => {
|
identifyDialogRef.value.showIdentifyDialog(title, identifyQueryState.identifyForm, value);
|
};
|
|
const refreshList = (type: number, data: IdentifyType) => {
|
if(type === 1){
|
identifyQueryState.list?.push(data)
|
}else{
|
(<Array<IdentifyType>>identifyQueryState.list)[identifyQueryState.list?.findIndex(item => item.id === data.id) as number] = data
|
}
|
};
|
|
const onDelIdentifyQuery = (index: number, val: IdentifyType) => {
|
ElMessageBox.confirm(`此操作将永久删除该辨识，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let data = { id: val.id, analogyId: val.analogyId, hazopId: val.hazopId, jhaId: val.jhaId, phaId: val.phaId, sclId: val.sclId, }
|
let res = await identifyApi().deleteIdentifyById(data);
|
if (res.data.code === 100) {
|
(<Array<IdentifyType>>identifyQueryState.list).splice(index, 1)
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '删除成功'
|
});
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
};
|
|
const emit = defineEmits(['refresh'])
|
|
defineExpose({
|
showIdentifyQuery
|
})
|
</script>
|
|
<style scoped>
|
|
</style>
|
