feat(分页): 为每页添加独立的导航配置支持
重构分页逻辑,将导航配置从全局改为每页独立 新增 page_nav_props_by_index 存储每页导航属性 添加 normalizePaginatorProps 方法规范化分页符属性
Showing
1 changed file
with
48 additions
and
26 deletions
| ... | @@ -15,6 +15,8 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -15,6 +15,8 @@ export function usePagination(formDataRef, options = {}) { |
| 15 | const enable_pagination = ref(false) | 15 | const enable_pagination = ref(false) |
| 16 | // 当前页索引 | 16 | // 当前页索引 |
| 17 | const current_page_index = ref(0) | 17 | const current_page_index = ref(0) |
| 18 | + // 每一页的导航配置(由相邻的 paginator 控件决定) | ||
| 19 | + const page_nav_props_by_index = ref([]) | ||
| 18 | 20 | ||
| 19 | // 过滤后的分页:剔除被隐藏(disabled)的字段,但保留空页占位,确保分页总数与 paginator 一致 | 21 | // 过滤后的分页:剔除被隐藏(disabled)的字段,但保留空页占位,确保分页总数与 paginator 一致 |
| 20 | const filtered_pages = computed(() => { | 22 | const filtered_pages = computed(() => { |
| ... | @@ -43,30 +45,62 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -43,30 +45,62 @@ export function usePagination(formDataRef, options = {}) { |
| 43 | }) | 45 | }) |
| 44 | 46 | ||
| 45 | /** | 47 | /** |
| 48 | + * 规范化分页符属性为导航配置 | ||
| 49 | + * @param {Object} props 分页符的 component_props | ||
| 50 | + * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} 导航配置 | ||
| 51 | + */ | ||
| 52 | + const normalizePaginatorProps = (props = {}) => { | ||
| 53 | + // 中文文案默认值 | ||
| 54 | + const nav = { prev_text: '上一页', next_text: '下一页', prev_disabled: false } | ||
| 55 | + if (props.back_title) nav.prev_text = props.back_title | ||
| 56 | + if (props.next_title) nav.next_text = props.next_title | ||
| 57 | + // 是否允许返回:true 允许,false 不允许 | ||
| 58 | + if (typeof props.is_back === 'boolean') nav.prev_disabled = !props.is_back | ||
| 59 | + return nav | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + /** | ||
| 46 | * 构建分页分组 | 63 | * 构建分页分组 |
| 47 | - * @description 优先按 paginator 分组;若仅一组则按固定大小分片 | 64 | + * @description 优先按 paginator 分组;并为每一页记录其对应的导航文案与返回策略 |
| 48 | */ | 65 | */ |
| 49 | const buildPages = () => { | 66 | const buildPages = () => { |
| 50 | - const result = [] | 67 | + const pages = [] |
| 68 | + const navs = [] | ||
| 51 | let cur = [] | 69 | let cur = [] |
| 70 | + // 当前页导航配置,默认值;当遇到 paginator 时更新为“下一页”的导航 | ||
| 71 | + let current_nav = normalizePaginatorProps() | ||
| 52 | // 连续的 paginator 需要忽略,避免出现空分页 | 72 | // 连续的 paginator 需要忽略,避免出现空分页 |
| 53 | let last_was_paginator = false | 73 | let last_was_paginator = false |
| 54 | formDataRef.value.forEach(item => { | 74 | formDataRef.value.forEach(item => { |
| 55 | const tag = item.component_props?.tag | 75 | const tag = item.component_props?.tag |
| 56 | - // 分隔符 paginator 作为分页分组边界 | 76 | + // 分隔符 paginator 作为分页分组边界,同时决定后续一页的导航配置 |
| 57 | if (tag === 'paginator') { | 77 | if (tag === 'paginator') { |
| 58 | - // 若前一个也是 paginator,则忽略本次(不产生空页) | 78 | + // 连续分页符:忽略后者,保留先前设置,避免空页与属性覆盖 |
| 59 | if (last_was_paginator) return | 79 | if (last_was_paginator) return |
| 60 | - if (cur.length) result.push(cur) | 80 | + // 如果当前已有内容,先把“这一页”收束,并使用当前导航配置 |
| 61 | - cur = [] | 81 | + if (cur.length) { |
| 82 | + pages.push(cur) | ||
| 83 | + navs.push(current_nav) | ||
| 84 | + cur = [] | ||
| 85 | + } | ||
| 86 | + // 更新“下一页”的导航配置为本分页符设置 | ||
| 87 | + current_nav = normalizePaginatorProps(item.component_props) | ||
| 62 | last_was_paginator = true | 88 | last_was_paginator = true |
| 63 | return | 89 | return |
| 64 | } | 90 | } |
| 91 | + // 普通字段加入当前页 | ||
| 65 | cur.push(item.key) | 92 | cur.push(item.key) |
| 66 | last_was_paginator = false | 93 | last_was_paginator = false |
| 67 | }) | 94 | }) |
| 68 | - if (cur.length) result.push(cur) | 95 | + |
| 69 | - if (result.length <= 1) { | 96 | + // 收尾:最后一页 |
| 97 | + if (cur.length) { | ||
| 98 | + pages.push(cur) | ||
| 99 | + navs.push(current_nav) | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + // 若未显式分页,仅按固定大小分片,并为每一页设置默认导航 | ||
| 103 | + if (pages.length <= 1) { | ||
| 70 | const size = 8 | 104 | const size = 8 |
| 71 | const keys = formDataRef.value.filter(i => i.component_props?.tag !== 'paginator').map(i => i.key) | 105 | const keys = formDataRef.value.filter(i => i.component_props?.tag !== 'paginator').map(i => i.key) |
| 72 | const chunked = [] | 106 | const chunked = [] |
| ... | @@ -74,8 +108,10 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -74,8 +108,10 @@ export function usePagination(formDataRef, options = {}) { |
| 74 | chunked.push(keys.slice(i, i + size)) | 108 | chunked.push(keys.slice(i, i + size)) |
| 75 | } | 109 | } |
| 76 | pages_raw.value = chunked.length ? chunked : [keys] | 110 | pages_raw.value = chunked.length ? chunked : [keys] |
| 111 | + page_nav_props_by_index.value = (chunked.length ? chunked : [keys]).map(() => normalizePaginatorProps()) | ||
| 77 | } else { | 112 | } else { |
| 78 | - pages_raw.value = result | 113 | + pages_raw.value = pages |
| 114 | + page_nav_props_by_index.value = navs | ||
| 79 | } | 115 | } |
| 80 | } | 116 | } |
| 81 | 117 | ||
| ... | @@ -94,26 +130,12 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -94,26 +130,12 @@ export function usePagination(formDataRef, options = {}) { |
| 94 | 130 | ||
| 95 | /** | 131 | /** |
| 96 | * 分页导航配置 | 132 | * 分页导航配置 |
| 97 | - * @description 仅从 tag 为 paginator 的字段中读取导航文案与可返回状态 | 133 | + * @description 根据当前页索引读取对应的分页符导航文案与返回控制 |
| 98 | * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} | 134 | * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} |
| 99 | */ | 135 | */ |
| 100 | const page_nav = computed(() => { | 136 | const page_nav = computed(() => { |
| 101 | - // 默认文案与状态 | 137 | + const def = normalizePaginatorProps() |
| 102 | - let prev_text = '上一页' | 138 | + return page_nav_props_by_index.value[current_page_index.value] || def |
| 103 | - let next_text = '下一页' | ||
| 104 | - let prev_disabled = false | ||
| 105 | - | ||
| 106 | - // 仅查找 tag=paginator 的字段并提取其 component_props | ||
| 107 | - const paginator_item = formDataRef.value.find(i => i?.component_props?.tag === 'paginator') | ||
| 108 | - if (paginator_item && paginator_item.component_props) { | ||
| 109 | - const props = paginator_item.component_props | ||
| 110 | - if (props.back_title) prev_text = props.back_title | ||
| 111 | - if (props.next_title) next_text = props.next_title | ||
| 112 | - // is_back 表示是否允许返回 | ||
| 113 | - if (typeof props.is_back === 'boolean') prev_disabled = !props.is_back | ||
| 114 | - } | ||
| 115 | - | ||
| 116 | - return { prev_text, next_text, prev_disabled } | ||
| 117 | }) | 139 | }) |
| 118 | 140 | ||
| 119 | /** | 141 | /** | ... | ... |
-
Please register or login to post a comment