<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <div class="container_item">
        <el-input v-model="filterText"  class="filter-item input_item"   @keyup.enter.native="handleFilter" />
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item add_plus" type="primary" icon="el-icon-my-add" @click="addSameLevel">
        {{ $t('table.add') }}
      </el-button>
    </div> -->
    <el-row :gutter="10" style="background: #ffffff">
      <el-col :span="12">
        <div :style="{ height: nodeHeight + 'px' }" class="flex-tree">
          <el-scrollbar style="height: 100%">
            <el-tree
              class="my-tree"
              id="myTree"
              ref="myTree"
              style="overflow-y: scroll"
              :data="filterTree"
              :indent="0"
              node-key="id"
              :current-node-key="currentNodeKey"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              @node-contextmenu="nodeContextmenu"
              :render-content="renderContent"
            ></el-tree>
          </el-scrollbar>

          <div
            class="tree-menu"
            ref="treeMenu"
            id="tree-menu"
            v-show="treeMenuVisiable"
          >
            <div class="tree-menu-body">
              <div class="tree-menu-item" @click="addSameLevel">
                <img src="@/assets/images/add_same_level.png" alt="" />新增同级
              </div>
              <div class="tree-menu-item" @click="addChildLevel">
                <img src="@/assets/images/add_child_level.png" alt="" />新增子级
              </div>
              <div class="tree-menu-item" @click="nodeEdit">
                <img src="@/assets/images/node_edit.png" alt="" />节点编辑
              </div>
              <div class="tree-menu-item" @click="nodeDel">
                <img src="@/assets/images/node_del.png" alt="" />节点删除
              </div>
              <div class="tree-menu__arrow" id="treeArrow"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="node-det-d" v-if="nodeEditStatus">
          <div class="node-det">
            <Ntitle title="菜单维护" />
            <div class="node-det-cnt">
              <el-row :gutter="10">
                <el-col :span="15">
                  <el-form
                    label-position="right"
                    label-width="130px"
                    :model="form1"
                  >
                    <el-form-item
                      :label="$t('menu.menuName') + '：'"
                      :label-width="formLabelWidth"
                      :class="nodeStatus !== 'nodeEdit' ? 'unabled':'require'"
                    >
                      <el-input
                        v-model="form1.name"
                        autocomplete="off"
                        :disabled="nodeStatus !== 'nodeEdit'"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      :label="$t('menu.menuType') + '：'"
                      :label-width="formLabelWidth"
                      :class="nodeStatus !== 'nodeEdit' ? 'unabled':'require'"
                    >
                      <el-select v-model="form1.menuType" :disabled="nodeStatus !== 'nodeEdit'">
                        <el-option
                          label="菜单"
                          key="菜单"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="按钮"
                          key="按钮"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :label="$t('menu.urlAddress') + '：'"
                      :label-width="formLabelWidth"
                      :class="nodeStatus !== 'nodeEdit' ? 'unabled':'require'"
                      v-if="form1.menuType === 1"
                    >
                      <el-input
                        v-model="form1.url"
                        autocomplete="off"
                        :disabled="nodeStatus !== 'nodeEdit'"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      :label="$t('menu.perssion') + '：'"
                      :label-width="formLabelWidth"
                      :class="nodeStatus !== 'nodeEdit' ? 'unabled':'require'"
                    >
                      <el-input
                        v-model="form1.scope"
                        autocomplete="off"
                        :disabled="nodeStatus !== 'nodeEdit'"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="dialog-footer node-btn" v-if="nodeStatus == 'nodeEdit'">
            <el-button
              v-waves
              class="filter-item flex_align"
              type="primary"
              icon="el-icon-my-tijiao"
              @click="submit1Handle"
            >
              {{ $t("table.sbumit") }}
            </el-button>
            <el-button
              v-waves
              class="filter-item flex_align"
              type="primary"
              icon="el-icon-my-quxiao"
              @click="menuProtectCancel"
            >
              {{ $t("table.cancel") }}
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增或者编辑弹框-->
    <el-dialog
    :title="nodeStatus | statusFilter"
    :visible.sync="dialogFormVisible"
    v-el-drag-dialog
    :close-on-click-modal="false"
    width="499px">
      <div style="padding: 20px;">
        <el-form label-position="right" label-width="130px" :model="form" >
          <el-form-item  :label="$t('menu.menuName')+'：'" :label-width="formLabelWidth" class="require">
            <el-input v-model="form.name" utocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('menu.menuType') + '：'"
            :label-width="formLabelWidth"
            class="require"
          >
            <el-select v-model="form.menuType">
              <el-option label="菜单" key="菜单" :value="1"></el-option>
              <el-option label="按钮" key="按钮" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('menu.urlAddress') + '：'"
            :label-width="formLabelWidth"
            class="require"
            v-if="form.menuType === 1"
          >
            <el-input v-model="form.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('menu.perssion') + '：'"
            :label-width="formLabelWidth"
            class="require"
          >
            <el-input v-model="form.scope" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <template v-if="nodeStatus === 'nodeDel'">
            <el-button
              v-waves
              class="filter-item flex_align"
              type="primary"
              icon="el-icon-my-delete"
              @click="submitHandle"
            >
              {{ $t("table.delete") }}
            </el-button>
          </template>
          <template v-else>
            <el-button
              v-waves
              class="filter-item flex_align"
              type="primary"
              icon="el-icon-my-tijiao"
              @click="submitHandle"
            >
              {{ $t("table.sbumit") }}
            </el-button>
          </template>

          <el-button
            v-waves
            class="filter-item flex_align"
            type="primary"
            icon="el-icon-my-quxiao"
            @click="cancelEdit()"
          >
            {{ $t("table.cancel") }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves' // waves directive
import http from '@/api/http'
import Ntitle from '@/components/Ntitle'
import { validatenull } from '@/utils/validate.js'
export default {
  name: '',
  directives: { waves, elDragDialog },
  filters: {
    statusFilter(status) {
      const statusMap = {
        addSameLevel: "新增同级",
        addChildLevel: "新增子级",
        nodeEdit: "节点编辑",
        nodeDel: "节点删除",
      };
      return statusMap[status];
    },
  },
  components: { Ntitle },
  data() {
    return {
      filterText: undefined,
      query: {},
      nodeHeight: 0,
      treeMenuVisiable: false, //右键显示框
      dataTree: [],
      filterTree: [],
      defaultProps: {
        children: "childs",
        label: "productCode",
      },
      currentNodeKey: undefined,
      dialogFormVisible: false,
      deleteVisible: false, //节点删除弹窗
      formLabelWidth: "110px",
      form: {
        name: undefined, // 菜单名称,
        url: undefined, // url地址,
        menuType: undefined, // 菜单类型,
        scope: undefined, // 前端权限标示
      },
      form1: {
        name: undefined, //菜单名称 ,
        url: undefined, //url地址 ,
        menuType: undefined, // 菜单类型,
        scope: undefined, // 前端权限标示
      },
      nodeInfo: {}, //节点点击信息
      nodeStatus: undefined, //
      //定义点击次数,默认0次
      nodeClickCount: 0,
      nodePreCode: undefined,
      nodeCurCode: undefined,
      nodeEditStatus: false, //菜单维护
      pageNum: 1,
      pageSize: 99,
      childId: "", //子级id
    };
  },
  watch: {
    // treeMenuVisiable(value) {
    //   if (value) {
    //     document.body.addEventListener("click", this.closeMenu);
    //   } else {
    //     document.body.removeEventListener("click", this.closeMenu);
    //   }
    // },
  },
  created() {
    this.getMenuTree();
  },
  mounted() {
    this.$nextTick(() => {
      this.nodeHeight = window.innerHeight - 200;
    });
  },
  methods: {
    // 新增同级、子级
    submitHandle() {
      let { name, url, menuType, scope } = this.form;
      if (validatenull(name)) {
        this.$message.error("菜单名称不能为空");
        return;
      }
      if (validatenull(menuType)) {
        this.$message.error("菜单类型不能为空");
        return;
      }
      if (validatenull(scope)) {
        this.$message.error('前端权限标识不能为空')
        return
      }
       if (menuType === 1 && validatenull(url)) {
        this.$message.error('url地址不能为空')
        return
      }
      let params = {
        url: url,
        name: name,
        menuType: menuType,
        scope: scope,
        status: 1,
      };
      if (this.nodeStatus === "addSameLevel") {
        Object.assign(params, { pid: this.nodeInfo.pid });
      } else {
        Object.assign(params, { pid: this.childId });
      }
      // 02、新增同级、新增子级
      http
        .post("/sys/menu/create", params)
        .then(() => {
          this.$message.success("新增成功");
          this.dialogFormVisible = false;
          Object.keys(this.form).forEach((item) => {
            this.form[item] = undefined;
          });
          this.getMenuTree(); // 重新加载tree
        })
        .catch(() => {});
    },

    // 菜单维护提交
    submit1Handle() {
      let { name, url, menuType, scope, id } = this.form1;
      if (validatenull(name)) {
        this.$message.error("菜单名称不能为空");
        return;
      }
      if (validatenull(url)) {
        this.$message.error('url地址不能为空')
        return
      }
      if (validatenull(menuType)) {
        this.$message.error("菜单类型不能为空");
        return;
      }
      if (validatenull(scope)) {
        this.$message.error('前端权限标识不能为空')
        return
      }
      let params = {
        url: url,
        name: name,
        menuType: menuType,
        scope: scope,
        id: id,
      };
      // 更新菜单信息
      http
        .post("/sys/menu/update", params)
        .then((res) => {
          this.$message.success(res.data);
          this.nodeEditStatus = false;
          this.getMenuTree(id); // 重新加载tree
        })
        .catch(() => {});
    },
    // 菜单维护取消
    menuProtectCancel() {
      this.nodeEditStatus = false;
    },
    // 新增同级
    addSameLevel() {
      this.dialogFormVisible = true;
      this.form = {}
      this.treeMenuVisiable = false
      this.nodeStatus = "addSameLevel";
    },
    // 新增子级
    addChildLevel() {
      this.dialogFormVisible = true;
      this.treeMenuVisiable = false
      this.nodeStatus = "addChildLevel";
      let { childs, id } = this.nodeInfo;
      // 有子级，就传子级的pid，没有子级，就传当前菜单的id
      if (childs && childs.length > 0) {
        this.childId = childs[0].pid;
      } else {
        this.childId = id;
      }
    },
    // 节点编辑
    nodeEdit() {
      this.nodeStatus = 'nodeEdit'
      this.nodeEditStatus = true;
      this.treeMenuVisiable = false
      this.form1 = { ...this.nodeInfo };
      //右键节点编辑的时候，将当前节点设为选中
      this.$refs.myTree.setCurrentKey(this.form1.id);
    },

    // 节点删除
    nodeDel() {
      this.nodeStatus = 'nodeDel'
       this.$confirm('是否删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: this.nodeInfo.id
          }
          http.post("/sys/menu/delete", params).then((res) => {
          this.$message.success(res.data);
          this.getMenuTree(); // 重新加载tree
      });
        }).catch(() => {});
    },

    // 01、获取菜单树
    getMenuTree(id) {
      http
        .post("/sys/menu/queryTree", {
          cpage: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.filterTree = [...res.data];
          this.dataTree = [...res.data];
          this.$nextTick(() => {
            if (id) {
              this.currentNodeKey = id;
              this.$refs.myTree.setCurrentKey(id);
            }
          });
        })
        .catch((err) => {});
    },

    // 节点渲染
    renderContent(h, { node, data, store }) {
      let { pid, name, menuType } = data;
      let { isLeaf, level } = node;
      let imgPath = "";
      if (pid === 0 || menuType === 1) {
        imgPath = require("@/assets/images/tree/folder.png");
      } else {
        imgPath = isLeaf
          ? require("@/assets/images/tree/leaf.png")
          : require("@/assets/images/tree/folder.png");
      }
      if (node.data.menuType === 2) { //按钮样式
        return (
          <span class="custom-tree-node">
            <span class="node-cnt1">
              <img class="node-img" src={imgPath} />
              <span class="node-sp">{name}</span>
            </span>
          </span>
        );
      } else if (node.data.childs.length === 0 && node.data.menuType === 1 && node.data.menuLevel === 1) {
        return (
          <span class="custom-tree-node">
            <span class="node-cnt2">
              <img class="node-img" src={imgPath} />
              <span class="node-sp">{name}</span>
            </span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node">
            <span class="node-cnt">
              <img class="node-img" src={imgPath} />
              <span class="node-sp">{name}</span>
            </span>
          </span>
        );
      }
    },

    closeMenu() {
      this.treeMenuVisiable = false;
    },

    // 节点点击
    handleNodeClick(data) {
      this.treeMenuVisiable = false;
      this.nodeEditStatus = true;
      this.nodeStatus = ''
      // this.nodeInfo = {};
      // this.nodeInfo = { ...data }
      this.form1 = { ...data };
      // this.nodeCurCode = this.nodeInfo.productCode
      // if (this.nodeCurCode === this.nodePreCode) {
      //   this.nodeClickCount ++
      // } else {
      //   this.nodeClickCount = 1
      //   this.nodePreCode = this.nodeInfo.productCode
      // }

      // if (this.nodeClickCount > 2) {
      //   return;
      // }
      // //计时器,计算300毫秒为单位,可自行修改
      // this.timer = window.setTimeout(() => {
      //   if (this.nodeClickCount === 1) {
      //     this.nodeClickCount = 0;
      //     //单击事件处理
      //     // console.log(data);
      //     // this.nodeQuery()
      //   } else if (this.nodeClickCount === 2) {
      //     this.nodeClickCount = 0;
      //     //双击事件
      //     this.nodeEdit()
      //   }
      // }, 500);
    },
    // 当某一节点被鼠标右键点击时会触发该事件
    nodeContextmenu(event, data, Node) {
      this.nodeInfo = {};
      this.nodeInfo = { ...data };
      let { menuType } = this.nodeInfo
      if (menuType === 2) {
        this.treeMenuVisiable = false
        return false
      }
      this.treeMenuVisiable = true
      document.addEventListener("click",this.closeMenu)
      let treeMenu = document.getElementById("tree-menu");
      this.$nextTick(() => {
        let { clientX, clientY, screenY } = event;
        let tHei = treeMenu.clientHeight || 84;
        let xVal = document.body.clientHeight - clientY;
        if (tHei === 84) {
          xVal -= 20;
        } else {
          xVal = xVal + 0;
        }
        if (xVal < tHei) {
          console.log(event.clientX - 178, event.clientY - 186 + xVal);
          treeMenu.style.cssText = `left: ${event.clientX - 178}px; top: ${
            event.clientY - 186 - xVal
          }px`;
          document.getElementById("treeArrow").style.cssText = `top:${
            xVal - 20
          }px`;
        } else {
          treeMenu.style.cssText = `left: ${event.clientX - 178}px; top: ${
            event.clientY - 186
          }px`;
          document.getElementById("treeArrow").style.cssText = `top: 40px`;
        }
      });
    },

    closeMenu(){
      this.treeMenuVisiable = false
      document.removeEventListener('click',this.closeMenu)
    },

    // 树查询
    handleFilter() {
      if (this.filterText) {
        this.filterTree = this.returnFilterTree(
          this.dataTree,
          this.filterText,
          []
        );
      } else {
        this.filterTree = [...this.dataTree];
      }
    },

    /**
     * tree数据遍历
     * @param {Array} json
     * @param {String} filterText
     * @param {Array} temp
     * @returns
     */
    returnFilterTree(json, filterText, temp) {
      for (let i = 0; i < json.length; i++) {
        let item = json[i];
        if (item.name === filterText || item.name.includes(filterText)) {
          temp.push(item);
        }
        if (item && item.childs.length !== 0) {
          this.returnFilterTree(item, filterText, temp);
        }
      }
      return temp;
    },

    cancelEdit() {
      this.dialogFormVisible = false;
      // this.treeMenuVisiable = false
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/font.scss";
::v-deep .el-tree-node {
  &.is-current {
    .el-tree-node::before {
      content: "";
      height: 100%;
      width: 1px;
      position: absolute;
      left: 16px;
      top: 0;
      border-width: 1px;
      border-left: 1px dashed #707070;
    }
  }
  .el-tree-node__content {
      .node-cnt {
      .node-img {
        width: 20px;
        height: 18px;
      }
    }
  }
}
.add_info {
  padding: 0 60px;
  p {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #212121;
    span {
      color: #3d5596;
    }
  }
}

.app-container {
  padding: 40px !important;
  background: #ffffff;
}
::v-deep .my-tree {
  overflow-y: scroll;
  .el-tree-node__children {
    padding-left: 16px;
  }
}

.my-tree ::v-deep .el-tree-node__content {
  height: 32px !important;
}
.my-tree::-webkit-scrollbar {
  width: 0 !important;
}

.el-form .el-form-item {
  margin-bottom: 8px !important;
}

.node-det {
 background: rgba(212, 235, 254, 0.11);
  font-size: 13px;
  color: #212121;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid #9EAACA;
  box-shadow: 0px 1px 4px 0px rgba(22, 136, 193, 0.35);
  .node-det-cnt {
    flex: 1;
    padding: 10px;
  }
}
.node-btn {
  padding: 10px 0;
}
.tree-menu {
  position: absolute;
  top: 10px;
  width: 125px;
  background: #ffffff;
  box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.3);
  .tree-menu-body {
    position: relative;
    .tree-menu-item {
      height: 28px;
      font-size: 13px;
      color: #212121;
      font-family: "SourceHanSansCN";
      display: flex;
      align-items: center;
      padding: 0 10px;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 3px;
      }
      &:hover {
        background: #e5f3ff;
      }
    }
    .tree-menu__arrow {
      content: " ";
      border-width: 6px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      top: 10px;
      left: -4px;
      border-right-color: #fff;
      border-left-width: 0;
    }
  }
}
.flex-tree {
  position: relative !important;
  padding: 8px;
  background-color: #fff;
  .el-scrollbar {
    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden !important;
      // .el-scrollbar__view {
      //   height: 100%!important;
      // }
    }
  }
}

