vue后台 之 zTree的使用

vue后台 之 zTree的使用

• zTree的使用，需要依赖于jq
• 下载依赖和配置
  • npm i ztree
  • npm i jquery
• 配置
  • jquery的配置
    • vue.config.js

      let path = require('path')
      const webpack = require('webpack')
      
      function resolve(dir) {
        return path.join(__dirname, dir)
      }
      module.exports = {
        configureWebpack: {
          plugins: [
            new webpack.ProvidePlugin({
              $: 'jquery',
              jquery: 'jquery',
              'window.jQuery': 'jquery',
              jQuery: 'jquery'
            })
          ]
        },
      }
      

    • .eslintrc.js文件

      module.exports = {
        root: true,
        env: {
          jquery: true,
          browser: true,
          node: true,
          es6: true,
        },
        'extends': [
          'plugin:vue/essential',
          'eslint:recommended'
        ],
        parserOptions: {
          parser: 'babel-eslint'
        },
        rules: {
          'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
          'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
        }
      }
      
      

  • ztree的配置
    • main.js之中

      import 'ztree'
      import 'ztree/css/metroStyle/metroStyle.css'
      import 'ztree/css/zTreeStyle/zTreeStyle.css'
      

• 官网：链接: link.
• 解析:链接: link.

菜单权限的实现

• 点击菜单权限的时候，弹出对话框

• 拿到当前row的id发起请求

• html

      <el-table
        :header-cell-style="headClass"
        :data="tableData"
        class="menuTable"
        :row-class-name="tableRowClassName"
        :border="true"
        style="width: 100%"
      >
        <el-table-column type="index" width="60" prop="date" label="序号">
        </el-table-column>
        <el-table-column
          label="角色名称"
          prop="name"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="角色类型" prop="roleType"></el-table-column>
        <el-table-column
          label="上级角色"
          prop="parentName"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="创建人" prop="modifyUser"> </el-table-column>
        <el-table-column label="创建时间" prop="modifyTime"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <button class="addBtn" @click="menuPower(scope.row)">
              菜单权限
            </button>
            <button class="edit_btn" @click="edit(scope.row.id)">编辑</button>
            <button class="remove_btn" @click="remove(scope.row.id)">
              删除
            </button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 菜单权限 -->
      <el-dialog
        title="请选择"
        width="32%"
        @close="menuPowerShow = false"
        :visible="menuPowerShow"
        v-el-drag-dialog
      >
        <div class="app-container">
          <ul id="treeDemo" class="ztree" />
        </div>
        <div slot="footer" style="text-align: center" class="dialog-footer">
          <button class="edit_btn" @click="selectAll">全 选</button>
          <button class="edit_btn" @click="notAtAll">全 不 选</button>
          <button class="p_confirm" @click="menuPowerComfirm">确 定</button>
          <button class="p_cancel" @click="menuPowerCancel">取 消</button>
        </div>
      </el-dialog>

• js

export default {
  name: "role_management",
  components: {
  },
  data() {
    return {
	//菜单权限
      menuPowerShow: false,
      FirstTree: [], //初始的tree
      currentRowId: "", //当前行的id
      selectAllMune: [], //全选
      notSelectAllMuneid: [], //全不选
      setting: {
        // zTree 的配置
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: "",
          },
        },
        check: {
          enable: true,
        },
      },
	}
  },
  method:{
    //菜单权限
    menuPower(row) {
      // console.log('当前row',row);
      this.menuPowerShow = true;
      this.currentRowId = row.id;
      // 请求当前 row用户的菜单
      this.$request.get(`/system/role/listMenu?id=${row.id}`).then((res) => {
        if (res.data.code === 0) {
          this.$nextTick(() => {
            this.FirstTree = res.data.dat;
            //拿到 后端的 数据 渲染在zTree之中 数据格式在后面
            $.fn.zTree.init($("#treeDemo"), this.setting, res.data.dat);
          });
        }
      });
    },
    menuPowerComfirm() {
      //点击确定的时候 拿到勾选中的节点 使用 getChooseIds 封装的方法 获取选中的节点
      const menuIds = this.$getChooseIds("treeDemo");
      // console.log("menuIds", menuIds);
      this.$request
        .post(
          `/system/role/updateRoleMenu?id=${this.currentRowId}&menuIds=${menuIds}`
        )
        .then((res) => {
          if (res.data.code === 0) {
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.menuPowerShow = false;
          } else {
            this.$message.error(res.data.msg);
            this.menuPowerShow = true;
          }
        });
    },
    menuPowerCancel() {
      this.menuPowerShow = false;
    },
    selectAll() {
      this.selectAllMune = this.FirstTree.map((item) => {
        item.checked = true;
        return item;
      });
      this.$nextTick(() => {
        $.fn.zTree.init($("#treeDemo"), this.setting, this.selectAllMune);
      });
    },
    notAtAll() {
      this.onlyConfirm = false;
      this.notSelectAllMuneid = this.FirstTree.map((item) => {
        item.checked = false;
        return item;
      });
      this.$nextTick(() => {
        $.fn.zTree.init($("#treeDemo"), this.setting, this.notSelectAllMuneid);
      });
    },
  }

res.data.dat 最初的数据格式

[
	{id: "1146", name: "XXX checked: true, disabled: false, pid: "1145"}
 {id: "1132", name: "XXXchecked: true, disabled: false, pid: "1130"}
]

getChooseIds 方法

// 获取树形 选中的节点 
const getChooseIds = (leftTree) => {
  var treeObj = $.fn.zTree.getZTreeObj(`${leftTree}`);
  var nodes = treeObj.getCheckedNodes();
  var tmpNode;
  var ids = "";
  for (var i = 0; i < nodes.length; i++) {
    tmpNode = nodes[i];
    if (i != nodes.length - 1) {
      ids += tmpNode.id + ",";
    } else {
      ids += tmpNode.id;
    }
  }
  return ids;
}