加入领导树展示

src/views/jurisdiction/roleManagement/leaderTree/leaderTree.vue

@@ -0,0 +1,185 @@
+<template>
+  <div style="width: 700px">
+    <el-tree
+      :data="data"
+      node-key="id"
+      default-expand-all
+      @node-drag-start="handleDragStart"
+      @node-drag-enter="handleDragEnter"
+      @node-drag-leave="handleDragLeave"
+      @node-drag-over="handleDragOver"
+      @node-drag-end="handleDragEnd"
+      @node-drop="handleDrop"
+      draggable
+      :allow-drop="allowDrop"
+      :allow-drag="allowDrag"
+    >
+    </el-tree>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data: [{
+        id: 1,
+        label: '一级 1',
+        isPerson:false,
+        children: [{
+          id: 4,
+          label: '二级 1-1',
+          isPerson:false,
+          children: [{
+            id: 9,
+            label: '三级 1-1-1',
+            isPerson:false,
+          }, {
+            id: 10,
+            label: '三级 1-1-2',
+            isPerson:false,
+          }]
+        }]
+      }, {
+        id: 2,
+        label: '一级 2',
+        isPerson:false,
+        children: [{
+          id: 5,
+          label: '二级 2-1',
+          isPerson:true,
+        }, {
+          id: 6,
+          label: '二级 2-2',
+          isPerson:true,
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        isPerson:false,
+        children: [{
+          id: 7,
+          label: '二级 3-1',
+          isPerson:false,
+        }, {
+          id: 8,
+          label: '二级 3-2',
+          isPerson:false,
+          children: [{
+            id: 11,
+            label: '三级 3-2-1',
+            isPerson:true,
+          }, {
+            id: 12,
+            label: '三级 3-2-2',
+            isPerson:true,
+          }, {
+            id: 13,
+            label: '三级 3-2-3',
+            isPerson:true,
+          }, {
+            id: 14,
+            label: '三级 3-2-4',
+            isPerson:true,
+          }, {
+            id: 15,
+            label: '三级 3-2-5',
+            isPerson:false,
+          }, {
+            id: 16,
+            label: '三级 3-2-6',
+            isPerson:false,
+          }, {
+            id: 17,
+            label: '三级 3-2-7',
+            isPerson:false,
+          }, {
+            id: 18,
+            label: '三级 3-2-8',
+            isPerson:false,
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    };
+  },
+  mounted() {
+    // this.processData(this.data);
+  },
+  methods: {
+    processData(nodes) {
+      nodes.forEach(node => {
+        if (!node.isPerson && node.children) {
+          const hasPerson = node.children.some(child => child.isPerson);
+          if (!hasPerson) {
+            node.children.push({
+              id: `${node.id}-no-person`,
+              label: '暂未配置领导人员',
+              isPerson: false,
+              children: []
+            });
+          }
+          this.processData(node.children);
+        }
+      });
+    },
+    handleDragStart(node, ev) {
+      console.log('drag start', node);
+    },
+    handleDragEnter(draggingNode, dropNode, ev) {
+      console.log('tree drag enter: ', dropNode.label);
+    },
+    handleDragLeave(draggingNode, dropNode, ev) {
+      console.log('tree drag leave: ', dropNode.label);
+    },
+    handleDragOver(draggingNode, dropNode, ev) {
+      console.log('tree drag over: ', dropNode.label);
+    },
+    handleDragEnd(draggingNode, dropNode, dropType, ev) {
+      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+    },
+    handleDrop(draggingNode, dropNode, dropType, ev) {
+      console.log('tree drop: ', dropNode.label, dropType);
+    },
+    allowDrop(draggingNode, dropNode, type) {
+      if (dropNode.data.label === '二级 3-1') {
+        return type !== 'inner';
+      } else {
+        return true;
+      }
+    },
+    allowDrag(draggingNode) {
+      return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+  width: 700px;
+}
+
+.w500 .el-dialog {
+  width: 500px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+  background: #eeeeee;
+  text-align: center;
+
+  .el-dialog__title {
+    font-size: 16px;
+  }
+}
+
+.yxq .el-range-separator {
+  margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+  width: 260px;
+}
+</style>

src/views/jurisdiction/roleManagement/roleManagement.vue

@@ -32,6 +32,7 @@
             <el-button type="primary" @click="onSubmit()">查询</el-button>
             <el-button type="primary" @click="onOut">导出</el-button>
             <el-button type="primary" @click="editUser({})">添加</el-button>
+            <el-button type="primary" @click="openTree()">查看领导配置</el-button>
           </el-form-item>
         </div>
         <!-- </el-row> -->
@@ -113,6 +114,16 @@
       :btn="btn"
       @closeDialog="closeDialogDel"
     />
+    <el-dialog
+      class="l-dialog"
+      title="领导树"
+      width="800px"
+      :visible.sync="isShowTree">
+      <LeaderTree
+        :style="{width: '780px',maxHeight: '65vh',overflow: 'auto'}"
+        @closeDialog="closeTreeDialog"
+      />
+    </el-dialog>
 
     <!-- 编辑 -->
     <Ticketopop
@@ -130,11 +141,13 @@
   import Paging from "@/views/Public/paging.vue";
   import {Own,getUserList,setRole,deleteAppUser} from "@/api/getdata";
   import Ticketopop from "./popup/ticketpop.vue";
+  import LeaderTree from "./leaderTree/leaderTree.vue";
   import Popup from "@/views/estate/examine/dialog/popup.vue";
   export default {
     data() {
       return {
         loading: false, //初始化loading
+        isShowTree: false,
         loadingMsg: "",
         row: {},
         validation: false,
@@ -159,7 +172,8 @@
     components: {
       Paging,
       Ticketopop,
-      Popup
+      Popup,
+      LeaderTree
     },
     mounted() {
       this.createLoad();
@@ -170,6 +184,12 @@
       }
     },
     methods: {
+      openTree() {
+        this.isShowTree = true;
+      },
+      closeTreeDialog() {
+        this.isShowTree = false;
+      },
       createLoad() {
         this.loading = true;
         this.loadingMsg = "加载中...";