1.0.2 • Published 8 days ago
@hzab/data-model v1.0.2
@hzab/data-model
组件模板
- node@14.21
组件
示例
import DataModel, {
// 设置 token 到 localStorage 及 cookie,可以设置 opt.hasCookie(setToken(token, { hasCookie: false })) 关闭设置 token 到 cookie 上
setToken,
// 从 cookie 或 localStorage 获取 token
getToken,
// 设置默认兜底的错误信息
setDefaultErrMsg,
// 设置 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,
// 删除接口 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,
});
// 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 <ListRender model={model} />;
}
DataModel
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
query | Object | 否 | - | query 参数对象 |
createApi | string | 否 | - | post 接口地址 |
getApi | string | 否 | - | 详情 get 接口地址 |
getListApi | string | 否 | - | 列表 get 接口地址 |
updateApi | string | 否 | - | put 接口地址 |
deleteApi | string | 否 | - | delete 接口地址 |
multipleDeleteApi | string | 否 | - | 批量删除 delete 接口地址 |
createMap | Function | 否 | - | createApi 接口提交前的处理函数 |
getMap | Function | 否 | - | getApi 接口返回结果的处理函数 |
getListMap | Function | 否 | - | getListApi 接口返回结果的处理函数 |
getListFunc | Function | 否 | - | 自定义的列表请求函数,优先级高于 getListApi |
updateMap | Function | 否 | - | updateApi 接口提交前的处理函数 |
axios | Object | 否 | - | axios 实例对象 |
axiosConf | Object | 否 | - | 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 出参枚举函数 |
deleteReqMap | Function | 否 | - | 删除接口 get 入参枚举函数 |
deleteResMap | Function | 否 | - | 删除接口 get 出参枚举函数 |
multipleDeleteReqMap | Function | 否 | - | 批量删除接口 get 入参枚举函数 |
multipleDeleteResMap | Function | 否 | - | 批量删除接口 get 出参枚举函数 |
useDataModel
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
initParams | Object | 是 | - | 初始参数,通同 DataModel |
opt | Object | 否 | - | 配置参数 |
opt.effectTargets | Object | 否 | - | 动态数据监听的目标 |
opt.effectParams | Object | 否 | - | 动态的 params 数据,包含了 query |
opt.effectQuery | Object | 否 | - | 动态的 query 数据 |
组件开发流程
- 在 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