refactor: 分页查询重构

src/components/TableList.vue

@@ -5,32 +5,57 @@
     import ElTable from './extra/ElTable.vue';
     import { ElTableColumn } from 'element-plus/es/components/table/index';
     const props = defineProps({
+        /**
+         * 列表唯一标识
+         */
         code: {
             type: String,
-            default: '',
+            required: true,
         },
+        /**
+         * 列表标题
+         */
         title: {
             type: String,
             default: '',
         },
+        /**
+         * 是否支持拖拽排序
+         */
         sortable: {
             type: Boolean,
             default: false,
         },
+        /**
+         * 列表配置
+         */
         config: {
             type: Object,
             required: true,
         },
+        /**
+         * 列表操作
+         */
         operation: {
             type: Array,
             default() {
                 return ['create', 'remove', 'search'];
             },
         },
+        /**
+         * 列表总数据量
+         */
         total: {
             type: Number,
             default: 0,
         },
+        /**
+         * 重置筛选条件，支持异步函数
+         */
+        reset: {
+            type: Function,
+            default: () => null,
+        },
     });
     const emits = defineEmits([
         'create',
@@ -41,7 +66,6 @@
         'selectAll',
         'selectionChange',
         'currentChange',
-        'reset',
         'template',
         'import',
         'export',
@@ -188,7 +212,7 @@
     const pages = computed(() => store.state.local.listPage);
     const search = ref(
         props.code
-            ? store.state.local.listPage[props.code]
+            ? _.cloneDeep(unref(pages)[props.code])
             : {
                   pageIndex: 1,
                   length: 10,
@@ -200,10 +224,13 @@
             length: 10,
         }
     ) => {
+        if (props.config.page?.sizes && !props.config.page?.sizes?.includes(page.length)) {
+            page.length = props.config.page.sizes[0];
+        }
         if (props.code) {
             store.commit('local/setListPage', {
                 ...unref(pages),
-                [props.code]: page,
+                [props.code]: _.cloneDeep(page),
             });
         }
         search.value = page;
@@ -223,10 +250,9 @@
     const handleSearch = () => {
         emits('search', unref(search));
     };
-    const handleReset = () => {
+    const handleReset = async () => {
-        emits('reset');
+        await props.reset?.();
         search.value = { pageIndex: 1, length: 10 };
-        handleSearch();
     };
     const handleTemplate = () => {
         emits('template');
@@ -418,7 +444,7 @@
                 ) : (
                     ''
                 )}
-                {props.code ? (
+                {props.config.setting !== false ? (
                     <ElButton class="setting-btn" icon="setting" type="text" onClick={() => handleSetting()}>
                         <ElIcon name="Setting" />
                         <span>设置</span>

src/store/modules/local.js

@@ -4,7 +4,9 @@ const state = () => ({
     listSettings: {},
     listPage: {},
 });
-const getters = {};
+const getters = {
+    page: (state) => (code) => state.listPage[code] || { pageIndex: 1, length: 10 },
+};
 const mutations = {
     sendMessage: (state) => (state.lastSendMessageTime = new Date().getTime()),
     setToken: (state, data) => (state.token = data),

src/store/modules/system/user.js

@@ -1,9 +1,10 @@
 import * as api from '@/api/system/user.js';
 import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
 const state = () => ({
+    code: 'UserManagement',
+    condition: {},
     list: [],
     total: 0,
-    page: { pageIndex: 1, length: 10 },
     opts: {
         init: false,
         sex: [],
@@ -11,13 +12,15 @@ const state = () => ({
 });
 const getters = {};
 const mutations = {
+    setCode: (state, data) => (state.code = data),
+    setCondition: (state, data) => (state.condition = data),
     setList: (state, data) => (state.list = data),
     setTotal: (state, data) => (state.total = data),
     setOpts: (state, data) => (state.opts = data),
 };
 const actions = {
-    search: async ({ state, commit }, data = {}) => {
+    search: async ({ state, commit, rootGetters }) => {
-        let res = await api.findUserList({ ...state.page, ...data });
+        let res = await api.findUserList({ ...rootGetters['local/page'](state.code), ...state.condition });
         if (res) {
             commit('setList', res.content);
             commit('setTotal', res.totalElements);

src/views/system/user/index.vue

@@ -1,9 +1,10 @@
 <template>
     <TableList
         v-loading="loading"
-        code="DemoList"
+        :code="code"
         :config="config"
         :data="list"
+        :reset="handleReset"
         title="用户"
         :total="total"
         @create="handleCreate"
@@ -24,6 +25,7 @@
     const router = useRouter();
     const store = useStore();
     const loading = ref(false);
+    const code = computed(() => store.state.user.code);
     const list = computed(() => store.state.user.list);
     const total = computed(() => store.state.user.total);
     const opts = computed(() => store.state.user.opts);
@@ -32,9 +34,27 @@
             username: null,
         },
     });
-    const handleSearch = async (page) => {
+    watch(
+        () => state.condition,
+        (value) => {
+            store.commit('user/setCondition', _.cloneDeep(value));
+        },
+        { immediate: true, deep: true }
+    );
+    const handleReset = () => {
+        // 模拟异步操作，用于演示这里支持异步函数
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                state.condition = {
+                    username: null,
+                };
+                resolve();
+            }, 1000);
+        });
+    };
+    const handleSearch = async () => {
         loading.value = true;
-        await store.dispatch('user/search', { ...page, ...state.condition });
+        await store.dispatch('user/search');
         loading.value = false;
     };
     const handleCreate = () => {
@@ -56,6 +76,13 @@
         console.info((enabled ? 'enabled ' : 'disabled ') + row.id);
     };
     const config = reactive({
+        // 隐藏列表设置按钮
+        setting: false,
+        // 可传入ElTable原生属性
+        table: {},
+        // 控制分页
+        page: { sizes: [20, 100] },
+        // 表格列配置
         columns: [
             {
                 type: 'selection',