From b11aa3309fec378e2b1bc573cdb5ceeb59f9fd20 Mon Sep 17 00:00:00 2001 From: zhujiamin <1147570162@qq.com> Date: Thu, 25 May 2023 18:45:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=90=84?= =?UTF-8?q?=E7=B1=BB=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/app-rawitem/app-rawitem.tsx | 13 +- src/common/index.ts | 6 +- src/common/rawitem/rawitem.tsx | 181 ++++++++++++++++++ .../autocomplete-editor.controller.ts | 92 ++++++--- .../ibiz-autocomplete/ibiz-autocomplete.tsx | 91 +++++---- .../ibiz-picker-dropdown.tsx | 23 ++- .../ibiz-picker-select-view.tsx | 21 +- .../data-picker/ibiz-picker/ibiz-picker.tsx | 23 ++- .../data-picker/picker-editor.controller.ts | 94 ++++++--- .../date-range-editor.controller.ts | 53 +++++ .../date-range/date-range-editor.provider.ts | 28 +++ .../ibiz-date-range-picker.scss | 5 + .../ibiz-date-range-picker.tsx | 149 ++++++++++++++ src/editor/date-range/index.ts | 3 + src/editor/index.ts | 18 ++ .../list-box-picker-editor.controller.ts | 54 +++--- .../ibiz-number-range-picker.scss | 8 + .../ibiz-number-range-picker.tsx | 151 +++++++++++++++ src/editor/number-range/index.ts | 3 + .../number-range-editor.controller.ts | 11 ++ .../number-range-editor.provider.ts | 28 +++ src/editor/raw/ibiz-raw/ibiz-raw.tsx | 4 +- src/editor/span/span-editor.controller.ts | 17 +- .../stepper/stepper-editor.controller.ts | 10 +- src/editor/upload/upload-editor.controller.ts | 26 ++- 25 files changed, 931 insertions(+), 181 deletions(-) create mode 100644 src/common/rawitem/rawitem.tsx create mode 100644 src/editor/date-range/date-range-editor.controller.ts create mode 100644 src/editor/date-range/date-range-editor.provider.ts create mode 100644 src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss create mode 100644 src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx create mode 100644 src/editor/date-range/index.ts create mode 100644 src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss create mode 100644 src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.tsx create mode 100644 src/editor/number-range/index.ts create mode 100644 src/editor/number-range/number-range-editor.controller.ts create mode 100644 src/editor/number-range/number-range-editor.provider.ts diff --git a/src/common/app-rawitem/app-rawitem.tsx b/src/common/app-rawitem/app-rawitem.tsx index 356ce3076..f7e311dd7 100644 --- a/src/common/app-rawitem/app-rawitem.tsx +++ b/src/common/app-rawitem/app-rawitem.tsx @@ -57,18 +57,7 @@ export const AppRawItem = defineComponent({ ].includes(props.type) ) { if (props.content && typeof props.content === 'string') { - const items = props.content.match(/\{{(.+?)\}}/g); - if (items) { - items.forEach((item: string) => { - rawItemText.value = (props.content as string).replace( - /\{{(.+?)\}}/, - // eslint-disable-next-line no-eval - eval(item.substring(2, item.length - 2)), - ); - }); - } else { - rawItemText.value = props.content; - } + rawItemText.value = props.content; rawItemText.value = rawItemText.value.replaceAll('<', '<'); rawItemText.value = rawItemText.value.replaceAll('>', '>'); rawItemText.value = rawItemText.value.replaceAll('&nbsp;', ' '); diff --git a/src/common/index.ts b/src/common/index.ts index 27256c728..f46693211 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -8,7 +8,7 @@ import { IBizRow } from './row/row'; import { IBizControlBase } from './control-base/control-base'; import { IBizControlShell } from './control-shell/control-shell'; import { IBizViewShell } from './view-shell/view-shell'; -import { AppRawItem } from './app-rawitem/app-rawitem'; +import { IBizRawItem } from './rawitem/rawitem'; export * from './icon/icon'; export * from './keep-alive/keep-alive'; @@ -19,7 +19,7 @@ export * from './action-toolbar/action-toolbar'; export * from './control-base/control-base'; export * from './control-shell/control-shell'; export * from './view-shell/view-shell'; -export * from './app-rawitem/app-rawitem'; +export * from './rawitem/rawitem'; export const IBizCommonComponents = { install: (v: App) => { @@ -32,7 +32,7 @@ export const IBizCommonComponents = { v.component(IBizActionToolbar.name, IBizActionToolbar); v.component(IBizViewShell.name, IBizViewShell); v.component(IBizControlShell.name, IBizControlShell); - v.component(AppRawItem.name, AppRawItem); + v.component(IBizRawItem.name, IBizRawItem); }, }; diff --git a/src/common/rawitem/rawitem.tsx b/src/common/rawitem/rawitem.tsx new file mode 100644 index 000000000..235d05043 --- /dev/null +++ b/src/common/rawitem/rawitem.tsx @@ -0,0 +1,181 @@ +import { useNamespace } from '@ibiz-template/vue3-util'; +import { defineComponent, ref } from 'vue'; +import { createUUID } from 'qx-util'; + +export const IBizRawItem = defineComponent({ + name: 'IBizRawItem', + props: { + type: { + type: String, + required: true, + }, + content: { + type: [String, Object], + }, + }, + setup(props) { + const ns = useNamespace('rawitem'); + + // 视频类型内容参数 + const playerParams = ref({ + id: createUUID(), + path: '', + mute: true, + autoplay: true, + replay: false, + showcontrols: true, + }); + + // 分割线类型参数 + const dividerParams = ref({ + contentPosition: 'center', + html: '', + }); + + // 类型参数 + const alertParams = ref({ + type: 'info', + title: '', + closeabled: true, + showIcon: false, + }); + + // 文本类型显示值 + const rawItemText = ref(''); + + if ( + [ + 'TEXT', + 'HEADING1', + 'HEADING2', + 'HEADING3', + 'HEADING4', + 'HEADING5', + 'HEADING6', + 'PARAGRAPH', + 'HTML', + ].includes(props.type) + ) { + if (props.content && typeof props.content === 'string') { + rawItemText.value = props.content; + rawItemText.value = rawItemText.value.replaceAll('<', '<'); + rawItemText.value = rawItemText.value.replaceAll('>', '>'); + rawItemText.value = rawItemText.value.replaceAll('&nbsp;', ' '); + rawItemText.value = rawItemText.value.replaceAll(' ', ' '); + } + } + + if (['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(props.type)) { + if (props.content) { + let rawConfig = {}; + try { + if (typeof props.content === 'string') { + // eslint-disable-next-line no-new-func + const func = new Function(`return (${props.content});`); + rawConfig = func(); + switch (props.type) { + case 'VIDEO': + Object.assign(playerParams.value, rawConfig); + break; + case 'DIVIDER': + Object.assign(dividerParams.value, rawConfig); + break; + case 'INFO': + case 'WARNING': + case 'ERROR': + alertParams.value.type = props.type.toLocaleLowerCase(); + Object.assign(alertParams.value, rawConfig); + break; + default: + break; + } + } + } catch { + ibiz.log.error(`${props.type}类型自定义参数配置错误`); + } + } + } + + return { ns, rawItemText, playerParams, dividerParams, alertParams }; + }, + render() { + if (this.type === 'IMAGE') { + return ( + + ); + } + if (this.type === 'TEXT') { + return {this.rawItemText}; + } + if (this.type === 'HEADING1') { + return

{this.rawItemText}

; + } + if (this.type === 'HEADING2') { + return

{this.rawItemText}

; + } + if (this.type === 'HEADING3') { + return

{this.rawItemText}

; + } + if (this.type === 'HEADING4') { + return

{this.rawItemText}

; + } + if (this.type === 'HEADING5') { + return
{this.rawItemText}
; + } + if (this.type === 'HEADING6') { + return
{this.rawItemText}
; + } + if (this.type === 'PARAGRAPH') { + return

{this.rawItemText}

; + } + if (this.type === 'HTML') { + return ( +
+ ); + } + if (this.type === 'VIDEO') { + return ( +
+ +
+ ); + } + if (this.type === 'DIVIDER') { + return ( + + + + ); + } + if ( + this.type === 'INFO' || + this.type === 'WARNING' || + this.type === 'ERROR' + ) { + return ( + + ); + } + if (['MARKDOWN', 'PLACEHOLDER'].includes(this.type)) { + return
{this.type}类型暂未支持
; + } + return null; + }, +}); diff --git a/src/editor/autocomplete/autocomplete-editor.controller.ts b/src/editor/autocomplete/autocomplete-editor.controller.ts index 1df93ef0a..945f9b92b 100644 --- a/src/editor/autocomplete/autocomplete-editor.controller.ts +++ b/src/editor/autocomplete/autocomplete-editor.controller.ts @@ -1,6 +1,11 @@ import { IHttpResponse, RuntimeModelError } from '@ibiz-template/core'; import { EditorController } from '@ibiz-template/runtime'; -import { IAppDataEntity, IAutoComplete } from '@ibiz/model-core'; +import { + IAppDataEntity, + IAppDEACMode, + IAutoComplete, + IDEACModeDataItem, +} from '@ibiz/model-core'; /** * 自动完成编辑器控制器 @@ -17,20 +22,15 @@ export class AutoCompleteEditorController extends EditorController { super.onInit(); - this.valueItem = this.parent.valueItemName?.toLowerCase() || ''; if (this.model.appDataEntityId) { this.appDataEntity = await ibiz.hub.getAppDataEntity( this.model.appDataEntityId, this.context.srfappid, )!; if (this.appDataEntity) { - this.keyName = this.appDataEntity?.keyAppDEFieldId || ''; - this.textName = this.appDataEntity?.majorAppDEFieldId || ''; + this.keyName = this.appDataEntity.keyAppDEFieldId!; + this.textName = this.appDataEntity.majorAppDEFieldId!; this.getAcParams(); this.sort = this.getAcSort(); } @@ -79,23 +88,34 @@ export class AutoCompleteEditorController extends EditorController { + if (dataItem.id !== 'value' && dataItem.id !== 'text') { + this.dataItems.push(dataItem); + } + }); + } + } } /** * 获取自填模式sort排序 */ public getAcSort() { - // if (this.model.deACMode) { - // const { sortField, sortDir } = this.model.deACMode; - // if (sortField && sortDir) { - // return `${sortField},${sortDir}`; - // } - // } + if (this.deACMode) { + const { minorSortAppDEFieldId, minorSortDir } = this.deACMode; + if (minorSortAppDEFieldId && minorSortDir) { + return `${minorSortAppDEFieldId.toLowerCase()},${minorSortDir.toLowerCase()}`; + } + } return undefined; } @@ -136,15 +156,31 @@ export class AutoCompleteEditorController extends EditorController>} + * @returns {*} {Promise>} */ async calcFillDataItems( - _data: IData, + data: IData, // eslint-disable-next-line @typescript-eslint/no-explicit-any - ): Promise> { - // if (this.model.deACMode) { - // return DEACModeUtil.calcFillDataItems(data, this.model.deACMode); - // } + ): Promise> { + if (this.deACMode) { + if (this.dataItems.length === 0) { + return []; + } + const result = await Promise.all( + this.dataItems.map(item => { + const value = data[item.appDEFieldId!]; + if (item.format) { + // todo 值格式化 + } else if (item.convertToCodeItemText && item.codeListId) { + // todo 代码表转换为文本值 + } else if (item.customCode) { + // todo 脚本代码 + } + return { id: item.id!, value }; + }), + ); + return result; + } return []; } } diff --git a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx index d3ff1d4a8..ec77c44af 100644 --- a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx +++ b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx @@ -5,7 +5,7 @@ import { useNamespace, } from '@ibiz-template/vue3-util'; import './ibiz-autocomplete.scss'; -import { isEmpty } from 'ramda'; +import { debounce } from 'lodash-es'; import { AutoCompleteEditorController } from '../autocomplete-editor.controller'; export const IBizAutoComplete = defineComponent({ @@ -25,6 +25,18 @@ export const IBizAutoComplete = defineComponent({ // 实体数据集 const items: Ref = ref([]); + // 获取实体数据后，需要判断一次当前值是否在返回数据中 + watch(items, (newVal, oldVal) => { + if (oldVal.length === 0 && newVal.length > 0) { + const index = newVal.findIndex((item: IData) => + Object.is(item[c.keyName], props.value), + ); + if (index !== -1) { + curValue.value = newVal[index][c.textName]; + } + } + }); + // 是否显示所有数据 const isShowAll = ref(true); @@ -35,21 +47,16 @@ export const IBizAutoComplete = defineComponent({ () => props.value, newVal => { if (newVal || newVal === null) { - curValue.value = newVal; if (newVal === null) { curValue.value = ''; } - const value = props.data[c.valueItem]; const index = items.value.findIndex((item: IData) => - Object.is(item[c.keyName], value), + Object.is(item[c.keyName], newVal), ); if (index !== -1) { - return; - } - // items里匹配不到当前值项值时，生成自身的选项 - items.value = []; - if (!isEmpty(newVal) && !isEmpty(value)) { - items.value.push({ [c.textName]: newVal, [c.keyName]: value }); + curValue.value = items.value[index][c.textName]; + } else { + curValue.value = newVal; } } }, @@ -62,15 +69,12 @@ export const IBizAutoComplete = defineComponent({ const dataItems = await c.calcFillDataItems(data); if (dataItems.length) { dataItems.forEach(dataItem => { - emit('change', dataItem.value, dataItem.name); + emit('change', dataItem.value, dataItem.id); }); } - // 处理值项和本身的值 - if (c.valueItem) { - emit('change', data[c.keyName], c.valueItem); - } - emit('change', data[c.textName]); + // 处理本身的值 + emit('change', data[c.keyName]); }; // 往外抛值 @@ -92,21 +96,19 @@ export const IBizAutoComplete = defineComponent({ } } }; + // 开始时搜索一次拿items + onSearch(''); // 清除 const onClear = () => { - // zjm todo 实体自填模式相关 // 清空回填数据 - // const dataItems = c.model.deACMode?.dataItems; - // if (dataItems?.length) { - // dataItems.forEach(dataItem => { - // emit('change', null, dataItem.name); - // }); - // } - // if (c.valueItem) { - // emit('change', null, c.valueItem); - // } - // emit('change', null); + const dataItems = c.dataItems; + if (dataItems.length > 0) { + dataItems.forEach(dataItem => { + emit('change', null, dataItem.id); + }); + } + emit('change', null); }; // 聚焦 @@ -140,6 +142,29 @@ export const IBizAutoComplete = defineComponent({ ); }); + let isDebounce = false; + let blurCacheValue: string | undefined; + // 防抖值变更回调 + const debounceChange = debounce( + (val: string | number) => { + // 拦截掉blur触发后change + if (blurCacheValue !== val) { + emit('change', val); + } + blurCacheValue = undefined; + isDebounce = false; + }, + 300, + { leading: true }, + ); + // 输入完成后抛值 + const handleInput = (val: string | number) => { + if (editorType !== 'AC_FS' && editorType !== 'AC_FS_NOBUTTON') { + isDebounce = true; + debounceChange(val); + } + }; + return { ns, c, @@ -151,6 +176,9 @@ export const IBizAutoComplete = defineComponent({ onClear, onFocus, onACSelect, + items, + handleInput, + isDebounce, }; }, render() { @@ -167,16 +195,13 @@ export const IBizAutoComplete = defineComponent({ fetch-suggestions={this.onSearch} onClear={this.onClear} disabled={this.disabled || this.readonly} + onSelect={this.onACSelect} + onInput={this.handleInput} > {{ default: ({ item }: { item: IData }) => { return ( -
{ - this.onACSelect(item); - }} - > +
{item[this.c.textName]}
); diff --git a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx index 4de698eca..7eee183c0 100644 --- a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx +++ b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx @@ -71,7 +71,7 @@ export const IBizPickerDropDown = defineComponent({ const dataItems = await c.calcFillDataItems(item); if (dataItems.length) { dataItems.forEach(dataItem => { - emit('change', dataItem.value, dataItem.name); + emit('change', dataItem.value, dataItem.id); }); } @@ -129,18 +129,17 @@ export const IBizPickerDropDown = defineComponent({ // 清除 const onClear = () => { - // zjm todo 实体自填模式相关 // 清空回填数据 - // const dataItems = c.model.deACMode?.dataItems; - // if (dataItems?.length) { - // dataItems.forEach(dataItem => { - // emit('change', null, dataItem.name); - // }); - // } - // if (c.valueItem) { - // emit('change', null, c.valueItem); - // } - // emit('change', null); + const dataItems = c.dataItems; + if (dataItems?.length) { + dataItems.forEach(dataItem => { + emit('change', null, dataItem.id); + }); + } + if (c.valueItem) { + emit('change', null, c.valueItem); + } + emit('change', null); }; return { ns, diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx index ad121378d..a84fb2c6b 100644 --- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx +++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx @@ -143,18 +143,17 @@ export const IBizPickerSelectView = defineComponent({ // 清除 const onClear = () => { - // zjm todo 实体自填模式相关 // 清空回填数据 - // const dataItems = c.model.deACMode?.dataItems; - // if (dataItems?.length) { - // dataItems.forEach(dataItem => { - // emit('change', null, dataItem.name); - // }); - // } - // if (c.valueItem) { - // emit('change', null, c.valueItem); - // } - // emit('change', null); + const dataItems = c.dataItems; + if (dataItems?.length) { + dataItems.forEach(dataItem => { + emit('change', null, dataItem.id); + }); + } + if (c.valueItem) { + emit('change', null, c.valueItem); + } + emit('change', null); }; // 视图数据改变 diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx index a5e5e0e6a..99a396498 100644 --- a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx +++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx @@ -60,7 +60,7 @@ export const IBizPicker = defineComponent({ const dataItems = await c.calcFillDataItems(data); if (dataItems.length) { dataItems.forEach(dataItem => { - emit('change', dataItem.value, dataItem.name); + emit('change', dataItem.value, dataItem.id); }); } @@ -111,18 +111,17 @@ export const IBizPicker = defineComponent({ // 清除 const onClear = () => { - // zjm todo 实体自填模式相关 // 清空回填数据 - // const dataItems = c.model.deACMode?.dataItems; - // if (dataItems?.length) { - // dataItems.forEach(dataItem => { - // emit('change', null, dataItem.name); - // }); - // } - // if (c.valueItem) { - // emit('change', null, c.valueItem); - // } - // emit('change', null); + const dataItems = c.dataItems; + if (dataItems?.length) { + dataItems.forEach(dataItem => { + emit('change', null, dataItem.id); + }); + } + if (c.valueItem) { + emit('change', null, c.valueItem); + } + emit('change', null); }; // 聚焦 diff --git a/src/editor/data-picker/picker-editor.controller.ts b/src/editor/data-picker/picker-editor.controller.ts index cdaa2b5fc..62203de71 100644 --- a/src/editor/data-picker/picker-editor.controller.ts +++ b/src/editor/data-picker/picker-editor.controller.ts @@ -1,6 +1,12 @@ import { IHttpResponse, RuntimeModelError } from '@ibiz-template/core'; import { EditorController, OpenAppViewCommand } from '@ibiz-template/runtime'; -import { IAppDataEntity, IAppView, IPicker } from '@ibiz/model-core'; +import { + IAppDataEntity, + IAppDEACMode, + IAppView, + IDEACModeDataItem, + IPicker, +} from '@ibiz/model-core'; /** * 数据选择编辑器控制器 @@ -37,12 +43,12 @@ export class PickerEditorController extends EditorController { /** * 主键属性名称 */ - public keyName: string = ''; + public keyName: string = 'srfkey'; /** * 主文本属性名称 */ - public textName: string = ''; + public textName: string = 'srfmajortext'; /** * 实体codeName @@ -74,19 +80,28 @@ export class PickerEditorController extends EditorController { */ public appDataEntity: IAppDataEntity | null = null; + /** + * 实体自填模式模型 + */ + public deACMode: IAppDEACMode | null = null; + + /** + * 自填数据项集合（已排除了value和text) + */ + public dataItems: IDEACModeDataItem[] = []; + protected async onInit(): Promise { super.onInit(); this.initParams(); - // zjm todo 值项名称父模型没有valueItemName - this.valueItem = this.parent.valueItemName?.toLowerCase() || ''; + this.valueItem = this.model.valueItemName?.toLowerCase() || ''; if (this.model.appDataEntityId) { this.appDataEntity = await ibiz.hub.getAppDataEntity( this.model.appDataEntityId, this.context.srfappid, )!; if (this.appDataEntity) { - this.keyName = this.appDataEntity?.keyAppDEFieldId || ''; - this.textName = this.appDataEntity?.majorAppDEFieldId || ''; + this.keyName = this.appDataEntity.keyAppDEFieldId!; + this.textName = this.appDataEntity.majorAppDEFieldId!; this.getAcParams(); this.sort = this.getAcSort(); } @@ -141,23 +156,34 @@ export class PickerEditorController extends EditorController { if (this.model.appDEDataSetId) { this.interfaceName = this.model.appDEDataSetId; } - // zjm todo 实体自填模式模型 - // if (this.model.deACMode) { - // this.textName = this.model.deACMode.textFieldName || this.textName; - // this.keyName = this.model.deACMode.valueFieldName || this.keyName; - // } + if (this.appDataEntity?.appDEACModes) { + this.deACMode = this.appDataEntity.appDEACModes[0]; + if (this.deACMode.textAppDEFieldId) { + this.textName = this.deACMode.textAppDEFieldId; + } + if (this.deACMode.valueAppDEFieldId) { + this.keyName = this.deACMode.valueAppDEFieldId; + } + if (this.deACMode.deacmodeDataItems) { + this.deACMode.deacmodeDataItems.forEach(dataItem => { + if (dataItem.id !== 'value' && dataItem.id !== 'text') { + this.dataItems.push(dataItem); + } + }); + } + } } /** * 获取自填模式sort排序 */ public getAcSort() { - // if (this.model.deACMode) { - // const { sortField, sortDir } = this.model.deACMode; - // if (sortField && sortDir) { - // return `${sortField},${sortDir}`; - // } - // } + if (this.deACMode) { + const { minorSortAppDEFieldId, minorSortDir } = this.deACMode; + if (minorSortAppDEFieldId && minorSortDir) { + return `${minorSortAppDEFieldId.toLowerCase()},${minorSortDir.toLowerCase()}`; + } + } return undefined; } @@ -232,7 +258,9 @@ export class PickerEditorController extends EditorController { this.context, this.params, ); - context.srfkey = data[this.valueItem]; + if (data[this.valueItem]) { + context.srfkey = data[this.valueItem]; + } const { linkAppViewId } = this.model; if (!linkAppViewId) { throw new RuntimeModelError(this.model, '请配置数据链接视图'); @@ -251,15 +279,31 @@ export class PickerEditorController extends EditorController { * @author lxm * @date 2022-10-24 16:10:24 * @param {IData} data 选中数据 - * @returns {*} {Promise>} + * @returns {*} {Promise>} */ async calcFillDataItems( - _data: IData, + data: IData, // eslint-disable-next-line @typescript-eslint/no-explicit-any - ): Promise> { - // if (this.model.deACMode) { - // return DEACModeUtil.calcFillDataItems(data, this.model.deACMode); - // } + ): Promise> { + if (this.deACMode) { + if (this.dataItems.length === 0) { + return []; + } + const result = await Promise.all( + this.dataItems.map(item => { + const value = data[item.appDEFieldId!]; + if (item.format) { + // todo 值格式化 + } else if (item.convertToCodeItemText && item.codeListId) { + // todo 代码表转换为文本值 + } else if (item.customCode) { + // todo 脚本代码 + } + return { id: item.id!, value }; + }), + ); + return result; + } return []; } } diff --git a/src/editor/date-range/date-range-editor.controller.ts b/src/editor/date-range/date-range-editor.controller.ts new file mode 100644 index 000000000..03f0bface --- /dev/null +++ b/src/editor/date-range/date-range-editor.controller.ts @@ -0,0 +1,53 @@ +import { EditorController } from '@ibiz-template/runtime'; +import { IDateRange } from '@ibiz/model-core'; + +/** + * 时间范围编辑器控制器 + * + * @export + * @class DateRangeEditorController + * @extends {EditorController} + */ +export class DateRangeEditorController extends EditorController { + /** + * 占位 + * @return {*} + * @author: zhujiamin + * @Date: 2022-08-25 14:33:14 + */ + public placeHolder = '请选择日期'; + + /** + * 根据编辑器类型获取格式化 + * + * @author lxm + * @date 2022-11-03 16:11:21 + * @public + * @returns {*} {string} + */ + public getFormatByType(): string { + switch (this.model.editorType) { + // 时间范围选择器 + case 'DATERANGE': + return 'YYYY-MM-DD HH:mm:ss'; + // 时间范围选择器（YYYY-MM-DD） + case 'DATERANGE_NOTIME': + return 'YYYY-MM-DD'; + default: + return 'YYYY-MM-DD HH:mm:ss'; + } + } + + /** + * 值格式化 + * @return {*} + * @author: zhujiamin + * @Date: 2022-08-25 14:33:14 + */ + public valueFormat: string | undefined; + + protected async onInit(): Promise { + super.onInit(); + this.valueFormat = this.getFormatByType(); + } +} diff --git a/src/editor/date-range/date-range-editor.provider.ts b/src/editor/date-range/date-range-editor.provider.ts new file mode 100644 index 000000000..11a252a3f --- /dev/null +++ b/src/editor/date-range/date-range-editor.provider.ts @@ -0,0 +1,28 @@ +import { + IEditorContainerController, + IEditorProvider, +} from '@ibiz-template/runtime'; +import { IDateRange } from '@ibiz/model-core'; +import { DateRangeEditorController } from './date-range-editor.controller'; + +/** + * 数值范围编辑器适配器 + * + * @export + * @class DateRangeEditorProvider + * @implements {EditorProvider} + */ +export class DateRangeEditorProvider implements IEditorProvider { + formEditor: string = 'IBizDateRangePicker'; + + gridEditor: string = 'IBizDateRangePicker'; + + async createController( + editorModel: IDateRange, + parentController: IEditorContainerController, + ): Promise { + const c = new DateRangeEditorController(editorModel, parentController); + await c.init(); + return c; + } +} diff --git a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss new file mode 100644 index 000000000..c709f7d67 --- /dev/null +++ b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.scss @@ -0,0 +1,5 @@ +@include b(date-range-picker) { + .el-date-editor { + width: 100%; + } +} diff --git a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx new file mode 100644 index 000000000..4f48650eb --- /dev/null +++ b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx @@ -0,0 +1,149 @@ +import { computed, defineComponent, Ref, ref } from 'vue'; +import { + getEditorEmits, + getDateRangeProps, + useNamespace, +} from '@ibiz-template/vue3-util'; +import './ibiz-date-range-picker.scss'; +import { DateRangeEditorController } from '../date-range-editor.controller'; + +export const IBizDateRangePicker = defineComponent({ + name: 'IBizDateRangePicker', + props: getDateRangeProps(), + emits: getEditorEmits(), + setup(props, { emit }) { + const ns = useNamespace('date-range-picker'); + + const c = props.controller; + + const editorModel = c.model; + + // 值分割符 + let valueSeparator = '-'; + // 在范围选择器里取消两个日期面板之间的联动 + let unlinkPanels = false; + // 开始占位提示 + let startPlaceHolder = '开始时间'; + // 结束占位提示 + let endPlaceHolder = '结束时间'; + // 选择范围时的分隔符 + let rangeSeparator = '至'; + if (editorModel.editorParams) { + if (editorModel.editorParams.valueseparator) { + valueSeparator = editorModel.editorParams.valueseparator; + } + if (editorModel.editorParams.startplaceholder) { + startPlaceHolder = editorModel.editorParams.startplaceholder; + } + if (editorModel.editorParams.endplaceholder) { + endPlaceHolder = editorModel.editorParams.endplaceholder; + } + if (editorModel.editorParams.rangeseparator) { + rangeSeparator = editorModel.editorParams.rangeseparator; + } + if (editorModel.editorParams.unlinkpanels) { + unlinkPanels = c.handleStringToBoolean( + editorModel.editorParams.unlinkpanels, + ); + } + } + + // 类型 + const type = ref('daterange'); + switch (editorModel.editorType) { + case 'DATERANGE': + type.value = 'datetimerange'; + break; + case 'DATERANGE_NOTIME': + type.value = 'daterange'; + break; + default: + type.value = 'datetimerange'; + } + + // 格式 + const format = ref('YYYY-MM-DD'); + // 值格式化 + const valueFormat = c!.valueFormat; + if (valueFormat) { + format.value = valueFormat; + } + + // 关系表单项集合 + const refFormItem: Ref = ref([]); + const editorItems = editorModel.editorItems; + if (editorItems && editorItems.length > 0) { + const editorItemNames: string[] = editorItems.map( + (item: IData) => item.id, + ); + refFormItem.value = editorItemNames; + } + + // 当前值 + const curValue = computed({ + get() { + let value: string[] = []; + if (refFormItem.value) { + refFormItem.value.forEach((name: string) => { + if (props.data[name]) { + value.push(props.data[name]); + } + }); + } else if (props.value && typeof props.value === 'string') { + value = props.value.split(valueSeparator); + } + return value; + }, + set(dates: string[]) { + if (dates && dates.length > 0) { + emit('change', dates.join(valueSeparator)); + if (refFormItem.value) { + dates.forEach((date: string, index: number) => { + emit('change', date, refFormItem.value[index]); + }); + } + } else { + emit('change', null); + if (refFormItem.value) { + refFormItem.value.forEach((date: string, index: number) => { + emit('change', null, refFormItem.value[index]); + }); + } + } + }, + }); + + return { + ns, + c, + refFormItem, + curValue, + type, + format, + valueSeparator, + startPlaceHolder, + endPlaceHolder, + rangeSeparator, + unlinkPanels, + }; + }, + render() { + return ( +
+ +
+ ); + }, +}); diff --git a/src/editor/date-range/index.ts b/src/editor/date-range/index.ts new file mode 100644 index 000000000..313dfa995 --- /dev/null +++ b/src/editor/date-range/index.ts @@ -0,0 +1,3 @@ +export { IBizDateRangePicker } from './ibiz-date-range-picker/ibiz-date-range-picker'; +export * from './date-range-editor.controller'; +export * from './date-range-editor.provider'; diff --git a/src/editor/index.ts b/src/editor/index.ts index 6503166dc..a9ebb02c3 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -53,6 +53,11 @@ import { IBizPickerSelectView, DataPickerEditorProvider, } from './data-picker'; +import { + IBizNumberRangePicker, + NumberRangeEditorProvider, +} from './number-range'; +import { IBizDateRangePicker, DateRangeEditorProvider } from './date-range'; export const IBizEditor = { install: (v: App) => { @@ -90,6 +95,8 @@ export const IBizEditor = { v.component(IBizPickerLink.name, IBizPickerLink); v.component(IBizPickerEmbedView.name, IBizPickerEmbedView); v.component(IBizPickerSelectView.name, IBizPickerSelectView); + v.component(IBizNumberRangePicker.name, IBizNumberRangePicker); + v.component(IBizDateRangePicker.name, IBizDateRangePicker); // 标签 registerEditorProvider('SPAN', () => new SpanEditorProvider()); @@ -237,6 +244,17 @@ export const IBizEditor = { 'PICKUPVIEW', () => new DataPickerEditorProvider('PICKUPVIEW'), ); + // 数值范围 + registerEditorProvider( + 'NUMBERRANGE', + () => new NumberRangeEditorProvider(), + ); + // 时间范围 + registerEditorProvider('DATERANGE', () => new DateRangeEditorProvider()); + registerEditorProvider( + 'DATERANGE_NOTIME', + () => new DateRangeEditorProvider(), + ); }, }; diff --git a/src/editor/list-box/list-box-picker-editor.controller.ts b/src/editor/list-box/list-box-picker-editor.controller.ts index 31eb524e8..e030c0ed9 100644 --- a/src/editor/list-box/list-box-picker-editor.controller.ts +++ b/src/editor/list-box/list-box-picker-editor.controller.ts @@ -1,4 +1,4 @@ -import { IHttpResponse } from '@ibiz-template/core'; +import { IHttpResponse, RuntimeModelError } from '@ibiz-template/core'; import { EditorController } from '@ibiz-template/runtime'; import { IAppDataEntity, IListBoxPicker } from '@ibiz/model-core'; @@ -12,12 +12,12 @@ export class ListBoxPickerEditorController extends EditorController { super.onInit(); if (this.model.editorType === 'LISTBOXPICKUP') { - // zjm todo 列表框选择模型缺少实体请求相关的，如appDataEntityId - // this.appDataEntity = await ibiz.hub.getAppDataEntity( - // this.model.appDataEntityId!, - // this.context.srfappid, - // )!; - + this.appDataEntity = await ibiz.hub.getAppDataEntity( + this.model.appDataEntityId!, + this.context.srfappid, + ); if (this.appDataEntity) { - this.keyName = this.appDataEntity?.keyAppDEFieldId || ''; - this.textName = this.appDataEntity?.majorAppDEFieldId || ''; + this.keyName = this.appDataEntity.keyAppDEFieldId!; + this.textName = this.appDataEntity.majorAppDEFieldId!; this.getAcParams(); } } @@ -58,9 +56,9 @@ export class ListBoxPickerEditorController extends EditorController>} * @memberof PickerEditorController */ - public async getServiceData(_data: IData): Promise> { - // const { context, params } = this.handlePublicParams( - // data, - // this.context, - // this.params, - // ); - // Object.assign(params, { size: 1000 }); - // if (this.serviceName && this.interfaceName) { - // const deService = await this.app.es.getService(this.serviceName); - // const res = await deService.exec(this.interfaceName, context, params); - // return res as IHttpResponse; - // } - // throw new DefectModelError(this.model.source, '请配置实体和实体数据集'); - return {} as IHttpResponse; + public async getServiceData(data: IData): Promise> { + const { context, params } = this.handlePublicParams( + data, + this.context, + this.params, + ); + Object.assign(params, { size: 1000 }); + if (this.serviceName && this.interfaceName) { + const app = ibiz.hub.getApp(this.appDataEntity!.appId); + const deService = await app.deService.getService(this.serviceName); + const res = await deService.exec(this.interfaceName, context, params); + return res as IHttpResponse; + } + throw new RuntimeModelError(this.model, '请配置实体和实体数据集'); } } diff --git a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss new file mode 100644 index 000000000..354c292aa --- /dev/null +++ b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.scss @@ -0,0 +1,8 @@ +@include b(number-range-picker) { + width: 100%; + @include flex(row); + + .el-input-number { + flex: 1; + } +} diff --git a/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.tsx b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.tsx new file mode 100644 index 000000000..311d2cf61 --- /dev/null +++ b/src/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.tsx @@ -0,0 +1,151 @@ +import { defineComponent, Ref, ref, watch } from 'vue'; +import { + getEditorEmits, + getNumberRangeProps, + useNamespace, +} from '@ibiz-template/vue3-util'; +import './ibiz-number-range-picker.scss'; +import { NumberRangeEditorController } from '../number-range-editor.controller'; + +export const IBizNumberRangePicker = defineComponent({ + name: 'IBizNumberRangePicker', + props: getNumberRangeProps(), + emits: getEditorEmits(), + setup(props, { emit }) { + const ns = useNamespace('number-range-picker'); + + const c = props.controller; + + const editorModel = c.model; + + // 最大值 + let max = Infinity; + // 最小值 + let min = -Infinity; + // 数值精度 + let precision = 0; + // 值分割符 + let valueSeparator = '-'; + // 开始占位提示 + let startPlaceHolder = '请输入开始数字'; + // 结束占位提示 + let endPlaceHolder = '请输入结束数字'; + // 选择范围时的分隔符 + let rangeSeparator = '~'; + if (editorModel.editorParams) { + if (editorModel.editorParams.maxvalue) { + max = c.handleStringToNumber(editorModel.editorParams.maxvalue); + } + if (editorModel.editorParams.minvalue) { + min = c.handleStringToNumber(editorModel.editorParams.minvalue); + } + if (editorModel.editorParams.precision) { + precision = c.handleStringToNumber(editorModel.editorParams.precision); + } + if (editorModel.editorParams.valueseparator) { + valueSeparator = editorModel.editorParams.valueseparator; + } + if (editorModel.editorParams.startplaceholder) { + startPlaceHolder = editorModel.editorParams.startplaceholder; + } + if (editorModel.editorParams.endplaceholder) { + endPlaceHolder = editorModel.editorParams.endplaceholder; + } + if (editorModel.editorParams.rangeseparator) { + rangeSeparator = editorModel.editorParams.rangeseparator; + } + } + + // 数据 + const items: number[] = []; + + // 关系表单项集合 + const refFormItem: Ref = ref([]); + const editorItems = editorModel.editorItems; + if (editorItems && editorItems.length > 0) { + const editorItemNames: string[] = editorItems.map( + (item: IData) => item.id, + ); + refFormItem.value = editorItemNames; + } + + // 范围最小值 + const minValue = ref(null); + + // 范围最大值 + const maxValue = ref(null); + + watch( + () => props.value, + (newVal, oldVal) => { + if (newVal !== oldVal && typeof newVal === 'string') { + minValue.value = newVal.split(valueSeparator)[0] + ? Number(newVal.split(valueSeparator)[0]) + : null; + maxValue.value = newVal.split(valueSeparator)[1] + ? Number(newVal.split(valueSeparator)[1]) + : null; + } + }, + { immediate: true }, + ); + + // 处理值变化 + const handleChange = (value: number, index: number) => { + items[index] = value; + if (items.length === 2) { + emit('change', items.join(valueSeparator)); + } + if (refFormItem.value) { + const valueName = refFormItem.value[index]; + emit('change', value, valueName); + } + }; + + return { + ns, + c, + refFormItem, + minValue, + maxValue, + handleChange, + max, + min, + precision, + valueSeparator, + startPlaceHolder, + endPlaceHolder, + rangeSeparator, + }; + }, + render() { + return ( +
+ this.handleChange(val, 0)} + > +
{this.rangeSeparator}
+ this.handleChange(val, 1)} + > +
+ ); + }, +}); diff --git a/src/editor/number-range/index.ts b/src/editor/number-range/index.ts new file mode 100644 index 000000000..ce262868b --- /dev/null +++ b/src/editor/number-range/index.ts @@ -0,0 +1,3 @@ +export { IBizNumberRangePicker } from './ibiz-number-range-picker/ibiz-number-range-picker'; +export * from './number-range-editor.controller'; +export * from './number-range-editor.provider'; diff --git a/src/editor/number-range/number-range-editor.controller.ts b/src/editor/number-range/number-range-editor.controller.ts new file mode 100644 index 000000000..0f21ca6b9 --- /dev/null +++ b/src/editor/number-range/number-range-editor.controller.ts @@ -0,0 +1,11 @@ +import { EditorController } from '@ibiz-template/runtime'; +import { INumberRange } from '@ibiz/model-core'; + +/** + * 数值范围编辑器控制器 + * + * @export + * @class NumberRangeEditorController + * @extends {EditorController} + */ +export class NumberRangeEditorController extends EditorController {} diff --git a/src/editor/number-range/number-range-editor.provider.ts b/src/editor/number-range/number-range-editor.provider.ts new file mode 100644 index 000000000..02695c6c7 --- /dev/null +++ b/src/editor/number-range/number-range-editor.provider.ts @@ -0,0 +1,28 @@ +import { + IEditorContainerController, + IEditorProvider, +} from '@ibiz-template/runtime'; +import { INumberRange } from '@ibiz/model-core'; +import { NumberRangeEditorController } from './number-range-editor.controller'; + +/** + * 数值范围编辑器适配器 + * + * @export + * @class NumberRangeEditorProvider + * @implements {EditorProvider} + */ +export class NumberRangeEditorProvider implements IEditorProvider { + formEditor: string = 'IBizNumberRangePicker'; + + gridEditor: string = 'IBizNumberRangePicker'; + + async createController( + editorModel: INumberRange, + parentController: IEditorContainerController, + ): Promise { + const c = new NumberRangeEditorController(editorModel, parentController); + await c.init(); + return c; + } +} diff --git a/src/editor/raw/ibiz-raw/ibiz-raw.tsx b/src/editor/raw/ibiz-raw/ibiz-raw.tsx index 3f2c232b8..f96692164 100644 --- a/src/editor/raw/ibiz-raw/ibiz-raw.tsx +++ b/src/editor/raw/ibiz-raw/ibiz-raw.tsx @@ -39,11 +39,11 @@ export const IBizRaw = defineComponent({ this.readonly ? this.ns.m('readonly') : '', ]} > - + >
); }, diff --git a/src/editor/span/span-editor.controller.ts b/src/editor/span/span-editor.controller.ts index a7af2e7cb..b9aa1a9e9 100644 --- a/src/editor/span/span-editor.controller.ts +++ b/src/editor/span/span-editor.controller.ts @@ -1,4 +1,4 @@ -import { ISpan, IAppView, IAppCodeList } from '@ibiz/model-core'; +import { ISpan, IAppCodeList } from '@ibiz/model-core'; import { CodeListEditorController, OpenAppViewCommand, @@ -17,11 +17,6 @@ export class SpanEditorController extends CodeListEditorController { */ public valueItem = ''; - /** - *链接视图相关参数 - */ - public linkView: IAppView | null = null; - /** * 代码表模型 * @return {*} @@ -32,8 +27,10 @@ export class SpanEditorController extends CodeListEditorController { protected async onInit(): Promise { super.onInit(); - // zjm todo 值项名称父没有valueItemName - this.valueItem = this.parent.valueItemName?.toLowerCase() || ''; + // span-link临时用editorItems + if (this.model?.editorItems?.[0]) { + this.valueItem = this.model.editorItems[0].id!; + } // 初始化代码表 if (this.model.appCodeListId) { const app = await ibiz.hub.getApp(this.context.srfappid); @@ -50,7 +47,9 @@ export class SpanEditorController extends CodeListEditorController { this.context, this.params, ); - context.srfkey = data[this.valueItem]; + if (data[this.valueItem]) { + context.srfkey = data[this.valueItem]; + } const { linkAppViewId } = this.model; if (!linkAppViewId) { throw new RuntimeModelError(this.model, '请配置数据链接视图'); diff --git a/src/editor/stepper/stepper-editor.controller.ts b/src/editor/stepper/stepper-editor.controller.ts index 4ca70e331..be31f108a 100644 --- a/src/editor/stepper/stepper-editor.controller.ts +++ b/src/editor/stepper/stepper-editor.controller.ts @@ -8,4 +8,12 @@ import { IStepper } from '@ibiz/model-core'; * @class StepperEditorController * @extends {EditorController} */ -export class StepperEditorController extends EditorController {} +export class StepperEditorController extends EditorController { + /** + * 占位 + * @return {*} + * @author: zhujiamin + * @Date: 2022-08-25 14:33:14 + */ + public placeHolder = '请输入'; +} diff --git a/src/editor/upload/upload-editor.controller.ts b/src/editor/upload/upload-editor.controller.ts index 8098ef292..26a6b4a46 100644 --- a/src/editor/upload/upload-editor.controller.ts +++ b/src/editor/upload/upload-editor.controller.ts @@ -1,4 +1,8 @@ -import { downloadFileFromBlob, RuntimeError } from '@ibiz-template/core'; +import { + downloadFileFromBlob, + RuntimeError, + RuntimeModelError, +} from '@ibiz-template/core'; import { convertNavData, EditorController } from '@ibiz-template/runtime'; import { IFileUploader } from '@ibiz/model-core'; import qs from 'qs'; @@ -63,12 +67,24 @@ export class UploadEditorController extends EditorController { this.accept = accept; } if (uploadparams) { - // eslint-disable-next-line no-eval - this.uploadParams = eval(`(${uploadparams})`); + try { + this.uploadParams = JSON.parse(uploadparams); + } catch (error) { + throw new RuntimeModelError( + uploadparams, + `配置uploadparams没有按标准JSON格式`, + ); + } } if (exportparams) { - // eslint-disable-next-line no-eval - this.exportParams = eval(`(${exportparams})`); + try { + this.exportParams = JSON.parse(exportparams); + } catch (error) { + throw new RuntimeModelError( + exportparams, + `配置exportparams没有按标准JSON格式`, + ); + } } } } -- Gitee From a5541d90702a4ffb91e95aa99cfc66fbebdeb816 Mon Sep 17 00:00:00 2001 From: zhujiamin <1147570162@qq.com> Date: Fri, 26 May 2023 18:35:05 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E5=A4=9A=E6=95=B0=E6=8D=AE=E9=83=A8=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../form/edit-form/edit-form.controller.ts | 2 +- .../form/edit-form/edit-form.service.ts | 34 ++--- src/control/form/edit-form/edit-form.tsx | 15 ++- .../form-mdctrl/form-mdctrl.controller.ts | 119 ++++++++++++++++++ .../form-mdctrl/form-mdctrl.provider.ts | 27 ++++ .../form-detail/form-mdctrl/form-mdctrl.scss | 29 +++++ .../form-mdctrl/form-mdctrl.state.ts | 16 +++ .../form-detail/form-mdctrl/form-mdctrl.tsx | 111 ++++++++++++++++ .../form/form-detail/form-mdctrl/index.ts | 17 +++ src/control/form/form-detail/index.ts | 1 + src/control/form/form/form.controller.ts | 14 ++- src/control/form/form/index.ts | 2 + 12 files changed, 368 insertions(+), 19 deletions(-) create mode 100644 src/control/form/form-detail/form-mdctrl/form-mdctrl.controller.ts create mode 100644 src/control/form/form-detail/form-mdctrl/form-mdctrl.provider.ts create mode 100644 src/control/form/form-detail/form-mdctrl/form-mdctrl.scss create mode 100644 src/control/form/form-detail/form-mdctrl/form-mdctrl.state.ts create mode 100644 src/control/form/form-detail/form-mdctrl/form-mdctrl.tsx create mode 100644 src/control/form/form-detail/form-mdctrl/index.ts diff --git a/src/control/form/edit-form/edit-form.controller.ts b/src/control/form/edit-form/edit-form.controller.ts index eb8f2d5e4..a046d2781 100644 --- a/src/control/form/edit-form/edit-form.controller.ts +++ b/src/control/form/edit-form/edit-form.controller.ts @@ -62,7 +62,7 @@ export class EditFormController * @author lxm * @date 2022-08-19 14:08:50 */ - async load(): Promise { + async load(): Promise { this.isNewData = !hasDeCodeName(this.context, this.model.appDataEntityId!); const queryParams = { ...this.params }; diff --git a/src/control/form/edit-form/edit-form.service.ts b/src/control/form/edit-form/edit-form.service.ts index e7a69ec06..cadeb06c1 100644 --- a/src/control/form/edit-form/edit-form.service.ts +++ b/src/control/form/edit-form/edit-form.service.ts @@ -87,17 +87,17 @@ export class EditFormService< * @author lxm * @date 2022-09-07 19:09:11 * @param {IParams} context 上下文 - * @param {ControlVO} data 数据 + * @param {IData} data 数据 * @returns {*} */ async create( context: IParams, - data: ControlVO, + data: IData, ): Promise> { let res = await this.exec( this.model.createControlAction!.appDEMethodId!, context, - data.getOrigin(), + data instanceof ControlVO ? data.getOrigin() : data, ); res = this.handleResponse(res); return res as IHttpResponse; @@ -109,17 +109,17 @@ export class EditFormService< * @author lxm * @date 2022-09-07 19:09:11 * @param {IParams} context 上下文 - * @param {ControlVO} data 数据 + * @param {IData} data 数据 * @returns {*} */ async update( context: IParams, - data: ControlVO, + data: IData, ): Promise> { let res = await this.exec( this.model.updateControlAction!.appDEMethodId!, context, - data.getOrigin(), + data instanceof ControlVO ? data.getOrigin() : data, ); res = this.handleResponse(res); return res as IHttpResponse; @@ -131,19 +131,23 @@ export class EditFormService< * @author lxm * @date 2022-09-07 19:09:11 * @param {IParams} context 上下文 - * @param {ControlVO} data 数据 + * @param {IData} data 数据 * @returns {*} */ async goBack( context: IParams, - data: ControlVO, + data: IData, ): Promise> { const wizardForm = this.model as IDEWizardEditForm; const methodName = wizardForm.goBackControlAction?.appDEMethodId; if (!methodName) { throw new RuntimeModelError(this.model, '缺少返回操作实体行为'); } - let res = await this.exec(methodName, context, data.getOrigin()); + let res = await this.exec( + methodName, + context, + data instanceof ControlVO ? data.getOrigin() : data, + ); res = this.handleResponse(res); return res as IHttpResponse; } @@ -174,14 +178,14 @@ export class EditFormService< * @author lxm * @date 2022-09-07 19:09:11 * @param {IParams} context 上下文 - * @param {ControlVO} data 数据 + * @param {IData} data 数据 * @param {IParams} [params={}] 视图参数 * @returns {*} */ async wfStart( context: IParams, params: IParams, - data: ControlVO, + data: IData, ): Promise> { const wfForm = this.model as IWFEditForm; const methodName = wfForm.wfstartControlAction?.appDEMethodId; @@ -192,7 +196,7 @@ export class EditFormService< methodName, context, params, - data.getOrigin(), + data instanceof ControlVO ? data.getOrigin() : data, ); } @@ -202,14 +206,14 @@ export class EditFormService< * @author lxm * @date 2022-09-07 19:09:11 * @param {IParams} context 上下文 - * @param {ControlVO} data 数据 + * @param {IData} data 数据 * @param {IParams} [params={}] 视图参数 * @returns {*} */ async wfSubmit( context: IParams, params: IParams, - data: ControlVO, + data: IData, ): Promise> { const wfForm = this.model as IWFEditForm; const methodName = wfForm.wfsubmitControlAction?.appDEMethodId; @@ -220,7 +224,7 @@ export class EditFormService< methodName, context, params, - data.getOrigin(), + data instanceof ControlVO ? data.getOrigin() : data, ); } diff --git a/src/control/form/edit-form/edit-form.tsx b/src/control/form/edit-form/edit-form.tsx index ce5860f25..61cc82f23 100644 --- a/src/control/form/edit-form/edit-form.tsx +++ b/src/control/form/edit-form/edit-form.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; import { IDEEditForm } from '@ibiz/model-core'; -import { defineComponent, PropType, reactive } from 'vue'; +import { defineComponent, PropType, reactive, watch } from 'vue'; import { EditFormController } from './edit-form.controller'; export const EditFormControl = defineComponent({ @@ -13,11 +13,24 @@ export const EditFormControl = defineComponent({ }, context: { type: Object as PropType, required: true }, params: { type: Object as PropType, default: () => ({}) }, + isSimple: { type: Boolean, required: false }, + data: { type: Object as PropType, required: false }, }, setup() { const c = useControlController( (...args) => new EditFormController(...args), ); + + watch( + () => c.state.data, + (newVal, oldVal) => { + if (newVal && newVal !== oldVal) { + c.state.isLoaded = true; + } + }, + { immediate: true }, + ); + const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); c.evt.on('onCreated', () => { diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.controller.ts b/src/control/form/form-detail/form-mdctrl/form-mdctrl.controller.ts new file mode 100644 index 000000000..cf3f86f3f --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.controller.ts @@ -0,0 +1,119 @@ +import { + EventBase, + getControlProvider, + IControlProvider, +} from '@ibiz-template/runtime'; +import { IControl, IDEFormMDCtrl } from '@ibiz/model-core'; +import { FormDetailController } from '../form-detail'; +import { FormMDCtrlState } from './form-mdctrl.state'; + +/** + * 表单多数据部件控制器 + * + * @author lxm + * @date 2022-09-04 15:09:52 + * @export + * @class FormMDCtrlController + * @extends {FormDetailController} + */ +export class FormMDCtrlController extends FormDetailController { + declare state: FormMDCtrlState; + + protected createState(): FormMDCtrlState { + return new FormMDCtrlState(this.parent?.state); + } + + /** + * 所有部件的适配器 + * + * @author lxm + * @date 2022-08-24 20:08:07 + * @type {{ [key: string]: IControlProvider }} + */ + providers: { [key: string]: IControlProvider } = {}; + + /** + * 嵌入表单模型 + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-26 10:44:10 + */ + formModel: IControl | null = null; + + protected async onInit(): Promise { + await super.onInit(); + // 编辑表单适配器 + const mdCtrl = this.model.contentControl; + if (mdCtrl && this.model.contentType === 'FORM') { + this.formModel = mdCtrl; + const formProvider = await getControlProvider(this.formModel); + if (formProvider) { + this.providers[this.formModel.id!] = formProvider; + } + } + } + + /** + * 内部表单数据发生改变，同步contentCtrlData并设置外部表单值 + * @param {EventBase} arg + * @param {number} index + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-26 14:38:42 + */ + onFormDataChange(arg: EventBase, index: number) { + this.state.contentCtrlData[index] = arg.data[0]; + this.setFormDataValue(); + } + + /** + * 手动通知外部表单值变更 + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-26 14:49:39 + */ + setFormDataValue() { + if (this.model.appDEFieldId) { + this.form.setDataValue( + this.model.appDEFieldId, + this.state.contentCtrlData, + ); + } + } + + /** + * 加载数据，要在表单加载完成之后再去加载 + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-06 14:50:11 + */ + async loadData() { + if (this.model.appDEFieldId) { + this.state.contentCtrlData = this.data[this.model.appDEFieldId] || []; + } + } + + /** + * 处理删除 + * @param {IData} args + * @param {number} index + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-06 14:54:55 + */ + async handleRemove(args: IData, index: number) { + this.state.contentCtrlData.splice(index, 1); + this.setFormDataValue(); + } + + /** + * 处理添加 + * @return {*} + * @author: zhujiamin + * @Date: 2023-05-06 14:59:24 + */ + async handleAdd() { + this.state.contentCtrlData.push({}); + this.setFormDataValue(); + } +} diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.provider.ts b/src/control/form/form-detail/form-mdctrl/form-mdctrl.provider.ts new file mode 100644 index 000000000..f0b0150f8 --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.provider.ts @@ -0,0 +1,27 @@ +import { IFormDetailProvider } from '@ibiz-template/runtime'; +import { IDEFormMDCtrl } from '@ibiz/model-core'; +import { FormController } from '../../form/form.controller'; +import { FormGroupPanelController } from '../form-group-panel'; +import { FormMDCtrlController } from './form-mdctrl.controller'; +/** + * 表单多数据部件适配器 + * + * @author lxm + * @date 2022-09-19 22:09:03 + * @export + * @class FormMDCtrlProvider + * @implements {EditorProvider} + */ +export class FormMDCtrlProvider implements IFormDetailProvider { + component: string = 'IBizFormMDCtrl'; + + async createController( + detailModel: IDEFormMDCtrl, + form: FormController, + parent: FormGroupPanelController | undefined, + ): Promise { + const c = new FormMDCtrlController(detailModel, form, parent); + await c.init(); + return c; + } +} diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss b/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss new file mode 100644 index 000000000..2751fae3d --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.scss @@ -0,0 +1,29 @@ +@include b(form-mdctrl) { + @include b(form-mdctrl-main) { + @include b(form-mdctrl-form-content) { + @include flex(row); + } + + @include b(form-mdctrl-btn) { + cursor: pointer; + @include flex(column, flex-start, center); + } + + @include b(form-mdctrl-title) { + @include flex(row, space-between, center); + } + + @include b(form-mdctrl-remove-btn) { + color: getCssVar('color', 'danger'); + text-align: right; + cursor: pointer; + box-shadow: none; + } + + @include b(form-mdctrl-add-btn) { + color: getCssVar('color', 'primary'); + cursor: pointer; + box-shadow: none; + } + } +} diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.state.ts b/src/control/form/form-detail/form-mdctrl/form-mdctrl.state.ts new file mode 100644 index 000000000..30613bc2b --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.state.ts @@ -0,0 +1,16 @@ +import { FormDetailState } from '../form-detail'; + +/** + * 表单多数据部件状态 + * @return {*} + * @author: zhujiamin + * @Date: 2023-01-04 10:26:34 + */ +export class FormMDCtrlState extends FormDetailState { + /** + * 多数据内容数据 + * + * @type {Array} + */ + contentCtrlData: Array = []; +} diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl.tsx b/src/control/form/form-detail/form-mdctrl/form-mdctrl.tsx new file mode 100644 index 000000000..41ff9971c --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl.tsx @@ -0,0 +1,111 @@ +/* eslint-disable prefer-const */ +import { defineComponent, h, PropType, resolveComponent, watch } from 'vue'; +import { useController, useNamespace } from '@ibiz-template/vue3-util'; +import './form-mdctrl.scss'; +import { IDEFormMDCtrl } from '@ibiz/model-core'; +import { EventBase } from '@ibiz-template/runtime'; +import { FormMDCtrlController } from './form-mdctrl.controller'; + +export const FormMDCtrl = defineComponent({ + name: 'IBizFormMDCtrl', + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: FormMDCtrlController, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('form-mdctrl'); + + useController(props.controller); + + const c = props.controller; + + watch( + () => c.form.state.isLoaded, + (n, o) => { + if (n !== o && n === true) { + c.loadData(); + } + }, + ); + + return { ns, c }; + }, + render() { + const renderFormContent = () => { + return ( + this.c.state.contentCtrlData.length > 0 && + this.c.state.contentCtrlData.map((data: IData, index: number) => { + let formComponent = null; + const { formModel } = this.c; + if (formModel && this.c.providers[formModel.id!]) { + const tempContext = this.c.form.context.clone(); + formComponent = h( + resolveComponent(this.c.providers[formModel.id!].component), + { + modelData: formModel, + context: tempContext, + params: this.c.form.params, + isSimple: true, + data, + onFormDataChange: (arg: EventBase) => + this.c.onFormDataChange(arg, index), + }, + ); + } + return ( +
+ {formComponent} +
+ this.c.handleRemove(data, index)} + > + {{ + reference: () => { + return ( + + 删除 + + ); + }, + }} + +
+
+ ); + }) + ); + }; + + const renderMainContent = () => { + return ( +
+ {[ +
+ {this.modelData.caption} + this.c.handleAdd()} + > + 添加 + +
, + renderFormContent(), + ]} +
+ ); + }; + + return
{renderMainContent()}
; + }, +}); + +export default FormMDCtrl; diff --git a/src/control/form/form-detail/form-mdctrl/index.ts b/src/control/form/form-detail/form-mdctrl/index.ts new file mode 100644 index 000000000..5ced077c0 --- /dev/null +++ b/src/control/form/form-detail/form-mdctrl/index.ts @@ -0,0 +1,17 @@ +import { registerFormDetailProvider } from '@ibiz-template/runtime'; +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import FormMDCtrl from './form-mdctrl'; +import { FormMDCtrlProvider } from './form-mdctrl.provider'; + +export * from './form-mdctrl.provider'; +export * from './form-mdctrl.state'; +export * from './form-mdctrl.controller'; + +export const IBizFormMDCtrl = withInstall(FormMDCtrl, function (v: App) { + v.component(FormMDCtrl.name, FormMDCtrl); + // 表单按钮 + registerFormDetailProvider('MDCTRL', () => new FormMDCtrlProvider()); +}); + +export default IBizFormMDCtrl; diff --git a/src/control/form/form-detail/index.ts b/src/control/form/form-detail/index.ts index 6f750b617..737e972a9 100644 --- a/src/control/form/form-detail/index.ts +++ b/src/control/form/form-detail/index.ts @@ -4,3 +4,4 @@ export * from './form-item/index'; export * from './form-page/index'; export * from './form-button/index'; export * from './form-druipart/index'; +export * from './form-mdctrl/index'; diff --git a/src/control/form/form/form.controller.ts b/src/control/form/form/form.controller.ts index 1fe55b953..a3a74d799 100644 --- a/src/control/form/form/form.controller.ts +++ b/src/control/form/form/form.controller.ts @@ -2,6 +2,7 @@ import { RuntimeError, debounceAndAsyncMerge } from '@ibiz-template/core'; import { ControlController, + ControllerEvent, ControlVO, FormNotifyState, getFormDetailProvider, @@ -33,6 +34,10 @@ export abstract class FormController< extends ControlController implements IFormController { + protected get _evt(): ControllerEvent { + return this.evt; + } + /** * 所有表单项成员的控制器 * @@ -66,9 +71,9 @@ export abstract class FormController< * @author chitanda * @date 2023-01-04 10:01:46 * @readonly - * @type {ControlVO} + * @type {IData} */ - get data(): ControlVO { + get data(): IData { return this.state.data; } @@ -233,6 +238,11 @@ export abstract class FormController< // 设置正在处理状态 this.state.processing = true; + + // 如果是简易模式需要直接抛出去 + if (this.state.isSimple) { + await this._evt.emit('onFormDataChange', undefined); + } try { await this.dataChangeNotify([name]); } finally { diff --git a/src/control/form/form/index.ts b/src/control/form/form/index.ts index cdf0265ad..a08726135 100644 --- a/src/control/form/form/index.ts +++ b/src/control/form/form/index.ts @@ -7,6 +7,7 @@ import { IBizFormGroupPanel, IBizFormItem, IBizFormPage, + IBizFormMDCtrl, } from '../form-detail'; export * from './form.controller'; @@ -18,6 +19,7 @@ export const IBizFormControl = withInstall(FormControl, function (v: App) { v.use(IBizFormGroupPanel); v.use(IBizFormButton); v.use(IBizFormDRUIPart); + v.use(IBizFormMDCtrl); // 表单直接内容 // registerFormDetailProvider('RAWITEM', new FormRawItemProvider()); -- Gitee From 34e70b4493fd03e67ff041af4ea17783f96d89e0 Mon Sep 17 00:00:00 2001 From: zhujiamin <1147570162@qq.com> Date: Tue, 30 May 2023 18:08:19 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E4=B8=80=E7=B3=BB=E5=88=97=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/app-rawitem/app-rawitem.tsx | 181 ------------------ .../form-item-container.scss | 15 +- .../ibiz-autocomplete/ibiz-autocomplete.scss | 4 + .../ibiz-autocomplete/ibiz-autocomplete.tsx | 1 + .../ibiz-picker-embed-view.tsx | 2 +- .../ibiz-picker-select-view.tsx | 2 +- .../data-picker/ibiz-picker/ibiz-picker.tsx | 9 +- .../data-picker/picker-editor.controller.ts | 3 +- .../list-box/ibiz-list-box/ibiz-list-box.scss | 2 + src/editor/slider/ibiz-slider/ibiz-slider.tsx | 8 +- 10 files changed, 25 insertions(+), 202 deletions(-) delete mode 100644 src/common/app-rawitem/app-rawitem.tsx diff --git a/src/common/app-rawitem/app-rawitem.tsx b/src/common/app-rawitem/app-rawitem.tsx deleted file mode 100644 index f7e311dd7..000000000 --- a/src/common/app-rawitem/app-rawitem.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import { useNamespace } from '@ibiz-template/vue3-util'; -import { defineComponent, ref } from 'vue'; -import { createUUID } from 'qx-util'; - -export const AppRawItem = defineComponent({ - name: 'AppRawItem', - props: { - type: { - type: String, - required: true, - }, - content: { - type: [String, Object], - }, - }, - setup(props) { - const ns = useNamespace('rawitem'); - - // 视频类型内容参数 - const playerParams = ref({ - id: createUUID(), - path: '', - mute: true, - autoplay: true, - replay: false, - showcontrols: true, - }); - - // 分割线类型参数 - const dividerParams = ref({ - contentPosition: 'center', - html: '', - }); - - // 类型参数 - const alertParams = ref({ - type: 'info', - title: '', - closeabled: true, - showIcon: false, - }); - - // 文本类型显示值 - const rawItemText = ref(''); - - if ( - [ - 'TEXT', - 'HEADING1', - 'HEADING2', - 'HEADING3', - 'HEADING4', - 'HEADING5', - 'HEADING6', - 'PARAGRAPH', - 'HTML', - ].includes(props.type) - ) { - if (props.content && typeof props.content === 'string') { - rawItemText.value = props.content; - rawItemText.value = rawItemText.value.replaceAll('<', '<'); - rawItemText.value = rawItemText.value.replaceAll('>', '>'); - rawItemText.value = rawItemText.value.replaceAll('&nbsp;', ' '); - rawItemText.value = rawItemText.value.replaceAll(' ', ' '); - } - } - - if (['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(props.type)) { - if (props.content) { - let rawConfig = {}; - try { - if (typeof props.content === 'string') { - // eslint-disable-next-line no-new-func - const func = new Function(`return (${props.content});`); - rawConfig = func(); - switch (props.type) { - case 'VIDEO': - Object.assign(playerParams.value, rawConfig); - break; - case 'DIVIDER': - Object.assign(dividerParams.value, rawConfig); - break; - case 'INFO': - case 'WARNING': - case 'ERROR': - alertParams.value.type = props.type.toLocaleLowerCase(); - Object.assign(alertParams.value, rawConfig); - break; - default: - break; - } - } - } catch { - ibiz.log.error(`${props.type}类型自定义参数配置错误`); - } - } - } - - return { ns, rawItemText, playerParams, dividerParams, alertParams }; - }, - render() { - if (this.type === 'IMAGE') { - return ( - - ); - } - if (this.type === 'TEXT') { - return {this.rawItemText}; - } - if (this.type === 'HEADING1') { - return

{this.rawItemText}

; - } - if (this.type === 'HEADING2') { - return

{this.rawItemText}

; - } - if (this.type === 'HEADING3') { - return

{this.rawItemText}

; - } - if (this.type === 'HEADING4') { - return

{this.rawItemText}

; - } - if (this.type === 'HEADING5') { - return
{this.rawItemText}
; - } - if (this.type === 'HEADING6') { - return
{this.rawItemText}
; - } - if (this.type === 'PARAGRAPH') { - return

{this.rawItemText}

; - } - if (this.type === 'HTML') { - return ( -
- ); - } - if (this.type === 'VIDEO') { - return ( -
- -
- ); - } - if (this.type === 'DIVIDER') { - return ( - - - - ); - } - if ( - this.type === 'INFO' || - this.type === 'WARNING' || - this.type === 'ERROR' - ) { - return ( - - ); - } - if (['MARKDOWN', 'PLACEHOLDER'].includes(this.type)) { - return
{this.type}类型暂未支持
; - } - return null; - }, -}); 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 3ddbf9fc8..fbd76afa8 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 @@ -10,18 +10,14 @@ padding-top: calc( ( - getCssVar('form-item-container', 'line-height') - getCssVar( - 'form-item', - 'font-size' - ) + getCssVar('form-item-container', 'line-height') - + getCssVar('form-item', 'font-size') ) / 2 ); padding-bottom: calc( ( - getCssVar('form-item-container', 'line-height') - getCssVar( - 'form-item', - 'font-size' - ) + getCssVar('form-item-container', 'line-height') - + getCssVar('form-item', 'font-size') ) / 2 ); line-height: getCssVar('form-item', 'font-size'); @@ -40,6 +36,7 @@ } @include e(editor) { + position: relative; flex-grow: 1; } } @@ -78,6 +75,8 @@ .#{bem('form-item-container', '', 'right')} { .#{bem('form-item-container-content')} { @include flex; + + height: 100%; } } diff --git a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.scss b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.scss index 94bb482ab..f283e9308 100644 --- a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.scss +++ b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.scss @@ -1,3 +1,7 @@ @include b(autocomplete) { width: 100%; + + @include e(transfer) { + width: 100%; + } } diff --git a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx index ec77c44af..e838f0482 100644 --- a/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx +++ b/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx @@ -192,6 +192,7 @@ export const IBizAutoComplete = defineComponent({ placement='bottom' clearable={this.autoCompleteClearable} popper-class={this.ns.e('transfer')} + teleported={false} fetch-suggestions={this.onSearch} onClear={this.onClear} disabled={this.disabled || this.readonly} diff --git a/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx index af2c0bb15..1f08b7c4c 100644 --- a/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx +++ b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx @@ -75,7 +75,7 @@ export const IBizPickerEmbedView = defineComponent({ const viewShell = resolveComponent('ViewShell'); return (
- {this.c.pickupView ? ( + {this.c.model.pickupAppViewId ? ( [
{h(viewShell, { diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx index a84fb2c6b..6e4f91900 100644 --- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx +++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx @@ -305,7 +305,7 @@ export const IBizPickerSelectView = defineComponent({ name='clear' > ), - this.c.linkView && ( + this.c.model.linkAppViewId && ( ) : null, - this.c.linkView ? ( + this.c.model.linkAppViewId ? ( {{ @@ -242,13 +241,13 @@ export const IBizPicker = defineComponent({ return; } return [ - this.c.pickupView ? ( + this.c.model.pickupAppViewId ? ( ) : null, - this.c.linkView ? ( + this.c.model.linkAppViewId ? ( { this.sort = this.getAcSort(); } } - await this.initPickupViewParams(); - await this.initLinkViewParams(); } /** @@ -231,6 +229,7 @@ export class PickerEditorController extends EditorController { data: IData, selectedData?: string, ): Promise { + await this.initPickupViewParams(); const { context, params } = this.handlePublicParams( data, this.context, diff --git a/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss b/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss index 050f0af53..7cef0d32d 100644 --- a/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss +++ b/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss @@ -1,4 +1,6 @@ @include b(list-box) { + height: 100%; + overflow: auto; @include b(list-box-radio) { @include flex(column, flex-start, flex-start); } diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.tsx b/src/editor/slider/ibiz-slider/ibiz-slider.tsx index 834a411d4..73432686c 100644 --- a/src/editor/slider/ibiz-slider/ibiz-slider.tsx +++ b/src/editor/slider/ibiz-slider/ibiz-slider.tsx @@ -18,9 +18,9 @@ export const IBizSlider = defineComponent({ // 步长 let step = 1; // 设置滑动输入条允许的最大值 - let max = Infinity; + let max = 100; // 设置滑动输入条允许的最小值 - let min = -Infinity; + let min = 0; // 是否显示间断点 let showStops = false; // 是否开启选择范围 @@ -54,7 +54,7 @@ export const IBizSlider = defineComponent({ () => props.value, (newVal, oldVal) => { if (newVal !== oldVal) { - if (!newVal) { + if (newVal === null || newVal === undefined) { // 如果是范围给数组 if (range) { currentVal.value = [0, 1]; @@ -67,7 +67,7 @@ export const IBizSlider = defineComponent({ if (range) { currentVal.value = JSON.parse(newVal as string); } else { - currentVal.value = newVal as number; + currentVal.value = Number(newVal) as number; } } } -- Gitee