修改前端人员部门列表

attendance-performance-manager-ui/admin/src/assets/mixins/tree.js

@@ -62,8 +62,6 @@ export default {
       treeProps: {
         id: "id",
         label: "label",
-        areaCode:"areaCode",
-        type: "type",
         isLeaf: "isLeaf",
         children: "children",
         icon: "icon",

attendance-performance-manager-ui/admin/src/views/staff/list.vue

 <template>
     <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
+      <el-row :gutter="20">
+        <el-col :span="6" :xs="12" class="mytree">
+          <el-card>
+
+            <el-scrollbar style="height: 100%">
+              <el-tree
+                  size="mini"
+                  ref="siteTree"
+                  :data="areaData"
+                  id="el-tree"
+                  node-key="id"
+                  indent="4"
+                  :props="treeProps"
+                  :load="loadNode"
+                  highlight-current
+                  default-expand-all
+                  :expand-on-click-node="false"
+                  :render-content="renderContent"
+                  @node-click="handleNodeClick"
+              >
+              </el-tree>
+            </el-scrollbar>
+          </el-card>
+        </el-col>
 
+        <el-col :span="18" :xs="12">
+          <el-card>
+            <el-row>
+              <LayoutTable notAdd
+                           notDel :data="tableData" :config="tableConfig">
+              </LayoutTable>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
 
         <drawer-show ref="drawerform" @ok="getData" />
     </div>
@@ -12,13 +44,17 @@
     /** 表单弹出框模式需引入 */
     import drawerShow from "./drawershow";
     import table from "@/assets/mixins/table";
+    import tree from "@/assets/mixins/tree";
     export default {
         name: "StaffList",
         components: {
           drawerShow
 },
-        mixins: [table],
+        mixins: [table,tree],
       created() {
+        this.$get("/dept/treeselect", {}).then(({ data }) => {
+          this.areaData = data.result;
+        });
       },
         methods: {
             /** 重写新增方法 */
@@ -34,6 +70,12 @@
                 this.$refs.drawerform.view(row);
             },
 
+          handleNodeClick(node) {
+            this.currentNode = node;
+            this.query = { deptId: node.id };
+            this.getData();
+          },
+
         },
         data() {
             return {
@@ -100,3 +142,99 @@
         }
     };
 </script>
+
+
+<style>
+.el-card__body {
+  padding: 10px;
+}
+.el-calendar-table .el-calendar-day {
+  height: 70px;
+}
+.is-selected {
+  color: #fa3b19;
+}
+</style>
+
+<style lang="scss" scoped>
+.cardTitle {
+  font-size: 16px;
+  color: rgb(20, 134, 248);
+  list-style-type: none;
+  border-bottom: 3px solid rgb(20, 134, 248);
+  padding-bottom: 2px;
+}
+.mytree ::v-deep {
+  .el-tree--highlight-current
+  ::v-deep
+  .el-tree-node.is-checked
+  > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree--highlight-current
+  ::v-deep
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node {
+    position: relative;
+    padding-left: 16px;
+  }
+  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+  .el-tree-node__expand-icon.is-leaf {
+    display: none;
+  }
+  .el-tree-node__children {
+    padding-left: 16px;
+  }
+
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:before {
+    border-left: 1px dashed #4386c6;
+    bottom: 0px;
+    height: 100%;
+    top: -26px;
+    width: 1px;
+  }
+
+  .el-tree-node:after {
+    border-top: 1px dashed #4386c6;
+    height: 20px;
+    top: 12px;
+    width: 24px;
+  }
+}
+</style>