baianxi_admin/src/views/task/DangerTask.vue

<style lang="scss">
    .task{
        .danger{
            display: flex;
            .companies{
                height: 75vh;
                overflow: auto;
                margin-right: 10px;
                overflow-x: hidden;
            }
            &>li{
                width: 25%;
                list-style: none;
                min-height: 70vh;
                background: #fff;
                border: 1px solid #d9d9d9;
                padding:20px 10px;
                // margin-right: 20px;
            }
        }
        .el-table th{
            padding:   0;
        }
        // justify-content: space-between;
        
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    
                    .label_name{
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 95%;
                        display: block;
                    }
                    .rsk{
                        color: #DF5706;
                        img{
                            position: relative;
                            top:2px;
                        }
                    }
                    .active .label_name{
                        color:#1989FA !important;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .form{
            .el-input,.el-textarea{
                width: 90%;
            }
            .el-select{
                width: 100%;
            }
            .req{
                color:red;
                font-weight: 600;
                margin-left: 5px;
            }
        }
        .company{
            h1{
                font-size: 18px;
                margin-bottom: 20px;
                button{
                    float: right;
                }
            }
            p{
                color: #409EFF;
                padding: 10px 0;
                border-bottom: 1px solid #d9d9d9;
                font-size: 14px;
                width: 90%;
                margin: 0 auto;
            }
        }
    }
