hbt-prevention-ui/src/views/hiddenDanger/safe/action.component.vue

<script lang="ts">
import { Component } from 'vue-property-decorator';
import template from "../common.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 AreaService from "@/service/area.service"
import FormOption from "hbt-common/models/formOptions"
import BtnOption from "hbt-common/models/btnOptions"
import DrawComponent from '@/components/draw.component.vue';
@Component({
    template,
    components:{
        FormComponent,
        TableComponent,
        DrawComponent,
    },
})
export default class RulesManagerComponent extends BaseRecordComponent<any> {
    public tableService = new AreaService();

    public isAction = true;

    public params = {} as any;

    public formActions = [{
        name:"查询",
        value:"search",
        icon:"el-icon-search",
        type:"primary"
    },{
        name:"清空",
        icon:"el-icon-tickets",
        value:"reset"
    }];
    public tableActions = [{
        name:"添加",
        value:"add",
        icon:"el-icon-plus",
        type:"primary"
    },{
        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:"areaId",
        type:"select",
        datas:[{
            name:"区域1",
            value:0
        },{
            name:"区域2",
            value:1
        }]
    }];

    public showUpdate = false;
    public currentId = -1;
    public updateParams = {}  as any;
    public updateOptions:FormOption<BtnOption>[] = [{
        name:"区域编号",
        key:"no",
        type:"text",
        width:"calc(50% - 20px)",
        require:true
    },{
        name:"区域名称",
        key:"areaName",
        type:"text",
        width:"calc(50% - 20px)",
        require:true
    },{
        name:"责任部门",
        key:"deptId",
        type:"select",
        width:"calc(50% - 20px)",
        require:true,
        datas:[{
            name:"部门1",
            value:0
        },{
            name:"部门2",
            value:1
        }]
    },{
        name:"责任人",
        key:"person",
        type:"select",
        width:"calc(50% - 20px)",
        require:true,
        datas:[{
            name:"人员1",
            value:0
        },{
            name:"人员2",
            value:1
        }]
    },{
        name:"属于重大危险源",
        key:"isDangrous",
        type:"radio",
        width:"calc(50% - 20px)",
        require:true,
        datas:[{
            name:"是",
            value:0
        },{
            name:"否",
            value:1
        }]
    },{
        name:"重大危险源名称",
        key:"dangrousName",
        type:"text",
        width:"calc(50% - 20px)",
        require:true,
    },{
        name:"重大危险源等级",
        key:"level",
        type:"select",
        width:"calc(50% - 20px)",
        require:true,
        datas:[{
            name:"一级",
            value:0
        },{
            name:"二级",
            value:1
        }]
    },{
        type:"btn",
        name:"区域绘制",
        width:"calc(50% - 20px)",
        btn:[{
            name:"开始绘制",
            value:"draw",
            type:"primary"
        }]
    }];


    public showDraw = false;

    public drawModel = "list";


    public updateActions = [{
        name:"取消",
        value:"cancel"
    },{
        name:"保存并继续添加",
        value:"saveAndContinue",
        type:"primary"
    },{
        name:"保存",
        value:"save",
        type:"primary"
    }];

    public selectData = [];
    

    created(){

    }

    public buildTable(){
        this.tableColumn.push({name:'序号',key:"areaName"});
        this.tableColumn.push({name:'检查表名称',key:"areaName"});
        this.tableColumn.push({name:'区域名称',key:"deptName"});
        this.tableColumn.push({name:'单元名称',key:"person"});
        this.tableColumn.push({name:'对象名称',key:"isDangrous"});
        this.tableColumn.push({name:'编制部门',key:"isDangrous"});
        this.tableColumn.push({name:'适用类型',key:"isDangrous"});
        this.tableColumn.push({name:'编制人',key:"isDangrous"});
        this.tableColumn.push({name:'编制时间',key:"isDangrous"});
    }

    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 === "add"){
            this.showUpdateModel(-1)
        }else if(data.value === "delete"){
            this.deleteData(this.selectData.map((item:any)=>item.id))
        }else if(data.value === "draw"){
            this.drawModel = "area";
            this.showDraw = true;
        }else if(data.value === "drawList"){
            this.drawModel = "list";
            this.showDraw = true;
        }
    }
    // 重置数据
    public reset(){
        this.params = {
            pageNum:1,
            pageSize:20,
        } as any;
    }



    public showUpdateModel(id){
        if(id!==-1){
        }
        this.currentId = 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;
    }
}
</script>
<style lang="scss" scoped src="../../common.component.scss"></style>