@ctzy-web-client/data-model 1.0.0

package/src/abstract/FormColumn.js

@@ -0,0 +1,63 @@
+import DataColumn from './DataColumn';
+
+/**
+ * 表单列定义
+ */
+export default class FormColumn extends DataColumn {
+  /**
+   * @member {String} 提交的字段名称
+   */
+  submitName = '';
+
+  /**
+   * @param {Array<Object>} 验证规则
+   */
+  rules = [];
+
+  /**
+   * @param {Boolean} 是否必填
+   */
+  required = true;
+
+  // /**
+  //  * @member {String} 字段填充时 若服务端返回 空值 NULL值时显示的内容 默认 ""
+  //  */
+  // default = '';
+
+  disabled = false;
+
+  /**
+   * 注入
+   * @param {Object} options 配置
+   * @param {String} options.name 字段名称
+   * @param {String} options.title 字段标题
+   * @param {String} options.default 表单默认提交的值
+   * @param {String} options.helpMsg 表单列帮助提示
+   * @param {String} options.rules 字段提交时验证规则 数组等价el的表单的rule写法
+   * @param {Boolean} options.required 字段是否必填 默认:false
+   * @param {Boolean} options.visible 字段在渲染组件里是否渲染 默认:true
+   * @param {Object|Function|String} options.component 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无,
+   * @param {Object|Function} options.componentProps 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+   *
+   * @returns
+   */
+  constructor(options = {}) {
+    super(options);
+    this.submitName = options?.submitName ?? this.submitName;
+    this.rules = options?.rules ?? this.rules;
+    this.required = options?.required ?? this.required;
+    this.disabled = options?.disabled ?? this.componentProps?.disabled ?? false;
+
+    if (this.componentProps && typeof this.componentProps === 'object') {
+      Reflect.deleteProperty(this.componentProps, 'disabled');
+    }
+  }
+
+  disable() {
+    this.disabled = true;
+  }
+
+  enable() {
+    this.disabled = false;
+  }
+}

package/src/abstract/TableColumn.js

@@ -0,0 +1,83 @@
+import DataColumn from './DataColumn';
+
+const DEFAULT_SETTINGS = {
+  visible: true,
+  disabled: false,
+};
+
+/**
+ * 表格列定义
+ */
+export default class TableColumn extends DataColumn {
+  /**
+   * @member {String} 宽度
+   */
+  width = 'auto';
+
+  formComponent = '';
+
+  /**
+   * @member {String} 对齐方式
+   */
+  align = 'center';
+
+  /**
+   * @member {String} 字段根据不同的数据类型格式化的规则:d:2,s:5,yyyy-MM-dd hh:mm:ss 默认:无
+   */
+  rule = '';
+
+  /**
+   * @member {String} 字符串模板 "${value}$"
+   */
+  template = '${value}';
+
+  /**
+   * @member {String} 字段的数据类型 number|string|image|video|audio|date|html 默认:string
+   */
+  type = 'string';
+
+  /**
+   * @member {Object} 设置表头的基本信息
+   */
+  settings = null;
+
+  // /**
+  //  * @member {String} 字段填充时 若服务端返回 空值 NULL值时显示的内容 默认 "-"
+  //  */
+  // default = '-';
+  /**
+   * @member {String} 设置排序
+   */
+  sortable = '';
+
+
+  /**
+   * 注入
+   * @param {Object} options 配置
+   * @param {String} options.name 字段名称
+   * @param {String} options.title 字段标题
+   * @param {String} options.default 字段填充时 若服务端返回 空值 NULL值时显示的内容 默认 "-"
+   * @param {String} options.width 字段在组件里面显示的宽度 默认:auto
+   * @param {String} options.align 字段在组件里面显示的对齐方式 默认:center
+   * @param {Boolean} options.visible 字段在渲染组件里是否渲染 默认:true
+   * @param {String} options.type 字段的数据类型 number|string|image|video|audio|date|html 默认:string
+   * @param {String} options.rule 字段根据不同的数据类型格式化的规则:d:2,s:5,yyyy-MM-dd hh:mm:ss 默认:无
+   * @param {String} options.template 字符串模板 "啊啊啊啊${value}$"
+   * @param {Object|Function|String} options.component 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无,
+   * @param {Object|Function} options.componentProps 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+   *
+   * @returns
+   */
+  constructor(options = {}) {
+    super(options);
+    this.width = options?.width ?? this.width;
+    this.formComponent = options.formComponent ?? this.formComponent;
+    this.align = options?.align ?? this.align;
+    this.rule = options?.rule ?? this.rule;
+    this.template = options?.template ?? this.template;
+    this.type = options?.type ?? this.type;
+    this.default = options?.default ?? '-';
+    this.settings = { ...DEFAULT_SETTINGS, ...options?.settings };
+    this.sortable = options?.sortable ?? this.sortable;
+  }
+}

