@hzab/data-model 1.6.0 → 1.7.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# @hzab/data-model@1.7.2
+
+feat: axios.js getCancelTokenSource 获取 axios.CancelToken.source， 用于取消请求
+
+# @hzab/data-model@1.7.1
+
+feat: sortKey/orderByColumn 支持对象格式，支持定义数据类型、自定义数据处理函数；自定义数据对比函数
+
+# @hzab/data-model@1.7.0
+
+feat: 本地数据支持排序查询列表数据
+
+# @hzab/data-model@1.6.1
+
+fix: array-data-modal getMap getListMap 修复；getListMap、getListResMap 逻辑优化
+
 # @hzab/data-model@1.6.0
 
 fix: 注释；通用函数抽离

package/README.md

@@ -182,6 +182,28 @@ function Demo({ orgId }) {
 | opt.effectParams  | Object | 否   | -      | 动态的 params 数据，包含了 query |
 | opt.effectQuery   | Object | 否   | -      | 动态的 query 数据                |
 
+## array-data-model
+
+- 参数通 DataModel
+
+### query 配置
+
+| 参数                  | 类型                                      | 必填 | 默认值 | 说明                                                      |
+| --------------------- | ----------------------------------------- | ---- | ------ | --------------------------------------------------------- |
+| sortKey/orderByColumn | string/Object/Array[string]/Array[Object] | 否   | -      | 排序字段，支持多维度排序，按照传入的顺序排优先级          |
+| sortType/isAsc        | string/Object                             | 否   | -      | 排序规则，支持对象配置各字段排序规则 正序: asc 倒序: desc |
+
+### sortKey/orderByColumn Object 配置
+
+| 参数          | 类型     | 必填 | 默认值 | 说明                                                                                                                       |
+| ------------- | -------- | ---- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
+| path          | string   | 否   | -      | path 取值路径字符串                                                                                                        |
+| type          | string   | 否   | -      | 值类型 用于进行内部相关转换 date                                                                                           |
+| customFormat  | Function | 否   | -      | 自定义数据处理函数                                                                                                         |
+| customCompare | Function | 否   | -      | 自定义数据对比函数 (a, b)=>number，如果 a 小于 b，返回值为负数，如果 a 大于 b，返回值为正数，如果两个元素相等，返回值为 0。NaN 被视为 0。 |
+
+- type 目前支持的类型: date
+
 # 组件开发流程
 
 - 在 config/webpack.config.js 中按需修改 library 配置的文件名

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/data-model",
-  "version": "1.6.0",
+  "version": "1.7.2",
   "description": "data model",
   "main": "src",
   "scripts": {
@@ -43,6 +43,7 @@
     "js-cookie": ">=3.0.5"
   },
   "dependencies": {
+    "dayjs": "^1.11.7",
     "axios": ">=1.6.2",
     "js-cookie": ">=3.0.5",
     "nanoid": "^3.3.7"

package/src/ArrayUtils.js

@@ -1,5 +1,6 @@
 import { nanoid } from "nanoid";
 import _ from "lodash";
+import dayjs from "dayjs";
 
 export const STATE_CODE = {
   SUC: 200,
@@ -57,8 +58,11 @@ export class ArrayUtils {
    * @param {*} query
    */
   findListByQuery(query) {
-    const { pageNum = 1, pageSize = 10 } = query || {};
-    const { _list } = this;
+    const { pageNum = 1, pageSize = 10, sortKey, sortType, orderByColumn, isAsc } = query || {};
+    // 排序
+    const _list = this.getSortList(sortKey || orderByColumn, sortType || isAsc);
+
+    // 分页
     // 边界检查
     if (pageNum < 1 || pageSize <= 0) {
       return { list: [], pagination: { current: 1, total: 0 } };
@@ -76,6 +80,107 @@ export class ArrayUtils {
     return { list: _list.slice(startIndex, endIndex), pagination: { current: pageNum, total: this.getCount() } };
   }
 
+  /**
+   * 对目标数据进行多维度排序
+   * @param list
+   * @param {*} sortKey 排序的字段 支持 a.b.c 写法
+   * @param {*} sortType 排序方式 正序: asc 倒序: desc
+   * @returns
+   */
+  getSortList(sortKey, sortType) {
+    const _list = _.cloneDeep(this._list);
+    if (!sortKey && !sortType) {
+      return _list;
+    }
+    const paths = Array.isArray(sortKey) ? sortKey : [sortKey];
+    _list.sort((a, b) => {
+      return this.compareData(a, b, { paths, sortType });
+    });
+    return _list;
+  }
+
+  /**
+   * 根据传入的 paths 比较对象目标数据先后顺序
+   * @param dataA
+   * @param dataB
+   * @param opt
+   * @param opt.paths 数据 path 数组
+   * @param opt.pathIdx 当前数据下标
+   * @param opt.sortType 排序规则
+   * @returns
+   */
+  compareData(dataA, dataB, opt = { paths, pathIdx: 0, sortType: "desc" }) {
+    const { paths, pathIdx = 0, sortType = "desc" } = opt;
+    const path = paths[pathIdx];
+    let _path = path;
+
+    if (path && typeof path === "object") {
+      // 外部自定义比较函数
+      if (typeof path.customCompare === "function") {
+        return direction * path.customCompare(dataA, dataB, opt);
+      }
+      _path = path.path;
+    }
+
+    /** 排序规则 */
+    let direction = 1;
+    // 兼容 string 及 object 类型
+    let _sortType = sortType;
+    if (typeof _sortType === "object") {
+      _sortType = _sortType[_path];
+    }
+    if (_sortType === "asc") {
+      direction = -1;
+    }
+
+    let valueA = this.handleValByKey(dataA, path);
+    let valueB = this.handleValByKey(dataB, path);
+    if (valueA < valueB) {
+      return -1 * direction;
+    }
+    if (valueA > valueB) {
+      return 1 * direction;
+    }
+
+    if (pathIdx + 1 >= paths.length) {
+      return 0;
+    }
+
+    if (valueA == valueB) {
+      // 继续使用次选排序规则排序
+      return this.compareData(dataA, dataB, { ...opt, pathIdx: pathIdx + 1 });
+    }
+  }
+
+  /**
+   * 根据 path 配置对数据进行处理
+   * @param {Object} data 数据
+   * @param {string/Object} path 取值路径字符串 或 取值配置
+   * @param {string} path.path 取值路径字符串
+   * @param {string} path.type 值类型 用于进行相关转换
+   * @param {Function} path.customFormat 自定义数据处理函数
+   */
+  handleValByKey(data, path) {
+    if (typeof path === "string") {
+      return _.get(data, path);
+    }
+    if (path === null || path === undefined) {
+      return;
+    }
+    if (typeof path === "object") {
+      let val = _.get(data, path.path);
+      // 日期格式转为时间戳进行比较
+      if (path?.type === "date") {
+        val = dayjs(val).valueOf();
+      }
+      // 外部自定义数据格式函数,便于排序比较
+      if (typeof path?.customFormat === "function") {
+        val = customFormat(val);
+      }
+      return val;
+    }
+  }
+
   /**
    * 获取完整列表
    */
@@ -99,6 +204,7 @@ export class ArrayUtils {
     // TODO: id 去重
     const item = _.cloneDeep(data);
     this.setId(item);
+    this.setCreateTime(item);
     this._list.push(item);
     return STATE_CODE.SUC;
   }
@@ -111,6 +217,7 @@ export class ArrayUtils {
     // TODO: id 去重
     const item = _.cloneDeep(data);
     this.setId(item);
+    this.setCreateTime(item);
     this._list.unshift(item);
     return STATE_CODE.SUC;
   }
@@ -131,6 +238,7 @@ export class ArrayUtils {
       return STATE_CODE.NOT_FOUNT;
     }
     _list.splice(idx, 1, data);
+    this.setUpdateTime(data);
     return STATE_CODE.SUC;
   }
 
@@ -152,6 +260,7 @@ export class ArrayUtils {
     Object.keys(data).forEach((key) => {
       item[key] = data[key];
     });
+    this.setUpdateTime(data);
     return STATE_CODE.SUC;
   }
 
@@ -186,6 +295,22 @@ export class ArrayUtils {
     }
     return item;
   }
+
+  /**
+   * 设置创建时间
+   * @param {*} item
+   */
+  setCreateTime(item) {
+    item.createTime = Date.now();
+  }
+
+  /**
+   * 设置更新时间
+   * @param {*} item
+   */
+  setUpdateTime(item) {
+    item.createTime = Date.now();
+  }
 }
 
 export const hasId = (id) => {

package/src/array-data-model.js

@@ -121,6 +121,9 @@ class ArrayDataModel extends ArrayUtils {
 
     return new Promise((resolve, reject) => {
       let res = this.findItem(query);
+      if (this.getMap) {
+        res = this.getMap(res);
+      }
       if (this.getResMap) {
         res = this.getResMap(res);
       }
@@ -144,15 +147,15 @@ class ArrayDataModel extends ArrayUtils {
     let resultList = null;
     if (this.getListFunc) {
       resultList = await this.getListFunc(query);
-      if (this.getListResMap) {
-        resultList = this.getListResMap(resultList);
-      }
     } else {
       const getPro = this.findListByQuery(query);
       resultList = await getPro;
-      if (this.getListResMap) {
-        resultList = this.getListResMap(resultList);
-      }
+    }
+    if (this.getListMap) {
+      resultList.list = resultList.list.map((record) => this.getListMap(record));
+    }
+    if (this.getListResMap) {
+      resultList = this.getListResMap(resultList);
     }
     return resultList;
   }

package/src/axios.js

@@ -113,8 +113,20 @@ export function setAxAuthorization(token) {
   setAxHeaders("Authorization", token);
 }
 
+/**
+ * 设置 baseUrl
+ * @param {*} url
+ */
 export function setAxBaseUrl(url) {
   setAxDefaults("baseURL", url);
 }
 
+/**
+ * 获取 axios.CancelToken.source， 用于取消请求
+ * @returns
+ */
+export function getCancelTokenSource() {
+  return axios.CancelToken.source();
+}
+
 export default axios;

package/src/data-model.js

@@ -233,9 +233,6 @@ class DataModel {
     let resultList = null;
     if (this.getListFunc) {
       resultList = await this.getListFunc(query);
-      if (this.getListResMap) {
-        resultList = this.getListResMap(resultList);
-      }
     } else {
       const getPro = new Promise((resolve, reject) => {
         const apiUrl = this.getApiUrl(this.getListApi, q, ctx, { from: "getList" });
@@ -251,12 +248,6 @@ class DataModel {
               response,
               (res) => {
                 // data: { list: [], pagination: { current: 0, total: 1 } }
-                if (this.getListMap) {
-                  res.list = res.list.map((record) => this.getListMap(record));
-                }
-                if (this.getListResMap) {
-                  res = this.getListResMap(res);
-                }
                 resolve(res);
               },
               reject,
@@ -266,6 +257,12 @@ class DataModel {
       });
       resultList = await getPro;
     }
+    if (this.getListMap) {
+      resultList.list = resultList.list.map((record) => this.getListMap(record));
+    }
+    if (this.getListResMap) {
+      resultList = this.getListResMap(resultList);
+    }
     return resultList;
   }