@ibiz-template/vue3-components 0.0.1-alpha.1

package/src/control/grid/grid-field-column/grid-field-column.controller.ts

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { RuntimeError } from '@ibiz-template/core';
+import {
+  CodeListItem,
+  getWFContext,
+  IModalData,
+  OpenAppViewCommand,
+} from '@ibiz-template/runtime';
+import { IDEGridFieldColumn } from '@ibiz/model-core';
+import { clone } from 'ramda';
+import { GridColumnController } from '../grid/grid-column.controller';
+import { GridRowController } from '../grid/grid-row.controller';
+
+/**
+ * 表格属性列控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-09-01 18:25:20
+ */
+export class GridFieldColumnController extends GridColumnController<IDEGridFieldColumn> {
+  /**
+   * 代码表项
+   *
+   * @author lxm
+   * @date 2022-09-28 16:09:51
+   * @type {readonly}
+   */
+  codeListItems?: readonly CodeListItem[];
+
+  /**
+   * 是否是链接列
+   *
+   * @author lxm
+   * @date 2022-09-28 17:09:15
+   * @returns {*}
+   */
+  get isLinkColumn(): boolean {
+    return !!this.model.enableLinkView && !!this.model.linkAppViewId;
+  }
+
+  /**
+   * 是否有触发界面行为
+   *
+   * @author lxm
+   * @date 2022-12-08 14:12:37
+   * @readonly
+   * @type {boolean}
+   */
+  get hasAction(): boolean {
+    return !!this.model.deuiactionId;
+  }
+
+  /**
+   * 行是否可点击（影响列的界面样式）
+   *
+   * @author lxm
+   * @date 2022-12-08 15:12:58
+   * @readonly
+   */
+  clickable(row: GridRowController) {
+    const value = row.data[this.model.codeName!];
+    return (this.isLinkColumn || this.hasAction) && value;
+  }
+
+  /**
+   * 公共参数处理，计算上下文和视图参数
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2022-08-25 15:44:14
+   */
+  public handlePublicParams(
+    _data: IData,
+    _context: IContext,
+    _params: IParams,
+  ) {
+    // const { navigateContexts, navigateParams } = this.model;
+    // let selfContext = {};
+    // if (navigateContexts && data) {
+    //   selfContext = convertNavData(navigateContexts!, context, params, data);
+    // }
+    // const _context = Object.assign(context.clone(), selfContext);
+    // let selfParams = {};
+    // if (navigateParams && data) {
+    //   selfParams = convertNavData(navigateParams!, context, params, data);
+    // }
+    // const _params: IParams = { ...params, ...selfParams };
+    return { context: this.context, params: this.params };
+  }
+
+  /**
+   * 打开链接视图
+   *
+   * @author lxm
+   * @date 2022-09-28 18:09:14
+   * @param {GridRowController} row 行数据
+   * @param {MouseEvent} event 原生事件
+   * @returns {*}  {Promise<void>}
+   */
+  async openLinkView(row: GridRowController, event: MouseEvent): Promise<void> {
+    const curValue = row.data[this.model.codeName!];
+    if (!curValue) {
+      // 当前值不存在，不继续走打开链接视图逻辑
+      return;
+    }
+    const valueItem = this.model.linkValueItem || 'srfkey';
+    const value = row.data[valueItem];
+    if (!value) {
+      throw new RuntimeError('链接值项取不到值');
+    }
+    const { linkAppViewId } = this.model;
+    if (!linkAppViewId) {
+      return;
+    }
+    // const { deName } = linkView.appEntity;
+    const wfContext = getWFContext(row.data);
+    const tempContext = Object.assign(this.context.clone(), {
+      // [deName!]: value,
+      ...wfContext,
+    });
+    const tempParams = clone(this.params);
+    const { context: newContext, params: newParams } = this.handlePublicParams(
+      row.data,
+      tempContext,
+      tempParams,
+    );
+    // 打开视图
+    const res: IModalData = await ibiz.commands.execute(
+      OpenAppViewCommand.TAG,
+      linkAppViewId,
+      newContext,
+      newParams,
+      { event },
+    );
+    if (res?.ok) {
+      this.grid.load();
+    }
+  }
+
+  /**
+   * 触发表格列附加界面行为
+   *
+   * @author lxm
+   * @date 2022-12-08 15:12:35
+   * @param {GridRowController} row 行数据
+   * @param {MouseEvent} event 鼠标事件
+   * @returns {*}  {Promise<void>}
+   */
+  async triggerAction(
+    _row: GridRowController,
+    _event: MouseEvent,
+  ): Promise<void> {
+    // if (this.model.viewLogic) {
+    //   await executeViewLogic(
+    //     this.model.viewLogic,
+    //     this.context,
+    //     [row.data],
+    //     this.params,
+    //     {
+    //       event,
+    //       neuron: this.grid.nerve.self,
+    //       view: this.grid.ctx.view,
+    //     },
+    //   );
+    // }
+  }
+
+  /**
+   * 加载代码表数据
+   *
+   * @author lxm
+   * @date 2022-09-28 15:09:38
+   * @returns {*}
+   */
+  async loadCodeList(): Promise<readonly CodeListItem[] | undefined> {
+    const appCodeListId = this.model.appCodeListId!;
+    if (!appCodeListId) {
+      return;
+    }
+    const app = ibiz.hub.getApp(this.context.srfappid);
+
+    const dataItems = await app.codeList.get(
+      appCodeListId,
+      this.context,
+      this.params,
+    );
+    this.codeListItems = dataItems;
+    return dataItems;
+  }
+}

