@ctzy-web-client/data-model 1.0.0

package/src/abstract/DataModel.js

@@ -0,0 +1,327 @@
+import get from 'lodash/get';
+import DataModelAdapter from './DataModelAdapter';
+import DataColumn from './DataColumn';
+import { inject } from '@ctzy-web-client/ioc-annotations';
+import { EventDispatcher } from '@ctzy-web-client/support';
+import { InstantiationService } from '@ctzy-web-client/ioc';
+import { clone } from 'lodash';
+import { cloneDeep } from 'lodash';
+import { BehaviorSubject } from 'rxjs';
+
+export default class DataModel extends EventDispatcher {
+  /**
+   * @type {String} 表格名称
+   */
+  name = '';
+
+  /**
+   * @type {String} 表格标题
+   */
+  title = '';
+
+  /**
+   * @type {String} 主键字段名
+   */
+  primaryKey = 'id';
+
+  /**
+   * @type {DataModelAdapter} 数据适配器
+   */
+  @inject(DataModelAdapter)
+  adapter = null;
+
+  @inject(InstantiationService)
+  instantiationService = null;
+
+  defaultParams = {};
+
+  /**
+   * @type {Function} 映射目标
+   */
+  model = null;
+
+  /**
+   * @type {Boolean} 是否准备就绪
+   */
+  ready = false;
+
+  _options = null;
+
+  extendField = '';
+
+  extendFieldInfos = [];
+
+  /**
+   * @type {DataColumn[]} 字段列
+   */
+  _columns = [];
+
+  _displayColumns = [];
+
+  _columnSubscriptionMap = new Map();
+
+  _displayColumnsSubject = new BehaviorSubject([]);
+
+  /**
+   * @param {Object} options 配置
+   * @param {String} options.name 表格名称
+   * @param {String} options.title 表格标题
+   * @param {String} options.primaryKey 主键字段名
+   */
+  constructor(options) {
+    super();
+    this.setOptions(options);
+  }
+
+  setOptions(options) {
+    this._options = options;
+    this.name = options.name;
+    this.title = options.title;
+    this.primaryKey = options.primaryKey || this.primaryKey;
+    this.extendField = options.extendField;
+    this.model = options.model;
+  }
+
+  /**
+   * @protected
+   */
+  init() {
+    if (typeof this._options?.adapter === 'function') {
+      this.adapter = this.instantiationService.createInstance(
+        this._options.adapter
+      );
+    }
+  }
+
+  _format(data, propName = 'name') {
+    const columns = this.getColumns();
+
+    const _data = {};
+    for (let column of columns.filter((column) => !column.isExtend)) {
+      const value = data?.[column[propName]];
+      _data[column.attrName] =
+        value === '' || value == null ? column.default : value;
+    }
+
+    if (this.extendField) {
+      let extendObject = {};
+      for (let column of columns.filter((column) => column.isExtend)) {
+        const value = get(data, column.fullAttrName);
+
+        extendObject[column.attrName] =
+          value === '' || value == null ? column.default : value;
+      }
+
+      _data[this.extendField] = extendObject;
+    }
+
+    const extendProperties = (source, target, predicate) => {
+      let keys = Object.keys(source);
+
+      keys = keys.filter(
+        (key) =>
+          !columns.filter(predicate).find((column) => column.attrName === key)
+      );
+
+      for (const key of keys) {
+        target[key] = source[key];
+      }
+    };
+
+    extendProperties(data, _data, (column) => !column.isExtend);
+
+    if (this.extendField && data[this.extendField]) {
+      extendProperties(
+        data[this.extendField],
+        _data[this.extendField],
+        (column) => column.isExtend
+      );
+    }
+
+    return _data;
+  }
+
+  getDisplayColumnsSubject() {
+    return this._displayColumnsSubject;
+  }
+
+  setParam(key, value) {
+    this.defaultParams[key] = value;
+  }
+
+  getParam(key) {
+    return this.defaultParams[key];
+  }
+
+  hasParam(key) {
+    return Reflect.has(this.defaultParams, key);
+  }
+
+  removeParam(key) {
+    Reflect.deleteProperty(this.defaultParams, key);
+  }
+
+  addParams(params = {}) {
+    this.defaultParams = { ...this.defaultParams, ...params };
+  }
+
+  setParams(params = {}) {
+    this.defaultParams = params;
+  }
+
+  clearParam() {
+    this.defaultParams = {};
+  }
+
+  formatData(data) {
+    return this._format(data);
+  }
+
+  formatExtendFieldInfo(extendFieldInfo) {
+    return {
+      title: extendFieldInfo.title,
+      name: extendFieldInfo.name,
+      default: extendFieldInfo.defaultValue,
+      attrName: extendFieldInfo.name,
+      isExtend: !extendFieldInfo.type,
+      required: !!extendFieldInfo.isRequired,
+      visible: !!extendFieldInfo.isVisible,
+      component: extendFieldInfo.component,
+      componentProps: { ...extendFieldInfo.extendInfo },
+    };
+  }
+
+  mergeTableColumn(formatedExtendFieldInfo, modelFieldInfo) {
+    return {
+      ...modelFieldInfo,
+      ...formatedExtendFieldInfo,
+      fullAttrName: `${this.extendField}.${formatedExtendFieldInfo.name}`,
+      componentProps: {
+        ...modelFieldInfo?.componentProps,
+        ...formatedExtendFieldInfo.extendInfo,
+      },
+    };
+  }
+
+  mergeTableColumns(extendFieldInfos, modelFieldInfos = []) {
+    return extendFieldInfos.map((extendFieldInfo) => {
+      const modelFieldInfo = modelFieldInfos.find(
+        (field) => field.name === extendFieldInfo.name
+      );
+
+      const formatedExtendFieldInfo =
+        this.formatExtendFieldInfo(extendFieldInfo);
+
+      return this.mergeTableColumn(formatedExtendFieldInfo, modelFieldInfo);
+    });
+  }
+
+  /**
+   *
+   * @returns {DataColumn[]}
+   */
+  getColumns() {
+    return this._columns.slice();
+  }
+
+  setColumns(columns) {
+    this._columnSubscriptionMap.clear();
+
+    this._columns = [];
+    for (let column of columns) {
+      this.addColumn(column);
+    }
+  }
+
+  /**
+   * @prootected
+   */
+  sortColumns(columns) {
+    throw new Error('暂未实现。');
+  }
+
+  /**
+   *
+   * @param {DataColumn} column
+   */
+  addColumn(column) {
+    if (!this.getColumn(column.attrName)) {
+      this._columns = this.sortColumns(this.getColumns().concat(column));
+
+      const subscription = column.getVisibleSubject().subscribe({
+        next: (visible) => {
+          if (visible) {
+            this.addDisplayColumn(column);
+            return;
+          }
+
+          this.removeDisplayColumn(column);
+        },
+        error: () => {
+          this.removeDisplayColumn(column);
+        },
+        complete: () => {
+          this.removeDisplayColumn(column);
+        },
+      });
+
+      this._columnSubscriptionMap.set(column.attrName, subscription);
+    } else {
+      throw new Error('无法添加两个字段名称一样的字段:' + column.attrName);
+    }
+  }
+
+  getColumn(columnName) {
+    return (
+      this._columns.find((column) => column.attrName === columnName) ?? null
+    );
+  }
+
+  getDisplayColumns() {
+    return this._displayColumns.slice();
+  }
+
+  setDisplayColumns(displayColumns) {
+    this._displayColumns = displayColumns;
+    this.getDisplayColumnsSubject().next(this.getDisplayColumns());
+  }
+
+  hasDisplayColumn(column) {
+    return !!this._displayColumns.find(
+      (item) => item.attrName === column.attrName
+    );
+  }
+
+  addDisplayColumn(column) {
+    if (!this.getColumn(column.attrName) || this.hasDisplayColumn(column)) {
+      return;
+    }
+
+    this.setDisplayColumns(this._displayColumns.concat(column));
+  }
+
+  removeDisplayColumn(column) {
+    if (!this.hasDisplayColumn(column)) {
+      return;
+    }
+
+    this.setDisplayColumns(
+      this._displayColumns.filter((item) => item.attrName !== column.attrName)
+    );
+  }
+
+  /**
+   * 克隆
+   * @returns
+   */
+  clone() {
+    const cloned = clone(this);
+
+    cloned.adapter = this.adapter;
+    cloned.instantiationService = this.instantiationService;
+    cloned.defaultParams = cloneDeep(this.defaultParams);
+    cloned._columns = cloneDeep(this._columns);
+
+    return cloned;
+  }
+}

