@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.130

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

@@ -0,0 +1,141 @@
+import { IFlexLayoutPos, IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, ref, Ref, VNode } from 'vue';
+import { useNamespace, useSemanticNode } from '../../use';
+import { GridContainerController } from './grid-container.controller';
+import './grid-container.scss';
+
+/**
+ * 栅格容器
+ * @primary
+ * @description 栅格容器，以栅格布局的方式呈现容器内容，支持自适应列数配置。
+ */
+export const GridContainer = defineComponent({
+  name: 'IBizGridContainer',
+  props: {
+    /**
+     * @description 栅格容器模型
+     */
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    /**
+     * @description 栅格容器控制器
+     */
+    controller: {
+      type: GridContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('grid-container');
+    const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    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,
+      semanticClass,
+      semanticStyle,
+    };
+  },
+  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, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
+        layout={this.layoutModel}
+        v-loading={this.controller.state.loading}
+        element-loading-text={this.controller.state.loadingText}
+      >
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              class={this.semanticClass('item')}
+              style={this.semanticStyle('item')}
+              layoutPos={this.convertLayoutPos(
+                props.modelData.layoutPos,
+                this.adaptGrow,
+              )}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+  },
+});

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+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 './multi-data-container-raw';
+export * from './single-data-container';
+export * from './grid-container';
+export * from './panel-container-image';
+export * from './panel-tab-page';
+export * from './panel-item-render';
+export * from './teleport-placeholder';
+export * from './panel-container-tabs';
+export * from './panel-ctrl-view-page-caption';
+export * from './auth-wxmp-qrcode';

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,179 @@
+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]);
+      }
+    });
+  }
+
+  /**
+   * 值校验
+   *
+   * @return {*}  {Promise<boolean>}
+   * @memberof MultiDataContainerItemController
+   */
+  async validate(): Promise<boolean> {
+    const values = await Promise.all(
+      Object.values(this.panelItems).map(item => item.validate()),
+    );
+    return values.every(value => value);
+  }
+
+  /**
+   * 初始化方法
+   * @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

@@ -0,0 +1,20 @@
+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 = {};
+}