associateTree.vue

<template>
  <el-dialog title="关联SOP" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
    <div class="invoice-list">
      <ul class="invoice-header">
        <li class="invoice-item">名称</li>
        <li class="invoice-item">说明</li>
        <li class="invoice-item score">分值</li>
      </ul>
      <el-tree
      class="tree"
        :props="props"
        :data="tableData"
        show-checkbox
        ref="tree"
        node-key="id"
        default-expand-all
        :default-checked-keys='defaultKeys'
        >
        <!-- 使用自定义,需要加slot-scope,返回两个值,node是当前节点指定的对象
        data是当前节点的数据 -->
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div class="total_info_box clearfix" v-if="data.span">
            <span>{{data.name}}</span>
            <el-tooltip placement="top" v-if="data.intro">
              <div slot="content">{{data.intro}}</div>
              <span>简介: {{data.intro.length>20?data.intro.substring(0,18)+'...':data.intro}}</span>
            </el-tooltip>
          </div>
          <span v-else class="table_info_node">
            <!-- {{data}} -->
            <span class="table_info_item">{{data.name}}</span>
            <span class="table_info_item">
              <el-tooltip placement="top" v-if="data.intro">
                <div slot="content">{{data.intro}}</div>
                <span>{{data.intro.length>20?data.intro.substring(0,18)+'...':data.intro}}</span>
              </el-tooltip>
            </span>
            <span class="table_info_item score">{{data.score}}</span>
          </span>
        </div>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
      <el-button type="primary" @click="addSubmit()" class="dialog-btn dialog-confirm-btn">
        {{$t('dialog.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        isShow:false,
        tableData: [],
        defaultKeys:[],
        props: {
          label: 'name',
          children: 'sopProjects'
        },
        queryForm:{
          system:0,
          accountId: this.$cookie.get('accountId')
        },
        currObj:{}
      }
    },
    methods:{
      dialogInit(record){
        this.isShow = true;
        this.currObj = record
        this.getSopTypeList(record)
      },
      addSubmit(){
        let checkedNode = this.$refs.tree.getCheckedNodes()
        let checkFilterArr = []
        for (var i = 0; i < checkedNode.length; i++) {
          if(checkedNode[i].sopTypeId){
            checkFilterArr.push(checkedNode[i])
          }
        }
        let newArr = []
        checkFilterArr.forEach(item=>{
          newArr.push(item.id)
        })
        let parmas = {
          mallId:this.currObj.mallId,
          accountId:this.$cookie.get('accountId'),
          gateId:this.currObj.id,
          sopProjectIds:newArr
        }
        this.$api.videoShopTourReport.associatePatrolSopProject(parmas)
          .then((res) => {
            let result = res.data;
            if(result.code==200){
              this.$message({
                message: result.msg,
                type: 'success'
              });
              this.isShow = false
            }else{
              this.$message({
                message: result.msg,
                type: 'error'
              });
            }
          })
      },
      getSopTypeList(record) {
        this.tableData = [];
        this.$api.videoShopTourReport.getPatrolSopTypeTree(
            {
              accountId: record.accountId,
              system: 0,
              gateId: record.id,
            },
            null,
            true
          )
          .then(data => {
            let result = data.data;
            if(result.code == '200'){
              this.tableData = result.data
              this.defaultKeys = []
              this.tableData.forEach(item=>{
                if(item.sopProjects.length>0){
                  item.span = true;
                  let sopProjects = item.sopProjects
                  sopProjects.forEach(item1=>{
                    if(item1.associated==1){
                      this.defaultKeys.push(item1.id)
                    }
                  })
                }
              })
            }
          })
      },
      closeDialog() {
        this.isShow = false;
      }
    }
  }
</script>

<style scoped="scoped" lang="less">
  .manage-dialog{
    /deep/.el-dialog{
      width: 800px;
    }
    .tree{
      height: 500px;
    }
    .invoice-list {
      border: 1px solid #ebeef5;
      margin-top: 10px;
      .invoice-header {
        background-color: #f8f8f9;
        display: flex;
        padding-left: 63px;
        border-bottom: 1px solid #ebeef5;
        .invoice-item {
          padding: 10px;
          padding-right: 0;
          flex: 3;
          border-left: 1px solid #ebeef5;
          padding-left: 10px;
        }
        .score{
          flex: 1;
        }
      }
      /deep/.el-tree-node__content {
        background: #f2f2f2;
        height: 40px;
      }
      /deep/.el-tree-node__children {
        .el-tree-node__content {
          background: #fff;
          border-bottom: 1px solid #ebeef5;
        }
      }
      .custom-tree-node {
        width: 100%;
        height: 100%;
        display: flex;
        .total_info_box {
          background: #f2f2f2;
          line-height: 40px;
          span{
            float: left;
            font-size: 12px;
            margin: 0 15px;
            i{
              display: inline-block;
              margin-right: 3px;
            }
          }
        }
        .table_info_node {
          display: flex;
          flex: 1;
          height: 100%;
          .table_info_item {
            flex: 3;
            height: 100%;
            border-left: 1px solid #ebeef5;
            padding-left: 10px;
            line-height: 40px;
          }
          .score{
            flex: 1;
          }
        }
      }
    }
  }
</style>