@ctzy-web-client/data-model 1.0.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ctzy-web-client/data-model",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./es/index.mjs"
+    },
+    "./src": "./src/index.js",
+    "./src/*": "./src/*",
+    "./es": "./es/index.mjs",
+    "./lib": "./lib/index.js",
+    "./es/*": "./es/*",
+    "./lib/*": "./lib/*"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/lodash": "^4.14.188",
+    "@ctzy-web-client/ioc": "^1.0.0",
+    "@ctzy-web-client/ioc-annotations": "^1.0.0",
+    "@ctzy-web-client/support": "^1.0.0",
+    "lodash": "^4.17.21",
+    "rxjs": "^7.6.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/SimpleOrm.js

@@ -0,0 +1,123 @@
+import { inject } from '@ctzy-web-client/ioc-annotations';
+import { InstantiationService } from '@ctzy-web-client/ioc';
+import DataModelAdapter from './abstract/DataModelAdapter';
+import DataTable from './abstract/DataTable';
+import DataForm from './abstract/dataForm';
+
+/**
+ * 请求类
+ */
+export default class SimpleOrm {
+  @inject(DataModelAdapter)
+  adapter = null;
+
+  @inject(InstantiationService)
+  instantiationService = null;
+
+  createDataTable(model, options = {}) {
+    return this.instantiationService.createInstance(DataTable, {
+      args: [{ model }],
+    });
+  }
+
+  createDataForm(model, options = {}) {
+    return this.instantiationService.createInstance(DataForm, {
+      args: [{ model }],
+    });
+  }
+
+  /**
+   * 填充数据模型 最大请求1w条数据可以指定翻页参数修改填充的最大记录
+   * @template T
+   * @param {T} classType 模型定义
+   * @param {Object} params 参数
+   * @param {Number} maxRecCount 最大填充记录数
+   * @returns {Promise<InstanceType<T>[]>}
+   */
+  async fill(classType, params, maxRecCount = 10000) {
+    const dataTable = this.createDataForm(classType);
+    return dataTable.adapter
+      .loadDataListHandle(
+        dataTable,
+        Object.assign(
+          {
+            [dataTable.adapter.pagerNumParamName]: 1,
+            [dataTable.adapter.recCountParamName]: maxRecCount,
+          },
+          params
+        )
+      )
+      .then((res) => {
+        //创建
+        return res.data.map((dataItem) => {
+          let modelInstance = new classType();
+
+          dataTable.getColumns().forEach((column) => {
+            modelInstance[column.attrName] = dataItem[column.name];
+          });
+
+          return modelInstance;
+        });
+      });
+  }
+
+  /**
+   * 请求一条记录直接填充到模型的实例
+   * @template T
+   * @param {T} classType 模型定义
+   * @param {Object} params 参数
+   * @returns {Promise<InstanceType<T>>}
+   */
+  async first(classType, params) {
+    return this.fill(classType, params, 1).then((data) => {
+      return data[0] || null;
+    });
+  }
+
+  /**
+   * 根据recid请求一条实例填充到模型
+   * @template T
+   * @param {T} classType 模型定义
+   * @param {String|Number} recId 主记录id
+   * @returns {Promise<InstanceType<T>>}
+   */
+  async firstByRecId(classType, recId) {
+    const dataTable = this.createDataTable(classType);
+    return this.adapter
+      .loadDataByRecIdHandle(
+        dataTable,
+        Object.assign(
+          {
+            [this.primaryKey]: recId,
+          },
+          params
+        )
+      )
+      .then((data) => {
+        const result = Array.isArray(data.data) ? data.data[0] : data.data;
+
+        if (result) {
+          let modelInstance = new classType();
+
+          dataTable.getColumns().forEach((column) => {
+            modelInstance[column.attrName] = result[column.name];
+          });
+
+          return modelInstance;
+        }
+        return result;
+      });
+  }
+
+  /**
+   * 提交数据
+   * @template T
+   * @param {T} classType
+   * @param {Object} data 提交的数据
+   */
+  submit(classType, data) {
+    const dataForm = this.createDataForm(classType);
+    dataForm.adapter = this.adapter;
+    return dataForm.submit(data);
+  }
+}

