hbt-prevention-ui/src/views/risk/measures/measures.component.vue

<script lang="ts">
import { Component } from 'vue-property-decorator';
import template from "./measures.component.html"
import BaseRecordComponent from "hbt-common/components/common/baseRecord.component.vue"
import FormComponent from "hbt-common/components/common/form.component.vue"
import TableComponent from "hbt-common/components/common/table.component.vue"
import MeasuresService from "@/service/measures.service"
import FormOption from "hbt-common/models/formOptions"
import BtnOption from "hbt-common/models/btnOptions"
import DrawComponent from '@/components/draw.component.vue';
import ButtonListComponent from "hbt-common/components/common/buttonList.component.vue";
import UnitTreeComponent from '@/components/tree.component.vue';

@Component({
    template,
    components: {
        FormComponent,
        TableComponent,
        DrawComponent,
        ButtonListComponent,
        UnitTreeComponent,
    },
})
export default class MeasuresManagerComponent extends BaseRecordComponent<any> {
    public tableService = new MeasuresService();

    public params = {
        areaId: null,
        unitId: null,
    } as any;

    public showProtable = false;

    public currentProTableData = {
        datas: []
    } as any;

    public proTableColumn = [] as any;

    //管控措施
    public measuresSelectData = {} as any;

    public formActions = [{
        name: "查询",
        value: "search",
        icon: "el-icon-search",
        type: "primary"
    }, {
        name: "清空",
        icon: "el-icon-tickets",
        value: "reset"
    }];
    public tableActions = [{
        name: "批量删除",
        value: "delete",
        plain: true,
        icon: "el-icon-delete",
        type: "danger"
    }];
    public footerActions = [{
        name: "选择全部",
        value: "selectAll",
        type: "primary"
    }, {
        name: "反向选择",
        value: "reverse"
    }];
    public formOptions: FormOption<BtnOption>[] = [{
        name: "管控对象",
        key: "controlName",
        type: "text",
    }, {
        name: "分析对象",
        key: "analName",
        type: "text",
    }];
    public subActions = [{
        name: "取消",
        value: "cancel"
    }];
    public showUpdate = false;
    public updateParams = {} as any;
    public selectData = [];

    created() {
        this.$store.state.prevention_measures_sort.map((item) => {
            this.measuresSelectData[item.value] = this.treeSelectData(item.children)
        })
    }
    // 树点击
    public handleNodeClick(data) {
        this.params.unitId = "";
        this.params.areaId = "";
        if (data.areaId) {
            this.params.unitId = data.id
        } else {
            this.params.areaId = data.id
        }
        this.getTableData()
    }

    public buildTable() {
        this.tableColumn.push({ name: '管控对象', key: "controlName", width: "200px" });
        this.tableColumn.push({ name: '分析对象', key: "analName", width: "200px" });
        this.tableColumn.push({ name: '风险源', key: "riskSource", width: "150px" });
        this.tableColumn.push({
            name: '事故后果', key: "seriousResult", width: "200px", render: (data) => {
                if (data.seriousResult) {
                    return data.seriousResult.split(";").map(item => this.$store.getters.prevention_serious_result_map[item]).join(";")
                }
            }
        });
        this.tableColumn.push({
            name: '风险等级', key: "riskLevel", width: "150px", render: (data) => {
                return "<span class='color_" + data.riskLevel + "'>" + (data.riskLevel ? (this.$store.getters.prevention_risk_level_map[data.riskLevel]) : '') + "</span>"
            },
            filters: this.$store.state.prevention_risk_level.map(item => {
                return {
                    text: item.name,
                    value: item.value,
                }
            }), filterMethod: (data, row) => {
                return row.riskLevel === data;
            }
        });
        this.tableColumn.push({
            name: '措施详情', width: "100px", key: "measureNum", render: (data) => {
                return "<span class='link'>" + (data.details ? data.details.length : 0) + "</span>"
            }
        });
        this.tableColumn.push({ name: '涉及岗位', key: "postName" });


        //管控措施详情
        this.proTableColumn.push({ name: '序号', key: "index",width:"80px" });
        this.proTableColumn.push({
            name: '措施类型一', key: "firstTypeName", render: (data) => {
                if (data.firstType) {
                    return this.$store.getters.prevention_measures_sort_map[data.firstType]
                }
            }
        });
        this.proTableColumn.push({
            name: '措施类型二', key: "secondTypeName",
            render: (data) => {
                if (data.firstType) {
                    const secondTypeItem = this.measuresSelectData[data.firstType]
                    return this.selectName(secondTypeItem, data.secondType)
                }
            }
        });
        this.proTableColumn.push({ name: '措施类型三', key: "thirdType" });
        this.proTableColumn.push({ name: '管控措施', key: "description" ,width:"300px"});
    }

    public callback(data) {
        // 查询
        if (data.value === "search") {
            this.getTableData()
            // 重置
        } else if (data.value === "reset") {
            this.reset()
            // 反选
        } else if (data.value === "reverse") {
            this.toggleAll()
            // 全选
        } else if (data.value === "selectAll") {
            this.selectAll()
        } else if (data.value === "delete") {
            this.deleteData(this.selectData.map((item: any) => item.id))
        }
    }
    // 重置数据
    public reset() {
        this.params = {
            pageNum: 1,
            pageSize: 20,
        } as any;
    }

    public showUpdateModel(id) {
        this.showUpdate = true
    }

    public handleClose() {
        this.showUpdate = false;
    }


    public toggleAll() {
        (this.$refs.multipleTable as any).toggleAllSelection();
    }
    public selectAll() {
        if (!this.selectData.length) {
            this.toggleAll()
        } else {
            this.tableData.datas.forEach((item, index) => {
                const find = this.selectData.find((data: any) => data.userId === item.userId);
                if (!find) {
                    (this.$refs.multipleTable as any).toggleRowSelection(item);
                }
            })
        }
    }

    public handleSelectionChange(data) {
        this.selectData = data;
    }

    //管控措施
    public showPros(el, data) {
        const isTarget = el.target.classList.contains("link");
        if (isTarget) {
            this.showProtable = true;
            this.currentProTableData.datas = data.details.map((item, index) => {
                item.index = index + 1;
                return item
            })
        }
    }

    //管控措施--关闭
    public subCallback() {
        this.showProtable = false;
    }

    public treeSelectData(data) {
        return data.map((item) => {
            return {
                label: item.dictLabel,
                id: isNaN(+item.dictValue) ? item.dictValue : +item.dictValue,
            }
        })

    }

    public selectName(selectGroup, data) {
        if (selectGroup && selectGroup.length > 0) {
            const map = {};
            selectGroup.forEach((item: any) => {
                if (item.value) {
                    map[item.value] = item.name
                } else if (item.id) {
                    map[item.id] = item.label
                }

            })
            return map[data]
        }
    }
}
</script>
<style lang="scss" scoped src="../../common.component.scss"></style>