package/src/abstract/DataModelAdapter.js

@@ -0,0 +1,241 @@
+import { value, inject } from '@ctzy-web-client/ioc-annotations';
+import { HttpRequest } from '@ctzy-web-client/support';
+
+/**
+ * 数据模型适配器
+ * 主要是定义数据请求的规范
+ * 接口地址模板占位符有: ${AppName}:应用名称 ${DataModelName}:数据模型名称  ${RecID}:当前记录主键字段值
+ */
+export default class DataModelAdapter {
+  /**
+   * @type {HttpRequest} 请求
+   */
+  @inject(HttpRequest)
+  httpRequest = null;
+
+  /**
+   * @type {String} 应用名称
+   */
+  @value('AppName')
+  appName = '';
+
+  /**
+   * @param {String} 加载数据列表 默认:POST
+   */
+  loadDataListItfMethod = 'POST';
+
+  /**
+   * @param {String} 数据列表删除接口的请求方法 默认:POST
+   */
+  deleteItfMethod = 'POST';
+
+  /**
+   * @param {String} 根据记录主键值获取详情数据接口 默认:POST
+   */
+  loadDataByRecIdMethod = 'POST';
+
+  /**
+   * @type {string} 保存数据请求方式 默认:POST
+   */
+  saveItfMethod = 'POST';
+
+  /**
+   * @type {string} 修改数据请求方式 默认:POST
+   */
+  updateItfMethod = 'POST';
+
+  /**
+   * 加载扩展字段请求方法 默认：POST
+   * @memberof DataModelAdapter
+   */
+  extendFieldItfMethod = 'POST';
+
+  /**
+   * @param {String} 数据接口地址
+   */
+  loadDataListItfUrl = '/${DataModelName}/page';
+
+  /**
+   * @type {string} 保存接口
+   */
+  saveItfUrl = '${DataModelName}/save';
+
+  /**
+   * @type {string} 更新接口
+   */
+  updateItfUrl = '${DataModelName}/update';
+
+  /**
+   * @param {String} 根据记录主键值获取详情数据接口
+   */
+  loadDataByRecIdItfUrl = '/${DataModelName}/find';
+
+  /**
+   * @param {string} 删除数据
+   */
+  deleteItfUrl = '/${DataModelName}/delete';
+
+  /**
+   * 加载扩展字段接口
+   * @memberof DataModelAdapter
+   */
+  extendFieldItfUrl = '/sceneField/default/page';
+
+  /**
+   * @param {String} 提交的方法类型 默认:POST
+   */
+  submitMethod = 'POST';
+
+  /**
+   * @param {String} 翻页页码参数名称 默认:pageNo
+   */
+  pagerNumParamName = 'pageNo';
+
+  /**
+   * @param {String} 每页记录条数参数名称 默认:pageSize
+   */
+  recCountParamName = 'pageSize';
+
+  /**
+   * @param {String} 请求返回数据节点的名称 默认:data
+   */
+  dataNodeName = 'data';
+
+  /**
+   * @param {String} 请求返回总记录条数的节点名称 默认:totalRecCount
+   */
+  totalRecCountNodeName = 'totalRecCount';
+
+  /**
+   * 格式化url
+   * @protected
+   * @param {string} url
+   * @param {object} context
+   * @returns {string}
+   */
+  formatUrl(url, context) {
+    return url.replace(/(\$\{[\S]+?\})/g, (name) => {
+      if (name == '${AppName}') {
+        return context.appName;
+      } else if (name == '${DataModelName}') {
+        return context.dataModelName;
+      }
+      return name;
+    });
+  }
+
+  /**
+   * @protected
+   * @param {string} url
+   * @param {string} method
+   * @param {object} params
+   */
+  async sendRequest(url, method, params) {
+    return this.httpRequest[method.toLowerCase()](url, params);
+  }
+
+  /**
+   * @private
+   * @param {object} context
+   * @param {string} url
+   * @param {string} method
+   * @param {object} params
+   */
+  async _sendRequest(context, url, method, params) {
+    const _context = { appName: this.appName, dataModelName: context.name };
+
+    url = this.formatUrl(url, _context);
+
+    return this.sendRequest(url, method, params);
+  }
+
+  getExtendsFieldHandle(context, params) {
+    return this._sendRequest(
+        context,
+        this.extendFieldItfUrl,
+        this.extendFieldItfMethod,
+        params
+    );
+  }
+
+  /**
+   * 数据加载数据列表
+   * @param {Object} context 发起请求的数据模型上下文
+   * @param {Object} params 请求参数
+   */
+  async loadDataListHandle(context, params) {
+    return this._sendRequest(
+      context,
+      this.loadDataListItfUrl,
+      this.loadDataListItfMethod,
+      params
+    );
+  }
+
+  /**
+   * 根据主键字段id获取数据详情
+   * @param {Object} context 发起请求的数据模型上下文
+   * @param {Object} params 请求参数
+   */
+  async deleteHandle(context, params) {
+    return this._sendRequest(
+      context,
+      this.deleteItfUrl,
+      this.deleteItfMethod,
+      params
+    );
+  }
+
+  /**
+   * 根据主键字段id获取数据详情
+   * @param {Object} context 发起请求的数据模型上下文
+   * @param {Object} params 请求参数
+   */
+  async loadDataByRecIdHandle(context, params) {
+    return this._sendRequest(
+      context,
+      this.loadDataByRecIdItfUrl,
+      this.loadDataByRecIdMethod,
+      params
+    );
+  }
+
+  /**
+   * 保存数据
+   * @param {object} context
+   * @param {object} params
+   */
+  async saveHandle(context, params) {
+    return this._sendRequest(
+      context,
+      this.saveItfUrl,
+      this.saveItfMethod,
+      params
+    );
+  }
+
+  /**
+   * 更新数据
+   * @param {object} context
+   * @param {object} params
+   */
+  async updateHandle(context, params) {
+    return this._sendRequest(
+      context,
+      this.updateItfUrl,
+      this.updateItfMethod,
+      params
+    );
+  }
+
+  /**
+   * 提交
+   * @param {Object} context 发起请求的数据模型上下文
+   * @param {Object} params 保存参数
+   */
+  async submitHandle(context, params) {
+    return params?.[context.primaryKey]
+      ? this.updateHandle(context, params)
+      : this.saveHandle(context, params);
+  }
+}