2.0.0项目初始化

datax-ui/package-lock.json

@@ -1685,14 +1685,6 @@
       "integrity": "sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=",
       "dev": true
     },
-    "@ztree/ztree_v3": {
-      "version": "3.5.41",
-      "resolved": "https://registry.npmjs.org/@ztree/ztree_v3/-/ztree_v3-3.5.41.tgz",
-      "integrity": "sha512-vfsv9F0VyTuTAy4KqR2jfMOIQqDSFd5/yBT1Sldajhv93SqowI1CGZ1qK7HhOgoy+ag1xoUpNebsuW9ywH5jag==",
-      "requires": {
-        "jquery": ">=1.4.4"
-      }
-    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
@@ -6915,11 +6907,6 @@
         }
       }
     },
-    "jquery": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
-      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
-    },
     "js-base64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -11628,15 +11615,6 @@
         }
       }
     },
-    "vue-giant-tree": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/vue-giant-tree/-/vue-giant-tree-0.1.2.tgz",
-      "integrity": "sha512-CrQOUJkim+S86wcBBjeZyoXheECEALN6CciiTl1oUkkuYx4obZ5gB/lVz27u1N1BZDp5ODfCSRlYcL+aM/qQhg==",
-      "requires": {
-        "@ztree/ztree_v3": "^3.5.40",
-        "jquery": "^3.4.1"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz",

datax-ui/package.json

@@ -17,7 +17,6 @@
     "path-to-regexp": "^6.1.0",
     "screenfull": "^5.0.0",
     "vue": "^2.6.10",
-    "vue-giant-tree": "^0.1.2",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"
   },

datax-ui/src/views/system/user/UserList.vue

@@ -3,12 +3,15 @@
     <el-row :gutter="20">
       <el-col :span="4">
         <el-card class="box-card" shadow="always" :body-style="{ height: bodyHeight }" style="overflow-y: auto;">
-          <tree
-            :nodes="deptNodes"
-            :setting="setting"
-            @onCheck="onCheck"
-            @onCreated="handleCreated"
-          />
+          <el-tree
+            :data="deptOptions"
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+          ></el-tree>
         </el-card>
       </el-col>
       <el-col :span="20">
@@ -196,13 +199,10 @@
 <script>
 import { listUser } from '@/api/system/user'
 import { listDept } from '@/api/system/dept'
-import tree from 'vue-giant-tree'
+import { construct } from '@/utils/json-tree'
 
 export default {
   name: 'UserList',
-  components: {
-    tree
-  },
   data () {
     return {
       bodyHeight: document.body.offsetHeight - 130 + 'px',
@@ -272,37 +272,19 @@ export default {
       },
       // 高级搜索 展开/关闭
       advanced: false,
-      // ztree树组件
-      ztreeObj: null,
-      setting: {
-        check: {
-          enable: true,
-          chkStyle: 'radio',
-          radioType: 'all'
-        },
-        data: {
-          key: {
-            name: 'deptName'
-          },
-          simpleData: {
-            enable: true,
-            idKey: 'id',
-            pIdKey: 'parentId',
-            rootPId: '0'
-          }
-        }
-      },
-      deptNodes: []
+      // 部门列表
+      deptOptions: [],
+      defaultProps: {
+        children: "children",
+        label: "deptName"
+      }
     }
   },
   created () {
     this.getList()
-    this.getDeptList()
+    this.getDeptTree()
     this.initCols()
   },
-  destroyed () {
-    this.ztreeObj.destroy()
-  },
   methods: {
     /** 查询用户列表 */
     getList () {
@@ -316,11 +298,17 @@ export default {
         }
       })
     },
-    /** 查询部门列表 */
-    getDeptList () {
+    /** 查询部门树结构 */
+    getDeptTree () {
       listDept().then(response => {
-        const { data } = response
-        this.deptNodes = data
+        if (response.success) {
+          const { data } = response
+          this.deptOptions = construct(data, {
+            id: 'id',
+            pid: 'parentId',
+            children: 'children'
+          })
+        }
       })
     },
     initCols () {
@@ -346,10 +334,6 @@ export default {
     /** 重置按钮操作 */
     resetQuery () {
       this.$refs['queryForm'].resetFields()
-      this.ztreeObj.cancelSelectedNode()
-      this.ztreeObj
-        .getCheckedNodes(true)
-        .forEach(node => this.ztreeObj.checkNode(node, false, false, false))
       this.handleQuery()
     },
     /** 刷新列表 */
@@ -420,6 +404,11 @@ export default {
       this.queryParams.pageNum = val
       this.getList()
     },
+    /** 节点单击事件 */
+    handleNodeClick (data) {
+      this.queryParams.deptId = data.id;
+      this.getList();
+    },
     toggleAdvanced () {
       this.advanced = !this.advanced
     },
@@ -440,14 +429,6 @@ export default {
       } else {
         return <el-tag type="success">{status_dictText}</el-tag>
       }
-    },
-    handleCreated (ztreeObj) {
-      this.ztreeObj = ztreeObj
-      this.ztreeObj.expandAll(true)
-    },
-    onCheck (event, treeId, treeNode) {
-      this.queryParams.deptId = treeNode.id
-      this.handleQuery()
     }
   }
 }