feat(projects): perf page manage_role

soybeanjs · Apr 24, 2024 · 5594558 · 5594558
1 parent 8f5a6b1
commit 5594558
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 55 deletions.
diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
@@ -36,7 +36,7 @@ function refresh() {
 </script>
 
 <template>
-  <ASpace wrap class="justify-end lt-sm:w-200px">
+  <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
     <slot name="prefix"></slot>
     <slot name="default">
       <AButton size="small" ghost type="primary" @click="add">
@@ -62,7 +62,7 @@ function refresh() {
     </AButton>
     <TableColumnSetting v-model:columns="columns" />
     <slot name="suffix"></slot>
-  </ASpace>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
@@ -204,6 +204,9 @@ export function getAntdTheme(colors: App.Theme.ThemeColor, darkMode: boolean) {
     },
     algorithm: [darkMode ? darkAlgorithm : defaultAlgorithm],
     components: {
+      Button: {
+        controlHeightSM: 28
+      },
       Menu: {
         colorSubItemBg: 'transparent'
       }

diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="tsx">
+import { computed, shallowRef } from 'vue';
 import { Button, Popconfirm, Tag } from 'ant-design-vue';
+import { useElementSize } from '@vueuse/core';
 import { fetchGetRoleList } from '@/service/api';
 // import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
@@ -10,6 +12,16 @@ import RoleSearch from './modules/role-search.vue';
 
 // const appStore = useAppStore();
 
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 702
+  };
+});
+
 const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetRoleList,
   apiParams: {
@@ -123,7 +135,12 @@ function edit(id: number) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <ACard :title="$t('page.manage.role.title')" :bordered="false" class="sm:flex-1-hidden card-wrapper">
+    <ACard
+      :title="$t('page.manage.role.title')"
+      :bordered="false"
+      :body-style="{ flex: 1, overflow: 'hidden' }"
+      class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+    >
       <template #extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
@@ -135,14 +152,15 @@ function edit(id: number) {
         />
       </template>
       <ATable
+        ref="wrapperEl"
         :columns="columns"
         :data-source="data"
         :loading="loading"
         row-key="id"
         size="small"
         :pagination="mobilePagination"
-        :scroll="{ x: 702 }"
-        class="sm:h-full"
+        :scroll="scrollConfig"
+        class="h-full"
       />
       <RoleOperateDrawer
         v-model:visible="drawerVisible"

diff --git a/src/views/manage/role/modules/button-auth-modal.vue b/src/views/manage/role/modules/button-auth-modal.vue
@@ -29,16 +29,16 @@ const tree = shallowRef<DataNode[]>([]);
 async function getAllButtons() {
   // request
   tree.value = [
-    { key: '01', title: 'button1', code: 'code1' },
-    { key: '02', title: 'button2', code: 'code2' },
-    { key: '03', title: 'button3', code: 'code3' },
-    { key: '04', title: 'button4', code: 'code4' },
-    { key: '05', title: 'button5', code: 'code5' },
-    { key: '06', title: 'button6', code: 'code6' },
-    { key: '07', title: 'button7', code: 'code7' },
-    { key: '08', title: 'button8', code: 'code8' },
-    { key: '09', title: 'button9', code: 'code9' },
-    { key: '10', title: 'button10', code: 'code10' }
+    { key: 1, title: 'button1', code: 'code1' },
+    { key: 2, title: 'button2', code: 'code2' },
+    { key: 3, title: 'button3', code: 'code3' },
+    { key: 4, title: 'button4', code: 'code4' },
+    { key: 5, title: 'button5', code: 'code5' },
+    { key: 6, title: 'button6', code: 'code6' },
+    { key: 7, title: 'button7', code: 'code7' },
+    { key: 8, title: 'button8', code: 'code8' },
+    { key: 9, title: 'button9', code: 'code9' },
+    { key: 10, title: 'button10', code: 'code10' }
   ];
 }
 
@@ -70,16 +70,14 @@ init();
 
 <template>
   <AModal v-model:open="visible" :title="title" class="w-480px">
-    <ATree v-model:checked-keys="checks" :tree-data="tree" checkable class="h-280px" />
+    <ATree v-model:checked-keys="checks" :tree-data="tree" checkable :height="280" class="h-280px" />
     <template #footer>
-      <ASpace>
-        <AButton size="small" class="mt-16px" @click="closeModal">
-          {{ $t('common.cancel') }}
-        </AButton>
-        <AButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
-          {{ $t('common.confirm') }}
-        </AButton>
-      </ASpace>
+      <AButton size="small" class="mt-16px" @click="closeModal">
+        {{ $t('common.cancel') }}
+      </AButton>
+      <AButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </AButton>
     </template>
   </AModal>
 </template>

diff --git a/src/views/manage/role/modules/menu-auth-modal.vue b/src/views/manage/role/modules/menu-auth-modal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, shallowRef, watch } from 'vue';
+import type { SelectProps } from 'ant-design-vue';
+import type { DataNode } from 'ant-design-vue/es/tree';
 import { $t } from '@/locales';
 import { fetchGetAllPages, fetchGetMenuTree } from '@/service/api';
 
@@ -32,10 +34,10 @@ async function getHome() {
   home.value = 'home';
 }
 
-async function updateHome(val: string) {
+async function updateHome(val: SelectProps['value']) {
   // request
 
-  home.value = val;
+  home.value = val as string;
 }
 
 const pages = shallowRef<string[]>([]);
@@ -57,22 +59,41 @@ const pageSelectOptions = computed(() => {
   return opts;
 });
 
-const tree = shallowRef<Api.SystemManage.MenuTree[]>([]);
+const tree = shallowRef<DataNode[]>([]);
 
 async function getTree() {
   const { error, data } = await fetchGetMenuTree();
 
   if (!error) {
-    tree.value = data;
+    tree.value = recursiveTransform(data);
   }
 }
 
+function recursiveTransform(data: Api.SystemManage.MenuTree[]): DataNode[] {
+  return data.map(item => {
+    const { id: key, label } = item;
+
+    if (item.children) {
+      return {
+        key,
+        title: label,
+        children: recursiveTransform(item.children)
+      };
+    }
+
+    return {
+      key,
+      title: label
+    };
+  });
+}
+
 const checks = shallowRef<number[]>([]);
 
 async function getChecks() {
   console.log(props.roleId);
   // request
-  checks.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
+  checks.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16, 17, 18, 19, 20, 21];
 }
 
 function handleSubmit() {
@@ -84,11 +105,11 @@ function handleSubmit() {
   closeModal();
 }
 
-function init() {
+async function init() {
   getHome();
   getPages();
-  getTree();
-  getChecks();
+  await getTree();
+  await getChecks();
 }
 
 watch(visible, val => {
@@ -99,32 +120,21 @@ watch(visible, val => {
 </script>
 
 <template>
-  <NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
+  <AModal v-model:open="visible" :title="title" class="w-480px">
     <div class="flex-y-center gap-16px pb-12px">
       <div>{{ $t('page.manage.menu.home') }}</div>
-      <NSelect :value="home" :options="pageSelectOptions" size="small" class="w-160px" @update:value="updateHome" />
+      <ASelect :value="home" :options="pageSelectOptions" class="w-240px" @update:value="updateHome" />
     </div>
-    <NTree
-      v-model:checked-keys="checks"
-      :data="tree"
-      key-field="id"
-      checkable
-      expand-on-click
-      virtual-scroll
-      block-line
-      class="h-280px"
-    />
+    <ATree v-model:checked-keys="checks" :tree-data="tree" checkable :height="280" class="h-280px" />
     <template #footer>
-      <NSpace justify="end">
-        <NButton size="small" class="mt-16px" @click="closeModal">
-          {{ $t('common.cancel') }}
-        </NButton>
-        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
-          {{ $t('common.confirm') }}
-        </NButton>
-      </NSpace>
+      <AButton size="small" class="mt-16px" @click="closeModal">
+        {{ $t('common.cancel') }}
+      </AButton>
+      <AButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </AButton>
     </template>
-  </NModal>
+  </AModal>
 </template>
 
 <style scoped></style>
diff --git a/src/views/manage/role/modules/role-operate-drawer.vue b/src/views/manage/role/modules/role-operate-drawer.vue
@@ -124,10 +124,10 @@ watch(visible, () => {
       <ButtonAuthModal v-model:visible="buttonAuthVisible" :role-id="roleId" />
     </ASpace>
     <template #footer>
-      <ASpace :size="16">
+      <div class="flex-y-center justify-end gap-12px">
         <AButton @click="closeDrawer">{{ $t('common.cancel') }}</AButton>
         <AButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</AButton>
-      </ASpace>
+      </div>
     </template>
   </ADrawer>
 </template>