@ibiz-template/runtime 0.0.1-alpha.9 → 0.0.1-beta.17

package/src/controller/control/grid/grid-row.ts

@@ -0,0 +1,111 @@
+import { clearAll } from 'qx-util';
+import { ControlVO, Srfuf } from '../../../service';
+import { IButtonContainerState } from '../../interface';
+import { GridController } from '.';
+
+/**
+ * 表格行数据状态管理控制器
+ *
+ * @author lxm
+ * @date 2022-09-05 19:09:02
+ * @export
+ * @class GridRowController
+ */
+export class GridRowController {
+  /**
+   * 行数据
+   *
+   * @author lxm
+   * @date 2022-09-05 19:09:54
+   * @type {ControlVO}
+   */
+  data: ControlVO;
+
+  /**
+   * 错误信息集合，p是对应属性名称
+   *
+   * @author lxm
+   * @date 2022-09-06 15:09:54
+   * @type {({ [p: string]: string | null })}
+   */
+  errors: { [p: string]: string | null } = {};
+
+  /**
+   * 操作列状态(p是操作列的标识)
+   *
+   * @author lxm
+   * @date 2022-09-07 22:09:38
+   * @type {({ [p: string]: IButtonContainerState | null })}
+   */
+  uaColumnStates: { [p: string]: IButtonContainerState | null } = {};
+
+  /**
+   * 每一列的状态
+   *
+   * @author lxm
+   * @date 2022-09-20 15:09:58
+   * @type {({ [p: string]: { disabled: boolean } | null })}
+   */
+  columnState: {
+    [p: string]: { disabled: boolean; editable: boolean } | null;
+  } = {};
+
+  /**
+   * 是否显示行编辑
+   *
+   * @author lxm
+   * @date 2022-09-05 22:09:23
+   * @type {boolean}
+   */
+  showRowEdit: boolean = false;
+
+  /**
+   * 是否被修改过
+   *
+   * @author lxm
+   * @date 2022-11-02 22:11:33
+   * @type {boolean}
+   */
+  modified: boolean = false;
+
+  constructor(data: ControlVO, grid: GridController) {
+    this.data = data;
+
+    // vue监控没有空值没法自动响应式更新
+    Object.keys(this.data).forEach(key => {
+      if (this.errors[key] === undefined) {
+        this.errors[key] = null;
+      }
+    });
+
+    // 新建数据默认开启行编辑
+    if (data.srfuf === Srfuf.CREATE) {
+      this.showRowEdit = true;
+    }
+
+    // 初始化操作列状态
+    Object.values(grid.uaColumns).forEach(column => {
+      column.initActionStates(this);
+    });
+
+    // 初始化编辑项状态
+    Object.values(grid.editItems).forEach(editItem => {
+      this.columnState[editItem.model.codeName] = {
+        disabled: false,
+        editable: false,
+      };
+    });
+  }
+
+  /**
+   * 销毁方法
+   *
+   * @author lxm
+   * @date 2022-09-06 19:09:02
+   */
+  destroy() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.data as any) = undefined;
+    clearAll(this.errors);
+  }
+}

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

@@ -0,0 +1,72 @@
+import {
+  DefectModelError,
+  GridUAColumnModel,
+  IPSUIActionGroupDetail,
+} from '@ibiz-template/model';
+import { GridColumnController } from './grid-column';
+import { GridRowController } from '.';
+import { ButtonContainerState, ButtonState } from '../../utils';
+
+/**
+ * 表格操作列控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-09-01 18:25:20
+ */
+export class GridUAColumnController extends GridColumnController<GridUAColumnModel> {
+  /**
+   * 给rowController初始化操作列的状态
+   *
+   * @author lxm
+   * @date 2022-09-07 21:09:43
+   * @param {GridRowController} _row
+   */
+  initActionStates(row: GridRowController) {
+    // 操作列按钮状态控制
+    const uiActionsGroup = this.model.source.getPSDEUIActionGroup();
+    if (!uiActionsGroup) {
+      throw new DefectModelError(this.model.source, '操作列没有配置界面行为');
+    }
+    const containerState = new ButtonContainerState();
+    uiActionsGroup.getPSUIActionGroupDetails()?.forEach(detail => {
+      const action = detail.getPSUIAction();
+      if (action) {
+        const buttonState = new ButtonState(
+          detail.name,
+          action,
+          this.grid.model.appEntity,
+        );
+        containerState.addState(detail.name, buttonState);
+      }
+    });
+    containerState.update(row.data.getOrigin());
+    row.uaColumnStates[this.model.codeName] = containerState;
+  }
+
+  /**
+   * 触发操作列点击事件
+   *
+   * @author lxm
+   * @date 2022-09-07 22:09:46
+   * @param {IPSUIActionGroupDetail} detail
+   * @param {MouseEvent} event
+   */
+  async onActionClick(
+    detail: IPSUIActionGroupDetail,
+    row: GridRowController,
+    event: MouseEvent,
+  ): Promise<void> {
+    // 行编辑切换直接调表格方法，不走视图逻辑
+    if (detail.getPSUIAction()?.uIActionTag === 'ToggleRowEdit') {
+      await this.grid.toggleRowEdit(row);
+      return;
+    }
+    const appViewLogic = this.model.findAppViewLogic(detail.name);
+    await this.grid.nerve.self.evt.asyncEmit(
+      'actionClick',
+      appViewLogic,
+      [row.data],
+      event,
+    );
+  }
+}

