refactor(pagination): 全站统一隐藏分页导航按钮
- cargo-type 页面原先通过局部方案隐藏首页/上一页/下一页/尾页按钮,现回退该方案 - 修改 src/utils/pagination.js,删除首页和尾页按钮全局增强器注入逻辑 - 优化 updatePaginationButtons,移除首页/尾页按钮状态更新代码 - 在 src/styles/element-ui.scss 添加全局样式,统一隐藏 el-pagination 组件的上一页和下一页按钮 - 保留跳转按钮功能,确保分页跳转操作可用 - 修改语言文件,将“收缩”文案优化为“收起”以提升用户体验 - 全站所有分页组件仅显示总数、每页大小、页码与跳转,符合统一规范要求 - 如需恢复个别页面导航按钮,需添加更高优先级样式覆盖或单独处理
This commit is contained in:
@@ -63,7 +63,7 @@ export default {
|
||||
show: '显 示',
|
||||
hide: '隐 藏',
|
||||
open: '展 开',
|
||||
shrink: '收 缩',
|
||||
shrink: '收 起',
|
||||
printBtn: '打 印',
|
||||
excelBtn: '导 出',
|
||||
updateBtn: '修 改',
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
.basic-container__card .avue-crud__search.el-card > .el-card__body {
|
||||
padding: 12px 12px 4px;
|
||||
padding: 18px 18px 8px;
|
||||
}
|
||||
|
||||
.basic-container__card .avue-crud__header {
|
||||
@@ -127,7 +127,7 @@
|
||||
.avue-crud__search .el-form-item--small.el-form-item,
|
||||
.avue-crud__search .el-form-item--large.el-form-item,
|
||||
.avue-crud__search .el-form-item--medium.el-form-item {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.avue-crud__search .el-form-item__label {
|
||||
@@ -439,6 +439,15 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 全站统一:隐藏分页的「上一页 / 下一页」原生导航按钮
|
||||
// (「首页 / 尾页」由 src/utils/pagination.js 的全局增强器统一不再注入)
|
||||
.el-pagination {
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.avue-crud__pagination .el-pagination,
|
||||
.empty-pagination .el-pagination,
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
const FIRST_BUTTON_CLASS = 'erp-pagination-first';
|
||||
const LAST_BUTTON_CLASS = 'erp-pagination-last';
|
||||
const JUMP_BUTTON_CLASS = 'erp-pagination-jump';
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
const DEFAULT_PAGE_SIZES = [10, 20, 50, 100];
|
||||
@@ -101,38 +99,19 @@ const normalizeComponentPageConfigs = pagination => {
|
||||
};
|
||||
|
||||
const updatePaginationButtons = pagination => {
|
||||
const { currentPage, pageCount, jumpInput } = getPaginationState(pagination);
|
||||
const firstButton = pagination.querySelector(`.${FIRST_BUTTON_CLASS}`);
|
||||
const lastButton = pagination.querySelector(`.${LAST_BUTTON_CLASS}`);
|
||||
const { jumpInput } = getPaginationState(pagination);
|
||||
const jumpButton = pagination.querySelector(`.${JUMP_BUTTON_CLASS}`);
|
||||
|
||||
setButtonDisabled(firstButton, currentPage <= 1);
|
||||
setButtonDisabled(lastButton, currentPage >= pageCount);
|
||||
setButtonDisabled(jumpButton, !jumpInput || jumpInput.disabled);
|
||||
};
|
||||
|
||||
const enhancePagination = pagination => {
|
||||
const prevButton = pagination.querySelector('.btn-prev');
|
||||
const nextButton = pagination.querySelector('.btn-next');
|
||||
const jumpWrapper = pagination.querySelector('.el-pagination__jump');
|
||||
|
||||
normalizeComponentPageConfigs(pagination);
|
||||
|
||||
if (prevButton && !pagination.querySelector(`.${FIRST_BUTTON_CLASS}`)) {
|
||||
const firstButton = createPaginationButton(FIRST_BUTTON_CLASS, '首页', () => {
|
||||
changePage(pagination, 1);
|
||||
});
|
||||
prevButton.before(firstButton);
|
||||
}
|
||||
|
||||
if (nextButton && !pagination.querySelector(`.${LAST_BUTTON_CLASS}`)) {
|
||||
const lastButton = createPaginationButton(LAST_BUTTON_CLASS, '尾页', () => {
|
||||
const { pageCount } = getPaginationState(pagination);
|
||||
changePage(pagination, pageCount);
|
||||
});
|
||||
nextButton.after(lastButton);
|
||||
}
|
||||
|
||||
// 全站统一:不再注入「首页 / 尾页」按钮;
|
||||
// 原生「上一页 / 下一页」由全局样式(src/styles/element-ui.scss)统一隐藏。
|
||||
if (jumpWrapper && !pagination.querySelector(`.${JUMP_BUTTON_CLASS}`)) {
|
||||
const jumpButton = createPaginationButton(JUMP_BUTTON_CLASS, '跳转', () => {
|
||||
const { jumpInput } = getPaginationState(pagination);
|
||||
|
||||
Reference in New Issue
Block a user