package/src/abstract/DataColumn.js

@@ -0,0 +1,164 @@
+import { BehaviorSubject } from 'rxjs';
+
+/**
+ * 数据列定义
+ */
+export default class DataColumn {
+  /**
+   * 标题
+   * @type {String}
+   */
+  title = '';
+
+  /**
+   * 名称
+   * @type {String}
+   */
+  name = '';
+
+  /**
+   * 映射的类属性名称
+   * @type {String}
+   */
+  attrName = '';
+
+  /**
+   * 完整的属性名称
+   * @type {String}
+   */
+  fullAttrName = '';
+
+  /**
+   * 默认值
+   * @type {undefined}
+   */
+  default = undefined;
+
+  /**
+   * 是否显示列
+   * @type {Boolean}
+   */
+  _visible = true;
+
+  /**
+   * 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无
+   * @type {undefined}
+   */
+  component = undefined;
+
+  /**
+   * 是否是扩展字段
+   * @type {Boolean}
+   */
+  isExtend = false;
+
+  /**
+   * 组件标题
+   * @type {String}
+   */
+  componentTitle = '';
+
+  /**
+   * 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+   * @type {undefined}
+   */
+  componentProps = undefined;
+
+  /**
+   * 可观察的是否可见的主题
+   * @type {BehaviorSubject}
+   */
+  _visibleSubject = null;
+
+  /**
+   * DataColumn构造函数
+   * @param {Object} options - DataColumn的选项
+   * @param {String} options.title - DataColumn的标题
+   * @param {String} options.name - DataColumn的名称
+   * @param {String} options.attrName - DataColumn的映射的类属性名称
+   * @param {undefined} options.default - DataColumn的默认值
+   * @param {Boolean} options.visible - DataColumn是否可见
+   * @param {undefined} options.component - DataColumn的组件
+   * @param {String} options.componentTitle - DataColumn的组件标题
+   * @param {undefined} options.componentProps - DataColumn的组件参数
+   * @param {Boolean} options.isExtend - DataColumn是否是扩展字段
+   * @param {String} options.fullAttrName - DataColumn的完整属性名称
+   */
+  constructor(options) {
+    this.title = options?.title ?? this.title;
+    this.name = options?.name ?? this.name;
+    this.attrName = options?.attrName ?? this.attrName;
+    this.default = options?.default ?? this.default;
+    this._visible = options?.visible ?? this._visible;
+    this.component = options?.component ?? this.component;
+    this.componentTitle = options?.componentTitle ?? this.componentTitle;
+    this.componentProps = options?.componentProps ?? this.componentProps;
+    this.isExtend = options?.isExtend ?? this.isExtend;
+    this.fullAttrName = this.isExtend ? options?.fullAttrName : this.attrName;
+
+    this._visibleSubject = new BehaviorSubject(this._visible);
+  }
+
+  /**
+   * 获取是否可见
+   * @returns {Boolean} 是否可见
+   */
+  get visible() {
+    return this._visible;
+  }
+
+  /**
+   * 设置是否可见
+   * @param {Boolean} visible - 是否可见
+   */
+  set visible(visible) {
+    if (visible) {
+      this.show();
+      return;
+    }
+
+    this.hide();
+  }
+
+  /**
+   * 获取可观察的是否可见的主题
+   * @returns {BehaviorSubject} 可观察的是否可见的主题
+   */
+  getVisibleSubject() {
+    return this._visibleSubject;
+  }
+
+  /**
+   * 显示
+   */
+  show() {
+    if (this._visible) {
+      return;
+    }
+    this._visible = true;
+    this._visibleSubject.next(this._visible);
+  }
+
+  /**
+   * 隐藏
+   */
+  hide() {
+    if (!this._visible) {
+      return;
+    }
+    this._visible = false;
+    this._visibleSubject.next(this._visible);
+  }
+
+  /**
+   * 切换是否可见
+   */
+  toggleVisible() {
+    if (this._visible) {
+      this.hide();
+      return;
+    }
+
+    this.show();
+  }
+}

