refactor(projects): page manage_role: extract module

src/components/advanced/table-header-operation.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FilteredColumn } from '@/hooks/common/table';
+
+defineOptions({
+  name: 'TableHeaderOperation'
+});
+
+interface Props {
+  disabledDelete?: boolean;
+  loading?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'add'): void;
+  (e: 'delete'): void;
+  (e: 'refresh'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const columns = defineModel<FilteredColumn[]>('columns', {
+  default: () => []
+});
+
+function add() {
+  emit('add');
+}
+
+function batchDelete() {
+  emit('delete');
+}
+
+function refresh() {
+  emit('refresh');
+}
+</script>
+
+<template>
+  <NSpace wrap justify="end" class="<sm:w-200px">
+    <NButton size="small" ghost type="primary" @click="add">
+      <template #icon>
+        <icon-ic-round-plus class="text-icon" />
+      </template>
+      {{ $t('common.add') }}
+    </NButton>
+    <NPopconfirm @positive-click="batchDelete">
+      <template #trigger>
+        <NButton size="small" ghost type="error" :disabled="disabledDelete">
+          <template #icon>
+            <icon-ic-round-delete class="text-icon" />
+          </template>
+          {{ $t('common.batchDelete') }}
+        </NButton>
+      </template>
+      {{ $t('common.confirmDelete') }}
+    </NPopconfirm>
+    <NButton size="small" @click="refresh">
+      <template #icon>
+        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+      </template>
+      {{ $t('common.refresh') }}
+    </NButton>
+    <TableColumnSetting v-model:columns="columns" />
+  </NSpace>
+</template>
+
+<style scoped></style>

src/hooks/common/table.ts

@@ -71,7 +71,7 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
 
   const { apiFn, apiParams, transformer, onPaginationChanged, immediate = true } = config;
 
-  const searchParams: NonNullable<Parameters<Fn>[0]> = reactive(apiParams || {});
+  const searchParams: NonNullable<Parameters<Fn>[0]> = reactive({ ...apiParams });
 
   const { columns, filteredColumns, reloadColumns } = useTableColumn(config.columns);
 
@@ -125,9 +125,7 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
 
   /** reset search params */
   function resetSearchParams() {
-    Object.keys(searchParams).forEach(key => {
+    Object.assign(searchParams, apiParams);
-      searchParams[key as keyof typeof searchParams] = undefined;
-    });
   }
 
   if (immediate) {
@@ -158,8 +156,8 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
     updatePagination,
     getData,
     searchParams,
-    resetSearchParams,
+    updateSearchParams,
-    updateSearchParams
+    resetSearchParams
   };
 }
 

src/typings/components.d.ts

@@ -61,6 +61,7 @@ declare module 'vue' {
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
@@ -80,6 +81,7 @@ declare module 'vue' {
     SystemLogo: typeof import('./../components/common/system-logo.vue')['default']
     TableColumnSetting: typeof import('./../components/advanced/table-column-setting.vue')['default']
     TableColumnSettings: typeof import('./../components/advanced/table-column-settings.vue')['default']
+    TableHeaderOperation: typeof import('./../components/advanced/table-header-operation.vue')['default']
     ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
     WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
   }

src/views/manage/role/context.ts

@@ -0,0 +1,12 @@
+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

@@ -6,9 +6,9 @@ import { fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import { roleStatusOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
 import OperateRoleDrawer, { type OperateType } from './operate-role-drawer.vue';
+import RoleSearch from './role-search.vue';
+import { setupRoleSearchContext } from './context';
 
 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
@@ -21,7 +21,12 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
   apiFn: fetchGetRoleList,
   apiParams: {
     current: 1,
-    size: 10
+    size: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    roleName: null,
+    roleCode: null,
+    roleStatus: null
   },
   transformer: res => {
     const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
@@ -90,6 +95,9 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
   ]
 });
 
+// provide searchParams
+setupRoleSearchContext(searchParams);
+
 const operateType = ref<OperateType>('add');
 
 function handleAdd() {
@@ -135,70 +143,17 @@ function getIndex(index: number) {
 
 <template>
   <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
-    <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
+    <RoleSearch @reset="resetSearchParams" @search="getData" />
-      <NForm :model="searchParams" 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')" />
-          </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')" />
-          </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"
-              :placeholder="$t('page.manage.role.form.roleStatus')"
-              :options="translateOptions(roleStatusOptions)"
-              clearable
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24 s:12 m:6">
-            <NSpace class="w-full" justify="end">
-              <NButton @click="resetSearchParams">
-                <template #icon>
-                  <icon-ic-round-refresh class="text-icon" />
-                </template>
-                {{ $t('common.reset') }}
-              </NButton>
-              <NButton type="primary" ghost @click="getData">
-                <template #icon>
-                  <icon-ic-round-search class="text-icon" />
-                </template>
-                {{ $t('common.search') }}
-              </NButton>
-            </NSpace>
-          </NFormItemGi>
-        </NGrid>
-      </NForm>
-    </NCard>
     <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
       <template #header-extra>
-        <NSpace wrap justify="end" class="<sm:w-200px">
+        <TableHeaderOperation
-          <NButton size="small" ghost type="primary" @click="handleAdd">
+          v-model:columns="filteredColumns"
-            <template #icon>
+          :disabled-delete="checkedRowKeys.length === 0"
-              <icon-ic-round-plus class="text-icon" />
+          :loading="loading"
-            </template>
+          @add="handleAdd"
-            {{ $t('common.add') }}
+          @delete="handleBatchDelete"
-          </NButton>
+          @refresh="getData"
-          <NPopconfirm @positive-click="handleBatchDelete">
+        />
-            <template #trigger>
-              <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
-                <template #icon>
-                  <icon-ic-round-delete class="text-icon" />
-                </template>
-                {{ $t('common.batchDelete') }}
-              </NButton>
-            </template>
-            {{ $t('common.confirmDelete') }}
-          </NPopconfirm>
-          <NButton size="small" @click="getData">
-            <template #icon>
-              <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
-            </template>
-            {{ $t('common.refresh') }}
-          </NButton>
-          <TableColumnSetting v-model:columns="filteredColumns" />
-        </NSpace>
       </template>
       <NDataTable
         v-model:checked-row-keys="checkedRowKeys"

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

@@ -0,0 +1,80 @@
+<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'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// inject searchParams
+const { searchParams } = useRoleSearchContext();
+
+function reset() {
+  emit('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">
+      <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')" />
+        </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')" />
+        </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"
+            :placeholder="$t('page.manage.role.form.roleStatus')"
+            :options="translateOptions(roleStatusOptions)"
+            clearable
+          />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6">
+          <NSpace class="w-full" justify="end">
+            <NButton @click="reset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              {{ $t('common.reset') }}
+            </NButton>
+            <NButton type="primary" ghost @click="search">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              {{ $t('common.search') }}
+            </NButton>
+          </NSpace>
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>
+
+<style scoped></style>