@ibiz-template/vue3-util 0.6.0 → 0.6.1-dev.1

package/src/panel-component/grid-container/grid-container.tsx

@@ -1,119 +0,0 @@
-import { IFlexLayoutPos, IPanelContainer } from '@ibiz/model-core';
-import { computed, defineComponent, PropType, ref, Ref, VNode } from 'vue';
-import { useNamespace } from '../../use';
-import { GridContainerController } from './grid-container.controller';
-import './grid-container.scss';
-
-export const GridContainer = defineComponent({
-  name: 'IBizGridContainer',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelContainer>,
-      required: true,
-    },
-    controller: {
-      type: GridContainerController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('grid-container');
-    const { id } = props.modelData;
-
-    // 类名控制
-    const classArr = computed(() => {
-      let result: Array<string | false> = [ns.b(), ns.m(id)];
-      result = [
-        ...result,
-        ...props.controller.containerClass,
-        ns.is('hidden', !props.controller.state.visible),
-      ];
-      return result;
-    });
-
-    const layoutModel = computed(() => {
-      return { ...props.modelData.layout, layout: 'TABLE_12COL' };
-    });
-
-    const convertLayoutPos = (
-      layoutPos: IFlexLayoutPos,
-      adaptGrow: number,
-    ): IFlexLayoutPos => {
-      const result = {
-        ...layoutPos,
-        layout: 'TABLE_12COL',
-        colXS: layoutPos.grow || adaptGrow,
-        colSM: layoutPos.grow || adaptGrow,
-        colMD: layoutPos.grow || adaptGrow,
-        colLG: layoutPos.grow || adaptGrow,
-      };
-      delete result.grow;
-      return result;
-    };
-
-    // 自适应列个数, 算一次记录下来，后续不用计算
-    const adaptCols: Ref<undefined | number> = ref(undefined);
-    // 自适应列默认占据的grow
-    const adaptGrow: Ref<number> = ref(12);
-
-    return {
-      ns,
-      classArr,
-      layoutModel,
-      convertLayoutPos,
-      adaptGrow,
-      adaptCols,
-    };
-  },
-  render() {
-    // 内容区默认插槽处理，封装app-col
-    const defaultSlots: VNode[] = this.$slots.default?.() || [];
-
-    if (this.adaptCols === undefined) {
-      // 当前已经配置的grow
-      let currentGrow = 0;
-      // 自适应列个数
-      let adaptCols = 0;
-      defaultSlots.forEach(slot => {
-        const props = slot.props as IData;
-        if (props && props.modelData && props.modelData.layoutPos) {
-          if (typeof props.modelData.layoutPos.grow === 'number') {
-            currentGrow += props.modelData.layoutPos.grow;
-          } else if (typeof props.modelData.layoutPos.grow === 'undefined') {
-            adaptCols += 1;
-          }
-        }
-      });
-      // 自适应列默认占据的grow
-      let adaptGrow = 12;
-      if (adaptCols > 0) {
-        adaptGrow = (12 - currentGrow) / adaptCols;
-      }
-      this.adaptCols = adaptCols;
-      this.adaptGrow = adaptGrow;
-    }
-
-    return (
-      <iBizRow class={this.classArr} layout={this.layoutModel}>
-        {defaultSlots.map(slot => {
-          const props = slot.props as IData;
-          if (!props || !props.controller) {
-            return slot;
-          }
-
-          return (
-            <iBizCol
-              layoutPos={this.convertLayoutPos(
-                props.modelData.layoutPos,
-                this.adaptGrow,
-              )}
-              state={props.controller.state}
-            >
-              {slot}
-            </iBizCol>
-          );
-        })}
-      </iBizRow>
-    );
-  },
-});

package/src/panel-component/grid-container/index.ts

@@ -1,19 +0,0 @@
-import { App } from 'vue';
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { withInstall } from '../../util';
-import { GridContainer } from './grid-container';
-import { GridContainerProvider } from './grid-container.provider';
-import { GridContainerState } from './grid-container.state';
-import { GridContainerController } from './grid-container.controller';
-
-export { GridContainerState, GridContainerController };
-
-export const IBizGridContainer = withInstall(GridContainer, function (v: App) {
-  v.component(GridContainer.name, GridContainer);
-  registerPanelItemProvider(
-    'CONTAINER_CONTAINER_GRID',
-    () => new GridContainerProvider(),
-  );
-});
-
-export default IBizGridContainer;