package/src/abstract/DataForm.js

@@ -0,0 +1,342 @@
+import get from 'lodash/get';
+import { DATA_FORM, DATA_FORM_COLUMNS } from '../decorator/constant';
+import { sortColumn } from '../utils';
+import DataModel from './DataModel';
+import FormColumn from './FormColumn';
+
+/**
+ * @class
+ * @classdesc 表单数据
+ * @extends DataModel
+ */
+export default class DataForm extends DataModel {
+  /**
+   * @type {Boolean} 表单数据是否发生改变
+   */
+  changed = false;
+
+  /**
+   * @type {Boolean} 锁定中 (主要是加载表单数据和提交表单的时候需要锁定避免操作带来的异常)
+   */
+  locking = false;
+
+  /**
+   * @type {Boolean} 是否禁用
+   */
+  disabled = false;
+
+  /**
+   * @type {Object} 表单数据
+   */
+  data = {};
+
+  /**
+   * @type {{ validate: () => Promise<boolean> }[]}
+   */
+  formValivators = [];
+
+  _loadCallbacks = [];
+
+  _inited = false;
+
+  /**
+   * @constructor
+   * @param {Object} option 配置
+   * @param {String} option.name 表格名称
+   * @param {String} option.title 表格标题
+   * @param {String} option.primaryKey 主键字段名
+   */
+  constructor(option) {
+    super(option);
+  }
+
+  /**
+   *
+   * @param {Object} options 配置
+   * @param {Object} options.model 模型
+   */
+  setOptions(options) {
+    if (!options.model) {
+      return;
+    }
+
+    super.setOptions({ ...options.model[DATA_FORM], model: options.model });
+  }
+
+  /**
+   *
+   * @desc 禁用
+   */
+  disable() {
+    this.disabled = true;
+  }
+
+  /**
+   *
+   * @desc 启用
+   */
+  enable() {
+    this.disabled = false;
+  }
+
+  /**
+   *
+   * @desc 初始化
+   */
+  init() {
+    super.init();
+
+    const model = this.model;
+    if (!model) {
+      return;
+    }
+
+    if (this.extendField) {
+      return;
+    } else {
+      const columns = (model[DATA_FORM_COLUMNS] || []).map(
+        (columnConfig) => new FormColumn(columnConfig)
+      );
+
+      for (const column of columns) {
+        this.addColumn(column);
+      }
+
+      model.formColumns = this.getColumns().map((column) => column.attrName);
+    }
+
+    this.setData(null);
+
+    this._inited = true
+
+    this.emit('init-completed');
+  }
+
+  setExtendFieldInfos(extendFieldInfos) {
+    if (this._inited) {
+      return;
+    }
+
+    this.extendFieldInfos = extendFieldInfos;
+
+    const formColumns = extendFieldInfos.map(
+      (extendField) =>
+        new FormColumn({
+          name: extendField.name,
+          title: extendField.title,
+          attrName: extendField.name,
+          submitName: extendField.name,
+          default: extendField.defaultValue || '',
+          isExtend: !extendField.type,
+          required: !!extendField.isRequired,
+          component: extendField.component,
+          componentProps: extendField.extendInfo ?? {},
+          fullAttrName: `${this.extendField}.${extendField.name}`,
+        })
+    );
+
+    this.setColumns(formColumns);
+
+    this.setData(null);
+
+    this._inited = true;
+
+    for (const callback of this._loadCallbacks) {
+      callback();
+    }
+
+    this.emit('init-completed');
+  }
+
+  /**
+   *
+   * @desc 设置表单数据
+   * @param {Object} data 表单数据
+   */
+  setData(data) {
+    if (data) {
+      this.data = data;
+    } else {
+      this.reset();
+    }
+    this.ready = true;
+  }
+
+  /**
+   *
+   * @desc 重置表单数据
+   */
+  reset() {
+    this.setData(this.formatData({}));
+  }
+
+  /**
+   *
+   * @desc 根据id获取编辑数据
+   * @param {String|Number} params 记录id
+   * @returns
+   */
+  async loadDataByRecId(params) {
+    if (!this._inited) {
+      return new Promise((resolve, reject) => {
+        this._loadCallbacks.push(() => {
+          this.loadDataByRecId(params).then(resolve, reject);
+        });
+      });
+    }
+
+    //获取正式数据
+    this.locking = true;
+
+    if (typeof params !== 'object') {
+      params = {
+        [this.primaryKey]: params,
+      };
+    }
+
+    //加载参数
+    params = {
+      ...this.defaultParams,
+      ...params,
+    };
+
+    //加载完成
+    this.emit('before-load', params);
+
+    //加载
+    return this.adapter
+      .loadDataByRecIdHandle(this, params)
+      .then((res) => {
+        //加载完成
+        const data = this.formatData(
+          Array.isArray(res.data) ? res.data[0] : res.data
+        );
+
+        //设置数据
+        this.setData(data);
+
+        this.emit('load-successfully', res);
+
+        return res;
+      })
+      .catch((e) => {
+        this.emit('load-failed', e);
+        return Promise.reject(e);
+      })
+      .finally(() => {
+        //解锁
+        this.locking = false;
+
+        this.emit('load-complete');
+      });
+  }
+
+  /**
+   *
+   * @desc 格式化提交数据
+   * @param {Object} data 表单数据
+   * @returns {Object} 格式化后的数据
+   */
+  formatSubmitData(data) {
+    return this._format(data, 'submitName');
+  }
+
+  /**
+   *
+   * @desc 排序列
+   * @param {Array} columns 列
+   * @returns {Array} 排序后的列
+   */
+  sortColumns(columns) {
+    return sortColumn(columns, this.model.formColumns || []);
+  }
+
+  async validate() {
+    if (!this.formValivators.length) {
+      return Promise.resolve(false);
+    }
+
+    const validateResults = await Promise.all(
+      this.formValivators.map((validator) =>
+        validator.validate().then(
+          () => true,
+          () => false
+        )
+      )
+    );
+
+    return validateResults.reduce((result, item) => result && item, true);
+  }
+
+  /**
+   *
+   * @desc 提交表单
+   * @param {Object} data 表单数据
+   * @returns
+   */
+  async submit(data = {}) {
+    if (this.disabled) {
+      throw new Error('禁用状态不能保存');
+    }
+
+    if (this.locking) {
+      return;
+    }
+
+    if (!(await this.validate())) {
+      return;
+    }
+
+    //获取正式数据
+    this.locking = true;
+
+    const submitData = {};
+
+    for (let column of this.getColumns().filter((column) => !column.isExtend)) {
+      submitData[column.submitName] = this.data[column.attrName];
+    }
+
+    if (this.extendField) {
+      let extendObject = {};
+      for (let column of this.getColumns().filter(
+        (column) => column.isExtend
+      )) {
+        extendObject[column.attrName] = get(this.data, column.fullAttrName);
+      }
+      submitData[this.extendField] = extendObject;
+    }
+
+    Object.assign(submitData, data);
+
+    this.emit('before-submit', data);
+
+    //处理
+    return this.adapter
+      .submitHandle(this, submitData)
+      .then((res) => {
+        this.emit('submit-successfully', res);
+        return res;
+      })
+      .catch((e) => {
+        this.emit('submit-failed', e);
+        return Promise.reject(e);
+      })
+      .finally(() => {
+        this.emit('submit-complete');
+        //解锁
+        this.locking = false;
+      });
+  }
+
+  setDisplayColumns(displayColumns) {
+    const displayColumnNames = displayColumns.map(
+      (column) => column.fullAttrName
+    );
+
+    this._displayColumns = this.getColumns().filter((column) =>
+      displayColumnNames.includes(column.fullAttrName)
+    );
+
+    this.getDisplayColumnsSubject().next(this.getDisplayColumns());
+  }
+}