Browse Source

feat(config): 添加分页配置环境变量并应用到表格组件

新增 `VITE_PAGE_SIZE` 环境变量用于定义分页大小选项,并在多个页面及组件中
统一使用该配置。同时调整了商品列表列宽与横向滚动宽度以优化展示效果。
zhangtao 3 weeks ago
parent
commit
b191b7caa3

+ 3 - 0
.env

@@ -61,3 +61,6 @@ VITE_PROXY_LOG=Y
 VITE_DEVTOOLS_LAUNCH_EDITOR=code
 
 VITE_OSS_BASE_URL =  https://zswl-shop.oss-cn-chengdu.aliyuncs.com/
+
+#分页配置
+VITE_PAGE_SIZE=10, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000

+ 2 - 1
src/components/zt/Table/z-table.vue

@@ -15,6 +15,7 @@ export default defineComponent({
   emits: ['register', 'add', 'delete'],
   setup(props, { emit, slots }) {
     const appStore = useAppStore();
+    const pageSize = import.meta.env.VITE_PAGE_SIZE;
     const propsData = toRaw(props);
     const searchProps = ref<FormProps>();
     const tableProps = ref<tableProp>();
@@ -56,7 +57,7 @@ export default defineComponent({
         searchPage.size = Number(params.pageSize);
       },
       paginationProps: {
-        pageSizes: [10, 20, 50, 100, 150, 200]
+        pageSizes: pageSize.split(',').map(Number)
       },
       columns: () => handleGetColumns()
     });

+ 2 - 0
src/typings/vite-env.d.ts

@@ -10,6 +10,8 @@ declare namespace Env {
   /** Interface for import.meta */
   // eslint-disable-next-line @typescript-eslint/no-shadow
   interface ImportMeta extends ImportMetaEnv {
+    readonly VITE_PAGE_SIZE: string;
+
     /** The environment */
     readonly VITE_OSS_BASE_URL: string;
     /** The base url of the application */

+ 1 - 1
src/views/delivery/after-sales-order/index.vue

@@ -38,7 +38,7 @@ const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedT
   api: () => fetchGetAfterSalesOrderList({ ...searchParams, returnMoneySts: activeTab.value, ...unref(searchForm) }),
   transform: response => defaultTransform(response),
   paginationProps: {
-    pageSizes: [10, 20, 50, 100, 150, 200]
+    pageSizes: import.meta.env.VITE_PAGE_SIZE.split(',').map(Number)
   },
   onPaginationParamsChange: params => {
     searchParams.current = Number(params.page);

+ 1 - 1
src/views/delivery/normal-order/index.vue

@@ -37,7 +37,7 @@ const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedT
   api: () => fetchGetDeliveryOrderList({ ...searchParams, orderStatus: activeTab.value, ...unref(searchForm) }),
   transform: response => defaultTransform(response),
   paginationProps: {
-    pageSizes: [10, 20, 50, 100, 150, 200]
+    pageSizes: import.meta.env.VITE_PAGE_SIZE.split(',').map(Number)
   },
   onPaginationParamsChange: params => {
     searchParams.current = Number(params.page);

+ 2 - 2
src/views/goods/store-goods/index.vue

@@ -29,7 +29,7 @@ const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
     key: 'skuName',
     title: '商品信息',
     align: 'left',
-    width: 400,
+    width: 250,
     fixed: 'left',
     render: row => {
       if (!row.sku) {
@@ -226,7 +226,7 @@ const [registerTable, { getTableCheckedRowKeys, refresh, getTableData, getSeachF
     keyField: 'id',
     title: '商品列表',
     showAddButton: false,
-    scrollX: 1200
+    scrollX: 1800
   }
 });