分级查看各类账号

src/components/SelectDept/index.vue

@@ -1,22 +1,98 @@
 <template>
-<div>
-  {{this.$store.state.user.deptName}}
-</div>
-
-<!--
-  <treeselect
-    style="
-      width: 180px;
-      height: 40px;
-      position: relative;
-      display: inline-block;
-      line-height: 50px;
-    "
-    v-model="value"
-    :options="options"
-    :defaultExpandLevel="Infinity"
-  />
--->
+  <div>
+    <!--顶级按钮-->
+    <div class="btn-group mr-1">
+      <button
+        type="button"
+        @click="selectAgency"
+        class="btn btn-sm btn-outline-secondary"
+      >
+        智慧易加
+      </button>
+      <button
+        type="button"
+        class="
+          btn btn-sm btn-outline-secondary
+          dropdown-toggle dropdown-toggle-split
+        "
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <span class="sr-only"></span>
+      </button>
+      <div
+        class="dropdown-menu"
+        style="overflow-y: auto; max-height: 400px; max-width: 280px"
+      >
+        <form class="px-4 py-3">
+          <input
+            type="email"
+            class="form-control"
+            id="exampleDropdownFormEmail1"
+            placeholder=""
+            autocomplete="off"
+          />
+        </form>
+        <div class="dropdown-divider"></div>
+        <a
+          class="dropdown-item"
+          href="#"
+          v-for="ele in groups"
+          :key="ele.deptId"
+          @click="selectGroup(ele)"
+          >{{ ele.deptName }}</a
+        >
+      </div>
+    </div>
+    <!--集团按钮-->
+    <div class="btn-group mr-1" v-if="!!currentGroup">
+      <button
+        @click="selectGroup(currentGroup)"
+        type="button"
+        class="btn btn-sm btn-outline-secondary"
+      >
+        {{ currentGroup.deptName }}
+      </button>
+      <button
+        type="button"
+        class="
+          btn btn-sm btn-outline-secondary
+          dropdown-toggle dropdown-toggle-split
+        "
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <span class="sr-only"></span>
+      </button>
+      <div
+        class="dropdown-menu"
+        style="overflow-y: auto; max-height: 400px; max-width: 280px"
+      >
+        <form class="px-4 py-3">
+          <input
+            type="email"
+            class="form-control"
+            id="exampleDropdownFormEmail1"
+            placeholder=""
+            autocomplete="off"
+          />
+        </form>
+        <div class="dropdown-divider"></div>
+        <a
+          class="dropdown-item"
+          href="#"
+          v-for="ele in stations"
+          :key="ele.deptId"
+          @click="selectStation(ele)"
+          >{{ ele.deptName }}</a
+        >
+      </div>
+    </div>
+    <!--站点-->
+    <button type="button" class="btn btn-sm btn-outline-success" disabled>
+      {{ currentShow.deptName }}
+    </button>
+  </div>
 </template>
 
 <script>
@@ -32,27 +108,79 @@ export default {
       options: [],
       Infinity: 2,
       num: 0,
+      Agency: {
+        deptId: 1,
+        deptName: this.$store.state.user.deptName,
+      },
+      groups: [
+        {
+          deptId: 3,
+          deptName: "李哈哈的集团",
+        },
+        {
+          deptId: 2,
+          deptName: "李哈哈的顶级集团",
+        },
+      ],
+      stations: [
+        {
+          deptId: 4,
+          deptName: "李哈哈的站点1",
+        },
+        {
+          deptId: 5,
+          deptName: "李哈哈的站点2",
+        },
+      ],
+      currentStation: undefined,
+      currentGroup: undefined,
     };
   },
