@hzab/data-model 0.0.1

package/README.md

@@ -0,0 +1,120 @@
+# @hzab/data-model
+
+组件模板
+
+- node@14.21
+
+# 组件
+
+## 示例
+
+```jsx
+import DataModel from "@hzab/data-model";
+
+const listDM = new DataModel({
+  // query 参数
+  query,
+  // 新增接口 post url
+  createApi,
+  // 新增接口 post 入参枚举函数
+  createMap,
+  // 详情接口 get url
+  getApi,
+  // 详情接口 get 出参枚举函数
+  getMap,
+  // 详情接口 get url
+  getListApi,
+  // 列表接口 get 出参枚举函数
+  getListMap,
+  // 列表请求函数
+  getListFunc,
+  // 编辑接口 put url
+  updateApi,
+  // 编辑接口 put 入参枚举函数
+  updateMap,
+  // 删除接口 delete url
+  deleteApi,
+  // 批量删除接口 delete url
+  multipleDeleteApi,
+  // axios 实例对象
+  axios,
+  // axios 相关配置
+  axiosConf,
+  // 列表接口 get 入参枚举函数
+  getListReqMap,
+  // 列表接口 get 出参枚举函数
+  getListResMap,
+  // 详情接口 get 入参枚举函数
+  getReqMap,
+  // 详情接口 get 出参枚举函数
+  getResMap,
+  // 新增接口 post 入参枚举函数
+  createReqMap,
+  // 新增接口 post 出参枚举函数
+  createResMap,
+  // 编辑接口 put 入参枚举函数
+  updateReqMap,
+  // 编辑接口 put 出参枚举函数
+  updateResMap,
+  // 删除接口 delete 入参枚举函数
+  deleteReqMap,
+  // 删除接口 delete 出参枚举函数
+  deleteResMap,
+  // 批量删除接口 delete 入参枚举函数
+  multipleDeleteReqMap,
+  // 批量删除接口 delete 出参枚举函数
+  multipleDeleteResMap,
+});
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数 | 类型   | 必填 | 默认值 | 说明 |
+| ---- | ------ | ---- | ------ | ---- |
+|      | string | 否   | -      |      |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+- lib 组件打包编译后的代码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - lib
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@hzab/data-model",
+  "version": "0.0.1",
+  "description": "data model",
+  "main": "src",
+  "scripts": {
+    "dev": "npm run prepare && webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "0.0.4",
+    "@hzab/webpack-config": "^0.0.15",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.14.0",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/src/axios.js

@@ -0,0 +1,75 @@
+import axios from "axios";
+
+export const temp = { axiosList: [axios] };
+
+export function setAxios(axiosList) {
+  temp.axiosList = [...temp.axiosList, ...axiosList];
+  return temp.axiosList;
+}
+
+/**
+ * axios 守卫
+ * @param {Function} cb
+ */
+export function setAxRequest(cb) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.interceptors.request.use(cb);
+  });
+}
+
+/**
+ * 请求到结果的拦截处理
+ * @param {Function} cb
+ */
+export function setAxResponse(cb, errCb) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.interceptors.response.use(
+      cb,
+      errCb ||
+        ((error) => {
+          console.error("Error axios response: ", error);
+          return Promise.reject(error);
+        }),
+    );
+  });
+}
+
+/**
+ * 设置 axios.defaults
+ * @param {string} key
+ * @param {*} val
+ */
+export function setAxDefaults(key, val) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.defaults[key] = val;
+  });
+}
+
+/**
+ * 设置 headers
+ * @param {string} key
+ * @param {*} val
+ */
+export function setAxHeaders(key, val) {
+  temp.axiosList?.forEach((_ax) => {
+    _ax.defaults.headers[key] = val;
+  });
+}
+
+/**
+ * 设置 timeout
+ * @param {number} timeout
+ */
+export function setAxTimeout(timeout = 5000) {
+  setAxDefaults("timeout", timeout);
+}
+
+/**
+ * 设置 token
+ * @param {string} token
+ */
+export function setAxToken(token) {
+  setAxTimeout("Authorization", token);
+}
+
+export default axios;

package/src/data-model.js

@@ -0,0 +1,324 @@
+import _ from "lodash";
+import axios from "axios";
+
+const _$Temp = {};
+
+class DataModel {
+  constructor(params) {
+    const {
+      ctx,
+      query,
+      createApi,
+      createMap,
+      getApi,
+      getMap,
+      getListApi,
+      getListMap,
+      getListFunc,
+      updateApi,
+      updateMap,
+      deleteApi,
+      multipleDeleteApi,
+      axios: as,
+      axiosConf,
+    } = params;
+
+    this.ctx = ctx || {};
+    this.query = query || {};
+    this.axios = as || _$Temp.axios || axios;
+    this.axiosConf = axiosConf || {};
+
+    this.createApi = createApi;
+    this.createMap = createMap;
+    this.getApi = getApi;
+    this.getMap = getMap;
+    this.getListApi = getListApi;
+    this.getListMap = getListMap;
+    this.getListFunc = getListFunc;
+    this.updateApi = updateApi;
+    this.updateMap = updateMap;
+    this.deleteApi = deleteApi;
+    this.multipleDeleteApi = multipleDeleteApi;
+
+    const {
+      getListReqMap,
+      getListResMap,
+      getReqMap,
+      getResMap,
+      createReqMap,
+      createResMap,
+      updateReqMap,
+      updateResMap,
+      deleteReqMap,
+      deleteResMap,
+      multipleDeleteReqMap,
+      multipleDeleteResMap,
+    } = params || {};
+    this.getListReqMap = getListReqMap;
+    this.getListResMap = getListResMap;
+    this.getReqMap = getReqMap;
+    this.getResMap = getResMap;
+    this.createReqMap = createReqMap;
+    this.createResMap = createResMap;
+    this.updateReqMap = updateReqMap;
+    this.updateResMap = updateResMap;
+    this.deleteReqMap = deleteReqMap;
+    this.deleteResMap = deleteResMap;
+    this.multipleDeleteReqMap = multipleDeleteReqMap;
+    this.multipleDeleteResMap = multipleDeleteResMap;
+  }
+
+  getApiUrl(api, record, ctx = this.ctx) {
+    if (!api) {
+      throw new Error("Error api 不能为空", api, record, ctx);
+    }
+    let apiUrl = api;
+    const params = _.merge({}, record, ctx);
+    _.each(params, (value, key) => {
+      if (!_.isString(value) || !_.isNumber(value) || _.isBoolean(value)) {
+        apiUrl = apiUrl.replace(`:${key}`, value);
+      }
+    });
+    return apiUrl;
+  }
+
+  get(q = {}, ctx = {}) {
+    let query = _.merge({}, this.query, q);
+    query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
+
+    if (this.getReqMap) {
+      query = this.getReqMap(query);
+    }
+
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.getApi, query, ctx);
+      this.axios
+        .get(apiUrl, {
+          ...this.axiosConf,
+          params: query,
+        })
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.getMap) {
+                res = this.getMap(res);
+              }
+              if (this.getResMap) {
+                res = this.getResMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  async getList(q, ctx) {
+    let query = _.merge({}, this.query, q);
+    query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
+
+    if (this.getListReqMap) {
+      query = this.getListReqMap(query);
+    }
+
+    let resultList = null;
+    if (this.getListFunc) {
+      resultList = await this.getListFunc(query);
+    } else {
+      const getPro = new Promise((resolve, reject) => {
+        const apiUrl = this.getApiUrl(this.getListApi, q, ctx);
+        this.axios
+          .get(apiUrl, {
+            ...this.axiosConf,
+            params: query,
+          })
+          .then((response) => {
+            this.handleRes(
+              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.list = res.list.map((record) => this.getListResMap(record));
+                }
+                resolve(res);
+              },
+              reject,
+            );
+          })
+          .catch((err) => this.errorHandler(err, reject));
+      });
+      resultList = await getPro;
+    }
+    return resultList;
+  }
+
+  create(params, ctx) {
+    let _params = _.cloneDeep(params);
+    if (this.createReqMap) {
+      _params = this.createReqMap(_params);
+    }
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.createApi, _params, ctx);
+      const opt = { ...this.axiosConf };
+      if (_params instanceof FormData) {
+        opt.headers = { "Content-Type": "multipart/form-data" };
+      }
+      this.axios
+        .post(apiUrl, _params, opt)
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.createResMap) {
+                res = this.createResMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  update(params, ctx) {
+    let _params = _.cloneDeep(params);
+    if (this.updateReqMap) {
+      _params = this.updateReqMap(_params);
+    }
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.updateApi, _params, ctx);
+      const opt = { ...this.axiosConf };
+      if (_params instanceof FormData) {
+        opt.headers = { "Content-Type": "multipart/form-data" };
+      }
+      this.axios
+        .put(apiUrl, _params, opt)
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.updateResMap) {
+                res = this.updateResMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  delete(params, ctx) {
+    let _params = _.cloneDeep(params);
+    if (this.deleteReqMap) {
+      _params = this.deleteReqMap(_params);
+    }
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.deleteApi, _params, ctx);
+      this.axios
+        .delete(apiUrl, { ...this.axiosConf, ..._params })
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.deleteResMap) {
+                res = this.deleteResMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  multipleDelete(params, ctx) {
+    let _params = _.cloneDeep(params);
+    if (this.multipleDeleteReqMap) {
+      _params = this.multipleDeleteReqMap(_params);
+    }
+    return new Promise((resolve, reject) => {
+      const apiUrl = this.getApiUrl(this.multipleDeleteApi, _params, ctx);
+      this.axios
+        .delete(apiUrl, { ...this.axiosConf, ..._params })
+        .then((response) => {
+          this.handleRes(
+            response,
+            (res) => {
+              if (this.multipleDeleteResMap) {
+                res = this.multipleDeleteResMap(res);
+              }
+              resolve(res);
+            },
+            reject,
+          );
+        })
+        .catch((err) => this.errorHandler(err, reject));
+    });
+  }
+
+  handleRes(response, resolve, reject) {
+    if (typeof response !== "object") {
+      reject(new Error("response not object"));
+      return;
+    }
+    let _res = response;
+    //  兼容 传入的是 response.data 的情况
+    if (_res.data && _res.headers && _res.request && typeof _res.data?.code === "number") {
+      _res = _res.data;
+    }
+    const { code, message, data, msg } = _res;
+    if (code === 200) {
+      let _data = data ?? {};
+      if (_.isObject(_data) && _data.message === undefined) {
+        // 前缀 _ 避免与 data 里已有的 message 冲突
+        _data._message = message || msg;
+        _data._msg = message || msg;
+      }
+      resolve(_data);
+    } else {
+      const error = new Error(message || msg);
+      error.code = code;
+      error.response = response;
+      error._message = message || msg;
+      error._msg = message || msg;
+      reject(error);
+    }
+  }
+
+  errorHandler(err, reject) {
+    const response = err.response || err;
+    if (response) {
+      const message = (response.data && (response.data.message || response.data.msg)) || response.msg;
+      const error = new Error(message || response.statusText || "未知错误");
+      error.code = response.status;
+      error.response = response;
+      if (message) {
+        // 前缀 _ 避免与 data 里已有的 message 冲突
+        error._message = message;
+        error._msg = message;
+      }
+      return reject(error);
+    }
+    return reject(err);
+  }
+}
+
+function setDefaultAxios(ax) {
+  if (ax) {
+    _$Temp.axios = ax;
+  }
+}
+
+export { axios, DataModel, setDefaultAxios };
+
+export default DataModel;

package/src/index.js

@@ -0,0 +1,8 @@
+import axios from "./axios";
+import DataModel from "./data-model";
+
+export * from "./axios";
+
+export { axios, DataModel };
+
+export default DataModel;