package/src/abstract/where/CombineCondition.js

@@ -0,0 +1,115 @@
+import { Condition } from './Condition';
+import { SingleCondition } from './SingleCondition';
+
+export class CombineCondition extends Condition {
+  /** @type {Array<Condition|string>} */
+  conditions = [];
+
+  /**
+   * @param {string} fieldName
+   * @param {string} operator
+   * @param {any} value
+   * @return {SingleCondition}
+   * @memberof CombineCondition
+   */
+  addCondition(fieldName, operator, value) {
+    const condition = new SingleCondition(fieldName, operator, value);
+
+    if (this.conditions.length) {
+      this.conditions.push('AND');
+    }
+
+    this.conditions.push(condition);
+
+    return condition;
+  }
+
+  /**
+   * @param {string} fieldName
+   * @param {string} operator
+   * @param {any} value
+   * @return {SingleCondition}
+   * @memberof CombineCondition
+   */
+  addOrCondition(fieldName, operator, value) {
+    const condition = new SingleCondition(fieldName, operator, value);
+
+    if (this.conditions.length) {
+      this.conditions.push('OR');
+    }
+
+    this.conditions.push(condition);
+
+    return condition;
+  }
+
+  /**
+   * @param {CombineCondition} group
+   * @return {CombineCondition}
+   * @memberof CombineCondition
+   */
+  addGroup(group) {
+    const _group = group || new CombineCondition();
+
+    if (this.conditions.length) {
+      this.conditions.push('AND');
+    }
+
+    this.conditions.push(_group);
+
+    return _group;
+  }
+
+  /**
+   * @param {CombineCondition} group
+   * @return {CombineCondition}
+   * @memberof CombineCondition
+   */
+  addOrGroup(group) {
+    const _group = group || new CombineCondition();
+
+    if (this.conditions.length) {
+      this.conditions.push('OR');
+    }
+
+    this.conditions.push(_group);
+
+    return _group;
+  }
+
+  removeCondition(fieldName) {
+    let index = this.conditions.findIndex(
+      (condition) =>
+        condition instanceof SingleCondition && condition.f === fieldName
+    );
+
+    if (index === 0) {
+      this.conditions.splice(index, 1);
+      return;
+    }
+
+    this.conditions.splice(index - 1, 2);
+
+    const combineConditions = this.conditions.filter(
+      (condition) => condition instanceof CombineCondition
+    );
+
+    for (let i = combineConditions.length - 1; i >= 0; i--) {
+      const combineCondition = combineConditions[i];
+
+      combineCondition.removeCondition(fieldName);
+
+      if (!combineCondition.conditions.length) {
+        const index = this.conditions.indexOf(combineCondition);
+
+        this.conditions.splice(index, 1);
+      }
+    }
+  }
+
+  toJSON() {
+    return this.conditions.map((condition) =>
+      condition instanceof Condition ? condition.toJSON() : condition
+    );
+  }
+}

package/src/abstract/where/Condition.js