+  computed: {
+    currentShow() {
+      if (!!this.currentStation) {
+        return this.currentStation;
+      }
+      if (!!this.currentGroup) {
+        return this.currentGroup;
+      }
+      return this.Agency;
+    },
+  },
   watch: {
     // 监听deptId
     value: "currDeptChange",
   },
   created() {
-    this.getTreeselect();
+    // this.getTreeselect();
   },
   methods: {
-    /** 查询部门下拉树结构 */
-    getTreeselect() {
-      userdepttree().then((response) => {
-        this.options = response.data;
-        if (response.data != null && response.data.length > 0) {
-          this.value = response.data[0].id;
-          this.$store.selectDeptName = response.data[0].label;
-          this.$store.selectDeptId = response.data[0].id;
-        }
-      });
+    selectAgency(agency) {
+      this.currentGroup = undefined;
+      this.currentStation = undefined;
+      this.refreshTagView();
+    },
+    selectGroup(group) {
+      console.log(group);
+      this.currentGroup = group;
+      this.currentStation = undefined;
+      this.refreshTagView();
     },
+    selectStation(station) {
+      this.currentStation = station;
+      this.refreshTagView();
+    },
+    /** 查询部门下拉树结构 */
+    // getTreeselect() {
+    //   userdepttree().then((response) => {
+    //     this.options = response.data;
+    //     if (response.data != null && response.data.length > 0) {
+    //       this.value = response.data[0].id;
+    //       this.$store.selectDeptName = response.data[0].label;
+    //       this.$store.selectDeptId = response.data[0].id;
+    //     }
+    //   });
+    // },
     currDeptChange(val) {
       if (val) {
         this.$store.selectDeptId = val;
@@ -96,6 +224,18 @@ export default {
         this.num = this.num + 1;
       }
     },
+    refreshTagView() {
+      this.$store.state.tagsView.visitedViews.map((view) => {
+        this.$store.dispatch("tagsView/delCachedView", view).then(() => {
+          const { fullPath } = view;
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: "/redirect" + fullPath,
+            });
+          });
+        });
+      });
+    },
   },
 };
 </script>

src/layout/components/Navbar.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="navbarB">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container " @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
+    
     <div class="right-menu">
-     <template>
-        <select-dept id="select-dept" class="right-menu-item"/>
+      <template>
+        <select-dept id="select-dept" class="right-menu-item" />
         <search id="header-search" class="right-menu-item" />
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
         <!--
@@ -16,9 +21,12 @@
         -->
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -38,21 +46,19 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import SelectDept from '@/components/SelectDept'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
-
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import SelectDept from "@/components/SelectDept";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
 
 export default {
   data() {
-    return {
-    }
+    return {};
   },
   components: {
     Breadcrumb,
@@ -62,63 +68,59 @@ export default {
     Search,
     SelectDept,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(["sidebar", "avatar", "device"]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
-    }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
+        });
+      },
+    },
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
-        })
-      })
-    }
-  }
-}
+        this.$store.dispatch("LogOut").then(() => {
+          location.href = "/index";
+        });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .navbarB {
   height: 50px;
-  overflow: visible ;
+  overflow: visible;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -150,10 +152,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }

src/views/label/Label_AddUser.vue

@@ -1,28 +1,35 @@
 <template>
   <div>
-    <div class="alert alert-primary" role="alert">
-      A simple primary alert—check it out!
-    </div>
-    <div class="alert alert-secondary" role="alert">
-      A simple secondary alert—check it out!
-    </div>
-    <div class="alert alert-success" role="alert">
-      A simple success alert—check it out!
-    </div>
-    <div class="alert alert-danger" role="alert">
-      A simple danger alert—check it out!
-    </div>
-    <div class="alert alert-warning" role="alert">
-      A simple warning alert—check it out!
-    </div>
-    <div class="alert alert-info" role="alert">
-      A simple info alert—check it out!
-    </div>
-    <div class="alert alert-light" role="alert">
-      A simple light alert—check it out!
-    </div>
-    <div class="alert alert-dark" role="alert">
-      A simple dark alert—check it out!
+    <!--
+ 
+    -->
+    <!-- Example split danger button -->
+
+     <div class="btn-group">
+      <button type="button" class="btn btn-sm btn-outline-secondary">加多多</button>
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split"
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <span class="sr-only"></span>
+      </button>
+      <div class="dropdown-menu" style="overflow-y: auto;max-height: 400px;max-width:280px" >
+        <form class="px-4 py-3">
+          <input
+            type="email"
+            class="form-control"
+            id="exampleDropdownFormEmail1"
+            placeholder="Name or ID"
+            autocomplete="off"
+          />
+        </form>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">哈哈集团</a>
+        <a class="dropdown-item" href="#">你哈哈哈哈好集团</a>
+        <a class="dropdown-item" href="#">李哈哈集团团</a>
+      </div>
     </div>
   </div>
 </template>
@@ -66,6 +73,21 @@ export default {
         customerName: null,
         phone: null,
       },
+      props: {
+        lazy: true,
+        lazyLoad(node, resolve) {
+          const { level } = node;
+          setTimeout(() => {
+            const nodes = Array.from({ length: level + 1 }).map((item) => ({
+              value: ++id,
+              label: `选项${id}`,
+              leaf: level >= 2,
+            }));
+            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+            resolve(nodes);
+          }, 1000);
+        },
+      },
     };
   },
   created() {