hookehuyr

feat(分页): 为每页添加独立的导航配置支持

重构分页逻辑,将导航配置从全局改为每页独立
新增 page_nav_props_by_index 存储每页导航属性
添加 normalizePaginatorProps 方法规范化分页符属性
...@@ -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 + // 如果当前已有内容,先把“这一页”收束,并使用当前导航配置
81 + if (cur.length) {
82 + pages.push(cur)
83 + navs.push(current_nav)
61 cur = [] 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 /**
......