@hzab/data-model

组件模板

- node@14.21

组件

示例

``jsx
import DataModel, {
// 设置 token 到 localStorage 及 cookie，可以设置 opt.hasCookie（setToken(token, { hasCookie: false })） 关闭设置 token 到 cookie 上
setToken,
// 从 cookie 或 localStorage 获取 token
getToken,
// 设置默认兜底的错误信息
setDefaultErrMsg,
// 设置默认网络异常的错误信息
setNetworkErrMsg,
// 设置 DataModel 中默认的 axios
setDefaultAxios,
} 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,
// patch 编辑接口 url
patchApi,
// patch 编辑接口 入参枚举函数
patchMap,
// 删除接口 delete url
deleteApi,
// 批量删除接口 delete url
multipleDeleteApi,
// 统一 response 回调，用于处理定制 response 格式
handleResponse,
// axios 实例对象
axios,
// axios 相关配置
axiosConf,
// getList 接口 axios 相关配置
getListAxiosConf,
// get 接口 axios 相关配置
getAxiosConf,
// create 接口 axios 相关配置
createAxiosConf,
// update 接口 axios 相关配置
updateAxiosConf,
// patch 接口 axios 相关配置
patchAxiosConf,
// delete 接口 axios 相关配置
deleteAxiosConf,
// multipleDelete 接口 axios 相关配置
multipleDeleteAxiosConf,
// 列表接口 get 入参枚举函数
getListReqMap,
// 列表接口 get 出参枚举函数
getListResMap,
// 详情接口 get 入参枚举函数
getReqMap,
// 详情接口 get 出参枚举函数
getResMap,
// 新增接口 post 入参枚举函数
createReqMap,
// 新增接口 post 出参枚举函数
createResMap,
// 编辑接口 put 入参枚举函数
updateReqMap,
// 编辑接口 put 出参枚举函数
updateResMap,
// patch 编辑接口 put 入参枚举函数
patchReqMap,
// patch 编辑接口 put 出参枚举函数
patchResMap,
// 删除接口 delete 入参枚举函数
deleteReqMap,
// 删除接口 delete 出参枚举函数
deleteResMap,
// 批量删除接口 delete 入参枚举函数
multipleDeleteReqMap,
// 批量删除接口 delete 出参枚举函数
multipleDeleteResMap,
// 是否返回完整的接口数据（response.data）
isResponseData,
// 是否直接返回 response
isResponse,
});

// useDataModel，解决 hooks 写法 model 重复实例化导致 query 丢失的问题
function Demo({ orgId }) {
// 第一个入参同 new DataModel，第二个参数为需要监听的动态参数数组
const model = useDataModel(
// 初始值
{
getListApi: "/getList",
query: { orgId },
},
{
// 动态的 params 数据
effectParams: { orgId },
// 动态 query 数据
effectQuery: { orgId },
// 动态数据监听的值
effectTargets: [orgId],
},
);
return ;
}
``

DataModel

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ----------------------- | -------- | ---- | ------ | ---------------------------------------------- |
| query | Object | 否 | - | query 参数对象 |
| createApi | string | 否 | - | post 接口地址 |
| getApi | string | 否 | - | 详情 get 接口地址 |
| getListApi | string | 否 | - | 列表 get 接口地址 |
| updateApi | string | 否 | - | put 接口地址 |
| patchApi | string | 否 | - | patch 接口地址 |
| deleteApi | string | 否 | - | delete 接口地址 |
| multipleDeleteApi | string | 否 | - | 批量删除 delete 接口地址 |
| createMap | Function | 否 | - | createApi 接口提交前的处理函数 |
| getMap | Function | 否 | - | getApi 接口返回结果的处理函数 |
| getListMap | Function | 否 | - | getListApi 接口返回结果的处理函数 |
| getListFunc | Function | 否 | - | 自定义的列表请求函数，优先级高于 getListApi |
| updateMap | Function | 否 | - | updateApi 接口提交前的处理函数 |
| patchMap | Function | 否 | - | patchApi 接口提交前的处理函数 |
| axios | Object | 否 | - | axios 实例对象 |
| axiosConf | Object | 否 | - | axios 相关配置 |
| getListAxiosConf | Object | 否 | - | getList 接口 axios 相关配置 |
| getAxiosConf | Object | 否 | - | get 接口 axios 相关配置 |
| createAxiosConf | Object | 否 | - | create 接口 axios 相关配置 |
| updateAxiosConf | Object | 否 | - | update 接口 axios 相关配置 |
| patchAxiosConf | Object | 否 | - | patch 接口 axios 相关配置 |
| deleteAxiosConf | Object | 否 | - | delete 接口 axios 相关配置 |
| multipleDeleteAxiosConf | Object | 否 | - | multipleDelete 接口 axios 相关配置 |
| getListReqMap | Function | 否 | - | 列表接口 get 入参枚举函数 |
| getListResMap | Function | 否 | - | 列表接口 get 出参枚举函数 |
| getReqMap | Function | 否 | - | 详情接口 get 入参枚举函数 |
| getResMap | Function | 否 | - | 详情接口 get 出参枚举函数 |
| createReqMap | Function | 否 | - | 新增接口 get 入参枚举函数 |
| createResMap | Function | 否 | - | 新增接口 get 出参枚举函数 |
| updateReqMap | Function | 否 | - | 编辑接口 get 入参枚举函数 |
| updateResMap | Function | 否 | - | 编辑接口 get 出参枚举函数 |
| patchReqMap | Function | 否 | - | patch 接口 get 入参枚举函数 |
| patchResMap | Function | 否 | - | patch 接口 get 出参枚举函数 |
| deleteReqMap | Function | 否 | - | 删除接口 get 入参枚举函数 |
| deleteResMap | Function | 否 | - | 删除接口 get 出参枚举函数 |
| multipleDeleteReqMap | Function | 否 | - | 批量删除接口 get 入参枚举函数 |
| multipleDeleteResMap | Function | 否 | - | 批量删除接口 get 出参枚举函数 |
| isResponseData | boolean | 否 | - | 是否返回完整的接口数据（response.data） |
| isResponse | boolean | 否 | - | 是否直接返回 response |
| handleResponse | Function | 否 | - | 统一 response 回调，用于处理定制 response 格式 |

useDataModel

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ----------------- | ------ | ---- | ------ | -------------------------------- |
| initParams | Object | 是 | - | 初始参数，通同 DataModel |
| opt | Object | 否 | - | 配置参数 |
| opt.effectTargets | Object | 否 | - | 动态数据监听的目标 |
| opt.effectParams | Object | 否 | - | 动态的 params 数据，包含了 query |
| opt.effectQuery | Object | 否 | - | 动态的 query 数据 |

array-data-model

- 参数通 DataModel

$3

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| --------------------- | ----------------------------------------- | ---- | ------ | --------------------------------------------------------- |
| sortKey/orderByColumn | string/Object/Array[string]/Array[Object] | 否 | - | 排序字段，支持多维度排序，按照传入的顺序排优先级 |
| sortType/isAsc | string/Object | 否 | - | 排序规则，支持对象配置各字段排序规则 正序: asc 倒序: desc |

$3

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | -------- | ---- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
| 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 配置的文件名
- 在 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

配置

$3

- 本地配置文件：config/config.js

$3

- config/webpack.config.js