feat(积分商品分类): 添加分页功能并支持按排序值排序

在积分商品分类页面添加分页组件,支持分页查询和排序
新增排序值字段展示,并对分类列表按排序值进行递归排序
This commit is contained in:
lifenlong
2025-11-20 15:32:46 +08:00
parent 4efbec5741
commit 5f6eb6a26d

View File

@@ -22,6 +22,20 @@
<Button @click.native="remove(scope.row)" type="primary" size="small">删除</Button> <Button @click.native="remove(scope.row)" type="primary" size="small">删除</Button>
</template> </template>
</tree-table> </tree-table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card> </Card>
<Modal <Modal
:title="modalTitle" :title="modalTitle"
@@ -74,6 +88,12 @@ export default {
modalTitle: "", // 添加或编辑标题 modalTitle: "", // 添加或编辑标题
showParent: false, // 是否展示上级菜单 showParent: false, // 是否展示上级菜单
parentTitle: "", // 父级菜单名称 parentTitle: "", // 父级菜单名称
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "sortOrder",
order: "asc"
},
formAdd: { formAdd: {
// 添加或编辑表单对象初始化数据 // 添加或编辑表单对象初始化数据
parentId: 0, parentId: 0,
@@ -92,6 +112,11 @@ export default {
key: "name", key: "name",
minWidth: "120px", minWidth: "120px",
}, },
{
title: "排序值",
key: "sortOrder",
minWidth: "120px",
},
{ {
title: "操作", title: "操作",
key: "action", key: "action",
@@ -103,6 +128,7 @@ export default {
}, },
], ],
tableData: [], // 表格数据 tableData: [], // 表格数据
total: 0
}; };
}, },
methods: { methods: {
@@ -185,13 +211,34 @@ export default {
// 获取所有分类 // 获取所有分类
getAllList() { getAllList() {
this.loading = true; this.loading = true;
getPointsGoodsCategoryList().then((res) => { getPointsGoodsCategoryList(this.searchForm).then((res) => {
this.loading = false; this.loading = false;
if (res.success) { if (res.success) {
this.tableData = res.result.records; const records = res.result.records || [];
const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
const sortRecursively = (list = []) => {
list.sort(sortFn);
list.forEach((item) => {
if (Array.isArray(item.children) && item.children.length) {
sortRecursively(item.children);
}
});
return list;
};
this.tableData = sortRecursively(records);
this.total = res.result.total || 0;
} }
}); });
}, },
changePage(v) {
this.searchForm.pageNumber = v;
this.getAllList();
},
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getAllList();
}
}, },
mounted() { mounted() {
this.init(); this.init();