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

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

    public areaService = new AreaService();

    public params = {} as any;

    public isArea = false;

    public repairTableData = {datas:[]};

    public repairTableColumn = [] as any;


    public filters = [{
        text:"未绘制",
        value:0
    },{
        text:"已绘制",
        value:1
    }]
    public showQrCode = false;

    public qrUrl = "";

    public isReadonly = false;

    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:"drawList",
        plain:true,
        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>[] = [];

    public showUpdate = false;
    public currentId = -1;
    public updateParams = {}  as any;
    public updateOptions:FormOption<BtnOption>[] = [];


    public showDraw = false;

    public drawModel = "list";
    public areaList = [] as any;
    public areaNoMap = {} as any;

    
    public updateActions:BtnOption[] = [];

    public selectData = [];


    public showTurnOff = false;

    public account = JSON.parse(localStorage.getItem("account") as any);

    public turnOffParams = {} as any;

    public turnOffForm = [] as any;

    public turnOffAction = [{
        name:"取消",
        value:"cancelStatus"
    },{
        name:"保存",
        value:"saveStatus",
        type:"primary"
    }]

    created(){
        this.getAreaList();
    }

    public buildTurnOffForm(){
        this.turnOffForm = [{
            name:"停用/恢复",
            type:"radio",
            key:"status",
            require:true,
            disable:true,
            width:"100%",
            showError:false,
            datas:[{
                name:"停用",
                value:0
            },{
                name:"恢复",
                value:1
            }]
        },{
            name:"停用开始时间",
            type:"date",
            subType:"datetime",
            hide:this.turnOffParams.status===1,
            format:"yyyy-MM-dd HH:mm",
            key:"startTime",
            width:"100%",
            require:true,
            showError:false,
        },{
            name:"停用结束时间",
            type:"date",
            subType:"datetime",
            format:"yyyy-MM-dd HH:mm",
            hide:this.turnOffParams.status===1,
            key:"endTime",
            width:"100%",
            require:true,
            showError:false,
        },{
            name:"原因",
            type:"textarea",
            key:"reason",
            width:"100%",
            require:true,
            showError:false,
        },{
            name:"登记人",
            type:"text",
            key:"registerUserName",
            disable:true,
            require:true,
            width:"100%",
            showError:false,
        },{
            name:"登记时间",
            type:"text",
            key:"registerTime",
            disable:true,
            width:"100%",
            require:true,
            showError:false,
        }]
    }

    public doTurnOff(data,status){
        this.turnOffParams = {
            status:status,
            unitId:data.id,
            startTime:"",
            endTime:"",
            riskUnitStatus:status,
            registerUserId:this.account.userId,
            registerUserName:this.account.nickName,
            registerTime:moment().format("YYYY-MM-DD HH:mm"),
        
        }
        this.showTurnOff = true;
        this.buildTurnOffForm();
    }

    public doTurnOffAction(data){
        if(data && data.value==="saveStatus"){
            this.tableService.updateStatus(this.turnOffParams,true).then((res)=>{
                this.$message.success(this.turnOffParams.status?"启用成功":"停用成功");
                this.getTableData();
                this.showTurnOff = false;
            })
        }else{
            this.showTurnOff = false;
        }
    }

    public buildFormOptions(){
        this.updateOptions = [{
            name:"选择区域",
            key:"areaId",
            placeholder:"请选择区域名称",
            width:"calc(50% - 20px)",
            format:"areaName",
            type:"select",
            require:true,
            datas:this.areaList
        },{
            name:"区域编号",
            key:"areaNo",
            type:"text",
            disable:true,
            width:"calc(50% - 20px)",
        },{
            name:"单元编号",
            key:"number",
            type:"text",
            disable:true,
            width:"calc(50% - 20px)",
            require:true
        },{
            name:"单元名称",
            key:"name",
            type:"text",
            width:"calc(50% - 20px)",
            require:true
        },{
            name:"责任部门",
            key:"chargeDeptId",
            format:"chargeDeptName",
            type:"treeSelect",
            width:"calc(50% - 20px)",
            require:true,
            expandLevel:Infinity,
            showError:false,
            datas:this.$store.state.deptTreeList
        },{
            name:"责任人",
            key:"chargeUserId",
            format:"chargeUserName",
            type:"select",
            width:"calc(50% - 20px)",
            require:true,
            datas:this.$store.state.userList
        },{
            type:"btn",
            name:"单元绘制",
            width:"calc(50% - 20px)",
            btn:[{
                name:"开始绘制",
                value:"draw",
                height:"36px",
                hide:this.isReadonly,
                size:"small",
                icon:"el-icon-edit-outline",
                type:"primary"
            },{
                name:"查看绘制",
                value:"readDraw",
                hide:!this.isReadonly,
                height:"36px",
                size:"small",
                icon:"el-icon-edit-outline",
                type:"primary"
            }]
        },{
            name:"停用/检修状态",
            key:"status",
            width:"calc(50% - 20px)",
            format:"statusName",
            type:"select",
            disable:this.currentId!=-1,
            require:true,
            datas:[{
                name:"启用",
                value:1,
            },{
                name:"停用",
                value:0,
            }]
        }];

        this.updateActions = [{
            name:"取消",
            value:"cancel"
        },{
            name:"保存并继续添加",
            value:"saveAndContinue",
            hide:this.currentId!=-1,
            type:"primary"
        },{
            name:"保存",
            value:"submit",
            type:"primary"
        }];
        this.formOptions=[{
            name:"单元名称",
            key:"name",
            type:"text"
        },{
            name:"责任部门",
            key:"chargeDeptId",
            type:"select",
            datas:this.$store.state.deptList
        }]
    }

    public getQrCode(row){
        this.areaService.getQrCode({
            url:"/",
            id:row.id,
            system:"prevention",
            type:0,
            data:"",
            params:{
                "区域编号" : row.areaNo,
                "单元名称" : row.name,
                "单元编号" : row.number,
                "责任人" : row.chargeUserName,
                "责任部门" : row.chargeDeptName,
            }
        }).then((res:any)=>{
            this.showQrCode = true;
            this.qrUrl = res.data.url;
        })
    }


    public buildTable(){
        this.tableColumn.push({name:'风险分析单元',key:"name"});
        this.tableColumn.push({name:'责任部门',key:"chargeDeptName"});
        this.tableColumn.push({name:'责任人',key:"chargeUserName"});
        this.tableColumn.push({name:'绘制情况',filters:this.filters,filterMethod:(data,row)=>{
            if(data){
                return row.geoJson && row.geoJson!=="[]"
            }else{
                return !row.geoJson || row.geoJson === "[]"
            }
        },render:(data)=>{
            if(data.geoJson==='[]' || !data.geoJson){
                return "<span class='noDraw'>未绘制</span>"
            }else{
                return "<span>已绘制</span>"
            }
        }});

        this.repairTableColumn.push({name:"序号",key:"index"});
        this.repairTableColumn.push({name:"停用开始时间",key:"startTime"});
        this.repairTableColumn.push({name:"停用开始时间",key:"endTime"});
        this.repairTableColumn.push({name:"原因",key:"reason"});
        this.repairTableColumn.push({name:"登记人",key:"registerUserName"});
        this.repairTableColumn.push({name:"登记时间",key:"registerTime"});
    }

    public getAreaList(){
        this.areaService.selectByPage({pageSize:10}).then((res:any)=>{
            this.areaList = res.data.datas.map(item=>{
                this.areaNoMap[item.id] = item.number;
                return {
                    name:item.name,
                    value:item.id
                }
            });
            this.buildFormOptions()
        })
    }


    public doDraw(){
        console.log("openDraw")
        if(!this.updateParams.name){
            this.$message.error("请先输入单元名称");
            return
        }
        this.drawModel = "unit";
        this.showDraw = true;
    }
    public getCreateNumber(params){
        this.tableService.getUnitNumber(params).then((res)=>{
            this.updateParams.number = res.data;
        })
    }
    public doSave(goOn?){
        this.tableService.addOrUpdate(this.updateParams,this.currentId===-1).then((res)=>{
            this.$message.success(this.currentId===-1?"新增成功！":"修改成功！");
            if(goOn){
                this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]",status:1,number:null} as any;
            }else{
                this.handleClose();
            }
            this.getTableData();
        })
    }

    public change(data,item){
        // 新增编辑选择部门
        if(item && item.key === "chargeDeptId"){
            this.updateParams.chargeDeptName = this.$store.getters.dept_map[data];
        }
        // 新增编辑选择人员
        if(item && item.key === "chargeUserId"){
            this.updateParams.chargeUserName = this.$store.getters.user_map[data];
        }
        // 新增编辑选择区域
        if(item && item.key === "areaId"){
            this.updateParams.areaNo = this.areaNoMap[data];
            this.getCreateNumber({areaNo:this.updateParams.areaNo})
        }
    }
    public callback(data,type){
        if(type){
            this.params[type] = data;
            this.getTableData();
            return
        }
        // 查询
        if(data && data.value==="search"){
            this.getTableData()
        // 重置
        }else if(data && data.value === "reset"){
            this.reset()
        // 反选
        }else if(data && data.value === "reverse"){
            this.toggleAll()
        // 全选
        }else if(data && data.value === "selectAll"){
            this.selectAll()
        }else if(data && data.value === "add"){
            this.showUpdateModel()
        }else if(data && data.value === "delete"){
            this.deleteData(this.selectData.map((item:any)=>item.id))
        }else if(data && (data.value === "draw" || data.value==="readDraw")){
            this.doDraw()
        }else if(data && data.value === "drawList"){
            this.drawModel = "list";
            this.showDraw = true;
        }else if(data && data.value === "submit"){
            this.doSave()
        }else if(data && data.value === "saveAndContinue"){
            this.doSave(true)
        }else if(data && data.value === "cancel"){
            this.updateParams = {} as any;
            this.handleClose();
        }
    }

    // 重置数据
    public reset(){
        this.params = {
            name:null,
            chargeDeptId:null,
            pageNum:1,
            pageSize:20,
        } as any;
    }



    public showUpdateModel(data?,isRead?){
        if(!data){
            this.currentId = -1;
            this.updateParams = {bottomHeight:0,topHeight:0,geoJson:"[]",status:1,number:null} as any;
            this.showUpdate = true
        }else{
            this.currentId = data.id;
            this.updateParams = Object.assign({areaName:this.areaList.find(item=>item.value===data.areaId)?.name,bottomHeight:0,topHeight:0,status:1,geoJson:"[]",number:null,statusName:["停用","启用"][data.status]},data);
            if(isRead){
                this.repairTableData.datas = this.updateParams.repairs.map((item,i)=>{
                    item.index = i+1;
                    return item
                }) || []
            }
            this.isReadonly = !!isRead;
            this.buildFormOptions();
        }
        this.showUpdate = true
    }

    public handleClose(){
        this.updateParams = {} as any;
        this.showUpdate = false;
        this.currentId = -1;
        this.isReadonly = 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.id === item.id);
                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>