baianxi_admin/src/views/task/Danger.vue

<style lang="scss">
    .danger{
        display: flex;
        // justify-content: space-between;
        .companies{
                height: 75vh;
                overflow: auto;
                margin-right: 10px;
                overflow-x: hidden;
        }
        &>li{
            width: 45%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
            margin-right: 20px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .rsk{
                        color: #DF5706;
                        img{
                            position: relative;
                            top:2px;
                        }
                    }
                    .edit{
                        float: right;
                        width: 80px;
                        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">
        <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.stop="() => edit(data)" >
                        <span v-if='data.type=="ent"' class="label_name"><i  class="el-icon-office-building"></i>  {{ 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 class="edit" v-if='utype!=2&&utype!=1'>
                            <el-button
                                type="text"
                                size="mini"
                                @click.stop="() => append(data)">
                                <i class="el-icon-plus"></i>
                            </el-button>
                            <el-button v-if='data.type!="ent"'
                                type="text"
                                size="mini"
                                @click.stop="() => edit(data)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                            <el-button v-if='data.type!="ent"'
                                type="text"
                                size="mini"
                                @click.stop="() => remove(node,data)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </span>
                    </span>
                        
                </el-tree>
            </li>
            <li>
                <el-form class="form" label-width="90px" label-position='right' size="small">
                    <el-form-item label="公司名称">
                        <el-input v-model="form.enterprise_name" disabled></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="风险点名称" >
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input :rows="4" type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="二维码">
                        <img  width="150" :src="form.qrcode" alt="">
                    </el-form-item>
                    <el-form-item v-if='utype!=2'>
                        <el-button @click="save" type="primary">保存</el-button>
                        <el-button @click="form={}" type="info">取消</el-button>
                    </el-form-item>
                </el-form>
            </li>
        </ul>
    </div>
  </section>
</template>
<script>
export default {
	data() {
		return {
            curNode:null,
            filterText:'',
            data:[],
            form:{},
            props:{
                label:'name'
            },
		};
    },
    watch: {
      filterText(val) {
        this.getData();
      }
    },
	methods: {
        addNode(data,curnode,target){
            let curid = curnode.id;
            let curname = curnode.name;         
            data.forEach((item,i)=>{
                if(item.id==curid&&item.name==curname){
                    const newChild = { id: target.id, name: target.name, children: [] };
                    if (!item.children) {
                    this.$set(item, 'children', []);
                    }
                    item.children.push(newChild)
                }else{
                    this.addNode(item.children,curnode,target)
                }
            })
        },
        editNode(data,curnode,target){
            let curid = curnode.id;
            let curname = curnode.name;
            data.forEach((item,i)=>{
                if(item.id==curid&&item.name==curname){
                    const newChild = { id: target.id, name: target.name, children: [] };
                    // if (!item.children) {
                    //     this.$set(item, 'children', []);
                    // }
                    // item.children.push(newChild)
                    this.$set(item,"name",target.name)
                }else{
                    this.editNode(item.children,curnode,target)
                }
            })
        },
        getData(){
            this.$api.getRiskpointList({name:this.filterText}).then(res=>{
                this.data=res.data.data
                this.form.enterprise_name=res.data.data[0].name
                this.form.enterprise_id=res.data.data[0].id
                this.curNode = res.data.data[0];
            })
        },
        edit(data){
            console.log(data)
            this.curNode = data;
            this.$api.getRiskpoint({id:data.id}).then(res=>{
                let data=res.data.data;
                this.form=data
            })
        },
        append(data){
            // console.log(this.data,33333333333)
            this.curNode = data;
            // this.addNode(this.data,data,target)
            console.log(data)
            // this.show=1;
            if(data.type == 'ent'){
                this.form={
                        enterprise_name:data.name,
                        enterprise_id:data.id,
                        name:''
                }
            }else{
                this.$api.getRiskpoint({id:data.id}).then(res=>{
                    let data=res.data.data;
                    this.form={
                        parent_id:data.id,
                        parent_name:data.name,
                        enterprise_name:data.enterprise_name,
                        enterprise_id:data.enterprise_id,
                        name:''
                    }
                })
            }
            
        },
        remove(node,data){
           this.$confirm('确定删除?', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteRiskpoint({id:data.id}).then(res=>{
                        this.$message({message: '删除成功！',type: 'success'});
                        const parent = node.parent;
                        const children = parent.data.children || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                        // this.getData()
                    })
            })
          
        },
        save(){
          var parm=this.form;
          if(!parm.enterprise_name){
                this.$message.error('请选择公司名称');
                return;
          }
          if(!parm.name){
                this.$message.error('请输入风险点名称');
                return;
          }
          if(parm.id){
              this.$api.updateRiskpoint(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '修改成功！',type: 'success'});
                      let newNode = {id:res.data.data,name:this.form.name,children:[]}
                      this.editNode(this.data,this.curNode,newNode)
                    //   this.getData()
                      this.form={}
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }else{
              this.$api.saveRiskpoint(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '添加成功！',type: 'success'});
                      let newNode = {id:res.data.data,name:this.form.name,children:[]}
                      this.addNode(this.data,this.curNode,newNode)
                    //   this.getData()
                      this.form={}
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }
        },
    },
	created(){
        this.getData();
        this.utype=localStorage.getItem('utype')
	}
};
</script>