@@ -0,0 +1,3 @@
+export class Condition {
+    
+}

package/src/abstract/where/SingleCondition.js

@@ -0,0 +1,22 @@
+import { Condition } from './Condition';
+
+export class SingleCondition extends Condition {
+  f = '';
+  o = '=';
+  v = '';
+
+  constructor(f, o, v) {
+    super();
+    this.f = f;
+    this.v = v;
+    this.o = o;
+  }
+
+  toJSON() {
+    return {
+      f: this.f,
+      o: this.o,
+      v: this.v,
+    };
+  }
+}

package/src/abstract/where/Where.js

@@ -0,0 +1,22 @@
+import { CombineCondition } from './CombineCondition';
+import { SingleCondition } from './SingleCondition';
+
+export class Where extends CombineCondition {
+  getCondition(fieldName) {
+    let conditions = this.conditions.slice();
+
+    for (let i = 0; i < conditions.length; i++) {
+      const condition = conditions[i];
+
+      if (condition instanceof CombineCondition) {
+        conditions = conditions.concat(condition.conditions);
+      } else if (condition instanceof SingleCondition) {
+        if (condition.f === fieldName) {
+          return condition;
+        }
+      }
+    }
+
+    return null;
+  }
+}

package/src/decorator/constant.js

@@ -0,0 +1,13 @@
+/**
+ * data model define
+ */
+export const DATA_MODEL_DEFINE = {
+  table: Symbol('DATA TABLE DEFINE'),
+  form: Symbol('DATA FORM DEFINE'),
+};
+
+export const DATA_TABLE = "DATA_TABLE";
+export const DATA_FORM = "DATA_FORM";
+export const DATA_TABLE_COLUMNS = "DATA_TABLE_COLUMNS";
+export const DATA_TABLE_FILTER_COLUMN = "DATA_TABLE_FILTER_COLUMN";
+export const DATA_FORM_COLUMNS = "DATA_FORM_COLUMNS";

package/src/decorator/dataForm.js

@@ -0,0 +1,35 @@
+import { DATA_MODEL_DEFINE, DATA_FORM } from './constant';
+import DataForm from '../abstract/DataForm';
+
+/**
+ * 标识为当前模型为一个数据表单
+ * @param {Object} option 配置
+ * @param {String} option.name 表格名称
+ * @param {String} option.title 表格标题
+ * @param {String} option.primaryKey 主键字段名
+ * @param {String} option.primaryKey 主键字段名
+ * @returns
+ */
+export default function dataForm(option) {
+  return function decorator(classType) {
+    if (classType.constructor !== Function) {
+      throw new Error(`@dataForm 只能用于类的注解`);
+    }
+
+    /**
+     * @type {DataForm} dataForm 对象
+     */
+    let dataForm = classType[DATA_FORM];
+
+    if (dataForm) {
+      return;
+    }
+
+    dataForm = classType[DATA_FORM] = option;
+
+    //记录映射目标
+    // dataForm.mapTarget = classType;
+    //包装的类的构造函数
+    return classType;
+  };
+}

package/src/decorator/dataTable.js

@@ -0,0 +1,38 @@
+import { DATA_MODEL_DEFINE, DATA_TABLE } from './constant';
+import DataTable from '../abstract/DataTable';
+
+/**
+ * 标识为当前模型为一个数据表格
+ * @param {Object} option 配置
+ * @param {String} option.name 表格名称
+ * @param {String} option.title 表格标题
+ * @param {String} option.primaryKey 主键字段名
+ * @returns
+ */
+export default function dataTable(option) {
+  return function decorator(classType) {
+    if (classType.constructor !== Function) {
+      throw new Error(`@dataTable 只能用于类的注解`);
+    }
+
+    /**
+     * @type {DataTable} dataTable对象
+     */
+    let dataTable = classType[DATA_MODEL_DEFINE.table];
+
+    if (dataTable) {
+      return;
+      //   dataTable = classType[DATA_MODEL_DEFINE.table] = new DataTable(option);
+      // } else {
+      //   Object.assign(dataTable, option);
+    }
+
+    classType[DATA_TABLE] = option;
+
+    //记录映射目标
+    // dataTable.mapTarget = classType;
+
+    //包装的类的构造函数
+    return classType;
+  };
+}

