对比新文件 |
| | |
| | | <template> |
| | | <div class="system-role-container"> |
| | | <el-card shadow="hover"> |
| | | <div class="system-user-search mb15"> |
| | | <div class="basic-line"> |
| | | <span>管控方式:</span> |
| | | <el-select class="input-box" v-model="riskControlMeasureData.params.controlType" placeholder="管控方式" clearable> |
| | | <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="basic-line"> |
| | | <span>安全风险事件:</span> |
| | | <el-select class="input-box" v-model="riskControlMeasureData.params.riskEventId" placeholder="安全风险事件" clearable> |
| | | <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskEventName" :value="item.id"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch"> |
| | | <el-icon> |
| | | <ele-Search /> |
| | | </el-icon> |
| | | 查询 |
| | | </el-button> |
| | | </div> |
| | | <el-table |
| | | @selection-change="handleSelectionChange" |
| | | ref="table" |
| | | :row-key="getRowKey" |
| | | :data="riskControlMeasureData.data" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> |
| | | <el-table-column prop="riskEventName" label="安全风险事件名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="controlMeasureCode" label="风控措施编码" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="controlType" label="管控方式" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | {{ parseNumber(scope.row.controlType, '管控方式') }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="checkContent" label="管控内容" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="classify1" label="管控措施分类1" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | {{ parseNumber(scope.row.classify1, '管控措施分类1') }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="classify2" label="管控措施分类2" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | {{ parseNumber(scope.row.classify2, '管控措施分类2') }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="classify3" label="管控措施分类3" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="measureDesc" label="措施说明" show-overflow-tooltip></el-table-column>> |
| | | <el-table-column label="操作" width="150"> |
| | | <template #default="scope"> |
| | | <el-button type="text" @click="giveValue(scope.row)">选择 </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { toRefs, reactive, onMounted, ref } from 'vue'; |
| | | import { ElMessageBox, ElMessage } from 'element-plus'; |
| | | import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts'; |
| | | import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent'; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface TableData { |
| | | roleName: string; |
| | | roleSign: string; |
| | | describe: string; |
| | | sort: number; |
| | | status: boolean; |
| | | createTime: string; |
| | | } |
| | | interface TableDataState { |
| | | isShowSelectMeasureControlDialog: boolean; |
| | | riskControlMeasureIdList: Array<riskControlMeasure>; |
| | | riskControlMeasureData: { |
| | | data: Array<TableData>; |
| | | total: number; |
| | | loading: boolean; |
| | | params: { |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | controlType: number | null; |
| | | riskEventId: number | null; |
| | | }; |
| | | }; |
| | | controlTypeList: Array<controlTypeType>; |
| | | classifyOneList: Array<classifyOneType>; |
| | | classifyTwoList: Array<classifyOneType>; |
| | | } |
| | | interface controlTypeType { |
| | | id: number; |
| | | name: string; |
| | | } |
| | | interface classifyOneType { |
| | | id: number; |
| | | riskMeasureName: string; |
| | | } |
| | | |
| | | interface riskControlMeasure {} |
| | | export default { |
| | | name: 'selectMeasureControlDialog', |
| | | components: {}, |
| | | setup(props: any, context: any) { |
| | | const riskControlMeasureDialogRef = ref(); |
| | | const state = reactive<TableDataState>({ |
| | | isShowSelectMeasureControlDialog: false, |
| | | riskControlMeasureIdList: [], |
| | | riskControlMeasureData: { |
| | | data: [], |
| | | total: 0, |
| | | loading: false, |
| | | params: { |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | controlType: null, |
| | | riskEventId: null |
| | | } |
| | | }, |
| | | controlTypeList: [ |
| | | { id: 1, name: '自动化监控' }, |
| | | { id: 2, name: '隐患排查' } |
| | | ], |
| | | classifyOneList: [], |
| | | classifyTwoList: [] |
| | | }); |
| | | |
| | | // 初始化表格数据 |
| | | const initRiskControlMeasureData = async () => { |
| | | let res = await riskControlMeasureApi().getAllRiskControlMeasureList(); |
| | | if (res.data.code === '200') { |
| | | state.riskControlMeasureData.data = res.data.data; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | //获取管控措施分类 |
| | | const getClassify = async () => { |
| | | let res = await riskControlMeasureApi().getClassifyData(); |
| | | if (res.data.code === '200') { |
| | | state.classifyOneList = res.data.data.filter((item: any) => item.parentId === null); |
| | | state.classifyTwoList = res.data.data.filter((item: any) => item.parentId !== null); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const parseNumber = (value: string | number, type: string) => { |
| | | if (type === '管控方式') { |
| | | return state.controlTypeList.find((item) => item.id === value)?.name; |
| | | } else if (type === '管控措施分类1') { |
| | | return state.classifyOneList.find((item) => item.id === value)?.riskMeasureName; |
| | | } else { |
| | | return state.classifyTwoList.find((item) => item.id === value)?.riskMeasureName; |
| | | } |
| | | }; |
| | | |
| | | const handleSearch = () => { |
| | | initRiskControlMeasureData(); |
| | | }; |
| | | |
| | | // 分页改变 |
| | | const onHandleSizeChange = (val: number) => { |
| | | state.riskControlMeasureData.params.pageSize = val; |
| | | initRiskControlMeasureData(); |
| | | }; |
| | | |
| | | // 分页改变 |
| | | const onHandleCurrentChange = (val: number) => { |
| | | state.riskControlMeasureData.params.pageIndex = val; |
| | | initRiskControlMeasureData(); |
| | | }; |
| | | |
| | | const handleSelectionChange = (val: []) => { |
| | | state.riskControlMeasureIdList = val; |
| | | }; |
| | | |
| | | const getRowKey = (value: { id: number }) => { |
| | | return value.id; |
| | | }; |
| | | |
| | | const giveValue = () => { |
| | | context.emit('receiveRiskControlId', state.riskControlMeasureIdList); |
| | | }; |
| | | |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | initRiskControlMeasureData(); |
| | | getClassify(); |
| | | }); |
| | | |
| | | return { |
| | | handleSearch, |
| | | parseNumber, |
| | | getRowKey, |
| | | giveValue, |
| | | handleSelectionChange, |
| | | onHandleSizeChange, |
| | | onHandleCurrentChange, |
| | | riskControlMeasureDialogRef, |
| | | initRiskControlMeasureData, |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped></style> |