mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-17 00:15:53 +08:00
feat(积分商品分类): 添加分页功能并支持按排序值排序
在积分商品分类页面添加分页组件,支持分页查询和排序 新增排序值字段展示,并对分类列表按排序值进行递归排序
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user