feat(department): focus memory

src/components/service/DepartmentDrawer/index.vue

@@ -36,11 +36,15 @@ export default {
     option: {
       type: Object,
       default: null
+    },
+    remember: {
+      type: [Boolean, String],
+      default: false
     }
   },
   data () {
     return {
-      loading: true,
+      loading: false,
       error: false,
       groups: null,
       group: null,
@@ -50,22 +54,24 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['org'])
+    ...mapGetters(['department', 'org'])
   },
   created () {
     if (this.option) {
       const { group } = this.option
       this.setGroup({ ...group })
+    } else if (this.remember) {
+      this.setGroup({ ...this.department })
     } else {
       this.setGroup({ path: this.org, name: '我的部门' })
     }
-    this.getTree()
   },
   methods: {
     show () {
       if (this.loading) {
         this.$needShow = true
-      } else if (this.error) {
+      } else if (!this.groups || this.error) {
+        this.$needShow = true
         this.getTree()
       } else {
         this.drawer = true
@@ -97,6 +103,9 @@ export default {
         this.group = group
         this.drawer = false
         this.$emit('change', group)
+        if (this.remember) {
+          this.$store.dispatch('user/department', group)
+        }
       }
     }
   }

src/components/tree/DepartmentTree/index.vue

@@ -37,6 +37,10 @@ export default {
     option: {
       type: Object,
       default: null
+    },
+    remember: {
+      type: [Boolean, String],
+      default: false
     }
   },
   data () {
@@ -50,12 +54,14 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['org'])
+    ...mapGetters(['department', 'org'])
   },
   created () {
     if (this.option) {
       const { group } = this.option
       this.setGroup({ ...group })
+    } else if (this.remember) {
+      this.setGroup({ ...this.department })
     } else {
       this.setGroup({ path: this.org, name: '我的部门' })
     }
@@ -82,6 +88,9 @@ export default {
       if (!this.group || this.group.path !== group.path) {
         this.group = group
         this.$emit('change', group)
+        if (this.remember) {
+          this.$store.dispatch('user/department', group)
+        }
       }
     }
   }

src/components/tree/DirectoryTree/index.vue

@@ -12,7 +12,7 @@
         class="l-flex__none c-sibling-item el-icon-loading"
       />
       <div
-        v-else
+        v-if="group"
         class="l-flex__self c-sibling-item near u-ellipsis"
       >
         {{ group.name }}
@@ -84,6 +84,7 @@
     <department-drawer
       ref="departmentDrawer"
       :option="option"
+      :remember="remember"
       @change="onGroupChanged"
       @loaded="onGroupLoaded"
     />
@@ -91,7 +92,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import {
   getDirectoryTree,
   addTreeNode,
@@ -109,6 +109,10 @@ export default {
     option: {
       type: Object,
       default: null
+    },
+    remember: {
+      type: [Boolean, String],
+      default: false
     }
   },
   data () {
@@ -124,14 +128,13 @@ export default {
       },
       node: {},
       groupOption: {
-        loading: true
+        loading: false
       },
-      group: {},
+      group: null,
       selectedNode: {}
     }
   },
   computed: {
-    ...mapGetters(['org']),
     dialogTitle () {
       const { id, parentId } = this.node
       return parentId && parentId !== '0'

src/store/getters.js

@@ -57,6 +57,9 @@ const getters = {
   },
   isValid (state, getters) {
     return getters.token && (getters.tenant || getters.isSuperAdmin)
+  },
+  department (state) {
+    return state.user.department
   }
 }
 

src/store/modules/user.js

@@ -16,6 +16,7 @@ const state = {
   tenantKey: '',
   tenantId: '',
   orgKey: '',
+  department: null,
   id: '',
   name: '',
   avatar: '',
@@ -48,6 +49,7 @@ const mutations = {
     state.tenantName = label
     state.tenantKey = path
     state.orgKey = path
+    state.department = { path, name: label }
   },
   SET_ID (state, id) {
     console.log('user', id)
@@ -73,6 +75,9 @@ const mutations = {
   SET_RESOURCE_ACCESS (state, resourceAccess) {
     console.log('resourceAccess', resourceAccess)
     state.resourceAccess = resourceAccess
+  },
+  SET_DEPARTMENT (state, department) {
+    state.department = department
   }
 }
 
@@ -141,6 +146,7 @@ const actions = {
       } else if (tenant?.length) {
         commit('SET_TENANT_KEY', tenant[0])
         commit('SET_ORG_KEY', org || tenant[0])
+        commit('SET_DEPARTMENT', { path: org || tenant[0], name: '我的部门' })
       }
       inst()
       startMonitor()
@@ -189,6 +195,9 @@ const actions = {
     dispatch('updateUser', keycloak)
     commit('SET_RESOURCE_ACCESS', resourceAccessSet)
     return Promise.resolve()
+  },
+  department ({ commit }, { path, name }) {
+    commit('SET_DEPARTMENT', { path, name })
   }
 }
 

src/views/dashboard/Dashboard.vue

@@ -71,6 +71,7 @@
     </div>
     <department-drawer
       ref="departmentDrawer"
+      remember
       @change="onGroupChanged"
       @loaded="onGroupLoaded"
     />
@@ -101,7 +102,7 @@ export default {
         list: [],
         loaded: false
       },
-      loading: true,
+      loading: false,
       group: {}
     }
   },