package/src/panel-component/index.ts

@@ -1,13 +0,0 @@
-export * from './panel-container';
-export * from './panel-ctrl-pos';
-export * from './scroll-container';
-export * from './nav-pos';
-export * from './panel-field';
-export * from './panel-rawitem';
-export * from './multi-data-container';
-export * from './single-data-container';
-export * from './grid-container';
-export * from './panel-container-image';
-export * from './panel-container-group';
-export * from './panel-tab-page';
-export * from './panel-item-render';

package/src/panel-component/multi-data-container/index.ts

@@ -1,22 +0,0 @@
-import { App } from 'vue';
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { withInstall } from '../../util';
-import { MultiDataContainer } from './multi-data-container';
-import { MultiDataContainerProvider } from './multi-data-container.provider';
-import { MultiDataContainerState } from './multi-data-container.state';
-import { MultiDataContainerController } from './multi-data-container.controller';
-
-export { MultiDataContainerState, MultiDataContainerController };
-
-export const IBizMultiDataContainer = withInstall(
-  MultiDataContainer,
-  function (v: App) {
-    v.component(MultiDataContainer.name, MultiDataContainer);
-    registerPanelItemProvider(
-      'CONTAINER_CONTAINER_MULTIDATA',
-      () => new MultiDataContainerProvider(),
-    );
-  },
-);
-
-export default IBizMultiDataContainer;

package/src/panel-component/multi-data-container/multi-data-container-item.controller.ts

@@ -1,166 +0,0 @@
-import {
-  getAllPanelField,
-  IPanelController,
-  IPanelDataContainerController,
-  IPanelItemContainerController,
-  IPanelItemController,
-  isDataContainer,
-  PanelData,
-  PanelNotifyState,
-} from '@ibiz-template/runtime';
-import { IPanelContainer, IPanelItem, IPanelTabPanel } from '@ibiz/model-core';
-import { MultiDataContainerItemState } from './multi-data-container-itm.state';
-import { MultiDataContainerController } from './multi-data-container.controller';
-
-/**
- * 多项数据容器每一个数据项的控制器
- * @author lxm
- * @date 2023-09-05 05:04:01
- * @export
- * @class MultiDataContainerItemController
- * @extends {PanelItemController<IPanelContainer>}
- * @implements {IPanelDataContainerController}
- */
-export class MultiDataContainerItemController
-  implements IPanelDataContainerController
-{
-  state = new MultiDataContainerItemState();
-
-  readonly isDataContainer = true;
-
-  get data(): IData {
-    return this.state.data;
-  }
-
-  /**
-   * 所有面板成员的控制器
-   *
-   * @author lxm
-   * @date 2022-08-24 20:08:07
-   * @type {{ [key: string]: IPanelItemController }}
-   */
-  panelItems: { [key: string]: IPanelItemController } = {};
-
-  /**
-   * Creates an instance of PanelItemController.
-   * @author lxm
-   * @date 2023-04-27 06:37:12
-   * @param {T} model 面板成员模型
-   * @param {PanelController} panel 面板控制器
-   * @param {PanelItemController} [parent] 父容器控制器
-   */
-  constructor(
-    public readonly model: IPanelContainer,
-    public readonly panel: IPanelController,
-    public readonly parent: MultiDataContainerController,
-    data: PanelData,
-  ) {
-    this.state.data = data;
-
-    const fields = getAllPanelField(this.model);
-    const fieldKeys = fields.map(item => item.id!);
-
-    // 面板属性变更的触发变更通知
-    data._evt.on('change', key => {
-      if (fieldKeys.includes(key)) {
-        this.childDataChangeNotify([key]);
-      }
-    });
-  }
-
-  /**
-   * 初始化方法
-   * @author lxm
-   * @date 2023-09-05 05:48:53
-   * @return {*}  {Promise<void>}
-   */
-  async init(): Promise<void> {
-    await this.initChildrenController();
-  }
-
-  /**
-   * 初始化面板成员控制器
-   *
-   * @author lxm
-   * @date 2022-08-24 21:08:48
-   * @protected
-   */
-  protected async initChildrenController(
-    panelItems: IPanelItem[] | undefined = this.model.panelItems,
-    panel: IPanelController = this.panel,
-    parent: IPanelItemContainerController | undefined = this,
-  ): Promise<void> {
-    if (!panelItems) {
-      return;
-    }
-    await Promise.all(
-      panelItems.map(async panelItem => {
-        // 生成面板成员控制器
-        const panelItemProvider = this.parent.providers[panelItem.id!];
-        if (!panelItemProvider) {
-          return;
-        }
-        const panelItemController = await panelItemProvider.createController(
-          panelItem,
-          panel,
-          parent,
-        );
-        this.panelItems[panelItem.id!] = panelItemController;
-        // 有子成员的,且不是数据容器的。生成子控制器
-        if (
-          (panelItem as IPanelContainer).panelItems?.length &&
-          !isDataContainer(panelItem)
-        ) {
-          await this.initChildrenController(
-            (panelItem as IPanelContainer).panelItems,
-            panel,
-            panelItemController as IPanelItemContainerController,
-          );
-        } else if ((panelItem as IPanelTabPanel).panelTabPages?.length) {
-          await this.initChildrenController(
-            (panelItem as IPanelTabPanel).panelTabPages,
-            panel,
-            panelItemController as IPanelItemContainerController,
-          );
-        }
-      }),
-    );
-  }
-
-  async dataChangeNotify(_names: string[]): Promise<void> {
-    // 不需要实现
-  }
-
-  async childDataChangeNotify(names: string[]): Promise<void> {
-    Object.values(this.panelItems).forEach(panelItem => {
-      panelItem.dataChangeNotify(names);
-    });
-  }
-
-  async panelStateNotify(state: PanelNotifyState): Promise<void> {
-    Object.values(this.panelItems).forEach(panelItem => {
-      panelItem.panelStateNotify(state);
-    });
-  }
-
-  async setDataValue(name: string, value: unknown): Promise<void> {
-    if (
-      Object.prototype.hasOwnProperty.call(this.state.data, name) &&
-      this.state.data[name] === value
-    ) {
-      // *`面板里没有属性${name}或者${name}的值未发生改变`
-      return;
-    }
-
-    // 改变值
-    this.state.data[name] = value;
-    this.childDataChangeNotify([name]);
-  }
-
-  destroy(): void {
-    this.data.destroy?.();
-    Object.values(this.panelItems).forEach(item => {
-      item.destroy();
-    });
-  }
-}