package/src/decorator/filterColumn.js

@@ -0,0 +1,29 @@
+import { DATA_TABLE_FILTER_COLUMN } from './constant';
+
+export default function filterColumn(options) {
+  return function (target, key, description) {
+    if (
+      arguments.length !== 3 ||
+      target.constructor === Function ||
+      typeof description.value === 'function'
+    ) {
+      throw new Error(`@formColumn 只能使用在类的成员变量中`);
+    }
+
+    target.constructor[DATA_TABLE_FILTER_COLUMN] =
+      target.constructor[DATA_TABLE_FILTER_COLUMN] || [];
+
+    const columns = target.constructor[DATA_TABLE_FILTER_COLUMN];
+
+    options = {
+      name: key,
+      attrName: key,
+      closable: false,
+      ...options,
+    };
+
+    options.visible = !options.closable;
+
+    columns.push(options);
+  };
+}

package/src/decorator/formColumn.js

@@ -0,0 +1,60 @@
+import { DATA_MODEL_DEFINE, DATA_FORM_COLUMNS } from './constant';
+
+/**
+ * 描述表单字段
+ * @param {Object} option 配置
+ * @param {String} option.name 字段名称
+ * @param {String} option.submitName 提交字段名称,默认和字段名称一致
+ * @param {String} option.title 字段标题
+ * @param {String} option.default 数据提交的时候的默认值
+ * @param {Boolean} option.required 是否必填 默认是
+ * @param {Boolean} option.visible 字段在渲染组件里是否渲染 默认:true
+ * @param {Object[]} option.rules 表单验证规则 参考 https://github.com/yiminghe/async-validator
+ * @param {String} option.rules[].type string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any
+ * @param {Boolean} option.rules[].required 是否必填
+ * @param {Pattern} option.rules[].pattern 正则
+ * @param {Function} option.rules[].validator 验证方法
+ * @param {String} option.rules[].message 提示消息
+ * @param {Number} option.rules[].len 指定长度匹配
+ * @param {Number} option.rules[].max 最大长度
+ * @param {Number} option.rules[].min 最小长度
+ * @param {Object|Function|String} option.component 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无,
+ * @param {Object|Function} option.componentProps 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+ * @returns
+ */
+export default function formColumn(option) {
+  return function (target, key, description) {
+    if (
+      arguments.length !== 3 ||
+      target.constructor === Function ||
+      typeof description.value === 'function'
+    ) {
+      throw new Error(`@formColumn 只能使用在类的成员变量中`);
+    }
+
+    target.constructor[DATA_FORM_COLUMNS] =
+      target.constructor[DATA_FORM_COLUMNS] || [];
+
+    const columns = target.constructor[DATA_FORM_COLUMNS];
+
+    columns.push({
+      name: key,
+      submitName: option.name || key,
+      ...option,
+      attrName: key,
+    });
+
+    // if (!dataForm) {
+    //   target.constructor[DATA_MODEL_DEFINE.form] = dataForm = new DataForm();
+    // }
+
+    // dataForm.addColumn(
+    //   new FormColumn(
+    //     Object.assign(
+    //       { name: key, attrName: key, submitName: option.name || key },
+    //       option
+    //     )
+    //   )
+    // );
+  };
+}

package/src/decorator/tableColumn.js

