hbt-prevention-ui/src/views/risk/assessment/device/device.component.vue

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

    public params = {} as any;

    public treeData = [{
        label: '一级 1',
        children: [{
        label: '二级 1-1',
        children: [{
            label: '三级 1-1-1'
        }]
        }]
    }, {
        label: '一级 2',
        children: [{
        label: '二级 2-1',
        children: [{
            label: '三级 2-1-1'
        }]
        }, {
        label: '二级 2-2',
        children: [{
            label: '三级 2-2-1'
        }]
        }]
    }, {
        label: '一级 3',
        children: [{
        label: '二级 3-1',
        children: [{
            label: '三级 3-1-1'
        }]
        }, {
        label: '二级 3-2',
        children: [{
            label: '三级 3-2-1'
        }]
        }]
    }]

    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:"text",
    },{
        name:"单元名称",
        key:"unitId",
        type:"text",
    }];

    public showUpdate = false;
    public updateParams = {}  as any;
    public selectData = [];

    created(){

    }
    // 树点击
    public handleNodeClick(data){
        console.log(data)
    }

    public buildTable(){
        this.tableColumn.push({name:'序号',key:"index"});
        this.tableColumn.push({name:'区域名称',key:"deptName",width:"200px"});
        this.tableColumn.push({name:'风险分析单元',key:"deptName",width:"200px"});
        this.tableColumn.push({name:'设备名称',key:"person"});
        this.tableColumn.push({name:'设备类别',key:"person"});
        this.tableColumn.push({name:'检查项目',key:"status",render:(data)=>{
            if(data.status==0){
                return "<span class='noDraw'>未绘制</span>"
            }else{
                return "<span>已绘制</span>"
            }
        }});
        this.tableColumn.push({name:'责任人',key:"person"});
        this.tableColumn.push({name:'责任部门',key:"person"});
        this.tableColumn.push({name:'涉及岗位',key:"person"});
    }

    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;
    }
}
</script>
<style lang="scss" scoped src="../../../common.component.scss"></style>