package/src/panel-component/multi-data-container/multi-data-container-itm.state.ts

@@ -1,20 +0,0 @@
-import { PanelItemState } from '@ibiz-template/runtime';
-
-/**
- * 多项数据容器项状态
- *
- * @author lxm
- * @date 2023-02-07 06:04:27
- * @export
- * @class MultiDataContainerItemState
- * @extends {PanelItemState}
- */
-export class MultiDataContainerItemState extends PanelItemState {
-  /**
-   * 多项数据容器数据
-   * @author lxm
-   * @date 2023-07-14 12:07:45
-   * @type {(IData | IData[])}
-   */
-  data: IData = {};
-}

package/src/panel-component/multi-data-container/multi-data-container.controller.ts

@@ -1,308 +0,0 @@
-import {
-  ModelError,
-  RuntimeError,
-  RuntimeModelError,
-} from '@ibiz-template/core';
-import {
-  execDELogicById,
-  getAllPanelField,
-  getPanelItemProvider,
-  IPanelDataContainerController,
-  IPanelItemProvider,
-  isDataContainer,
-  IViewController,
-  PanelData,
-  PanelItemController,
-  PanelNotifyState,
-} from '@ibiz-template/runtime';
-import { IPanelContainer, IPanelItem, IPanelTabPanel } from '@ibiz/model-core';
-import { MultiDataContainerItemController } from './multi-data-container-item.controller';
-import { MultiDataContainerState } from './multi-data-container.state';
-
-/**
- * 多项数据容器控制器
- *
- * @export
- * @class MultiDataContainerController
- * @extends {PanelItemController}
- */
-export class MultiDataContainerController
-  extends PanelItemController<IPanelContainer>
-  implements IPanelDataContainerController
-{
-  declare state: MultiDataContainerState;
-
-  readonly isDataContainer = true;
-
-  /**
-   * 数据项的控制器
-   *
-   * @author lxm
-   * @date 2023-09-05 05:35:25
-   * @type {MultiDataContainerItemController[]}
-   */
-  dataItems: MultiDataContainerItemController[] = [];
-
-  /**
-   * 所有面板成员的适配器
-   *
-   * @author lxm
-   * @date 2022-08-24 20:08:07
-   * @type {{ [key: string]: IPanelItemProvider }}
-   */
-  providers: { [key: string]: IPanelItemProvider } = {};
-
-  /**
-   * 多项数据容器，根据数据模式
-   * @author lxm
-   * @date 2023-07-14 10:59:02
-   * @readonly
-   * @type {IData}
-   */
-  get data(): IData {
-    return this.state.items;
-  }
-
-  protected createState(): MultiDataContainerState {
-    return new MultiDataContainerState(this.parent?.state);
-  }
-
-  protected async onInit(): Promise<void> {
-    await super.onInit();
-    await this.initPanelItemProviders();
-    this.initContainerData();
-  }
-
-  /**
-   * 初始化面板成员控制器
-   *
-   * @author lxm
-   * @date 2022-08-24 21:08:48
-   * @protected
-   */
-  protected async initPanelItemProviders(
-    panelItems: IPanelItem[] | undefined = this.model.panelItems,
-  ): Promise<void> {
-    if (!panelItems) {
-      return;
-    }
-    await Promise.all(
-      panelItems.map(async panelItem => {
-        // 生成面板成员控制器
-        const panelItemProvider = await getPanelItemProvider(panelItem);
-        if (!panelItemProvider) {
-          return;
-        }
-        this.providers[panelItem.id!] = panelItemProvider;
-        // 有子成员的,且不是数据容器的。生成子控制器
-        if (
-          (panelItem as IPanelContainer).panelItems?.length &&
-          !isDataContainer(panelItem)
-        ) {
-          await this.initPanelItemProviders(
-            (panelItem as IPanelContainer).panelItems,
-          );
-        }
-        if ((panelItem as IPanelTabPanel).panelTabPages?.length) {
-          await this.initPanelItemProviders(
-            (panelItem as IPanelTabPanel).panelTabPages,
-          );
-        }
-      }),
-    );
-  }
-
-  /**
-   * 根据来源类型初始化容器数据
-   * @author lxm
-   * @date 2023-08-04 03:05:59
-   * @protected
-   */
-  protected initContainerData(): void {
-    const { dataSourceType, dataName } = this.model;
-    switch (dataSourceType) {
-      case 'DEACTION':
-      case 'DEDATASET':
-        this.setDataByDeMethod();
-        break;
-      case 'APPGLOBALPARAM':
-        this.setDataByAppGlobalParam();
-        break;
-      case 'DELOGIC':
-        this.setDataByDeLogic();
-        break;
-      case 'TOPVIEWSESSIONPARAM': {
-        if (!dataName) {
-          throw new RuntimeModelError(this.model, '没有配置数据对象名称');
-        }
-        this.bindViewData(this.panel.getTopView(), dataName);
-        break;
-      }
-      case 'VIEWSESSIONPARAM': {
-        if (!dataName) {
-          throw new RuntimeModelError(this.model, '没有配置数据对象名称');
-        }
-        this.bindViewData(this.panel.view, dataName);
-        break;
-      }
-      default:
-        throw new ModelError(this.model, `数据源类型${dataSourceType}暂未支持`);
-    }
-  }
-
-  /**
-   * 面板状态变更通知
-   *
-   * @author lxm
-   * @date 2022-09-20 18:09:07
-   */
-  childrenStateNotify(state: PanelNotifyState): void {
-    this.dataItems.forEach(dataItem => {
-      dataItem.panelStateNotify(state);
-    });
-  }
-
-  /**
-   * 设置数据集合
-   * @author lxm
-   * @date 2023-09-05 05:42:09
-   * @param {IData[]} items
-   */
-  async setData(items: IData[]): Promise<void> {
-    const fields = getAllPanelField(this.model);
-    const _items = items.map(item => new PanelData(fields, item));
-
-    this.dataItems = _items.map(item => {
-      return new MultiDataContainerItemController(
-        this.model,
-        this.panel,
-        this,
-        item,
-      );
-    });
-    if (this.dataItems.length) {
-      await Promise.all(
-        this.dataItems.map(controller => {
-          return controller.init();
-        }),
-      );
-    }
-    this.state.items = _items;
-    this.childrenStateNotify(PanelNotifyState.LOAD);
-  }
-
-  /**
-   * 通过实体设置视图逻辑
-   * @author lxm
-   * @date 2023-08-04 03:00:31
-   * @protected
-   * @return {*}  {Promise<void>}
-   */
-  protected async setDataByDeLogic(): Promise<void> {
-    const { appDataEntityId, appDELogicId } = this.model;
-    if (!appDELogicId) {
-      throw new RuntimeModelError(this.model, '没有配置实体逻辑');
-    }
-    if (!appDataEntityId) {
-      throw new RuntimeModelError(this.model, '没有配置实体');
-    }
-
-    const data = await execDELogicById(
-      appDELogicId,
-      appDataEntityId,
-      this.panel.context,
-      [],
-      this.panel.params,
-    );
-
-    if (!data) {
-      throw new RuntimeError(`实体逻辑${appDELogicId}没有返回值`);
-    }
-
-    this.setData(data as IData[]);
-  }
-
-  /**
-   * 设置全局变量为当前容器数据
-   * @author lxm
-   * @date 2023-08-04 01:55:07
-   * @protected
-   */
-  protected setDataByAppGlobalParam(): void {
-    const { dataName } = this.model;
-    const originData = dataName ? ibiz.appData![dataName] : ibiz.appData!;
-    if (originData) {
-      this.setData(originData as IData[]);
-    } else {
-      ibiz.log.error(`全局变量里没有${dataName}属性`);
-    }
-  }
-
-  /**
-   * 请求实体行为并把返回值设置为当前容器的数据
-   * @author lxm
-   * @date 2023-08-04 11:47:17
-   * @protected
-   * @return {*}  {Promise<void>}
-   */
-  protected async setDataByDeMethod(): Promise<void> {
-    const { appDEMethodId, appDataEntityId } = this.model;
-    if (!appDEMethodId) {
-      throw new RuntimeModelError(this.model, '没有配置实体行为');
-    }
-    if (!appDataEntityId) {
-      throw new RuntimeModelError(this.model, '没有配置实体');
-    }
-    const app = ibiz.hub.getApp(this.panel.context.srfappid);
-    const res = await app.deService.exec(
-      appDataEntityId,
-      appDEMethodId,
-      this.panel.context,
-      [],
-      this.panel.params,
-    );
-    if (res.ok && res.data) {
-      this.setData(res.data as IData[]);
-    }
-  }
-
-  /**
-   * 绑定指定视图会话的变量
-   * @author lxm
-   * @date 2023-07-14 02:03:56
-   * @protected
-   * @param {IViewController} view 绑定视图控制器
-   * @param {string} dataName 变量名称
-   */
-  protected bindViewData(view: IViewController, dataName: string): void {
-    if (!Object.prototype.hasOwnProperty.call(view.state, dataName)) {
-      ibiz.log.error(`绑定视图的会话不存在${dataName}`);
-      return;
-    }
-    const updateData = (): void => {
-      const originData = (view.state as IData)[dataName] as IData[];
-      if (originData) {
-        this.setData(originData);
-      } else {
-        ibiz.log.error(`视图state里没有${dataName}属性`);
-      }
-    };
-    updateData(); // 先绑定一次
-
-    // 每次视图数据变更之后更新一下
-    view.evt.on('onDataChange', () => {
-      updateData();
-    });
-  }
-
-  setDataValue(_name: string, _value: unknown): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-
-  destroy(): void {
-    super.destroy();
-    this.dataItems.forEach(item => {
-      item.destroy();
-    });
-  }
-}

package/src/panel-component/multi-data-container/multi-data-container.provider.ts

@@ -1,30 +0,0 @@
-import {
-  IPanelItemProvider,
-  PanelController,
-  PanelItemController,
-} from '@ibiz-template/runtime';
-import { IPanelContainer } from '@ibiz/model-core';
-import { MultiDataContainerController } from './multi-data-container.controller';
-
-/**
- * 多项数据容器适配器
- *
- * @author lxm
- * @date 2022-09-19 22:09:03
- * @export
- * @class MultiDataContainerProvider
- * @implements {EditorProvider}
- */
-export class MultiDataContainerProvider implements IPanelItemProvider {
-  component: string = 'IBizMultiDataContainer';
-
-  async createController(
-    panelItem: IPanelContainer,
-    panel: PanelController,
-    parent: PanelItemController | undefined,
-  ): Promise<PanelItemController> {
-    const c = new MultiDataContainerController(panelItem, panel, parent);
-    await c.init();
-    return c;
-  }
-}