package/src/controller/control/grid/grid.ts

@@ -0,0 +1,480 @@
+import { GridModel } from '@ibiz-template/model';
+import { debounceAndAsyncMerge, RuntimeError } from '@ibiz-template/core';
+import { ControlVO, GridService, Srfuf } from '../../../service';
+import {
+  GridEditItemController,
+  GridFieldColumnController,
+  GridUAColumnController,
+  GridRowController,
+  GridColumnController,
+} from '.';
+import { MDController } from '../md';
+import { GridNerve } from '../../neuron';
+import { GridNotifyState } from '../../constant';
+import { IGridColumnProvider } from '../../interface';
+
+/**
+ * 表格控制器
+ *
+ * @author chitanda
+ * @date 2022-08-01 18:08:13
+ * @export
+ * @class GridController
+ * @extends {MDController<GridModel>}
+ */
+export class GridController extends MDController<GridModel> {
+  declare nerve: GridNerve;
+
+  /**
+   * 表格部件服务
+   *
+   * @author lxm
+   * @date 2022-08-19 13:08:51
+   * @type {EntityService}
+   */
+  declare service: GridService;
+
+  /**
+   * 所有表格列控制器集合
+   *
+   * @author lxm
+   * @date 2022-11-14 15:11:14
+   * @type {{ [key: string]: GridColumnController }}
+   */
+  columns: { [key: string]: GridColumnController } = {};
+
+  /**
+   * 所有表格属性列的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: GridFieldColumnController }}
+   */
+  fieldColumns: { [key: string]: GridFieldColumnController } = {};
+
+  /**
+   * 所有表格操作列的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: GridUAColumnController }}
+   */
+  uaColumns: { [key: string]: GridUAColumnController } = {};
+
+  /**
+   * 所有表格编辑项的控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:07
+   * @type {{ [key: string]: GridEditItemController }}
+   */
+  editItems: { [key: string]: GridEditItemController } = {};
+
+  /**
+   * 表格列的适配器
+   *
+   * @author lxm
+   * @date 2022-11-14 14:11:39
+   * @type {{ [key: string]: IGridColumnProvider }}
+   */
+  providers: { [key: string]: IGridColumnProvider } = {};
+
+  /**
+   * 表格行控制器
+   *
+   * @author lxm
+   * @date 2022-09-05 19:09:12
+   * @type {GridRowController[]}
+   */
+  rows: GridRowController[] = [];
+
+  /**
+   * 表格行数据默认激活模式
+   * - 0 不激活
+   * - 1 单击激活
+   * - 2 双击激活(默认)
+   *
+   * @type {(number | 0 | 1 | 2)}
+   */
+  gridRowActiveMode: number | 0 | 1 | 2 = 2;
+
+  /**
+   * 是否默认禁用排序
+   *
+   * @author lxm
+   * @date 2022-09-28 11:09:48
+   * @readonly
+   */
+  get noSort(): boolean {
+    return this.model.source.noSort;
+  }
+
+  /**
+   * 排序查询条件
+   *
+   * @author lxm
+   * @date 2022-09-28 13:09:46
+   * @type {string}
+   */
+  sortQuery?: string;
+
+  protected createNerve(): GridNerve {
+    return new GridNerve(this);
+  }
+
+  /**
+   * 初始化方法
+   *
+   * @author lxm
+   * @date 2022-08-18 22:08:17
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    this.size = this.model.size;
+    this.singleSelect = this.model.source.singleSelect;
+    this.service = new GridService(this.model);
+    await this.service.init(this.context);
+    await this.initGridColumns();
+
+    // !数据变更通知防抖，且合并参数,如果有同出触发不同行的值变更则该方法需要重写
+    this.dataChangeNotify = debounceAndAsyncMerge(
+      this.dataChangeNotify.bind(this),
+      (arr1, arr2): [GridRowController, string[]] => {
+        return [arr1[0], Array.from(new Set([...arr1[1], ...arr2[1]]))];
+      },
+      200,
+    );
+
+    // 绑定表格排序参数，beforeLoad事件
+    this.nerve.self.evt.on('beforeLoad', () => {
+      return this.sortQuery ? { sort: this.sortQuery } : {};
+    });
+
+    // 设置默认排序
+    const { defaultSortField, defaultSortDir } = this.model;
+    if (defaultSortField && defaultSortDir) {
+      this.setSort(defaultSortField, defaultSortDir);
+    }
+  }
+
+  /**
+   * 部件加载后处理
+   *
+   * @author lxm
+   * @date 2022-08-19 14:08:50
+   */
+  async afterLoad(items: ControlVO[]): Promise<ControlVO[]> {
+    // 通知表格属性列,加载代码表
+    await Promise.allSettled(
+      Object.values(this.fieldColumns).map(async fieldColumn => {
+        await fieldColumn.loadCodeList();
+      }),
+    );
+
+    // 生成表格row对象
+    this.rows = items.map(item => {
+      const row = new GridRowController(item, this);
+      this.gridStateNotify(row, GridNotifyState.LOAD);
+      return row;
+    });
+    return items;
+  }
+
+  /**
+   * 后台删除结束后界面删除逻辑
+   *
+   * @author lxm
+   * @date 2022-09-06 19:09:10
+   * @param {IData} data
+   */
+  afterRemove(data: IData): void {
+    super.afterRemove(data);
+    // 删除this.rows里的表格行数据
+    const index = this.rows.findIndex(item => item.data.srfkey === data.srfkey);
+    this.rows[index].destroy();
+    this.rows.splice(index, 1);
+  }
+
+  /**
+   * 新建行
+   *
+   * @author lxm
+   * @date 2022-09-06 21:09:05
+   */
+  async newRow() {
+    const res = await this.service.getDraft(this.context, this.params);
+    // 加载完后续处理
+    this.items.unshift(res.data);
+    const newRow = new GridRowController(res.data, this);
+    this.rows.unshift(newRow);
+    this.gridStateNotify(newRow, GridNotifyState.DRAFT);
+  }
+
+  /**
+   * 保存
+   *
+   * @author lxm
+   * @date 2022-09-06 19:09:21
+   * @param {ControlVO} data
+   * @returns {*}  {Promise<void>}
+   */
+  async save(data: ControlVO): Promise<void> {
+    const rowController = this.rows.find(
+      item => item.data.srfkey === data.srfkey,
+    );
+    if (!rowController) {
+      throw new RuntimeError('行数据不存在');
+    }
+    if (!rowController.modified) {
+      ibiz.log.debug('值没有发生改变');
+      return;
+    }
+    const isValid = await this.validate(rowController);
+    if (!isValid) {
+      throw new RuntimeError('行数据校验不通过，保存取消');
+    }
+    await this.startLoading();
+    let res;
+    const isCreate = data.srfuf === Srfuf.CREATE;
+    try {
+      res = isCreate
+        ? await this.service.create(
+            { [this.model.appEntity.deName]: data.srfkey, ...this.context },
+            data,
+          )
+        : await this.service.update(
+            { [this.model.appEntity.deName]: data.srfkey, ...this.context },
+            data,
+          );
+    } finally {
+      await this.endLoading();
+    }
+    // 后续处理
+    const index = this.items.findIndex(item => item.srfkey === data.srfkey);
+    this.items.splice(index, 1, res.data);
+    rowController.data = res.data;
+    rowController.modified = false;
+    ibiz.message.success(`${res.data.srfmajortext || ''}保存成功`);
+    this.gridStateNotify(rowController, GridNotifyState.SAVE);
+    await this.nerve.self.evt.asyncEmit('afterSave', [res.data], isCreate);
+  }
+
+  /**
+   * 行单击事件
+   *
+   * @author lxm
+   * @date 2022-08-18 22:08:16
+   * @param {ControlVO} data 选中的单条数据
+   */
+  async onRowClick(data: ControlVO): Promise<void> {
+    if (this.gridRowActiveMode === 1) {
+      await this.nerve.self.evt.asyncEmit('dataActive', data);
+    }
+  }
+
+  /**
+   * 行双击事件
+   *
+   * @author lxm
+   * @date 2022-08-18 22:08:16
+   * @param {ControlVO} data 选中的单条数据
+   */
+  async onDbRowClick(data: ControlVO): Promise<void> {
+    if (this.gridRowActiveMode === 2) {
+      await this.nerve.self.evt.asyncEmit('dataActive', data);
+    }
+  }
+
+  /**
+   * 设置表格行数据默认激活模式
+   *
+   * @author lxm
+   * @date 2022-08-21 18:08:35
+   * @param {(0 | 1 | 2)} mode 0 不激活 1 单击激活 2 双击激活（默认）
+   *
+   */
+  setGridRowActiveMode(mode?: number | 0 | 1 | 2): void {
+    this.gridRowActiveMode = mode === undefined ? 2 : mode;
+  }
+
+  /**
+   * 初始化表格属性列，操作列，编辑项控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 21:08:48
+   * @protected
+   */
+  protected async initGridColumns(): Promise<void> {
+    await Promise.all(
+      this.model.columns.map(async column => {
+        // 初始化适配器
+        const provider = await ibiz.register.gridColumn.get(column);
+        this.providers[column.codeName] = provider;
+
+        // 初始化表格列控制器
+        const controller = await provider.createController(column, this);
+        this.columns[column.codeName] = controller;
+
+        // 分类存放控制器
+        if (column.source.columnType === 'DEFGRIDCOLUMN') {
+          this.fieldColumns[column.codeName] =
+            controller as GridFieldColumnController;
+        } else if (column.source.columnType === 'UAGRIDCOLUMN') {
+          this.uaColumns[column.codeName] =
+            controller as GridUAColumnController;
+        }
+      }),
+    );
+
+    // 初始化表格编辑项控制器（显示列的编辑项控制器已经生成）
+    await Promise.all(
+      this.model.editItems.map(async editItem => {
+        if (!this.editItems[editItem.codeName]) {
+          const controller = new GridEditItemController(editItem, this);
+          this.editItems[editItem.codeName] = controller;
+          return controller.init();
+        }
+      }),
+    );
+  }
+
+  /**
+   * 设置行属性的值
+   *
+   * @author lxm
+   * @date 2022-08-24 10:08:40
+   * @param {GridRowController} row 行状态控制器
+   * @param {unknown} value 要设置的值
+   * @param {string} name 要设置的表单数据的属性名称
+   */
+  async setRowValue(
+    row: GridRowController,
+    name: string,
+    value: unknown,
+  ): Promise<void> {
+    if (
+      Object.prototype.hasOwnProperty.call(row.data, name) &&
+      row.data[name] === value
+    ) {
+      // `表格行数据里没有属性${name}或者${name}的值未发生改变`
+      return;
+    }
+    // 改变值
+    row.data[name] = value;
+    row.modified = true;
+    await this.dataChangeNotify(row, [name]);
+
+    this.force();
+  }
+
+  /**
+   * 通知所有表格编辑项成员表格编辑项数据变更
+   *
+   * @author lxm
+   * @date 2022-09-20 22:09:49
+   * @param {GridRowController} row 行数据
+   * @param {string[]} names 更新的属性
+   */
+  async dataChangeNotify(
+    row: GridRowController,
+    names: string[],
+  ): Promise<void> {
+    // 通知所有编辑项去处理编辑项相关逻辑
+    const values = await Promise.allSettled(
+      Object.values(this.editItems).map(async editItem => {
+        return editItem.dataChangeNotify(row, names);
+      }),
+    );
+    if (values.find(item => item.status === 'rejected')) {
+      ibiz.log.error('dataChangeNotify报错', values);
+      throw new RuntimeError('数据变更后有错误');
+    }
+  }
+
+  /**
+   * 表格状态变更通知
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:07
+   */
+  gridStateNotify(row: GridRowController, state: GridNotifyState): void {
+    // 通知表格编辑列
+    Object.values(this.editItems).forEach(editItem => {
+      editItem.gridStateNotify(row, state);
+    });
+  }
+
+  /**
+   * 校验一行数据的所有编辑项
+   *
+   * @author lxm
+   * @date 2022-09-06 21:09:05
+   * @param {GridRowController} row 要校验的行数据控制器
+   * @returns {*}
+   */
+  async validate(row: GridRowController): Promise<boolean> {
+    const values = await Promise.all(
+      Object.values(this.editItems).map(editItem => editItem.validate(row)),
+    );
+
+    // 找不到value为false即全部是true
+    return values.findIndex(value => !value) === -1;
+  }
+
+  /**
+   * 切换行编辑，行编辑切换关闭前会校验并保存，如果失败则依然显示行编辑状态
+   *
+   * @author lxm
+   * @date 2022-09-08 11:09:55
+   * @param {GridRowController} row 行数据控制器
+   */
+  async toggleRowEdit(row: GridRowController): Promise<void> {
+    if (row.showRowEdit === true) {
+      await this.save(row.data);
+    }
+    row.showRowEdit = !row.showRowEdit;
+  }
+
+  /**
+   * 设置排序
+   *
+   * @author lxm
+   * @date 2022-09-28 13:09:44
+   * @param {string} key 排序字段
+   * @param {string} order 排序顺序
+   */
+  setSort(key: string, order: 'asc' | 'desc') {
+    this.sortQuery = `${key},${order}`;
+  }
+
+  /**
+   * 表格编辑项更新
+   *
+   * @author lxm
+   * @date 2022-09-15 21:09:13
+   * @param {string} methodName 更新实体方法
+   * @param {string[]} updateItems 更新项名称集合
+   */
+  async updateGridEditItem(
+    row: GridRowController,
+    methodName: string,
+    updateItems?: string[],
+  ): Promise<void> {
+    const params = { ...this.params, ...row.data.getRequestData() };
+    const res = await this.service.updateGridEditItem(
+      methodName,
+      this.context,
+      params,
+    );
+    const result = res.data;
+    if (result && updateItems?.length) {
+      await Promise.all(
+        updateItems.map(itemName => {
+          return this.setRowValue(row, itemName, result[itemName]);
+        }),
+      );
+    }
+  }
+}

