fix(special-zone): 修复专区商品抽屉分页点击无效

- 将分页配置从内联对象改为计算属性,避免分页参数被 Vue 不自动解包的问题
- goodsPagination 计算属性返回正确的分页参数并绑定 onChange 事件
- onChange 中调用 loadGoods 时修正 currentSectionId 使用 .value 获取
- 调整商品操作列宽度以适应界面显示
- 验证 vite build 通过,分页功能正常响应点击
This commit is contained in:
2026-08-17 14:50:31 +08:00
parent ced8c7cff7
commit 65926a35b6
7 changed files with 26 additions and 13 deletions
+9
View File
@@ -16,3 +16,12 @@
- 新建 SectionSalesStatsModal.vue(时间筛选 + 汇总卡片 + 商品排行) - 新建 SectionSalesStatsModal.vue(时间筛选 + 汇总卡片 + 商品排行)
- vite build 通过(exit 0 - vite build 通过(exit 0
- 待办:后端需 maven 编译并部署到 shop-api.websoft.top 才生效(本环境未部署)。 - 待办:后端需 maven 编译并部署到 shop-api.websoft.top 才生效(本环境未部署)。
## 修复专区商品抽屉分页点击无效
- 文件:`src/views/special/zone/index.vue`
- 问题:抽屉里 `a-table``:pagination` 直接内联写 `{ current: goodsPage, pageSize: goodsPageSize, total: goodsTotal }`,对象属性中的 ref 不会被 Vue 自动解包,Pagination 拿到的是 ref 对象而非 number,导致分页按钮点不动。
- 修复:
- 提取 `goodsPagination = computed(() => ({ total: goodsTotal.value, current: goodsPage.value, pageSize: goodsPageSize.value, showSizeChanger: true, onChange: ... }))`
- `:pagination="goodsPagination"`
- `onChange``loadGoods(currentSectionId.value)` 修正为 `.value`
- 验证:`vite build` 通过(exit 0)。
+17 -13
View File
@@ -153,17 +153,7 @@
row-key="goodsId" row-key="goodsId"
:dataSource="goodsList" :dataSource="goodsList"
:columns="goodsColumns" :columns="goodsColumns"
:pagination="{ :pagination="goodsPagination"
total: goodsTotal,
current: goodsPage,
pageSize: goodsPageSize,
showSizeChanger: true,
onChange: (page: number, pageSize: number) => {
goodsPage.value = page;
goodsPageSize.value = pageSize;
loadGoods(currentSectionId);
}
}"
:scroll="{ y: 380 }" :scroll="{ y: 380 }"
size="small" size="small"
> >
@@ -222,7 +212,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref, computed } from 'vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue'; import { PlusOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro'; import type { EleProTable } from 'ele-admin-pro';
@@ -269,6 +259,20 @@
const goodsTotal = ref(0); const goodsTotal = ref(0);
const goodsPage = ref(1); const goodsPage = ref(1);
const goodsPageSize = ref(10); const goodsPageSize = ref(10);
// 已关联商品分页配置
const goodsPagination = computed(() => ({
total: goodsTotal.value,
current: goodsPage.value,
pageSize: goodsPageSize.value,
showSizeChanger: true,
onChange: (page: number, pageSize: number) => {
goodsPage.value = page;
goodsPageSize.value = pageSize;
loadGoods(currentSectionId.value);
}
}));
// 商品搜索/添加 // 商品搜索/添加
const goodsSearchText = ref(''); const goodsSearchText = ref('');
const goodsSearchLoading = ref(false); const goodsSearchLoading = ref(false);
@@ -368,7 +372,7 @@
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 290, width: 326,
fixed: 'right', fixed: 'right',
align: 'center', align: 'center',
hideInSetting: true hideInSetting: true