src/views/dashboard/TenantDashboard.vue

@@ -4,7 +4,16 @@
     margin
   >
     <div class="l-flex__none l-flex--row c-sibling-item--v c-count">
-      <div class="l-flex__none u-color--black u-bold">设备统计</div>
+      <div
+        class="l-flex__none u-color--black u-width--sm u-bold u-ellipsis has-active"
+        @click="onChooseDepartment"
+      >
+        <i
+          v-if="loading"
+          class="el-icon-loading"
+        />
+        {{ group.name }}
+      </div>
       <div class="l-flex__none c-count__item u-color--black u-bold u-text--center">
         <div>总数</div>
         <i
@@ -39,7 +48,7 @@
       </div>
       <i
         class="el-icon-refresh o-icon md u-color--blue has-active"
-        @click="refreshDevices"
+        @click="onRefresh"
       />
     </div>
     <div
@@ -77,11 +86,16 @@
     >
       <i class="el-icon-loading" />
     </div>
+    <department-drawer
+      ref="departmentDrawer"
+      remember
+      @change="onGroupChanged"
+      @loaded="onGroupLoaded"
+    />
   </wrapper>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import {
   subscribe,
   unsubscribe
@@ -100,16 +114,15 @@ export default {
   },
   data () {
     return {
-      monitor: { loading: false },
+      monitor: { loading: true },
       deviceOptions: {
         list: [],
         loaded: false
-      }
+      },
+      loading: false,
+      group: {}
     }
   },
-  computed: {
-    ...mapGetters(['tenant'])
-  },
   created () {
     this.$timer = -1
     subscribe([
@@ -117,7 +130,6 @@ export default {
       '+/+/offline',
       '+/+/calendar/update'
     ], this.onMessage)
-    this.refreshDevices()
     this.getDevices()
   },
   beforeDestroy () {
@@ -190,8 +202,25 @@ export default {
         }
       }
     },
-    refreshDevices () {
-      if (this.monitor.loading) {
+    onGroupLoaded () {
+      this.loading = false
+    },
+    onGroupChanged ({ path, name }) {
+      if (!this.group || this.group.path !== path) {
+        this.group = { path, name }
+        this.refreshDevices(true)
+      }
+    },
+    onChooseDepartment () {
+      this.$refs.departmentDrawer.show().then(visible => {
+        this.loading = !visible
+      })
+    },
+    onRefresh () {
+      this.refreshDevices()
+    },
+    refreshDevices (force) {
+      if (!force && this.monitor.loading) {
         return
       }
       const monitor = {
@@ -202,7 +231,7 @@ export default {
         inactive: '-'
       }
       this.monitor = monitor
-      getDeviceStatisticsByPath(this.tenant).then(({ data }) => {
+      getDeviceStatisticsByPath(this.group.path).then(({ data }) => {
         const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
         monitor.total = total
         monitor.online = onLineTotal

src/views/dashboard/map/index.vue

@@ -87,6 +87,7 @@
     </div> -->
     <department-drawer
       ref="departmentDrawer"
+      remember
       @change="onGroupChanged"
       @loaded="onGroupLoaded"
     />
@@ -121,7 +122,7 @@ export default {
         list: [],
         loaded: false
       },
-      loading: true,
+      loading: false,
       group: {},
       device: null
     }

src/views/device/index.vue

@@ -8,6 +8,7 @@
   >
     <department-tree
       class="c-sibling-item c-sidebar u-width--md"
+      remember
       @change="onGroupChanged"
     />
     <schema-table

src/views/device/power/index.vue

@@ -8,6 +8,7 @@
   >
     <department-tree
       class="c-sibling-item c-sidebar u-width--md"
+      remember
       @change="onGroupChanged"
     />
     <schema-table

src/views/screen/material/media/index.vue

@@ -9,6 +9,7 @@
     <directory-tree
       class="c-sibling-item c-sidebar u-width--md"
       editable
+      remember
       @change="onDirectoryChanged"
     />
     <schema-table

src/views/screen/material/program/ProgramViewer.vue

@@ -8,6 +8,7 @@
   >
     <department-tree
       class="c-sibling-item c-sidebar u-width--md"
+      remember
       @change="onGroupChanged"
     />
     <grid-table

src/views/screen/material/schedule/ScheduleViewer.vue

@@ -8,6 +8,7 @@
   >
     <department-tree
       class="c-sibling-item c-sidebar u-width--md"
+      remember
       @change="onGroupChanged"
     />
     <schema-table