package/src/control/grid/grid-field-column/grid-field-column.scss

@@ -0,0 +1,19 @@
+@include b(grid-field-column) {
+  @include set-component-css-var('grid-field-column', $grid-field-column);
+
+  display: flex;
+  align-items: center;
+  justify-content: getCssVar('grid-field-column', 'justify-content');
+  width: 100%;
+  height: 100%;
+  padding: getCssVar('grid-field-column', 'cell-padding');
+
+  @include e(text) {
+    @include overflow-wrap;
+  }
+
+  @include m(clickable) {
+    color: getCssVar('grid-field-column', 'font-color');
+    cursor: pointer;
+  }
+}

package/src/control/grid/grid-field-column/grid-field-column.tsx

@@ -0,0 +1,87 @@
+import { computed, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './grid-field-column.scss';
+import { GridRowController } from '../grid/grid-row.controller';
+import { GridFieldColumnController } from './grid-field-column.controller';
+
+export const GridFieldColumn = defineComponent({
+  name: 'GridFieldColumn',
+  props: {
+    controller: {
+      type: GridFieldColumnController,
+      required: true,
+    },
+    row: {
+      type: GridRowController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('grid-field-column');
+
+    const codeList = props.controller.model.appCodeListId;
+
+    /**
+     * 单元格点击事件
+     *
+     * @author lxm
+     * @date 2022-09-28 18:09:27
+     * @param {MouseEvent} event
+     */
+    const onCellClick = (event: MouseEvent) => {
+      if (props.controller.isLinkColumn) {
+        // 阻止触发行点击
+        event.stopPropagation();
+        props.controller.openLinkView(props.row, event);
+      } else if (props.controller.hasAction) {
+        // 阻止触发行点击
+        event.stopPropagation();
+        props.controller.triggerAction(props.row, event);
+      }
+    };
+
+    const alignStyle = computed(() => {
+      let justContent = '';
+      switch (props.controller.model.align) {
+        case 'LEFT':
+          justContent = 'flex-start';
+          break;
+        case 'RIGHT':
+          justContent = 'flex-end';
+          break;
+        default:
+          justContent = 'center';
+          break;
+      }
+      return ns.cssVarBlock({ 'justify-content': justContent });
+    });
+
+    return { ns, alignStyle, codeList, onCellClick };
+  },
+  render() {
+    const c = this.controller;
+    const fieldValue = this.row.data[this.controller.model.codeName!];
+    return (
+      <div
+        class={[this.ns.b(), c.clickable(this.row) && this.ns.m('clickable')]}
+        style={this.alignStyle}
+        onClick={this.onCellClick}
+      >
+        {/* {this.codeList ? (
+          <code-list
+            class={this.ns.e('text')}
+            codeListItems={c.codeListItems}
+            codeList={this.codeList}
+            value={fieldValue}
+          ></code-list>
+        ) : ( */}
+        <span class={this.ns.e('text')}>
+          {fieldValue}
+          {fieldValue != null && c.model.unitName}
+        </span>
+        {/* )} */}
+      </div>
+    );
+  },
+});
+export default GridFieldColumn;

package/src/control/grid/grid-pagination/grid-pagination.scss

@@ -0,0 +1,7 @@
+// @include b(grid-page) {
+//   display: flex;
+
+//   @include b(grid-page-btn) {
+//     margin-right: 10px;
+//   }
+// }

package/src/control/grid/grid-pagination/grid-pagination.tsx

@@ -0,0 +1,88 @@
+import { computed, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './grid-pagination.scss';
+
+export const GridPagination = defineComponent({
+  name: 'GridPagination',
+  props: {
+    total: {
+      type: Number,
+      required: true,
+    },
+    curPage: {
+      type: Number,
+      required: true,
+    },
+    size: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['change', 'pageSizeChange', 'pageReset'],
+  setup(props, { emit }) {
+    const ns = useNamespace('grid-page');
+
+    const start = computed(() => {
+      return (props.curPage - 1) * props.size + 1;
+    });
+
+    const end = computed(() => {
+      return props.curPage * props.size;
+    });
+
+    const onPageChange = (page: number) => {
+      emit('change', page);
+    };
+    const onPageSizeChange = (size: number) => {
+      emit('pageSizeChange', size);
+    };
+    const pageReset = () => {
+      emit('pageReset');
+    };
+    const inputChange = (event: MouseEvent) => {
+      // 阻止change冒泡
+      event.stopPropagation();
+    };
+
+    return {
+      ns,
+      start,
+      end,
+      onPageChange,
+      onPageSizeChange,
+      pageReset,
+      inputChange,
+    };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <el-pagination
+          layout='slot, prev, pager, next, sizes, jumper'
+          background
+          total={this.total}
+          current-page={this.curPage}
+          page-size={this.size}
+          page-sizes={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
+          {...{
+            'onUpdate:currentPage': this.onPageChange,
+            'onUpdate:pageSize': this.onPageSizeChange,
+            onChange: this.inputChange,
+          }}
+        >
+          <span class={this.ns.b('btn')}>
+            <el-button title='刷新' onClick={this.pageReset}>
+              <ion-icon name='refresh'></ion-icon>
+            </el-button>
+          </span>
+          <span>
+            显示&nbsp;{this.start}&nbsp;-&nbsp;{this.end}&nbsp;条，共&nbsp;
+            {this.total}
+            &nbsp;条数据
+          </span>
+        </el-pagination>
+      </div>
+    );
+  },
+});
+export default GridPagination;

package/src/control/grid/index.ts

@@ -0,0 +1,23 @@
+import { ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { GridControl } from './grid/grid-control';
+import GridFieldColumn from './grid-field-column/grid-field-column';
+import { withInstall } from '../../util/install';
+import { GridProvider } from './grid/grid-provider';
+import { GridFieldColumnProvider } from './grid-field-column/grid-field-column-provider';
+import GridPagination from './grid-pagination/grid-pagination';
+import { GridController } from './grid/grid.controller';
+
+export { GridControl, GridFieldColumn, GridController };
+export const IBizGrid = withInstall(GridControl, function (v: App) {
+  v.component(GridControl.name, GridControl);
+  v.component(GridFieldColumn.name, GridFieldColumn);
+  v.component(GridPagination.name, GridPagination);
+  ibiz.register.gridColumn.register(
+    'DEFGRIDCOLUMN',
+    new GridFieldColumnProvider(),
+  );
+  ibiz.register.control.register(ControlType.GRID, new GridProvider());
+});
+
+export default IBizGrid;

package/src/control/index.ts

@@ -0,0 +1,4 @@
+export * from './app-menu';
+export * from './grid';
+export * from './toolbar';
+export * from './panel';

package/src/control/panel/index.ts

@@ -0,0 +1,23 @@
+import { ControlType } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { withInstall } from '../../util/install';
+import IBizPanelContainer from './panel-container';
+import IBizPanelCtrlPos from './panel-ctrl-pos';
+import { ViewLayoutPanel } from './view-layout-panel/view-layout-panel';
+import { ViewLayoutPanelProvider } from './view-layout-panel/view-layout-panel-provider';
+
+export * from './panel-container';
+export * from './panel-ctrl-pos';
+
+export { ViewLayoutPanel };
+export const IBizPanel = withInstall(ViewLayoutPanel, function (v: App) {
+  v.component(ViewLayoutPanel.name, ViewLayoutPanel);
+  ibiz.register.control.register(
+    ControlType.VIEW_LAYOUT_PANEL,
+    new ViewLayoutPanelProvider(),
+  );
+  v.use(IBizPanelContainer);
+  v.use(IBizPanelCtrlPos);
+});
+
+export default IBizPanel;

package/src/control/panel/panel/panel-item-state.ts

@@ -0,0 +1,73 @@
+import { ILayoutController } from '@ibiz-template/runtime';
+
+/**
+ * 面板成员状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:35
+ * @export
+ * @class PanelItemState
+ */
+export class PanelItemState {
+  /**
+   * 是否显示
+   *
+   * @author lxm
+   * @date 2023-02-08 04:00:08
+   * @type {boolean}
+   * @memberof PanelItemState
+   */
+  declare visible: boolean;
+
+  /**
+   * 是否必填
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:27
+   * @type {boolean}
+   */
+  required: boolean = false;
+
+  /**
+   * 是否禁用
+   *
+   * @author lxm
+   * @date 2023-02-08 03:59:01
+   * @type {boolean}
+   * @memberof PanelItemState
+   */
+  disabled: boolean = false;
+
+  /**
+   * 布局
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:15
+   * @type {ILayoutController}
+   */
+  layoutController: ILayoutController = {
+    width: 'auto',
+    height: 'auto',
+    extraStyle: {},
+    extraClass: '',
+    contentStyle: {},
+  };
+
+  constructor(protected parent?: PanelItemState) {
+    // 定义是否显示，set方法需要返回true,否则vue proxy报错
+    let $visible: boolean = true;
+    Object.defineProperty(this, 'visible', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        // 有父先看父的显示
+        return this.parent?.visible !== false && $visible;
+      },
+      set(val) {
+        $visible = val;
+        // eslint-disable-next-line no-setter-return
+        return true;
+      },
+    });
+  }
+}

package/src/control/panel/panel/panel-item.controller.ts

@@ -0,0 +1,161 @@
+import { isOverlap } from '@ibiz-template/core';
+import {
+  calcLayoutContentStyle,
+  PanelNotifyState,
+  verifyPanelGroupLogic,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelItemState } from './panel-item-state';
+import { PanelController } from './panel.controller';
+
+export class PanelItemController<T extends IPanelItem = IPanelItem> {
+  /**
+   * 面板项状态
+   *
+   * @author chitanda
+   * @date 2023-01-04 09:01:04
+   * @type {PanelItemState}
+   */
+  state: PanelItemState;
+
+  /**
+   * 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: T,
+    public readonly panel: PanelController,
+    public readonly parent?: PanelItemController,
+  ) {
+    this.state = this.createState();
+  }
+
+  /**
+   * 子类不可覆盖或重写此方法，在 init 时需要重写的使用 onInit 方法。
+   *
+   * @author lxm
+   * @date 2022-08-18 22:08:30
+   * @returns {*}  {Promise<void>}
+   */
+  async init(): Promise<void> {
+    await this.onInit();
+  }
+
+  protected async onInit(): Promise<void> {
+    // 初始化布局参数
+    const { width, height, sysCss, itemType } = this.model;
+    // 初始化布局参数
+    if (width) {
+      this.state.layoutController.width = `${width}`;
+    }
+    if (height) {
+      this.state.layoutController.height = `${height}`;
+    }
+    // 给col添加各自类型的类名
+    this.state.layoutController.extraClass = `ibiz-panel-col__${itemType!.toLowerCase()} `;
+    if (sysCss?.cssName) {
+      this.state.layoutController.extraClass = sysCss.cssName;
+    }
+
+    // 设置layout的visible关联自身的visible
+    Object.defineProperty(this.state.layoutController, 'visible', {
+      configurable: true,
+      enumerable: true,
+      get: () => {
+        return this.state.visible;
+      },
+    });
+
+    if (this.model.layoutPos) {
+      // 设置自身内容样式
+      this.state.layoutController.contentStyle = calcLayoutContentStyle(
+        this.model.layoutPos!,
+      );
+    }
+  }
+
+  /**
+   * 创建面板状态对象
+   *
+   * @author chitanda
+   * @date 2023-01-04 10:01:00
+   * @protected
+   * @return {*}  {PanelItemState}
+   */
+  protected createState(): PanelItemState {
+    return new PanelItemState(this.parent?.state);
+  }
+
+  /**
+   * 面板数据变更通知(由面板控制器调用)
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:56
+   * @param {string[]} names
+   */
+  dataChangeNotify(names: string[]): void {
+    // 计算动态控制逻辑
+    this.calcDynamicLogic(names);
+  }
+
+  /**
+   * 面板状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  panelStateNotify(_state: PanelNotifyState): void {
+    // 计算动态控制逻辑
+    this.calcDynamicLogic([], true);
+  }
+
+  /**
+   * 计算动态逻辑
+   *
+   * @author lxm
+   * @date 2023-02-13 09:42:07
+   * @protected
+   * @param {string[]} names 变更的属性集合
+   * @param {boolean} [mustCalc=false] 是否强制计算一遍动态逻辑
+   * @returns {*}  {void}
+   * @memberof PanelItemController
+   */
+  protected calcDynamicLogic(names: string[], mustCalc: boolean = false): void {
+    // 逻辑优化，当父容器存在且为不显示时，不去计算自己的动态逻辑
+    if (this.parent && !this.parent.state.visible) {
+      return;
+    }
+
+    // 根据自身的动态逻辑计算
+    this.model.panelItemGroupLogics?.forEach(logic => {
+      const relatedNames = logic.relatedItemNames || [];
+      // name是动态逻辑涉及到的时或state存在时
+      if (mustCalc || isOverlap(relatedNames, names)) {
+        try {
+          const ok = verifyPanelGroupLogic(this.panel.data, logic);
+          switch (logic.logicCat) {
+            // 动态空输入，不满足则必填
+            case 'ITEMBLANK':
+              this.state.required = !ok;
+              break;
+            // 动态启用，满足则启用
+            case 'ITEMENABLE':
+              this.state.disabled = !ok;
+              break;
+            // 动态显示，满足则显示
+            case 'PANELVISIBLE':
+              this.state.visible = ok;
+              break;
+            default:
+          }
+        } catch (error) {
+          ibiz.log.error(error);
+        }
+      }
+    });
+  }
+}

package/src/control/panel/panel/panel-state.ts

@@ -0,0 +1,22 @@
+import { ControlState } from '@ibiz-template/runtime';
+
+/**
+ * 面板状态
+ *
+ * @author lxm
+ * @date 2023-02-10 11:50:17
+ * @export
+ * @class PanelState
+ * @extends {ControlState}
+ */
+export class PanelState extends ControlState {
+  /**
+   * 面板数据
+   *
+   * @author lxm
+   * @date 2023-02-10 01:45:34
+   * @type {(IData | null)}
+   * @memberof PanelState
+   */
+  data: IData = {};
+}