feat: support TenantPage component

src/components/index.js

@@ -1,8 +1,6 @@
 import Vue from 'vue'
 
 const components = require.context('.', true, /index\.vue$/)
-// const requireAll = requireContext => requireContext.keys().map(requireContext)
-// requireAll(req)
 
 components.keys().forEach(fileName => {
   const file = components(fileName)

src/components/layout/TenantPage/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <wrapper
+    :vertical="false"
+    fill
+    margin
+    padding
+    background
+  >
+    <template v-if="groups">
+      <div class="c-tree-sidebar u-overflow-y--auto">
+        <el-tree
+          ref="groupTree"
+          :data="groups"
+          class="c-tree-sidebar__main"
+          node-key="path"
+          highlight-current
+          @node-click="onGroupTreeClick"
+        />
+      </div>
+      <slot :group="group" />
+    </template>
+    <template v-else>
+      <div
+        v-loading="loading"
+        class="l-flex__auto l-flex--row center"
+      >
+        <template v-if="!loading">
+          <warning
+            v-if="error"
+            @click="getTreeData"
+          />
+          <div
+            v-else
+            class="u-bold"
+          >
+            暂无租户，请先添加租户
+          </div>
+        </template>
+      </div>
+    </template>
+  </wrapper>
+</template>
+
+<script>
+import { getTopGroups } from '@/api/user'
+
+export default {
+  name: 'TenantPage',
+  data () {
+    return {
+      loading: true,
+      error: false,
+      groups: null,
+      group: null
+    }
+  },
+  created () {
+    this.getTreeData()
+  },
+  methods: {
+    getTreeData () {
+      this.loading = true
+      this.error = false
+      getTopGroups().then(
+        ({ data }) => {
+          if (data.length) {
+            this.groups = data
+            this.group = this.groups[0]
+            this.$nextTick(() => {
+              this.$refs.groupTree.setCurrentKey(this.group.path)
+            })
+          }
+        },
+        () => {
+          this.error = true
+        }
+      ).finally(() => {
+        this.loading = false
+      })
+    },
+    onGroupTreeClick (group) {
+      if (!this.group || this.group.id !== group.id) {
+        this.group = null
+        this.$nextTick(() => {
+          this.group = group
+        })
+      }
+    }
+  }
+}
+</script>

src/views/realm/ai-timing/Tenant.vue

@@ -1,92 +1,18 @@
 <template>
-  <wrapper
-    :vertical="false"
-    fill
-    margin
-    padding
-    background
-  >
-    <template v-if="groups">
-      <div class="c-tree-sidebar u-overflow-y--auto">
-        <el-tree
-          ref="groupTree"
-          :data="groups"
-          class="c-tree-sidebar__main"
-          node-key="path"
-          highlight-current
-          @node-click="onGroupTreeClick"
-        />
-      </div>
+  <tenant-page>
+    <template #default="{ group }">
       <group-timing-table :group="group.path" />
     </template>
-    <template v-else>
-      <div
-        v-loading="loading"
-        class="l-flex__auto l-flex--row center"
-      >
-        <template v-if="!loading">
-          <warning
-            v-if="error"
-            @click="getTreeData"
-          />
-          <div
-            v-else
-            class="u-bold"
-          >
-            暂无租户，请先添加租户
-          </div>
-        </template>
-      </div>
-    </template>
-  </wrapper>
+  </tenant-page>
 </template>
 
 <script>
-import { getTopGroups } from '@/api/user'
 import GroupTimingTable from './components/GroupTimingTable'
 
 export default {
   name: 'AITimingTenant',
   components: {
     GroupTimingTable
-  },
-  data () {
-    return {
-      loading: true,
-      error: false,
-      groups: null,
-      group: null
-    }
-  },
-  created () {
-    this.getTreeData()
-  },
-  methods: {
-    getTreeData () {
-      this.loading = true
-      this.error = false
-      getTopGroups().then(
-        ({ data }) => {
-          if (data.length) {
-            this.groups = data
-            this.group = this.groups[0]
-            this.$nextTick(() => {
-              this.$refs.groupTree.setCurrentKey(this.group.path)
-            })
-          }
-        },
-        () => {
-          this.error = true
-        }
-      ).finally(() => {
-        this.loading = false
-      })
-    },
-    onGroupTreeClick (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.group = group
-      }
-    }
   }
 }
 </script>

src/views/realm/assign/index.vue

@@ -6,19 +6,6 @@
     background
   >
     <template v-if="tenants">
-      <el-tabs
-        v-model="active"
-        class="c-tabs has-bottom-padding"
-      >
-        <el-tab-pane
-          label="设备到部门"
-          name="Group"
-        />
-        <el-tab-pane
-          label="设备到人"
-          name="User"
-        />
-      </el-tabs>
       <div class="l-flex__auto l-flex">
         <template v-if="groups">
           <div
@@ -35,23 +22,40 @@
               @node-click="onTenantTreeClick"
             />
           </div>
-          <div
-            class="c-tree-sidebar u-overflow-y--auto"
-            :class="{ large: !isSuperAdmin }"
-          >
-            <component
-              :is="active"
-              :tenant="tenant"
-              :groups="groups"
-              @change="onChange"
-            />
+          <div class="l-flex__auto l-flex--col">
+            <el-tabs
+              v-model="active"
+              class="c-tabs has-bottom-padding"
+            >
+              <el-tab-pane
+                label="设备到部门"
+                name="Group"
+              />
+              <el-tab-pane
+                label="设备到人"
+                name="User"
+              />
+            </el-tabs>
+            <div class="l-flex__fill l-flex">
+              <div
+                class="c-tree-sidebar u-overflow-y--auto"
+                :class="{ large: !isSuperAdmin }"
+              >
+                <component
+                  :is="active"
+                  :tenant="tenant"
+                  :groups="groups"
+                  @change="onChange"
+                />
+              </div>
+              <device
+                v-if="value"
+                :is-group="isGroup"
+                :tenant="tenant"
+                :value="value"
+              />
+            </div>
           </div>
-          <device
-            v-if="value"
-            :is-group="isGroup"
-            :tenant="tenant"
-            :value="value"
-          />
         </template>
       </div>
     </template>

src/views/realm/device/Tenant.vue

@@ -1,22 +1,6 @@
 <template>
-  <wrapper
-    :vertical="false"
-    fill
-    margin
-    padding
-    background
-  >
-    <template v-if="groups">
-      <div class="c-tree-sidebar u-overflow-y--auto">
-        <el-tree
-          ref="groupTree"
-          :data="groups"
-          class="c-tree-sidebar__main"
-          node-key="path"
-          highlight-current
-          @node-click="onGroupTreeClick"
-        />
-      </div>
+  <tenant-page>
+    <template #default="{ group }">
       <div class="l-flex__auto l-flex--col">
         <el-tabs
           v-model="active"
@@ -42,30 +26,10 @@
         />
       </div>
     </template>
-    <template v-else>
-      <div
-        v-loading="loading"
-        class="l-flex__auto l-flex--row center"
-      >
-        <template v-if="!loading">
-          <warning
-            v-if="error"
-            @click="getTreeData"
-          />
-          <div
-            v-else
-            class="u-bold"
-          >
-            暂无租户，请先添加租户
-          </div>
-        </template>
-      </div>
-    </template>
-  </wrapper>
+  </tenant-page>
 </template>
 
 <script>
-import { getTopGroups } from '@/api/user'
 import ProductType from './ProductType'
 import Product from './Product'
 import Device from './Device'
@@ -79,44 +43,7 @@ export default {
   },
   data () {
     return {
-      loading: true,
-      error: false,
-      active: 'Device',
-      groups: null,
-      group: null
-    }
-  },
-  created () {
-    this.getTreeData()
-  },
-  methods: {
-    getTreeData () {
-      this.loading = true
-      this.error = false
-      getTopGroups().then(
-        ({ data }) => {
-          if (data.length) {
-            this.groups = data
-            this.group = this.groups[0]
-            this.$nextTick(() => {
-              this.$refs.groupTree.setCurrentKey(this.group.path)
-            })
-          }
-        },
-        () => {
-          this.error = true
-        }
-      ).finally(() => {
-        this.loading = false
-      })
-    },
-    onGroupTreeClick (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.group = null
-        this.$nextTick(() => {
-          this.group = group
-        })
-      }
+      active: 'Device'
     }
   }
 }

