foton-laws-system-front/src/components/mechanismTree/index.vue

<template>
  <div class="roleTree">
    <el-drawer
      :title="isTitle"
      :visible.sync="isVisible2"
      :wrapperClosable="false"
      @close="handleTreeDrawerCancel"
      size="400px">
      <el-form
        ref="attributeEO"
        class="label-input-form"
        :inline="true"
      >
        <el-form-item class="form-item-disabled" style="margin: 10px;">
          <el-input
            v-model="filterText"
            placeholder="请输入部门"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer-content">
        <el-tree
          class="filter-tree tree-line"
          :data="treeData"
          :props="defaultProps"
          :check-strictly="true"
          :current-node-key="nodeKeyId"
          node-key="id"
          :filter-node-method="filterNode"
          highlight-current
          :auto-expand-parent="true"
          show-checkbox
          ref="tree"
          :load="loadNode"
          @check="drawerCheck"
          :expand-on-click-node="false"
          @node-click="handleNodeClick">
         <span class="custom-tree-node" slot-scope="{ node, data }">
           <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
           <span> {{ node.label }} </span>
         </span>
        </el-tree>
      </div>
      <div id="roleFormButton" class="demo-drawer-footer">
        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">
          确定
        </el-button>

        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleTreeDrawerCancel">取消
        </el-button>
      </div>
      <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "MechanismTree",
  props: {
    checkBox: { // 单选/多选
      type: Boolean,
      default: false,
    },
    isTitle: { // 标题
      type: String
    },
    isVisible: { // drawer开关
      type: Boolean,
      default: false,
    },
    nodeList: { // 回显
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      roleList: [],
      nodeKeyId: '',
      isVisible2: false,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: (data, node) => {
          if (!node.disabled) {
            return true
          }
        }
      },
      treeData1: [],
      treeData: [],
      open1: true,
      treeLoading: false,
      roleRow: {}
    }
  },
  methods: {
    treeClass() {

    },
    handleTreeDrawerCancel() {
      this.filterText = ''
      this.isVisible2 = false
    },
    saveUserInfo() {
      this.isVisible2 = false
      this.$emit('checkedRole', this.roleList)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.treeData);
      }
    },
    drawerCheck(data) {
      if (this.checkBox) {
        // 单选判断
        var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
        if (getlist.length == 1) {
          this.roleRow = getlist[0]
        } else {
          this.$refs.tree.setCheckedKeys([data.id]);
          this.roleRow = this.$refs.tree.getCheckedNodes()[0]
        }
        this.roleList = [this.roleRow]
      } else {
        this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
      }
    },
    getTree() {
      this.$http.get('SarInstitution/institution', {}, {
        _this: this,
        loading: 'treeLoading'
      }, res => {
        this.treeData = res.data
        console.log(this.treeData);
        this.nodeKeyId = this.treeData[0].id
        this.id = res.data[0].id
      }, e => {
        console.log(e);
      })
    },
    handleNodeClick(data) {
      this.id = data.id
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  watch: {
    isVisible(val) {
      this.isVisible2 = val
    },
    isVisible2(val) {
      this.$emit('update:isVisible', val)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getTree()
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tree-node__content {
  padding-left: 0px !important;
}

/deep/ .is-leaf {
  background-image: none;
  background-size: 100% 100%;
}
/deep/ .is-leaf-none {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('~@/assets/images/shangqi/img/personnel.png');
  background-size: 100% 100%;
}

/deep/ .is-show {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('~@/assets/images/shangqi/img/mechanism.png');
  background-size: 100% 100%;
}

/deep/ .tree-line {
  min-height: calc(100vh - 170px);
  .el-tree-node {
    position: relative;
    padding-left: 0px; // 缩进量
    line-height: 30px;
  }

  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-left: 1px dashed #858990e0;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 11px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #858990e0;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>