@ctzy-web-client/data-model 1.0.0

package/src/abstract/DataTable.js

@@ -0,0 +1,627 @@
+import { cloneDeep } from 'lodash';
+
+import {
+  DATA_TABLE,
+  DATA_TABLE_COLUMNS,
+  DATA_TABLE_FILTER_COLUMN,
+} from '../decorator/constant';
+import { sortColumn } from '../utils';
+import DataModel from './DataModel';
+import FilterColumn from './FilterColumn';
+import TableColumn from './TableColumn';
+
+import { FilterPanel } from './FilterPanel';
+
+/**
+ * @class DataTable
+ * @extends DataModel
+ */
+export default class DataTable extends DataModel {
+  /**
+   * @returns {Array<FilterColumn>} 字段数组
+   */
+  get filterColumns() {
+    return this.filterPanel.getColumns();
+  }
+
+  /**
+   * @type {boolean} 锁定中
+   */
+  get locking() {
+    return this._loadingCount > 0;
+  }
+
+  _userService = null;
+
+  _loadingCount = 0;
+
+  /**
+   * @type {Number} 记录总数
+   */
+  totalRecCount = 0;
+
+  /**
+   * @type {Number} 字段数组
+   */
+  pageNum = 1;
+
+  /**
+   * @type {Number} 字段数组
+   */
+  pageSize = 20;
+
+  /**
+   * @type {Object} 筛选参数
+   */
+  get searchParams() {
+    return this.filterPanel._filterParams;
+  }
+  //   searchParams = {};
+
+  /**
+   * @type {Array<Object>} 选中项
+   */
+  selection = [];
+
+  /**
+   * @type {Array<Object>} 数据
+   */
+  data = [];
+
+  /**
+   * @type {Array<Object>} 默认列排序
+   */
+  _defaultColumnSort = [];
+
+  inited = false;
+
+  filterPanel = new FilterPanel(this);
+
+  set whereForFilter(v) {
+    this._options.whereForFilter = v;
+    if (this.filterPanel) {
+      this.filterPanel.whereForFilter = v;
+    }
+  }
+
+  get whereForFilter() {
+    return this._options.whereForFilter;
+  }
+
+  set whereParamName(v) {
+    this.filterPanel.whereParamName = v;
+  }
+
+  get whereParamName() {
+    return this.filterPanel.whereParamName;
+  }
+
+  set encryptCondition(v) {
+    this.filterPanel.encryptCondition = v;
+  }
+
+  get encryptCondition() {
+    return this.filterPanel.encryptCondition;
+  }
+
+  /**
+   * @template T
+   * @param {Object} option 配置
+   * @param {String} option.name 表格名称
+   * @param {T} option.model
+   * @param {String} option.title 表格标题
+   * @param {String} option.primaryKey 主键字段名
+   */
+  constructor(option) {
+    super(option);
+
+    this.whereForFilter = this.whereForFilter;
+
+    this._loadCallbacks = [];
+
+    this.filterPanel.on('ready', () => {
+      for (let callback of this._loadCallbacks) {
+        callback();
+      }
+    });
+  }
+
+  /**
+   * 获取总页数
+   * @returns {Number} 总页数
+   */
+  getTotalPage() {
+    const totalPage = Math.ceil(this.totalRecCount / this.pageSize);
+    return Number.isNaN(totalPage) ? 0 : totalPage;
+  }
+
+  /**
+   * 设置选项
+   * @param {Object} options 选项
+   */
+  setOptions(options) {
+    if (!options.model) {
+      return;
+    }
+
+    super.setOptions({ ...options.model[DATA_TABLE], model: options.model });
+
+    this.whereForFilter = options.model[DATA_TABLE].whereForFilter ?? false;
+  }
+
+  /**
+   * 设置选中项
+   * @param {Array<Object>} selection 选中项
+   */
+  setSelection(selection) {
+    const oldSelection = this.selection;
+
+    this.selection = selection;
+
+    this.emit('select-change', selection, oldSelection);
+  }
+
+  /**
+   * 获取选中项
+   * @returns {Array<Object>} 选中项
+   */
+  getSelection() {
+    return this.selection;
+  }
+
+  /**
+   * 清空选中项
+   */
+  clearSelection() {
+    this.setSelection([]);
+  }
+
+  /**
+   * 设置where参数名
+   * @param {String} whereParamName where参数名
+   */
+  setWhereParamName(whereParamName) {
+    this.whereParamName = whereParamName;
+  }
+
+  /**
+   * 初始化
+   */
+  init() {
+    if (this.inited) {
+      return;
+    }
+
+    super.init();
+
+    const model = this.model;
+    if (!model) {
+      return;
+    }
+
+    if (this.extendField) {
+      this._loadingCount++;
+      return;
+    } else {
+      let tableColumnConfigs = model.tableColumns || [];
+
+      const tableColumns = (model[DATA_TABLE_COLUMNS] || []).map(
+        (columnConfig) =>
+          new TableColumn({
+            type: columnConfig.formComponent === 'BwaRichText' ? 'html' : '',
+            ...columnConfig,
+          })
+      );
+
+      tableColumnConfigs = tableColumnConfigs.concat(
+        tableColumns
+          .filter((column) => !tableColumnConfigs.includes(column.name))
+          .map((column) => column.attrName)
+      );
+
+      sortColumn(tableColumns, tableColumnConfigs).forEach((tableColumn) => {
+        this.addColumn(tableColumn);
+      });
+    }
+
+    this._defaultColumnSort = this.getColumns().map((column) => ({
+      name: column.attrName,
+      visible: column.visible,
+    }));
+
+    this.filterPanel.init(
+      [],
+      model[DATA_TABLE_FILTER_COLUMN] || [],
+      model.filterColumns || []
+    );
+
+    this.inited = true;
+
+    this.emit('init-completed');
+  }
+
+  /**
+   * 设置数据
+   * @param {Array<Object>} data 数据列表
+   * @param {Boolean} append 是否追加数据
+   */
+  setData(data, append = false) {
+    if (!append) {
+      this.data.length = 0;
+    }
+
+    this.data.push(...data);
+
+    //设置完数据 以为准备就绪
+    this.ready = true;
+  }
+
+    /**
+     * 加载自定义字段数据并读取label
+     */
+    async setDataBeforeMount (data = []) {
+        if (this.extendFieldInfos.every(a => a.type !== 0)) {
+            return data
+        }
+        const colMap = {}
+        let userListResult = {}
+        if (this.extendFieldInfos.some(a => ['BwaUserSelect', 'BwaUserMultiSelect'].includes(a.component))) {
+            if (this._userService) {
+                userListResult = await this._userService({ name: '' });
+            }
+        }
+        this.extendFieldInfos.forEach( e=>{
+            if (e.type === 0) {
+                if (['BwaSelect', 'BwaMultiSelect'].includes(e.component)) {
+                    colMap[e.name] = e.extendInfo?.options
+                }
+                if (['BwaUserSelect', 'BwaUserMultiSelect'].includes(e.component)) {
+                    colMap[e.name] = userListResult?.data || []
+                }
+            }
+        })
+        // 单个参数
+        const getValueByString = (key, value)=>{
+            let arr = colMap[key] || []
+            let find = arr.find(item=>item.value == value)
+            return find ? find.label : (value || '-')
+        }
+        // 多个参数
+        const getValueByArray = (key, valueList)=>{
+            let list = []
+            valueList.forEach(v => {
+                list.push(getValueByString(key, v))
+            })
+            return list
+        }
+        data.forEach(e=>{
+            let obj = e.columnJson || e.json || {}
+            Object.keys(obj).forEach(key=>{
+                // 字符串, 数字
+                if (['string', 'number'].includes(typeof obj[key])) obj[key] = getValueByString(key, obj[key])
+                // 数组
+                if (Array.isArray(obj[key])) obj[key] = getValueByArray(key, obj[key])
+            })
+        })
+        return data
+    }
+  /**
+   * 加载数据
+   * @returns {Promise} 加载数据的Promise
+   */
+  async load(params) {
+    if (!this.filterPanel.ready) {
+      return new Promise((resolve, reject) => {
+        this._loadCallbacks.push(() => {
+          this.load(params).then(resolve, reject);
+        });
+      });
+    }
+
+    //获取正式数据
+    this.ready = false;
+    // this.locking = true;
+    this._loadingCount++;
+
+    const loadParams = {
+      [this.adapter.pagerNumParamName]: this.pageNum,
+      [this.adapter.recCountParamName]: this.pageSize,
+      ...this.defaultParams,
+      ...this.filterPanel.getAjaxParams(),
+      ...params,
+    };
+
+    //加载完成
+    this.emit('before-load', loadParams);
+
+    return this.adapter
+      .loadDataListHandle(this, loadParams)
+      .then((res) => {
+        //记录总数
+        this.totalRecCount = res[this.adapter.totalRecCountNodeName]
+          ? res[this.adapter.totalRecCountNodeName] * 1
+          : 0;
+
+        const data = (res[this.adapter.dataNodeName] || []).map(
+          this.formatData.bind(this)
+        );
+
+        //设置数据
+          this.setDataBeforeMount(data).then(arr => {
+              this.setData(arr);
+          })
+
+
+        this.emit('load-successfully', res);
+
+        return res;
+      })
+      .catch((e) => {
+        this.emit('load-failed', e);
+        return Promise.reject(e);
+      })
+      .finally(() => {
+        this.emit('load-complete');
+        // this.locking = false;
+        this._loadingCount--;
+      });
+  }
+
+  /**
+   * 刷新
+   * @returns {Promise} 刷新的Promise
+   */
+  refresh() {
+    return this.load();
+  }
+
+  /**
+   * 翻页
+   * @param {Number} pageNum 页码
+   * @returns {Promise} 翻页的Promise
+   */
+  pageTo(pageNum) {
+    this.pageNum = pageNum || 1;
+    this.emit('current-page-change', this.pageNum);
+    return this.refresh();
+  }
+
+  /**
+   * 设置每页显示数量
+   * @param {Number} pageSize 每页显示数量
+   * @returns {Promise} 设置每页显示数量的Promise
+   */
+  setPageSize(pageSize) {
+    this.pageSize = pageSize;
+    this.emit('page-size-change', this.pageSize);
+    return this.refresh();
+  }
+
+  /**
+   * 删除数据
+   * @param {Object} params 参数
+   * @returns {Promise} 删除数据的Promise
+   */
+  async delete(params) {
+    if (this.locking) {
+      return;
+    }
+    // this.locking = true;
+    this._loadingCount++;
+
+    if (typeof params !== 'object') {
+      params = { [this.primaryKey]: params };
+    }
+
+    return this.adapter
+      .deleteHandle(this, params)
+      .then((res) => {
+        this.emit('delete-successfully', res);
+
+        return res;
+      })
+      .catch((e) => {
+        this.emit('delete-failed', e);
+        throw e;
+      })
+      .finally(() => {
+        // this.locking = false;
+        this._loadingCount--;
+        this.emit('delete-complete');
+      });
+  }
+
+  formatExtendFieldInfo(extendFieldInfo) {
+    return {
+      ...super.formatExtendFieldInfo(extendFieldInfo),
+      component: '',
+      formComponent: extendFieldInfo.component,
+      visible: !!extendFieldInfo.enablePageShow,
+    };
+  }
+
+  mergeTableColumn(formatedExtendFieldInfo, modelFieldInfo) {
+    return {
+      ...super.mergeTableColumn(formatedExtendFieldInfo, modelFieldInfo),
+      visible: modelFieldInfo?.visible ?? true,
+    };
+  }
+
+  setExtendFieldInfos(extendFieldInfos) {
+    this.extendFieldInfos = extendFieldInfos;
+
+    const mergedColumnInfos = this.mergeTableColumns(
+      extendFieldInfos,
+      this.model[DATA_TABLE_COLUMNS]
+    );
+
+    const tableColumns = mergedColumnInfos.map(
+      (columnInfo) =>
+        new TableColumn({
+          type: columnInfo.formComponent === 'BwaRichText' ? 'html' : '',
+          ...columnInfo,
+        })
+    );
+
+    this.setColumns(tableColumns);
+
+    this._defaultColumnSort = this.getColumns().map((column) => ({
+      name: column.attrName,
+      visible: column.visible,
+    }));
+
+    this.filterPanel.init(
+      extendFieldInfos,
+      this.model[DATA_TABLE_FILTER_COLUMN] || [],
+      this.model.filterColumns || []
+    );
+
+    this._loadingCount--;
+
+    this.inited = true;
+
+    this.emit('init-completed');
+  }
+
+  /**
+   * 删除完成后刷新列表
+   * @param {Object} params 参数
+   * @returns {Promise} 删除完成后刷新列表的Promise
+   */
+  async refreshAfterDelete(params) {
+    const deleteResult = await this.delete(params);
+
+    this.refresh();
+
+    return deleteResult;
+  }
+
+  /**
+   * 对列进行排序
+   * @param {Array} columns 列
+   * @returns {Array} 排序后的列
+   */
+  sortColumns(columns) {
+    return sortColumn(columns, this.model.tableColumns || []);
+  }
+
+  /**
+   * 重置列排序
+   */
+  resetColumnSort() {
+    if (this.isDefaultColumnSort()) {
+      return;
+    }
+
+    this._defaultColumnSort.forEach((item) => {
+      const column = this.getColumn(item.name);
+
+      if (column) {
+        column.visible = item.visible;
+      }
+    });
+
+    const displayColumns = this._defaultColumnSort
+      .filter((item) => item.visible)
+      .map((item) => {
+        return this.getColumn(item.name);
+      });
+
+    this.setDisplayColumns(displayColumns);
+  }
+
+  /**
+   * 是否为默认列排序
+   * @returns {Boolean} 是否为默认列排序
+   */
+  isDefaultColumnSort() {
+    const displayColumns = this.getDisplayColumns();
+
+    const defaultVisibleColumnInfos = this._defaultColumnSort.filter(
+      (item) => item.visible
+    );
+
+    if (displayColumns.length !== defaultVisibleColumnInfos.length) {
+      return false;
+    }
+
+    for (let i = 0; i < displayColumns.length; i++) {
+      if (
+        displayColumns[i].attrName !== defaultVisibleColumnInfos[i].name ||
+        displayColumns[i].visible !== defaultVisibleColumnInfos[i].visible
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 添加筛选字段
+   * @param {FilterColumn} column 筛选字段
+   */
+  addFilterColumn(column) {
+    this.filterPanel.addColumn(column);
+  }
+
+  /**
+   * 移除筛选字段
+   * @param {FilterColumn} column 筛选字段
+   */
+  removeFilterColumn(column) {
+    this.filterPanel.removeColumn(column);
+  }
+
+  /**
+   * 设置筛选字段
+   * @param {Array} columns
+   * @memberof DataTable
+   */
+  setFilterColumns(columns) {
+    this.filterPanel.setColumns(columns);
+  }
+
+  /**
+   * 获取筛选字段
+   * @returns {Array} 筛选字段
+   */
+  getFilterColumns() {
+    return this.filterPanel.getColumns();
+  }
+
+  /**
+   * 获取筛选字段
+   * @param {String} columnName 字段名称
+   * @returns {FilterColumn} 筛选字段
+   */
+  getFilterColumn(columnName) {
+    return this.filterPanel.getColumn(columnName);
+  }
+
+  /**
+   * 重置搜索参数
+   */
+  resetSearchParams() {
+    this.filterPanel.resetFilterParams();
+  }
+
+  /**
+   * 克隆
+   * @returns {DataTable} 克隆后的DataTable
+   */
+  clone() {
+    const cloned = super.clone();
+    cloned.data = cloneDeep(this.data);
+    cloned.filterPanel = cloneDeep(this.filterPanel);
+    cloned.selection = this.selection
+      .map((select) => {
+        return cloned.data.find(
+          (item) => item[this.primaryKey] === select[this.primaryKey]
+        );
+      })
+      .filter(Boolean);
+
+    return cloned;
+  }
+}

package/src/abstract/FilterColumn.js

@@ -0,0 +1,60 @@
+import DataColumn from './DataColumn';
+
+/**
+ * 筛选列定义
+ */
+export default class FilterColumn extends DataColumn {
+  closable = true;
+
+  attrMapping = {
+    start: { name: '${name}', op: '>=' },
+    end: { name: '${name}', op: '<=' },
+  };
+
+  conditionOper = 'AND';
+
+  formComponent = '';
+
+  twoFieldsDatePicker = false;
+
+  /**
+   * 注入
+   * @param {Object} options 配置
+   * @param {String} options.name 字段名称,如果字段名用,号分隔的话 2个字段将会接受组件返回的数组的2个值,一次类推
+   * @param {String} options.title 字段标题
+   * @param {Boolean} options.visible 字段在渲染组件里是否渲染 默认:true
+   * @param {Object|Function|String} options.component 字段在组件里面渲染的所用到的组件,可以是组件对象,字符串,或者方法,工厂方法必然返回vnode 默认:无,
+   * @param {Object|Function} options.componentProps 字段在组件中渲染所需要的配置参数,如果是函数的话函数的第一个参数会返回当前数据列对象和当前行数据,此时可动态返回所需参数
+   * @returns
+   */
+  constructor(filterPanel, options) {
+    super(options);
+    this.closable = options.closable ?? this.closable;
+    this.attrMapping =
+      options.attrMapping ?? options.whereAttrMapping ?? this.attrMapping;
+    this.filterPanel = filterPanel;
+    this.conditionOper = options.conditionOper;
+    this.formComponent = options.formComponent ?? this.formComponent;
+    this.twoFieldsDatePicker = options.twoFieldsDatePicker;
+  }
+
+  show() {
+    const visible = this.visible;
+
+    super.show();
+
+    if (visible !== this.visible) {
+      this.filterPanel.appliedColumn(this);
+    }
+  }
+
+  hide() {
+    const visible = this.visible;
+
+    super.hide();
+
+    if (visible !== this.visible) {
+      this.filterPanel.cancelAppliedColumn(this);
+    }
+  }
+}