refactor(projects): perf page manage_role

src/typings/components.d.ts

@@ -63,6 +63,8 @@ declare module 'vue' {
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']

src/typings/naive-ui.d.ts

@@ -0,0 +1,3 @@
+declare namespace NaiveUI {
+  type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+}

src/views/manage/role/context.ts

@@ -1,12 +0,0 @@
-import { useContext } from '@sa/hooks';
-
-function useRoleSearch(searchParams: Api.SystemManage.RoleSearchParams) {
-  return {
-    searchParams
-  };
-}
-
-export const { setupStore: setupRoleSearchContext, useStore: useRoleSearchContext } = useContext(
-  'role-search',
-  useRoleSearch
-);

src/views/manage/role/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import OperateRoleDrawer, { type OperateType } from './operate-role-drawer.vue';
-import RoleSearch from './role-search.vue';
-import { setupRoleSearchContext } from './context';
+import { roleStatusRecord } from '@/constants/business';
+import RoleOperateDrawer, { type OperateType } from './modules/role-operate-drawer.vue';
+import RoleSearch from './modules/role-search.vue';
 
 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
@@ -67,7 +67,21 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
     {
       key: 'roleStatus',
       title: $t('page.manage.role.roleStatus'),
-      align: 'center'
+      align: 'center',
+      render: row => {
+        if (row.roleStatus === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.SystemManage.RoleStatus, NaiveUI.ThemeColor> = {
+          1: 'success',
+          2: 'warning'
+        };
+
+        const label = $t(roleStatusRecord[row.roleStatus]);
+
+        return <NTag type={tagMap[row.roleStatus]}>{label}</NTag>;
+      }
     },
     {
       key: 'operate',
@@ -95,9 +109,6 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
   ]
 });
 
-// provide searchParams
-setupRoleSearchContext(searchParams);
-
 const operateType = ref<OperateType>('add');
 
 function handleAdd() {
@@ -143,7 +154,7 @@ function getIndex(index: number) {
 
 <template>
   <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
-    <RoleSearch @reset="resetSearchParams" @search="getData" />
+    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
     <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
       <template #header-extra>
         <TableHeaderOperation
@@ -167,7 +178,7 @@ function getIndex(index: number) {
         :row-key="item => item.id"
         class="sm:h-full"
       />
-      <OperateRoleDrawer
+      <RoleOperateDrawer
         v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"

src/views/manage/role/modules/role-operate-drawer.vue

@@ -3,10 +3,9 @@ import { computed, reactive, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
 import { roleStatusOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
 
 defineOptions({
-  name: 'OperateRoleDrawer'
+  name: 'RoleOperateDrawer'
 });
 
 /**
@@ -110,11 +109,9 @@ watch(visible, () => {
           <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
         </NFormItem>
         <NFormItem :label="$t('page.manage.role.roleStatus')" path="roleStatus">
-          <NSelect
-            v-model:value="model.roleStatus"
-            :placeholder="$t('page.manage.role.form.roleStatus')"
-            :options="translateOptions(roleStatusOptions)"
-          />
+          <NRadioGroup v-model:value="model.roleStatus">
+            <NRadio v-for="item in roleStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
         </NFormItem>
         <NFormItem :label="$t('page.manage.role.roleDesc')" path="roleDesc">
           <NInput v-model:value="model.roleDesc" :placeholder="$t('page.manage.role.form.roleDesc')" />

src/views/manage/role/modules/role-search.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { watch } from 'vue';
 import { $t } from '@/locales';
 import { roleStatusOptions } from '@/constants/business';
 import { translateOptions } from '@/utils/common';
-import { useRoleSearchContext } from './context';
 
 defineOptions({
   name: 'RoleSearch'
@@ -16,8 +14,7 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-// inject searchParams
-const { searchParams } = useRoleSearchContext();
+const model = defineModel<Api.SystemManage.RoleSearchParams>('model', { required: true });
 
 function reset() {
   emit('reset');
@@ -26,31 +23,21 @@ function reset() {
 function search() {
   emit('search');
 }
-
-watch(
-  () => searchParams,
-  val => {
-    console.log('val: ', val);
-  },
-  {
-    deep: true
-  }
-);
 </script>
 
 <template>
   <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm :model="searchParams" label-placement="left">
+    <NForm :model="model" label-placement="left">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
-          <NInput v-model:value="searchParams.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
+          <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
         </NFormItemGi>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
-          <NInput v-model:value="searchParams.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
+          <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
         </NFormItemGi>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
           <NSelect
-            v-model:value="searchParams.roleStatus"
+            v-model:value="model.roleStatus"
             :placeholder="$t('page.manage.role.form.roleStatus')"
             :options="translateOptions(roleStatusOptions)"
             clearable