From b0efc96880205837543030c60f4aec9ed30b9b96 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Sat, 12 Oct 2024 10:40:34 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20mdctrl=E6=94=AF=E6=8C=81=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E6=A8=A1=E5=BC=8F,=E9=BB=98=E8=AE=A4=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=88=86=E5=89=B2=E7=BA=BF=EF=BC=8C=E5=B9=B6=E4=B8=94?= =?UTF-8?q?=E6=9C=80=E5=90=8E=E4=B8=80=E6=9D=A1=E5=BA=95=E9=83=A8=E4=B8=8D?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E8=AF=86=E5=88=AB=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F1=EF=BC=88=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=88=86=E5=89=B2=E7=BA=BF=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/list/list-render-util.tsx | 19 ++++-- src/control/list/md-ctrl/md-ctrl.scss | 59 +++++++++++------ src/control/list/md-ctrl/md-ctrl.tsx | 92 ++++++++++++++++++++------- src/view-engine/mob-md-view-engine.ts | 4 -- 4 files changed, 122 insertions(+), 52 deletions(-) diff --git a/src/control/list/list-render-util.tsx b/src/control/list/list-render-util.tsx index 10c3834a..14796f9c 100644 --- a/src/control/list/list-render-util.tsx +++ b/src/control/list/list-render-util.tsx @@ -25,7 +25,7 @@ export function useListRender( ): { renderItem: (row: IData) => VNode | undefined; renderNoData: () => VNode | undefined; - renderLoadMore: () => VNode | undefined; + renderLoadMore: () => JSX.Element | null; } { const isSelect = (row: IData) => { const findIndex = c.state.selectedData.findIndex(data => { @@ -126,10 +126,8 @@ export function useListRender( ); }; - const renderLoadMore = (): VNode | undefined => { - if (props.loadMode === 'auto' || c.state.total <= c.state.items.length) { - return; - } + // 加载更多 + const loadMoreIcon = () => { return (
c.loadMore()}> {ibiz.i18n.t('control.common.loadMore')} @@ -137,5 +135,16 @@ export function useListRender( ); }; + // 分页模式为点击加载时并且当前数量小于总数 + const renderLoadMore = () => { + let icon = null; + const loadMore = + c.state.items.length < c.state.total && c.state.total > c.state.size; + if (loadMore) { + icon = loadMoreIcon(); + } + return icon; + }; + return { renderNoData, renderItem, renderLoadMore }; } diff --git a/src/control/list/md-ctrl/md-ctrl.scss b/src/control/list/md-ctrl/md-ctrl.scss index 9b0cc9d2..93911af0 100644 --- a/src/control/list/md-ctrl/md-ctrl.scss +++ b/src/control/list/md-ctrl/md-ctrl.scss @@ -15,10 +15,11 @@ $control-mobmdctrl: ( font-size: getCssVar(font-size, header-5), right-icon-margin-right: rem(21px), simplelist-height: 250px, - select-item-padding-bottom: getCssVar(spacing,tight), - select-item-margin: getCssVar(spacing,tight) 0 0 getCssVar(spacing,tight), - select-item-check-padding: getCssVar(spacing,extra-tight), - select-item-gap: getCssVar(spacing,tight), + select-item-padding-bottom: getCssVar(spacing, tight), + select-item-margin: getCssVar(spacing, tight) 0 0 getCssVar(spacing, tight), + select-item-check-padding: getCssVar(spacing, extra-tight), + select-item-gap: getCssVar(spacing, tight), + pagination-height: var(--van-pagination-height), ); @include b(control-mobmdctrl) { @@ -28,12 +29,37 @@ $control-mobmdctrl: ( height: 100%; - .van-list { + @include e(content) { + display: flex; + flex-wrap: wrap; + width: 100%; height: 100%; + padding: getCssVar(control-mobmdctrl, padding); + overflow: hidden auto; .van-cell { padding: getCssVar(control-mobmdctrl, padding); } + + @include when(show-underLine) { + .#{bem(control-mobmdctrl-item)} + + .#{bem(control-mobmdctrl-item)}::before { + position: relative; + top: -0.875rem; + left: 1rem; + display: block; + width: calc(100% - 2rem); + height: rem(1px); + content: ''; + background-color: getCssVar(color, border); + } + } + } + + @include when(enable-page) { + .#{bem(control-mobmdctrl, content)} { + height: calc(100% - getCssVar(control-mobmdctrl, pagination-height)); + } } .van-cell__right-icon { @@ -48,10 +74,10 @@ $control-mobmdctrl: ( .van-cell::after { width: 100%; } +} - @include b(control-panel) { - height: auto; - } +@include b(control-panel) { + height: auto; } @include b(control-mobmdctrl-item) { @@ -68,17 +94,6 @@ $control-mobmdctrl: ( padding: 0.875rem 0; } -.#{bem(control-mobmdctrl-item)} + .#{bem(control-mobmdctrl-item)}::before { - content: ''; - position: relative; - display: block; - top: -0.875rem; - left: 1rem; - height: rem(1px); - width: calc(100% - 2rem); - background-color: getCssVar(color, border); -} - @include b(control-mobmdctrl-image) { @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl); @@ -104,6 +119,7 @@ $control-mobmdctrl: ( span { padding: getCssVar(spacing, extra, tight) getCssVar(spacing, base); + cursor: pointer; border: 1px solid getCssVar(color, border); border-radius: getCssVar(border, radius, full); } @@ -111,10 +127,11 @@ $control-mobmdctrl: ( @include b(control-mobmdctrl-select-item) { display: flex; - margin: getCssVar(control-mobmdctrl, select-item-margin); gap: getCssVar(control-mobmdctrl, select-item-gap); - border-bottom: 1px solid getCssVar(color, border); padding-bottom: getCssVar(control-mobmdctrl, select-item-padding-bottom); + margin: getCssVar(control-mobmdctrl, select-item-margin); + border-bottom: 1px solid getCssVar(color, border); + > .van-checkbox { padding: getCssVar(control-mobmdctrl, select-item-check-padding); } diff --git a/src/control/list/md-ctrl/md-ctrl.tsx b/src/control/list/md-ctrl/md-ctrl.tsx index bd8db913..51ff6ab7 100644 --- a/src/control/list/md-ctrl/md-ctrl.tsx +++ b/src/control/list/md-ctrl/md-ctrl.tsx @@ -1,9 +1,10 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; -import { defineComponent, PropType } from 'vue'; +import { computed, defineComponent, PropType } from 'vue'; import { IDEMobMDCtrl, IUIActionGroup } from '@ibiz/model-core'; import { IMobMDCtrlRowState, MDCtrlController } from '@ibiz-template/runtime'; import './md-ctrl.scss'; import { useListRender } from '../list-render-util'; +import { usePagination } from '../../../util'; export const MDCtrlControl = defineComponent({ name: 'IBizMDCtrlControl', @@ -31,7 +32,6 @@ export const MDCtrlControl = defineComponent({ singleSelect: { type: Boolean, default: true }, selectedData: { type: Object as PropType, required: false }, mode: { type: String, default: 'LIST' }, - loadMode: { type: String, default: 'auto' }, loadDefault: { type: Boolean, default: true }, }, setup(props) { @@ -43,20 +43,44 @@ export const MDCtrlControl = defineComponent({ ns, ); + // 不分页 0 分页栏 1 滚动加载 2 加载更多 3 + // 是否可以加载更多 + 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 leftSlidingActionGroup = c.model.deuiactionGroup; // 右滑界面行为组 const rightSlidingActionGroup = c.model.deuiactionGroup2; // 绘制滑动行为组 - const renderSlidingActionGroup = ( - group: IUIActionGroup, - row: IMobMDCtrlRowState, - ) => { + const renderSlidingActionGroup = (group: IUIActionGroup, data: IData) => { const groupDetails = group.uiactionGroupDetails || []; if (!groupDetails || groupDetails.length === 0) { return null; } + const row = c.state.rows.find( + (rowData: IMobMDCtrlRowState) => data.srfkey === rowData.data.srfkey, + )!; const btnContainer = row.uaColStates[group.id!]; return groupDetails.map(detail => { const btn = btnContainer[detail.id!]; @@ -76,32 +100,32 @@ export const MDCtrlControl = defineComponent({ }; // 绘制默认列表项 - const renderDefaultItem = (row: IMobMDCtrlRowState) => { + const renderDefaultItem = (data: IData) => { const isItemSliding = !!( leftSlidingActionGroup || rightSlidingActionGroup ); if (isItemSliding) { return ( - + {{ left: rightSlidingActionGroup - ? () => renderSlidingActionGroup(rightSlidingActionGroup, row) + ? () => renderSlidingActionGroup(rightSlidingActionGroup, data) : null, right: leftSlidingActionGroup - ? () => renderSlidingActionGroup(leftSlidingActionGroup, row) + ? () => renderSlidingActionGroup(leftSlidingActionGroup, data) : null, default: () => { - return renderItem(row.data); + return renderItem(data); }, }} ); } - return renderItem(row.data); + return renderItem(data); }; const renderDefault = () => { - return c.state.rows.map(item => { + return c.state.items.map((item: IData) => { return renderDefaultItem(item); }); }; @@ -123,16 +147,15 @@ export const MDCtrlControl = defineComponent({ const renderMDContent = () => { return ( 1 && - ibiz.i18n.t('control.list.end') - } - onLoad={props.loadMode === 'auto' ? () => c.loadMore() : undefined} + class={[ + ns.e('content'), + ns.is('show-underLine', c.model.controlStyle !== 'EXTVIEW1'), + ]} + finished={isLodeMoreDisabled.value} + immediate-check={false} + onLoad={() => c.loadMore()} > {c.model.groupMode !== 'NONE' ? renderGroup() : renderDefault()} - {renderLoadMore()} ); }; @@ -142,15 +165,40 @@ export const MDCtrlControl = defineComponent({ ns, renderMDContent, renderNoData, + showCollapseOrExpandIcon, + onPageChange, + renderLoadMore, }; }, render() { + const enablePagingBar = + this.c.model.enablePagingBar && this.c.model.pagingMode === 1; return ( - + {this.c.state.isCreated && (this.c.state.rows.length > 0 ? this.renderMDContent() : this.renderNoData())} + {enablePagingBar ? ( + + ) : null} + {this.showCollapseOrExpandIcon && this.renderLoadMore()} ); }, diff --git a/src/view-engine/mob-md-view-engine.ts b/src/view-engine/mob-md-view-engine.ts index eb2eaa06..ad42924b 100644 --- a/src/view-engine/mob-md-view-engine.ts +++ b/src/view-engine/mob-md-view-engine.ts @@ -67,10 +67,6 @@ export class MobMDViewEngine extends MDViewEngine { async onCreated(): Promise { await super.onCreated(); - - if (this.xdataControlName && this.view.model.viewType === 'DEMOBMDVIEW9') { - this.view.slotProps[this.xdataControlName].loadMode = 'click'; - } } /** -- Gitee From a2978b10b8e30fd1e5e4c51c38538a76eb667541 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Sat, 12 Oct 2024 10:40:53 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dpicker=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=89=93=E5=BC=80=E8=A7=86=E5=9B=BE=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E6=9C=AA=E5=8F=96=E6=A8=A1=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/data-picker/picker-editor.controller.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/editor/data-picker/picker-editor.controller.ts b/src/editor/data-picker/picker-editor.controller.ts index d30728e3..d81d30f2 100644 --- a/src/editor/data-picker/picker-editor.controller.ts +++ b/src/editor/data-picker/picker-editor.controller.ts @@ -251,12 +251,14 @@ export class PickerEditorController extends EditorController { ); } // 模态打开视图 + const appView = await ibiz.hub.config.view.get(this.pickupView.id); + const { openMode = 'POPUPMODAL' } = appView; const res = await ibiz.commands.execute( OpenAppViewCommand.TAG, this.pickupView.id, context, params, - { openMode: 'POPUPMODAL' }, + openMode, ); if (res && res.ok && res.data) { return res.data; -- Gitee From e1de7eeec4cf10fc0f562ce1c3e11429c0a9335c Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Sat, 12 Oct 2024 10:42:08 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E5=8F=82?= =?UTF-8?q?=E6=95=B0mobShowUnderLine=E6=8E=A7=E5=88=B6=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E9=A1=B9=E4=B8=8B=E6=96=B9=E4=B8=8B=E5=88=92=E7=BA=BF=E6=98=AF?= =?UTF-8?q?=E5=90=A6=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form-item-container.scss | 18 ++++++++++-------- .../form-item-container.tsx | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss index 0adb8e99..99b85b7f 100644 --- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss +++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.scss @@ -36,14 +36,16 @@ $form-item-label: (line-height: 1, border-width: calc(100% - getCssVar(spacing, base) * 2); border-radius: getCssVar(border-radius, small); - &::after { - position: absolute; - z-index: 1; - width: calc(100% - getCssVar(spacing, base) * 2); - height: rem(1px); - content: ''; - background-color: getCssVar(color, border); - transform: scaleY(.5); + @include when(show-underLine){ + &::after { + position: absolute; + z-index: 1; + width: calc(100% - getCssVar(spacing, base) * 2); + height: rem(1px); + content: ''; + background-color: getCssVar(color, border); + transform: scaleY(.5); + } } @include e(label) { diff --git a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx index eda91abe..1545d465 100644 --- a/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx +++ b/src/control/form/form-detail/form-item/form-item-container/form-item-container.tsx @@ -28,7 +28,6 @@ export const IBizFormItemContainer = defineComponent({ const ns = useNamespace('form-item-container'); let labelAlign: 'right' | 'left' = 'left'; let editorAlign: 'right' | 'left' = 'right'; - const cssVars = computed(() => { switch (props.labelPos) { case 'LEFT': @@ -70,6 +69,7 @@ export const IBizFormItemContainer = defineComponent({ this.ns.is('required', this.required), this.ns.is('error', !!this.error), this.ns.is('show-label', this.labelPos === 'NONE'), + this.ns.is('show-underLine', ibiz.config.form.mobShowUnderLine), ]} style={this.cssVars} > -- Gitee