// tree 提示线
.my-tree {
  ::v-deep .el-tree-node {
    position: relative;
  }
  ::v-deep .el-tree-node__children {
    padding-left: 16px; // 缩进量
    overflow: inherit;
    background: #ffffff;
  }

  // 竖线
  ::v-deep .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: 16px;
    // top: 10px;//导致鼠标移动到
    border-width: 1px;
    border-left: 1px solid #707070;
  }
  // 当前层最后一个节点的竖线高度固定
  ::v-deep .el-tree-node:last-child::before {
    height: 15px !important; // 可以自己调节到合适数值
  }

  // 横虚线
  ::v-deep .el-tree-node {
    .el-tree-node__children {
      margin-left: 3px;
      .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: 16px;
        top: 0;
        border-width: 1px;
        border-left: 1px dashed #707070;
      }
      .el-tree-node::after {
        content: "";
        width: 24px;
        position: absolute;
        left: 18px;
        top: 15px;
        border-width: 1px;
        border-top: 1px dashed #707070;
      }
      .el-tree-node__content {
        // 子节点距离左边的距离
        padding-left: 35px !important;
      }
      // 第三级菜单
      .el-tree-node {
        .el-tree-node__children {
          .el-tree-node::before {
            content: "";
            height: 100%;
            width: 1px;
            position: absolute;
            left: 32px;
            top: 0;
            border-width: 1px;
            border-left: 1px dashed #707070;
            z-index: 2;
          }
          .el-tree-node::after {
            content: "";
            width: 24px;
            position: absolute;
            left: 34px;
            top: 15px;
            border-width: 1px;
            border-top: 1px dashed #707070;
          }
          .el-tree-node__content {
            // 子节点距离左边的距离
            padding-left: 55px !important;
          }
          // 第四级菜单
          .el-tree-node {
            .el-tree-node__children {
              .el-tree-node::before {
                content: "";
                height: 100%;
                width: 1px;
                position: absolute;
                left: 52px;
                top: 0;
                border-width: 1px;
                border-left: 1px dashed #707070;
              }
              .el-tree-node::after {
                content: "";
                width: 24px;
                position: absolute;
                left: 54px;
                top: 15px;
                border-width: 1px;
                border-top: 1px dashed #707070;
              }
              .el-tree-node__content {
                // 子节点距离左边的距离
                padding-left: 75px !important;
              }
            }
          }
        }
      }
    }
  }

  ::v-deep .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    width: 14px;
    height: 14px;
    background: url("~@/assets/images/tree/spread.png") no-repeat 0 0px;
    background-size: 100% 100%;
    content: "" !important;
    display: block;
    font-size: 16px;
    border-radius: 50%;
  }
  ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  ::v-deep .el-tree-node__expand-icon:hover {
    color: #2058c9;
  }
  ::v-deep .el-icon-caret-right:before {
    width: 14px;
    height: 14px;
    background: url("~@/assets/images/tree/retract.png") no-repeat 0 0px;
    background-size: 100% 100%;
    content: "" !important;
    display: block;
    font-size: 16px;
    border-radius: 50%;
  }

  ::v-deep .el-tree-node__expand-icon::before {
    margin-left: 4px;
  }

  ::v-deep
    .el-tree-node.is-current
    > .el-tree-node__content
    > .custom-tree-node {
    background: #fff;
    .node-cnt,.node-cnt1,.node-cnt2 {
      padding: 4px 30px 4px 4px;
      background: linear-gradient(
        0deg,
        rgba(18, 84, 166, 0.98),
        rgba(33, 114, 203, 0.98)
      );
      box-shadow: 0px 1px 0px 0px #0c2a45, 0px 2px 0px 0px #225099,
        0px -2px 3px 0px #7cacf1;
      border-radius: 2px;
      transition: all 0.3s;
      .node-sp {
        color: #ffffff;
        font-family: "SourceHanSansCN";
      }
    }
  }
  @mixin commonIcon{
    padding: 4px;
    display: flex;
    align-items: center;
    .node-img {
      margin-right: 4px;
    }
    .node-sp {
      color: #212121;
      font-size: 13px;
      font-family: "SourceHanSansCN";
    }
  }
  ::v-deep .node-cnt {
   @include commonIcon()
  }

  ::v-deep .node-cnt1 {
    @include commonIcon();
    .node-img {
      width: 11px;
      height: 13px;
    }
  }

  ::v-deep .node-cnt2 {
    @include commonIcon();
    padding-left: 22px;
    .node-img {
      width: 20px;
      height: 18px;
    }
  }

  // 展开关闭的icon
  ::v-deep .el-tree-node__expand-icon {
    font-size: 18px;
    padding: 6px 0 6px 6px !important;
    color: #212121;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
    &.is-leaf:before {
      font-size: 0;
      // content: "\e722";
      display: none; // 也可以去掉
    }
  }
}
</style>