@@ -0,0 +1,42 @@
+import { DATA_MODEL_DEFINE, DATA_TABLE_COLUMNS } from './constant';
+import DataTable from '../abstract/DataTable';
+import TableColumn from '../abstract/TableColumn';
+
+/**
+ * 注入
+ * @param {Object} option 配置
+ * @param {String} option.name 字段名称
+ * @param {String} option.title 字段标题
+ * @param {String} option.default 字段填充时 若服务端返回 空值 NULL值时显示的内容 默认 "-"
+ * @param {String} option.width 字段在组件里面显示的宽度 默认:auto
+ * @param {String} option.align 字段在组件里面显示的对齐方式 默认:center
+ * @param {Boolean} option.visible 字段在渲染组件里是否渲染 默认:true
+ * @param {String} option.type 字段的数据类型 number|string|image|audio|date 默认:string
+ * @param {String} option.rule 字段根据不同的数据类型格式化的规则:d:2,s:5,yyyy-MM-dd hh:mm:ss 默认:无
+ * @param {Object|Function|String} option.component 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无,
+ * @param {Object|Function} option.componentProps 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+ *
+ * @returns
+ */
+export default function tableColumn(option) {
+  return function (target, key, description) {
+    if (
+      arguments.length !== 3 ||
+      target.constructor === Function ||
+      typeof description.value === 'function'
+    ) {
+      throw new Error(`@tableColumn 只能使用在类的成员变量中`);
+    }
+
+    target.constructor[DATA_TABLE_COLUMNS] =
+      target.constructor[DATA_TABLE_COLUMNS] || [];
+
+    const columns = target.constructor[DATA_TABLE_COLUMNS];
+
+    columns.push({
+      name: key,
+      attrName: key,
+      ...option,
+    });
+  };
+}

package/src/factory.js

@@ -0,0 +1,25 @@
+import { DATA_MODEL_DEFINE } from './decorator/constant.js';
+import DataTable from './abstract/DataTable';
+import DataForm from './abstract/dataForm';
+
+/**
+ * 创建DataTable实例
+ * @template T
+ * @param {T} classType data model class
+ * @returns {DataTable}
+ */
+export const createDataTable = function (classType) {
+  const baseDataTable = classType[DATA_MODEL_DEFINE.table];
+  return baseDataTable ? baseDataTable.clone() : new DataTable();
+};
+
+/**
+ * 创建DataForm实例
+ * @template T
+ * @param {T} classType data model class
+ * @returns {DataForm}
+ */
+export const createDataForm = function (classType) {
+  const baseDataForm = classType[DATA_MODEL_DEFINE.form];
+  return baseDataForm ? baseDataForm.clone() : new dataForm();
+};

package/src/index.js

@@ -0,0 +1,26 @@
+import DataTable from './abstract/DataTable';
+import DataForm from './abstract/DataForm';
+import { FilterPanel } from './abstract/FilterPanel';
+import DataModelAdapter from './abstract/DataModelAdapter';
+import dataTable from './decorator/dataTable';
+import dataForm from './decorator/dataForm';
+import tableColumn from './decorator/tableColumn';
+import formColumn from './decorator/formColumn';
+import SimpleOrm from './SimpleOrm';
+import filterColumn from './decorator/filterColumn';
+export * from './abstract/where/CombineCondition';
+export * from './abstract/where/SingleCondition';
+export * from './abstract/where/Where';
+export * from './factory';
+export {
+  SimpleOrm,
+  DataTable,
+  DataForm,
+  FilterPanel,
+  dataTable,
+  dataForm,
+  tableColumn,
+  formColumn,
+  filterColumn,
+  DataModelAdapter,
+};

package/src/utils/index.js

@@ -0,0 +1,16 @@
+export const sortColumn = (columns, order) => {
+  return [...columns].sort((a, b) => {
+    const aIndex = order.indexOf(a.attrName);
+    const bIndex = order.indexOf(b.attrName);
+
+    if (aIndex === -1 && bIndex === -1) {
+      return 0;
+    }
+
+    if (aIndex !== -1 && bIndex !== -1) {
+      return aIndex - bIndex;
+    }
+
+    return aIndex === -1 ? 1 : -1;
+  });
+};