package/src/controller/control/grid/index.ts

@@ -0,0 +1,7 @@
+export * from './grid';
+export * from './grid-column';
+export * from './grid-field-column';
+export * from './grid-field-edit-column';
+export * from './grid-ua-column';
+export * from './grid-edit-item';
+export * from './grid-row';

package/src/controller/control/index.ts

@@ -0,0 +1,12 @@
+// 导出部件控制器
+export { ControlController } from './control';
+export { AppMenuController } from './app-menu';
+export { MainController } from './main';
+export * from './form/index';
+export { MDController } from './md';
+export * from './grid/index';
+export { ListController } from './list';
+export { ViewPanelController } from './view-panel';
+export { PickupViewPanelController } from './pickup-view-panel';
+export * from './portlet';
+export { DashboardController } from './dashboard';

package/src/controller/control/list.ts

@@ -0,0 +1,36 @@
+import { ListModel } from '@ibiz-template/model';
+import { ListService } from '../../service';
+import { ListNerve } from '../neuron';
+import { MDController } from './md';
+
+/**
+ * 列表控制器
+ *
+ * @author lxm
+ * @date 2022-10-21 13:10:41
+ * @export
+ * @class ListController
+ * @extends {MDController<ListModel>}
+ */
+export class ListController extends MDController<ListModel> {
+  declare nerve: ListNerve;
+
+  /**
+   * 表格部件服务
+   *
+   * @author lxm
+   * @date 2022-08-19 13:08:51
+   * @type {EntityService}
+   */
+  declare service: ListService;
+
+  protected createNerve(): ListNerve {
+    return new ListNerve(this);
+  }
+
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    this.service = new ListService(this.model);
+    await this.service.init(this.context);
+  }
+}