</style>
<template>
  <section>
    <p>任务管理 > 风险点任务</p>
    <div class="content task">
        <ul class="danger">
            <li class="companies">
                <el-form size="small" >
                    <el-form-item>
                        <el-input suffix-icon="el-icon-search" v-model="filterText" placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-tree  
                    :data="data" :props='props'
                    node-key="id" 
                    :expand-on-click-node="false">
                    <span  class="custom-tree-node" slot-scope="{ node, data }" @click="() => edit(data)" >
                        <span v-if='form.riskpoint_id==data.id' class="active">
                            <span v-if='data.type=="ent"' class="label_name"><i  class="el-icon-office-building"></i> &nbsp;{{ node.label }}</span> 
                            <span v-if='data.type=="rsk"' class="label_name rsk"><img  width="15" src="../../images/rsk2.png" alt="">  {{ node.label }}</span>                           
                            <span v-if='!data.type' class="label_name rsk" style="color:#F49C0B;"><img  width="15" src="../../images/rsk1.png" alt="">  {{ node.label }}</span>  
                        </span>
                        <span v-else>
                            <span v-if='data.type=="ent"' class="label_name"><i  class="el-icon-office-building"></i> &nbsp;{{ node.label }}</span> 
                            <span v-if='data.type=="rsk"' class="label_name rsk"><img  width="15" src="../../images/rsk2.png" alt="">  {{ node.label }}</span>                           
                            <span v-if='!data.type' class="label_name rsk" style="color:#F49C0B;"><img  width="15" src="../../images/rsk1.png" alt="">  {{ node.label }}</span>  
                        </span>
                    </span>
                        
                </el-tree>
            </li>
            <li style="width:75%;">
                    <el-form label-width="70px" :inline="true" size="small" label-position="left">
                        <el-form-item label="公司名称">
                                <el-input clearable placeholder="请输入企业名称" v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button>
                            <el-button  @click="addTask"  type="primary">创建任务</el-button>
                            <el-button  @click="dialogVisible=true"  type="primary">批量导入任务</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            class="table"
                            :data="list" height="55vh"
                            border  v-loading="loading"
                            style="width: 100%">
                            <el-table-column   align="center" label="风险点划分">
                                <el-table-column  label="编码及子项"  align="center">
                                    <el-table-column prop="riskpoint_item1" label="一级子项"></el-table-column>
                                    <el-table-column prop="riskpoint_item2" label="二级子项"></el-table-column>
                                    <el-table-column prop="riskpoint_item3" label="三级子项"></el-table-column>
                                    <el-table-column width="200" align="center" prop="name" label="风险描述"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column  label="安全检查辨识表"  align="center">
                                <el-table-column width="300" align="center" prop="rec_stand" label="辨识评价标准"></el-table-column>
                                <el-table-column prop="danger_result" label="导致后果"></el-table-column>
                                <el-table-column  label="现有管控措施"  align="center">
                                    <el-table-column prop="monit_tec" label="工程技术"></el-table-column>
                                    <el-table-column prop="other_method" label="管控措施"></el-table-column>
                                    <el-table-column prop="monit_edu" label="培训教育"></el-table-column>
                                    <el-table-column prop="single_defense" label="个体防护"></el-table-column>
                                    <el-table-column prop="emerg_handle" label="应急处理"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="作用条件危险性评估表"  align="center">
                                <el-table-column label="风险评估分级">
                                    <el-table-column width="120" prop="risk_level" label="风险级别"></el-table-column>
                                </el-table-column>
                                <el-table-column width="200" prop="monit_method" label="新增风险管控措施或纳入隐患治理及期间的管控措施"></el-table-column>
                            </el-table-column>
                            <el-table-column label="风险管控要求"  align="center">
                                <el-table-column prop="" label="部门"></el-table-column>
                                <el-table-column prop="held_person" label="责任人"></el-table-column>
                                <el-table-column prop="held_person_phone" label="电话"></el-table-column>
                                <el-table-column prop="cycle" label="管控周期"></el-table-column>
                            </el-table-column>
                            <el-table-column fixed="right"
                            prop="zip"  width="150"
                            label="操作">
                            <template slot-scope="scope">
                                <!-- <el-button icon="el-icon-view" size="mini"  type="success">查看</el-button> -->
                                <el-button icon="el-icon-edit" @click="change(scope.row)" size="mini" type="warning">编辑</el-button>
                                <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                            </template>
                            </el-table-column>
                    </el-table>
                    <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
            </li>
        </ul>
                    
    </div>
    <el-dialog title="创建任务" :visible.sync="dialogFormVisible" width="70vw" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form :model="rsk" label-width="100px" :inline="true">
            <el-form-item label="责任人">
                <el-input clearable   v-model="rsk.held_person"></el-input>
            </el-form-item>
            <el-form-item label="责任人电话">
                <el-input clearable   v-model="rsk.held_person_phone"></el-input>
            </el-form-item>
            <el-form-item label="风险描述">
                <el-input clearable  v-model="rsk.name"></el-input>
            </el-form-item>
            <el-form-item label="导致后果">
                <el-input clearable  v-model="rsk.danger_result"></el-input>
            </el-form-item>
            <el-form-item label="风险级别">
                <el-input clearable  v-model="rsk.risk_level"></el-input>
            </el-form-item>
            <el-form-item label="工程技术">
                <el-input clearable  v-model="rsk.monit_tec"></el-input>
            </el-form-item>
            <el-form-item label="管控措施">
                <el-input clearable  v-model="rsk.monit_method"></el-input>
            </el-form-item>
            <el-form-item label="培训教育">
                <el-input clearable  v-model="rsk.monit_edu"></el-input>
            </el-form-item>
            <el-form-item label="个体防护">
                <el-input clearable  v-model="rsk.single_defense"></el-input>
            </el-form-item>
            <el-form-item label="应急处理">
                <el-input clearable  v-model="rsk.emerg_handle"></el-input>
            </el-form-item>
            <el-form-item label="法律依据">
                <el-input clearable  v-model="rsk.rec_stand"></el-input>
            </el-form-item>
            <el-form-item label="新增管控措施">
                <el-input clearable  v-model="rsk.other_method"></el-input>
            </el-form-item>
            <el-form-item label="管控周期">
                <el-input clearable  v-model="rsk.cycle"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-select clearable v-model="rsk.department_id" placeholder="请选择">
                    <el-option v-for="item in departmentList" :key='item.id' :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog
        title="批量导入任务" center
        :visible.sync="dialogVisible"
        width="40%">
        <p style="text-align:center;">请先下载任务模板，按模板格式填充数据然后上传。
            <a style="color:#409eff;" href="https://www.scxjc.club/paper.xlsx">点击下载模板</a> 
            <br> <br>
            <input style="width:160px" id='file' type="file">
        </p>
       
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="upload('file')">确 定</el-button>
        </span>
        </el-dialog>
  </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
	data() {
		return {
            filterText:'',
            dialogFormVisible:false,
            dialogVisible:false,
            form:{name:'',page:1,page_size:20,riskpoint_id:''},
            rsk:{},
            list:[{name:'2333'}],
            data:[],
            props:{
                label:'name'
            },
            total:1,
            loading:false,
            departmentList:[],
            allNode:[]
		};
    },
    watch: {
      filterText(val) {
        this.getRisk();
      }
    },
	methods: {
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        getRisk(){
            this.$api.getRiskpointList({name:this.filterText}).then(res=>{
                this.data=res.data.data;
                this.spreadRsk();
            })
        },
        addTask(){
            if(this.rsk.riskpoint_id){
                this.dialogFormVisible=true
            }else{
                this.$message.error('请先选择左侧要创建任务的风险点！');
            }
        },
        edit(data){
            if(data.type != 'ent'){
                this.form.riskpoint_id=data.id;
                this.getData()  
                this.findRsk(data.id)            
                //获取风险点详情
                this.$api.getRiskpoint({id:data.id}).then(res=>{
                        let _data=res.data.data;
                        this.rsk={
                                riskpoint_id:_data.id,
                                riskpoint_name:_data.name,
                                enterprise_name:_data.enterprise_name,
                                enterprise_id:_data.enterprise_id,
                        }
                        //获取部门
                        this.$api.getDepartmentList({enterprise_id:_data.enterprise_id}).then(res=>{
                            this.departmentList=res.data.data.list;
                        })
                        
                })
            }
        },
        getData(){
            this.loading=true
            var parm=this.form;
            this.$api.getMonittaskList(parm).then(res=>{
                let list=res.data.data.list
                for(let i=0;i<list.length;i++){
                    let item=list[i].riskpoint_item.split('|');
                    list[i].riskpoint_item1=item[0]
                    list[i].riskpoint_item2=item[1]
                    list[i].riskpoint_item3=item[2]?item[2]:''
                }
                this.list=list
                this.total=res.data.data.total
                this.loading=false
            })
        },
        spreadRsk(){
            var data=this.data,all=this.allNode;
            spread(data)
            function spread(data){
                data.forEach(item=>{
                    all.push({name:item.name,id:item.id,parent_id:item.parent_id})
                    if(item.children.length>0){
                        spread(item.children)
                    }
                })
            }
            this.allNode=all
        },
        findRsk(id){
            var list=this.allNode,item_rsk=[];
            getItem(id)
            function getItem(id){
                list.forEach(item=>{
                    if(item.id == id){
                        item_rsk.push(item.name)
                        if(item.parent_id){
                            getItem(item.parent_id)
                        }
                    }
                })
            }
            item_rsk=item_rsk.reverse();
            this.riskpoint_item=item_rsk.join('|');
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteMonittask({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        add(){
            let parm=this.rsk;
            parm.riskpoint_item=this.riskpoint_item;
            console.log(parm)
            // if(!parm.name){
            //     this.$message.error('请输入部门名称');
            //     return;
            // }
            if(parm.id){     
                this.$api.updateMonittask(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '修改成功！',type: 'success'});
                        this.getData();
                        this.dialogFormVisible=false;
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }else{
                this.$api.saveMonittask(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '添加成功！',type: 'success'});
                        this.getData();
                        this.dialogFormVisible=false;
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }
            
        },
        change(data){
            //获取部门
            this.$api.getDepartmentList({enterprise_id:data.enterprise_id}).then(res=>{
                this.departmentList=res.data.data.list;
                this.dialogFormVisible=true;
                this.rsk={...data}
            })
            
        },
        upload(type){
          var file=document.getElementById(type).files;
          var data=new FormData();
            data.append("file",file[0])
          this.$api.uploadMonittask(data).then(res=>{
              if(res.data.code==0){
                      this.dialogVisible=false
                      this.getData();
                      this.$message({message: '创建成功！',type: 'success'});
                  }else{
                      this.$message.error(res.data.message);
                  }
          })
      },
    },
	created(){
        this.getRisk()
        this.getData()
	}
};
</script>