From c50765552e8f626845db64938818fef9f76ad30e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E6=94=BF=E6=9D=83?= <1978141412@qq.com> Date: Wed, 9 Oct 2024 19:56:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=A1=E7=89=87=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E9=83=A8=E4=BB=B6=E6=94=AF=E6=8C=81=E5=88=86=E9=A1=B5=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/control/data-view/data-view.scss | 14 +++++ src/control/data-view/data-view.tsx | 82 +++++++++++++++++++++++++-- src/util/index.ts | 1 + src/util/pagination/use-pagination.ts | 69 ++++++++++++++++++++++ 5 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 src/util/pagination/use-pagination.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3263a3e37b..0ca81fdfa2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ ### Change - 卡片视图绘制为卡片样式 +- 卡片视图部件支持分页模式 ### Fixed diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss index 4d3db9db70..204d4fed3e 100644 --- a/src/control/data-view/data-view.scss +++ b/src/control/data-view/data-view.scss @@ -3,6 +3,7 @@ $control-dataview: (text-color: getCssVar(color, text, 0), padding: getCssVar(spacing, base-tight) getCssVar(spacing, base), card-margin:getCssVar(spacing, base-tight), item-margin: calc( getCssVar(spacing, base, tight) / 2 ), + pagination-height: var(--van-pagination-height), ); @include b(control-dataview-item) { @@ -42,4 +43,17 @@ $control-dataview: (text-color: getCssVar(color, text, 0), @include e(item-col) { margin: getCssVar(control-dataview, item-margin) 0; } + + @include when(enable-page) { + .#{bem(control-dataview, content)} { + height: calc(100% - getCssVar(control-dataview, pagination-height)); + } + } + + @include e(load-more) { + @include flex(row, center, center); + height: getCssVar(control-dataview, pagination-height); + cursor: pointer; + color: getCssVar(color, link); + } } \ No newline at end of file diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx index d66fe9d914..e1156b1ef6 100644 --- a/src/control/data-view/data-view.tsx +++ b/src/control/data-view/data-view.tsx @@ -1,12 +1,13 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; -import { defineComponent, PropType, ref, VNode } from 'vue'; +import { computed, defineComponent, PropType, ref, VNode } from 'vue'; import { IDEDataView, ILayoutPanel, IUIActionGroupDetail, } from '@ibiz/model-core'; -import './data-view.scss'; import { DataViewControlController } from '@ibiz-template/runtime'; +import { usePagination } from '../../util'; +import './data-view.scss'; export const DataViewControl = defineComponent({ name: 'IBizDataViewControl', @@ -24,6 +25,29 @@ export const DataViewControl = defineComponent({ const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); const active = ref([]); + // 是否可以加载更多 + const isLodeMoreDisabled = computed(() => { + if (c.model.enablePagingBar === true) { + return true; + } + if (c.model.pagingMode !== 2) { + return true; + } + return ( + c.state.items.length >= c.state.total || + c.state.isLoading || + c.state.total <= c.state.size + ); + }); + + const { onPageChange } = usePagination(c); + + // 是否显示数据伸缩图标 + // 如果未开启分组,并且加载模式为【加载更多】,并且已经加载过一次更多,则为 true + const showCollapseOrExpandIcon = computed(() => { + return !c.model.enableGroup && c.model.pagingMode === 3; + }); + // 绘制项布局面板 const renderPanelItem = (item: IData, modelData: ILayoutPanel): VNode => { const { context, params } = c; @@ -166,26 +190,76 @@ export const DataViewControl = defineComponent({ const renderMDContent = () => { const model: IDEDataView = c.model; return ( -