diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e9152a75b9a9302025c9ac5dcaf5626d93fd3a8..79f25f77ef62f54f5db8434c3e17985c6cb5609e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,12 @@ - 表单直接内容识别容器样式表配置 - 表单分组面板识别标题图标配置和loading状态 - 新增视图消息直接内容、视图消息占位面板组件 +- 新增面板设置容器组件 +- 新增多数据排序设置通用组件 +- 新增多数据部件的快速操作工具栏 +- 新增抽屉的透传属性配置参数 +- 新增多数据部件滑动行为组识别模型配置的按钮类型 +- 新增多数据部件参数showgroupanchor（显示分组锚点导航），并调整分组绘制逻辑 ### Change @@ -31,6 +37,7 @@ - 分页导航视图下drtab默认隐藏编辑项 - 优化表单分组的呈现样式 - 优化重复器表单和多数据部件表单的操作行为样式 +- 多数据部件自定义排序设置采用布局实现 ### Fixed diff --git a/src/common/index.ts b/src/common/index.ts index 093d7d499f98c4c455903c26d16afdb74a94937c..156c3cecf0ab3ad62f3812dc57fe05339cb7d3b5 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -21,16 +21,17 @@ import { IBizPresetViewHeader } from './preset-view-header/preset-view-header'; import { IBizFullscreenHeader } from './fullscreen-header/fullscreen-header'; import { IBizButtonList } from './button-list/button-list'; import { IBizEmojiSelect } from './emoji-select/emoji-select'; -import { IBizMdCtrlSetting } from './md-ctrl-setting/md-ctrl-setting'; import { IBizPreviewImage } from './preview-image/preview-image'; import { IBizDateRangeCalendar } from './date-range-picker/date-range-picker'; import { IBizCropping } from './cropping/cropping'; import { IBizActionGroup } from './action-group/action-group'; import { ViewMessage } from './view-message/view-message'; +import { IBizMdSortSetting } from './md-sort-setting/md-sort-setting'; export * from './col/col'; export * from './row/row'; export * from './keep-alive/keep-alive'; +export * from './md-sort-setting/md-sort-setting'; export const IBizCommonComponents = { install: (v: App): void => { @@ -55,11 +56,11 @@ export const IBizCommonComponents = { v.component(IBizButtonList.name!, IBizButtonList); v.component(IBizEmojiSelect.name!, IBizEmojiSelect); v.component(IBizBadge.name!, IBizBadge); - v.component(IBizMdCtrlSetting.name!, IBizMdCtrlSetting); v.component(IBizPreviewImage.name!, IBizPreviewImage); v.component(IBizCropping.name!, IBizCropping); v.component(IBizSignaturePad.name!, IBizSignaturePad); v.component(ViewMessage.name!, ViewMessage); + v.component(IBizMdSortSetting.name!, IBizMdSortSetting); }, }; diff --git a/src/common/md-ctrl-setting/md-ctrl-setting.scss b/src/common/md-sort-setting/md-sort-setting.scss similarity index 65% rename from src/common/md-ctrl-setting/md-ctrl-setting.scss rename to src/common/md-sort-setting/md-sort-setting.scss index a9433583641af3a4a4efbdda29953382a984e15c..1bf4a5e37367d0cc828d03a1751c180c5fe7bd02 100644 --- a/src/common/md-ctrl-setting/md-ctrl-setting.scss +++ b/src/common/md-sort-setting/md-sort-setting.scss @@ -1,26 +1,19 @@ -$md-ctrl-setting: ( +$md-sort-setting: ( 'active-bg-color': getCssVar('color', 'primary', 'light', 'default'), 'active-color': getCssVar('color', 'primary'), 'popup-height': '80%', ); -@include b('md-ctrl-setting') { - @include set-component-css-var('md-ctrl-setting', $md-ctrl-setting); - - @include e('setting') { - font-size: getCssVar('font-size', 'header-4'); - cursor: pointer; - svg { - fill: var(--van-gray-6); - } - } - +@include b('md-sort-setting') { @include e('popup') { - @include set-component-css-var('md-ctrl-setting', $md-ctrl-setting); - height: getCssVar('md-ctrl-setting', 'popup-height'); + @include set-component-css-var('md-sort-setting', $md-sort-setting); + + height: getCssVar('md-sort-setting', 'popup-height'); } @include e('content') { + @include set-component-css-var('md-sort-setting', $md-sort-setting); + display: flex; flex-direction: column; height: 100%; @@ -44,31 +37,33 @@ $md-ctrl-setting: ( } .van-tab--line { - min-height: var(--van-tabs-line-height); + min-height: getCssVar('height', 'control', 'large'); border: 1px solid getCssVar('color', 'border'); &:nth-child(1) { border-right: none; - border-radius: getCssVar('border-radius', 'small') 0 0 getCssVar('border-radius', 'small'); + border-radius: getCssVar('border-radius', 'small') 0 0 + getCssVar('border-radius', 'small'); &.van-tab--active { - border: 1px solid getCssVar('md-ctrl-setting', 'active-color'); + border: 1px solid getCssVar('md-sort-setting', 'active-color'); - &+.van-tab--line { + & + .van-tab--line { border-left: none; } } } &:nth-child(2) { - border-radius: 0 getCssVar('border-radius', 'small') getCssVar('border-radius', 'small') 0; + border-radius: 0 getCssVar('border-radius', 'small') + getCssVar('border-radius', 'small') 0; } &.van-tab--active { font-weight: getCssVar('font-weight', 'regular'); - color: getCssVar('md-ctrl-setting', 'active-color'); - background-color: getCssVar('md-ctrl-setting', 'active-bg-color'); - border-color: getCssVar('md-ctrl-setting', 'active-color'); + color: getCssVar('md-sort-setting', 'active-color'); + background-color: getCssVar('md-sort-setting', 'active-bg-color'); + border-color: getCssVar('md-sort-setting', 'active-color'); } } @@ -84,12 +79,13 @@ $md-ctrl-setting: ( } @include m('bottom') { - padding: 0 getCssVar('spacing', 'tight') getCssVar('spacing', 'loose') getCssVar('spacing', 'tight'); + padding: 0 getCssVar('spacing', 'tight') getCssVar('spacing', 'loose') + getCssVar('spacing', 'tight'); } @include m('icon') { - font-size: var(--van-popup-close-icon-size); - color: var(--van-popup-close-icon-color); + font-size: getCssVar('font-size', 'header', 3); + color: getCssVar(color, text, 3); cursor: pointer; } } @@ -116,11 +112,11 @@ $md-ctrl-setting: ( @include when('check') { padding-right: getCssVar('spacing', 'extra-tight'); - color: getCssVar('md-ctrl-setting', 'active-color'); + color: getCssVar('md-sort-setting', 'active-color'); svg { - fill: getCssVar('md-ctrl-setting', 'active-color'); + fill: getCssVar('md-sort-setting', 'active-color'); } } } -} \ No newline at end of file +} diff --git a/src/common/md-ctrl-setting/md-ctrl-setting.tsx b/src/common/md-sort-setting/md-sort-setting.tsx similarity index 41% rename from src/common/md-ctrl-setting/md-ctrl-setting.tsx rename to src/common/md-sort-setting/md-sort-setting.tsx index bf3c7432ea441f16cec96e14d2af6926b8ee977c..392043c9ee0a746086f584f0827719c32a91a139 100644 --- a/src/common/md-ctrl-setting/md-ctrl-setting.tsx +++ b/src/common/md-sort-setting/md-sort-setting.tsx @@ -1,6 +1,7 @@ import { defineComponent, PropType, ref, onUnmounted } from 'vue'; +import { IModal } from '@ibiz-template/runtime'; import { useNamespace } from '@ibiz-template/vue3-util'; -import './md-ctrl-setting.scss'; +import './md-sort-setting.scss'; type Order = 'asc' | 'desc'; @@ -11,29 +12,33 @@ interface IListItem { value: string; } -export const IBizMdCtrlSetting = defineComponent({ - name: 'IBizMdCtrlSetting', +export const IBizMdSortSetting = defineComponent({ + name: 'IBizMdSortSetting', props: { listItems: { type: Array as PropType, default: () => [], }, + customClass: { + type: String, + default: '', + }, sort: { - type: Object as PropType<{ key: string; order: 'asc' | 'desc' }>, + type: Object as PropType<{ key: string; order: Order }>, + }, + modal: { + type: Object as PropType, }, }, - emits: ['sortChange'], - setup(props, { emit }) { - const ns = useNamespace('md-ctrl-setting'); + setup(props) { + const ns = useNamespace('md-sort-setting'); const sortData = [ - { text: ibiz.i18n.t('component.mdCtrlSetting.asc'), order: 'asc' }, - { text: ibiz.i18n.t('component.mdCtrlSetting.desc'), order: 'desc' }, + { text: ibiz.i18n.t('component.mdSortSetting.asc'), order: 'asc' }, + { text: ibiz.i18n.t('component.mdSortSetting.desc'), order: 'desc' }, ]; - // 排序弹框显隐状态 - const visible = ref(false); // 当前激活页 - const currentPage = ref('asc'); + const currentPage = ref('asc'); // 当前激活项 const selectedKey = ref(''); @@ -50,13 +55,7 @@ export const IBizMdCtrlSetting = defineComponent({ currentPage.value = 'asc'; }; - // 打开排序配置 - const onOpenSortSetting = (e: MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - visible.value = true; - initData(); - }; + initData(); // 切换 const onTabChange = (order: Order): void => { @@ -76,21 +75,25 @@ export const IBizMdCtrlSetting = defineComponent({ // 确定事件 const onConfirm = () => { - visible.value = false; - emit('sortChange', { - key: selectedKey.value || '', - order: currentPage.value, + props.modal?.dismiss({ + ok: true, + data: [ + { + key: selectedKey.value || '', + order: currentPage.value, + }, + ], }); }; // 关闭弹框 const onClose = () => { - visible.value = false; + props.modal?.dismiss(); }; onUnmounted(() => { selectedKey.value = ''; - currentPage.value = ''; + currentPage.value = 'asc'; }); // 绘制列表项 @@ -143,109 +146,60 @@ export const IBizMdCtrlSetting = defineComponent({ ); }; - // 绘制内容 - const renderContent = () => { - return ( -
-
-
- {ibiz.i18n.t('component.mdCtrlSetting.sort')} -
- -
- - {{ - default: () => { - return sortData.map((item: IData) => { - return ( - - {{ - default: () => renderList(props.listItems), - title: () => { - return
{item.text}
; - }, - }} - - ); - }); - }, - }} - -
- - {ibiz.i18n.t('component.mdCtrlSetting.confirm')} - -
-
- ); - }; - - // 绘制弹框 - const renderPopup = () => { - return ( - - {{ default: () => renderContent() }} - - ); - }; - - // 绘制设置 - const renderSetting = () => { - return ( -
- - - -
- ); - }; - return { ns, - renderSetting, - renderPopup, - renderContent, + currentPage, + sortData, + onClose, + onTabChange, + renderList, + onConfirm, }; }, render() { return ( -
- {this.renderSetting()} - {this.renderPopup()} +
+
+
+ {ibiz.i18n.t('component.mdSortSetting.sort')} +
+ +
+ + {{ + default: () => { + return this.sortData.map((item: IData) => { + return ( + + {{ + default: () => this.renderList(this.listItems), + title: () => { + return
{item.text}
; + }, + }} + + ); + }); + }, + }} + +
+ + {ibiz.i18n.t('component.mdSortSetting.confirm')} + +
); }, diff --git a/src/control/list/list-render-util.tsx b/src/control/list/list-render-util.tsx index 2cbfda4c5f4d6742d093c2de49c356eb321f24d8..34e1e0582064cc45155497ad81c278e82e07e913 100644 --- a/src/control/list/list-render-util.tsx +++ b/src/control/list/list-render-util.tsx @@ -135,6 +135,19 @@ export function useListRender( if (!isLoaded) { return; } + const ctrlModel = c.model.controls?.find(item => { + return item.name === `${c.model.name!}_quicktoolbar`; + }); + if (ctrlModel) { + return ( + + ); + } return ( isLoaded && ( , required: false }, /** - * @description 选择模式，值为SELECT时，列表项显示复选框用于选择数据 + * @description 选择模式，值为SELECT时，列表项显示勾选图标 * @default 'LIST' */ mode: { type: String as PropType<'LIST' | 'SELECT'>, default: 'LIST' }, @@ -75,6 +80,8 @@ export const MDCtrlControl = defineComponent({ ns, ); + const listRef = ref(); + const isUpdating = ref(false); // 不分页 0 分页栏 1 滚动加载 2 加载更多 3 @@ -124,23 +131,6 @@ export const MDCtrlControl = defineComponent({ const { onPageChange } = usePagination(c); - // 列表项集合 - const delistItems = computed(() => { - const data: { value: string; label: string }[] = []; - c.model.delistItems?.forEach((item: IParams) => { - if (item.enableSort) { - data.push({ - value: item.id, - label: ibiz.i18n.t( - item?.capLanguageRes?.lanResTag || '', - item.caption || item?.capLanguageRes?.defaultContent, - ), - }); - } - }); - return data; - }); - // 排序值 const sortVal = computed(() => { if (c.state.sortQuery) { @@ -160,6 +150,30 @@ export const MDCtrlControl = defineComponent({ const debounceLoadMore = debounce(async () => { c.loadMore(); }, 500); + + const scrollKey = createUUID(); + const selectScrollKey = ref(); + + // 处理分组锚点导航项点击 + const handleGroupNavClick = (_id: string) => { + // 获取目标元素和滚动容器 + const targetElement = document.getElementById(_id); + const listDom = listRef.value?.$el; + + if (targetElement && listDom) { + const targetTop = targetElement.offsetTop; + const containerTop = listDom.offsetTop; + const relativePosition = targetTop - containerTop; + + // 基于滚动容器进行滚动 + listDom.scrollTo({ + top: relativePosition, + behavior: 'smooth', + }); + selectScrollKey.value = _id; + } + }; + const onLoadMore = () => { debounceLoadMore(); }; @@ -170,6 +184,7 @@ export const MDCtrlControl = defineComponent({ window.requestAnimationFrame(() => { isUpdating.value = false; }); + selectScrollKey.value = ''; }); // 是否显示数据伸缩图标 @@ -183,6 +198,12 @@ export const MDCtrlControl = defineComponent({ // 右滑界面行为组 const rightSlidingActionGroup = c.model.deuiactionGroup2; + // 按钮样式转换 + const btnType = (item: IDETBUIActionItem) => { + const _type = convertBtnType(item.buttonStyle); + return _type === 'default' ? 'primary' : _type; + }; + // 绘制滑动行为组 const renderSlidingActionGroup = (group: IUIActionGroup, data: IData) => { const groupDetails = getAllUIActionItems(group.uiactionGroupDetails); @@ -193,11 +214,12 @@ export const MDCtrlControl = defineComponent({ const btnContainer = row.uaColStates[group.id!]; return groupDetails.map(detail => { const btn = btnContainer?.[detail.id!]; + const _type = btnType(detail); if (btn?.visible) return ( c.onActionClick(detail, row, e)} @@ -239,22 +261,49 @@ export const MDCtrlControl = defineComponent({ }; const renderGroup = () => { - return c.state.groups.map(group => { - return ( -
-
{group.caption}
- {group.children.map(item => { - return renderDefaultItem(item.data); + const isGroupNav = c.state.groups.length > 1; + return [ +
+
+ {c.state.groups.map((group, index) => { + const _id = `group-${scrollKey}-${index}`; + return ( +
+
{group.caption}
+ {group.children.map(item => { + return renderDefaultItem(item.data); + })} +
+ ); })}
- ); - }); + {isGroupNav && c.showGroupAnchor ? ( +
+ {c.state.groups.map((group, index) => { + const _id = `group-${scrollKey}-${index}`; + return ( +
handleGroupNavClick(_id)} + class={[ + ns.be('group', 'nav-item'), + ns.is('active', selectScrollKey.value === _id), + ]} + > + {group.caption} +
+ ); + })} +
+ ) : null} +
, + ]; }; // 绘制卡片内容 const renderMDContent = () => { return ( onLoadMore()} > - {c.model.groupMode !== 'NONE' ? renderGroup() : renderDefault()} + {c.enableGroup ? renderGroup() : renderDefault()} ); }; @@ -274,13 +323,13 @@ export const MDCtrlControl = defineComponent({ return { c, ns, + listRef, renderMDContent, renderNoData, showCollapseOrExpandIcon, onPageChange, renderLoadMore, sortVal, - delistItems, onSortChange, }; }, @@ -296,16 +345,9 @@ export const MDCtrlControl = defineComponent({ 'enable-page', enablePagingBar || this.showCollapseOrExpandIcon, ), + this.ns.is('enable-group', this.c.enableGroup), ]} > - {this.delistItems.length > 0 && ( - - )} {this.c.state.isCreated && (this.c.state.rows.length > 0 ? this.renderMDContent() diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 6b5e2daa6a4bba6821750b55e5a18501c2d89037..46a3ba6d8132c039dbcfa9295fcfbcc6d537091b 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -33,7 +33,7 @@ export default { symbols: 'Symbols', flags: 'Flags', }, - mdCtrlSetting: { + mdSortSetting: { confirm: 'Confirm', sort: 'Sort', asc: 'ascend', diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index cb093b8e42de4724720b06522b41386ef610bf96..cf2f35e6e435fa78f84f1eb7243c3d286ba4695d 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -33,7 +33,7 @@ export default { symbols: '符号', flags: '旗帜', }, - mdCtrlSetting: { + mdSortSetting: { confirm: '确定', sort: '排序', asc: '升序', diff --git a/src/panel-component/index.ts b/src/panel-component/index.ts index 19a73cb48c1f1d715950ebc37b14cf3b4459f236..86001d7db4f4eb2c0d433b406f1ebb73e500eacf 100644 --- a/src/panel-component/index.ts +++ b/src/panel-component/index.ts @@ -37,6 +37,7 @@ import IBizPanelAppTitle from './panel-app-title'; import IBizIndexBlankPlaceholder from './index-blank-placeholder'; import IBizViewMessage from './view-message'; import IBizViewMsgPos from './view-msg-pos'; +import IBizSettingContainer from './setting-container'; export const IBizPanelComponents = { install: (v: App): void => { @@ -76,6 +77,7 @@ export const IBizPanelComponents = { v.use(IBizIndexBlankPlaceholder); v.use(IBizViewMessage); v.use(IBizViewMsgPos); + v.use(IBizSettingContainer); }, }; diff --git a/src/panel-component/setting-container/index.ts b/src/panel-component/setting-container/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..56ca9ef8d4913f1bb7fa9482d58ffd5d41adec55 --- /dev/null +++ b/src/panel-component/setting-container/index.ts @@ -0,0 +1,18 @@ +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import { App } from 'vue'; +import { withInstall } from '@ibiz-template/vue3-util'; +import { SettingContainer } from './setting-container'; +import { SettingContainerProvider } from './setting-container.provider'; + +export const IBizSettingContainer = withInstall( + SettingContainer, + function (v: App) { + v.component(SettingContainer.name!, SettingContainer); + registerPanelItemProvider( + 'CONTAINER_SETTING_CONTAINER', + () => new SettingContainerProvider(), + ); + }, +); + +export default IBizSettingContainer; diff --git a/src/panel-component/setting-container/setting-container.controller.ts b/src/panel-component/setting-container/setting-container.controller.ts new file mode 100644 index 0000000000000000000000000000000000000000..62c58f3883953a44dd9221b7fa542031321c2607 --- /dev/null +++ b/src/panel-component/setting-container/setting-container.controller.ts @@ -0,0 +1,44 @@ +import { + IMobMDCtrlController, + PanelContainerController, +} from '@ibiz-template/runtime'; +import { IPanelContainer } from '@ibiz/model-core'; + +/** + * @description 设置容器控制器 + * @primary + * @export + * @class SettingContainerController + * @extends {PanelContainerController} + */ +export class SettingContainerController extends PanelContainerController { + /** + * @description 多数据部件控制器 + * @readonly + * @type {IMobMDCtrlController} + * @memberof SettingContainerController + */ + get mdctrl(): IMobMDCtrlController { + return this.panel.view.getController('mdctrl') as IMobMDCtrlController; + } + + /** + * @description 是否显示排序按钮 + * @readonly + * @type {boolean} + * @memberof SettingContainerController + */ + get isMDSortButton(): boolean { + return !!(this.mdctrl?.state.sortDelistItems.length > 0); + } + + /** + * @description 是否可见 + * @readonly + * @type {boolean} + * @memberof SettingContainerController + */ + get visible(): boolean { + return this.isMDSortButton; + } +} diff --git a/src/panel-component/setting-container/setting-container.provider.ts b/src/panel-component/setting-container/setting-container.provider.ts new file mode 100644 index 0000000000000000000000000000000000000000..00f1e8bdede56aebe7daf818cd4009c3f56b9f62 --- /dev/null +++ b/src/panel-component/setting-container/setting-container.provider.ts @@ -0,0 +1,21 @@ +import { IPanelItem } from '@ibiz/model-core'; +import { + IPanelItemProvider, + PanelController, + PanelItemController, +} from '@ibiz-template/runtime'; +import { SettingContainerController } from './setting-container.controller'; + +export class SettingContainerProvider implements IPanelItemProvider { + component: string = 'IBizSettingContainer'; + + async createController( + panelItem: IPanelItem, + panel: PanelController, + parent: PanelItemController | undefined, + ): Promise { + const c = new SettingContainerController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/src/panel-component/setting-container/setting-container.scss b/src/panel-component/setting-container/setting-container.scss new file mode 100644 index 0000000000000000000000000000000000000000..85c5670c9725df069b594f83a3723c6f97ad24b8 --- /dev/null +++ b/src/panel-component/setting-container/setting-container.scss @@ -0,0 +1,46 @@ +$setting-container: ( + 'padding': getCssVar('spacing', 'tight') getCssVar('spacing', 'base') + getCssVar('spacing', 'tight') 0, + 'height': 2.25rem, +); + +@include b('setting-container') { + @include set-component-css-var('setting-container', $setting-container); + + padding: getCssVar('setting-container', 'padding'); + background-color: getCssVar('color', 'bg', 1); + + @include e('content') { + height: getCssVar('setting-container', 'height'); + display: flex; + align-items: center; + } + + @include e('md-sort') { + display: flex; + align-items: center; + font-size: getCssVar('font-size', 'header-4'); + cursor: pointer; + + svg { + fill: getCssVar(color, text, 3); + } + } + + .van-button { + height: auto; + padding: 0; + background-color: transparent; + border: none; + + &::before { + display: none; + } + } + + .van-button__content, + .van-button__text { + display: flex; + align-items: center; + } +} diff --git a/src/panel-component/setting-container/setting-container.tsx b/src/panel-component/setting-container/setting-container.tsx new file mode 100644 index 0000000000000000000000000000000000000000..551193f161e483fb2a5db241cab39c0aa6a7d700 --- /dev/null +++ b/src/panel-component/setting-container/setting-container.tsx @@ -0,0 +1,97 @@ +import { defineComponent, h, PropType } from 'vue'; +import { IModal, IModalData } from '@ibiz-template/runtime'; +import { IPanelRawItem } from '@ibiz/model-core'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { SettingContainerController } from './setting-container.controller'; +import { IBizMdSortSetting } from '../../common'; +import './setting-container.scss'; + +/** + * 设置容器组件 + * @primary + * @description 面板布局占位容器，用于展示快捷操作按钮。 + * @primary + */ +export const SettingContainer = defineComponent({ + name: 'IBizSettingContainer', + props: { + /** + * @description 模型数据 + */ + modelData: { + type: Object as PropType, + required: true, + }, + /** + * @description 设置容器控制器 + */ + controller: { + type: SettingContainerController, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('setting-container'); + const c = props.controller; + + const handleClick = async (_event: MouseEvent): Promise => { + const { sortDelistItems, sortQuery } = c.mdctrl!.state; + let sort: IData; + if (sortQuery) { + const [key, order] = sortQuery.split(','); + sort = { key, order }; + } + const res = (await ibiz.overlay.drawer( + (modal: IModal) => { + return h(IBizMdSortSetting, { + modal, + listItems: sortDelistItems, + sort: sort as { key: string; order: 'asc' | 'desc' }, + }); + }, + {}, + { + attrs: { + position: 'bottom', + closeable: false, + }, + }, + )) as IModalData; + if (res?.data && res.data.length > 0) { + const _sort = res.data[0]; + c.mdctrl?.setSort(_sort.key, _sort.order); + c.mdctrl?.load({ isInitialLoad: true }); + } + }; + + return { c, ns, handleClick }; + }, + render() { + if (!this.c.visible) return; + + return ( +
+
+ {this.c.isMDSortButton && ( + + + + + + )} +
+
+ ); + }, +}); diff --git a/src/util/app-drawer/app-drawer-component.tsx b/src/util/app-drawer/app-drawer-component.tsx index d4dba4bbdbcf6f1069deb0bd20920e0ebe189995..b4a3ede3702a988d392c9f9e65d30f22ded5190b 100644 --- a/src/util/app-drawer/app-drawer-component.tsx +++ b/src/util/app-drawer/app-drawer-component.tsx @@ -115,6 +115,7 @@ export const AppDrawerComponent = defineComponent({ position={this.direction} z-index={this.drawerZIndex} before-close={this.onBeforeClose} + {...this.opts.attrs} > {this.$slots.default?.(this.modal)}