refactor(shop/cabinet-goods): 调整分页大小并优化样式

将默认分页大小从10调整为5,并优化了表格和分页的样式,提升了用户体验。
This commit is contained in:
dzq 2025-04-25 09:57:54 +08:00
parent 5059eeca54
commit 463793f3d5
1 changed files with 17 additions and 7 deletions

View File

@ -28,7 +28,7 @@ const searchFormParams = ref({
}); });
const pagination = ref({ const pagination = ref({
pageSize: 10, pageSize: 5,
currentPage: 1, currentPage: 1,
total: 0 total: 0
}); });
@ -231,13 +231,13 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
</el-form-item> </el-form-item>
</el-form> </el-form>
<PureTableBar title="柜体单元格管理" @refresh="getList"> <div title="柜体单元格管理" @refresh="getList" class="cell-list">
<template #buttons> <!-- <template #buttons>
<el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0" <el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
@click="handleBulkDelete"> @click="handleBulkDelete">
批量删除 批量删除
</el-button> </el-button>
</template> </template> -->
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId" <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
@selection-change="handleSelectionChange" border> @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
@ -278,9 +278,9 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" /> @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</PureTableBar> </div>
<el-dialog v-model="configVisible" title="配置商品" width="80%"> <el-dialog v-model="configVisible" title="配置商品" width="80%">
<CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" /> <CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" />
</el-dialog> </el-dialog>
@ -305,4 +305,14 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
.search-form { .search-form {
padding-left: 10px; padding-left: 10px;
} }
.pagination {
margin-top: 10px;
background: #FFFFFF;
padding: 7px;
}
.cell-list {
margin-top: 10px;
}
</style> </style>