马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/doublePrevent/riskLevel/riskCheckUnit/components/selectMeasureControlDialog.vue
对比新文件
@@ -0,0 +1,219 @@
<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>