associateTree.vue

<template>
  <el-dialog :title="$t('VideoShopTour.associationCheckItem')" :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">{{$t('dialog.name')}}</li>
        <li class="invoice-item">{{$t('VideoShopTour.explain')}}</li>
        <li class="invoice-item score">{{$t('VideoShopTour.scoreNum')}}</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" class="tipContent">{{data.intro}}</div>
              <span>{{$t('VideoShopTour.introduction')}}: {{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" class="tipContent">{{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:1,
          accountId: this.$cookie.get('accountId')
        },
        isSearch:false
      }
    },
    methods:{
      dialogInit(val,type){
        this.isShow = true;
        this.isSearch = type?true:false;
        this.getSopTypeList(val)
      },
      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])
          }
        }
        if(checkFilterArr.length<1 && !this.isSearch){
          this.$message({
            message: this.$t('pholder.select'),
            type: 'error'
          });
          return
        }else{
          this.$emit('getSop',checkFilterArr)
          this.closeDialog()
        }
      },
      getSopTypeList(val) {
        this.tableData = [];
        this.$api.videoShopTourReport.getPatrolSopTypeTree(
            {
              system: 0,
              accountId: this.$cookie.get('accountId')
            },
            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 && item.sopProjects != '[]' && item.sopProjects.length>0){
                  item.span= true;
                }
              })
              if(val && val.length>0){
                val.forEach(item=>{
                  this.defaultKeys.push(item.id)
                })
              }
            }
          })
      },
      closeDialog() {
        this.isShow = false;
      }
    }
  }
</script>

<style scoped="scoped" lang="less">
  .tipContent{
    max-width: 200px;
  }
  .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>