src/views/realm/settings/Tenant.vue

@@ -1,95 +1,21 @@
 <template>
-  <wrapper
-    :vertical="false"
-    fill
-    margin
-    padding
-    background
-  >
-    <template v-if="groups">
-      <div class="c-tree-sidebar u-overflow-y--auto">
-        <el-tree
-          ref="groupTree"
-          :data="groups"
-          class="c-tree-sidebar__main"
-          node-key="path"
-          highlight-current
-          @node-click="onGroupTreeClick"
-        />
-      </div>
+  <tenant-page>
+    <template #default="{ group }">
       <settings
         :group="group.path"
         admin
       />
     </template>
-    <template v-else>
-      <div
-        v-loading="loading"
-        class="l-flex__auto l-flex--row center"
-      >
-        <template v-if="!loading">
-          <warning
-            v-if="error"
-            @click="getTreeData"
-          />
-          <div
-            v-else
-            class="u-bold"
-          >
-            暂无租户，请先添加租户
-          </div>
-        </template>
-      </div>
-    </template>
-  </wrapper>
+  </tenant-page>
 </template>
 
 <script>
-import { getTopGroups } from '@/api/user'
 import Settings from './components/Settings'
 
 export default {
   name: 'SettingsTenant',
   components: {
     Settings
-  },
-  data () {
-    return {
-      loading: true,
-      error: false,
-      groups: null,
-      group: null
-    }
-  },
-  created () {
-    this.getTreeData()
-  },
-  methods: {
-    getTreeData () {
-      this.loading = true
-      this.error = false
-      getTopGroups().then(
-        ({ data }) => {
-          if (data.length) {
-            this.groups = data
-            this.group = this.groups[0]
-            this.$nextTick(() => {
-              this.$refs.groupTree.setCurrentKey(this.group.path)
-            })
-          }
-        },
-        () => {
-          this.error = true
-        }
-      ).finally(() => {
-        this.loading = false
-      })
-    },
-    onGroupTreeClick (group) {
-      if (!this.group || this.group.id !== group.id) {
-        this.group = group
-      }
-    }
   }
 }
 </script>