Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
23d5fad9 1 parent 6d140780

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

为分页组件添加 prevLabel、nextLabel 和 prevDisabled 属性支持
在首页视图中实现分页导航文本和禁用状态的动态计算
重构分页组件相关代码，移除无用注释并优化代码结构
Inline Side-by-side
Showing 2 changed files with 48 additions and 12 deletions
......@@ -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="showNext" round type="primary" class="btn" @click="onNext">下一页</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">{{ nextLabel }}</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">提交</van-button>
</div>
</div>
......@@ -24,6 +24,9 @@ const props = defineProps({
current: { type: Number, default: 0 },
total: { type: Number, default: 1 },
isLast: { type: Boolean, default: false },
prevLabel: { type: String, default: '上一页' },
nextLabel: { type: String, default: '下一页' },
prevDisabled: { type: Boolean, default: false },
})
const emit = defineEmits(['prev', 'next', 'submit'])
......
<!--
* @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;
......