feat(分页组件): 增加分页按钮自定义文本和禁用状态功能

为分页组件添加 prevLabel、nextLabel 和 prevDisabled 属性支持在首页视图中实现分页导航文本和禁用状态的动态计算重构分页组件相关代码，移除无用注释并优化代码结构

feat(分页组件): 增加分页按钮自定义文本和禁用状态功能
为分页组件添加 prevLabel、nextLabel 和 prevDisabled 属性支持在首页视图中实现分页导航文本和禁用状态的动态计算重构分页组件相关代码，移除无用注释并优化代码结构
hookehuyr
Commit 23d5fad930ea71c7120f11f804108f50c78bc344 23d5fad9 1 parent 6d140780
Showing 2 changed files with 51 additions and 15 deletions
src/components/PaginationField/index.vue
src/views/index.vue
--- a/src/components/PaginationField/index.vue
View file @23d5fad
+++ b/src/components/PaginationField/index.vue
View file @23d5fad
@@ -9,8 +9,8 @@
   <div class="pagination-field">
     <div class="indicator">第{{ current + 1 }}页 / 共{{ total }}页</div>
     <div class="actions">
-      <van-button v-if="showPrev" round type="primary" class="btn" @click="onPrev">上一页</van-button>
+      <van-button v-if="showPrev" :disabled="prevDisabled || current === 0" round type="primary" class="btn" @click="onPrev">{{ prevLabel }}</van-button>
-      <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">下一页</van-button>
+      <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
       <van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">提交</van-button>
     </div>
   </div>
@@ -21,9 +21,12 @@
 import { computed } from 'vue'
 const props = defineProps({
-  current: { type: Number, default: 0 },
+    current: { type: Number, default: 0 },
-  total: { type: Number, default: 1 },
+    total: { type: Number, default: 1 },
-  isLast: { type: Boolean, default: false },
+    isLast: { type: Boolean, default: false },
+    prevLabel: { type: String, default: '上一页' },
+    nextLabel: { type: String, default: '下一页' },
+    prevDisabled: { type: Boolean, default: false },
 })
 const emit = defineEmits(['prev', 'next', 'submit'])
--- a/src/views/index.vue
View file @23d5fad
+++ b/src/views/index.vue
View file @23d5fad
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-18 18:02:29
+ * @LastEditTime: 2025-11-18 22:35:35
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -28,7 +28,18 @@
           <component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" />
         </van-cell-group>
-        <pagination-field v-if="enable_pagination" :current="current_page_index" :total="filtered_pages.length" :is-last="current_page_index === filtered_pages.length - 1" @prev="handlePrev" @next="handleNext" @submit="handleSubmit" />
+        <pagination-field
+          v-if="enable_pagination"
+          :current="current_page_index"
+          :total="filtered_pages.length"
+          :is-last="current_page_index === filtered_pages.length - 1"
+          :prev-label="page_nav.prev_text"
+          :next-label="page_nav.next_text"
+          :prev-disabled="page_nav.prev_disabled"
+          @prev="handlePrev"
+          @next="handleNext"
+          @submit="handleSubmit"
+        />
         <!-- 非流程版表单 -->
         <div v-if="formData.length && PCommit.visible && !formSetting.is_flow && !enable_pagination" style="margin: 16px">
           <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
@@ -240,6 +251,10 @@ const PCommit = ref({});
  * 表单结构数据
  */
 const formData = ref([]);
+
+/**
+ * 分页组件原始数据
+ */
 const pages_raw = ref([]);
 // 分页配置
 const enable_pagination = ref(false);
@@ -263,6 +278,26 @@ const visible_form_data = computed(() => {
   return formData.value.filter(i => set.has(i.key) && !i.component_props?.disabled);
 });
+// 分页组件导航
+const page_nav = computed(() => {
+  const idx = current_page_index.value;
+  const keys = filtered_pages.value[idx] || [];
+  let prev_text = '上一页';
+  let next_text = '下一页';
+  let prev_disabled = false;
+  for (let k of keys) {
+    const item = formData.value.find(i => i.key === k);
+    if (item && item.component_props) {
+      // TODO: MOCK 数据 等待真实字段, 分页组件相关属性
+      if (item.component_props.page_prev_text) prev_text = item.component_props.page_prev_text;
+      if (item.component_props.page_next_text) next_text = item.component_props.page_next_text;
+      if (typeof item.component_props.page_prev_disabled === 'boolean') prev_disabled = item.component_props.page_prev_disabled;
+    }
+  }
+  return { prev_text, next_text, prev_disabled };
+});
+/******* END: 分页组件相关 *******/
+
 /**
  * 格式化表单数据
 */
@@ -500,9 +535,7 @@ onMounted(async () => {
   // })
   formData.value = formatData(page_form);
-  /**
+  // TAG: 构建分页组件
-   * * TAG: 构建分页组件
-   */
   buildPages();
   enable_pagination.value = filtered_pages.value.length > 1;
   /**** END ****/
@@ -539,7 +572,7 @@ onMounted(async () => {
     show_loading.value = false;
   }
-  // TAG：创建组件类型
+  // TAG: 创建组件类型
   createComponentType(formData.value);
   const isJSON = (value) => {
@@ -551,7 +584,7 @@ onMounted(async () => {
     }
   }
-  // TAG：不同类型提交表单处理
+  // TAG: 不同类型提交表单处理
   if (page_type === 'add' || page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息
     const existingCookie = Cookies.get($route.query.code);
     if (existingCookie) {
@@ -1194,7 +1227,7 @@ const onSubmit = async (values) => { // 表单提交回调
     if (model === 'edit' || model === 'preview' || page_type === 'info') return false;
     // 提交按钮禁用
     submitStatus.value = true;
-    // TAG：不同类型提交表单处理
+    // TAG: 不同类型提交表单处理
     if (page_type === 'add' || page_type == null) { // 新增表单提交
       let queryObj = { ...$route.query, ...postData.value };  // 大义工传递参数
       // 通过验证
@@ -1209,7 +1242,7 @@ const onSubmit = async (values) => { // 表单提交回调
       if (result.code) {
         // 提交按钮禁用状态
         submitStatus.value = false;
-        //
+        // TAG: 提交成功提示
         showSuccessToast("提交成功");
         // 缓存表单返回值
         store.changeSuccessInfo(result.data);
@@ -1459,7 +1492,7 @@ const buildPages = () => {
   formData.value.forEach(item => {
     const tag = item.component_props?.tag;
     // TODO: 分页组件标识暂时不确定
-    if (tag === 'divider1') {
+    if (tag === 'divider') {
       if (cur.length) result.push(cur);
       cur = [];
       return;