hookehuyr

refactor(分页): 优化过滤分页逻辑并同步导航配置

过滤分页时移除空页并保持导航配置同步,确保仅对有内容的页显示导航
...@@ -18,20 +18,26 @@ export function usePagination(formDataRef, options = {}) { ...@@ -18,20 +18,26 @@ export function usePagination(formDataRef, options = {}) {
18 // 每一页的导航配置(由相邻的 paginator 控件决定) 18 // 每一页的导航配置(由相邻的 paginator 控件决定)
19 const page_nav_props_by_index = ref([]) 19 const page_nav_props_by_index = ref([])
20 20
21 - // 过滤后的分页:剔除被隐藏(disabled)的字段,但保留空页占位,确保分页总数与 paginator 一致 21 + /**
22 + * 过滤后的分页
23 + * @description 剔除被隐藏(disabled)的字段,并移除过滤后为空的页,确保分页总数只计算有内容的页
24 + */
22 const filtered_pages = computed(() => { 25 const filtered_pages = computed(() => {
26 + // 未构建分页时,直接按当前可见字段返回单页
23 if (!pages_raw.value.length) { 27 if (!pages_raw.value.length) {
24 const keys = formDataRef.value 28 const keys = formDataRef.value
25 .filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator') 29 .filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator')
26 .map(i => i.key) 30 .map(i => i.key)
27 return [keys] 31 return [keys]
28 } 32 }
33 + // 根据原始分页分组过滤出可见字段,并移除空页
29 const result = pages_raw.value 34 const result = pages_raw.value
30 .map(keys => keys.filter(k => { 35 .map(keys => keys.filter(k => {
31 const f = formDataRef.value.find(i => i.key === k) 36 const f = formDataRef.value.find(i => i.key === k)
32 return f && !f.component_props?.disabled 37 return f && !f.component_props?.disabled
33 })) 38 }))
34 - // 不再删除空页,以保证总页数符合分页符定义 39 + .filter(keys => keys.length > 0)
40 + // 兜底:若全部为空,则保留一个空页以维持形态
35 return result.length ? result : [[]] 41 return result.length ? result : [[]]
36 }) 42 })
37 43
...@@ -129,9 +135,34 @@ export function usePagination(formDataRef, options = {}) { ...@@ -129,9 +135,34 @@ export function usePagination(formDataRef, options = {}) {
129 * @description 根据当前页索引读取对应的分页符导航文案与返回控制 135 * @description 根据当前页索引读取对应的分页符导航文案与返回控制
130 * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} 136 * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}}
131 */ 137 */
138 + /**
139 + * 过滤后的分页导航
140 + * @description 与 filtered_pages 同步,仅为有内容的页保留对应的导航配置
141 + */
142 + const filtered_nav_props_by_index = computed(() => {
143 + // 未构建分页时使用默认导航
144 + if (!pages_raw.value.length) {
145 + return [normalizePaginatorProps()]
146 + }
147 + // 与过滤页一一对应:仅保留含可见字段的页的导航
148 + const visible_navs = []
149 + pages_raw.value.forEach((keys, idx) => {
150 + const hasVisible = keys.some(k => {
151 + const f = formDataRef.value.find(i => i.key === k)
152 + return f && !f.component_props?.disabled
153 + })
154 + if (hasVisible) visible_navs.push(page_nav_props_by_index.value[idx] || normalizePaginatorProps())
155 + })
156 + return visible_navs.length ? visible_navs : [normalizePaginatorProps()]
157 + })
158 +
159 + /**
160 + * 分页导航配置(与过滤后页索引一致)
161 + * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}}
162 + */
132 const page_nav = computed(() => { 163 const page_nav = computed(() => {
133 const def = normalizePaginatorProps() 164 const def = normalizePaginatorProps()
134 - return page_nav_props_by_index.value[current_page_index.value] || def 165 + return filtered_nav_props_by_index.value[current_page_index.value] || def
135 }) 166 })
136 167
137 /** 168 /**
......