@hzab/data-model 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -7
- package/package.json +1 -1
- package/src/data-model.js +2 -2
- package/src/hooks.js +15 -6
package/README.md
CHANGED
|
@@ -74,15 +74,69 @@ const listDM = new DataModel({
|
|
|
74
74
|
// 批量删除接口 delete 出参枚举函数
|
|
75
75
|
multipleDeleteResMap,
|
|
76
76
|
});
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
## API
|
|
80
77
|
|
|
81
|
-
|
|
78
|
+
// useDataModel，解决 hooks 写法 model 重复实例化导致 query 丢失的问题
|
|
79
|
+
function Demo({ orgId }) {
|
|
80
|
+
// 第一个入参同 new DataModel，第二个参数为需要监听的动态参数数组
|
|
81
|
+
const model = useDataModel(
|
|
82
|
+
// 初始值
|
|
83
|
+
{
|
|
84
|
+
getListApi: "/getList",
|
|
85
|
+
query: { orgId },
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
// 动态的 params 数据
|
|
89
|
+
effectParams: { orgId },
|
|
90
|
+
// 动态 query 数据
|
|
91
|
+
effectQuery: { orgId },
|
|
92
|
+
// 动态数据监听的值
|
|
93
|
+
effectTargets: [orgId],
|
|
94
|
+
},
|
|
95
|
+
);
|
|
96
|
+
return <ListRender model={model} />;
|
|
97
|
+
}
|
|
98
|
+
```
|
|
82
99
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
|
100
|
+
## DataModel
|
|
101
|
+
|
|
102
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
103
|
+
| -------------------- | -------- | ---- | ------ | ------------------------------------------- |
|
|
104
|
+
| query | Object | 否 | - | query 参数对象 |
|
|
105
|
+
| createApi | string | 否 | - | post 接口地址 |
|
|
106
|
+
| getApi | string | 否 | - | 详情 get 接口地址 |
|
|
107
|
+
| getListApi | string | 否 | - | 列表 get 接口地址 |
|
|
108
|
+
| updateApi | string | 否 | - | put 接口地址 |
|
|
109
|
+
| deleteApi | string | 否 | - | delete 接口地址 |
|
|
110
|
+
| multipleDeleteApi | string | 否 | - | 批量删除 delete 接口地址 |
|
|
111
|
+
| createMap | Function | 否 | - | createApi 接口提交前的处理函数 |
|
|
112
|
+
| getMap | Function | 否 | - | getApi 接口返回结果的处理函数 |
|
|
113
|
+
| getListMap | Function | 否 | - | getListApi 接口返回结果的处理函数 |
|
|
114
|
+
| getListFunc | Function | 否 | - | 自定义的列表请求函数，优先级高于 getListApi |
|
|
115
|
+
| updateMap | Function | 否 | - | updateApi 接口提交前的处理函数 |
|
|
116
|
+
| axios | Object | 否 | - | axios 实例对象 |
|
|
117
|
+
| axiosConf | Object | 否 | - | axios 相关配置 |
|
|
118
|
+
| getListReqMap | Function | 否 | - | 列表接口 get 入参枚举函数 |
|
|
119
|
+
| getListResMap | Function | 否 | - | 列表接口 get 出参枚举函数 |
|
|
120
|
+
| getReqMap | Function | 否 | - | 详情接口 get 入参枚举函数 |
|
|
121
|
+
| getResMap | Function | 否 | - | 详情接口 get 出参枚举函数 |
|
|
122
|
+
| createReqMap | Function | 否 | - | 新增接口 get 入参枚举函数 |
|
|
123
|
+
| createResMap | Function | 否 | - | 新增接口 get 出参枚举函数 |
|
|
124
|
+
| updateReqMap | Function | 否 | - | 编辑接口 get 入参枚举函数 |
|
|
125
|
+
| updateResMap | Function | 否 | - | 编辑接口 get 出参枚举函数 |
|
|
126
|
+
| deleteReqMap | Function | 否 | - | 删除接口 get 入参枚举函数 |
|
|
127
|
+
| deleteResMap | Function | 否 | - | 删除接口 get 出参枚举函数 |
|
|
128
|
+
| multipleDeleteReqMap | Function | 否 | - | 批量删除接口 get 入参枚举函数 |
|
|
129
|
+
| multipleDeleteResMap | Function | 否 | - | 批量删除接口 get 出参枚举函数 |
|
|
130
|
+
|
|
131
|
+
## useDataModel
|
|
132
|
+
|
|
133
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
134
|
+
| ----------------- | ------ | ---- | ------ | -------------------------------- |
|
|
135
|
+
| initParams | Object | 是 | - | 初始参数，通同 DataModel |
|
|
136
|
+
| opt | Object | 否 | - | 配置参数 |
|
|
137
|
+
| opt.effectTargets | Object | 否 | - | 动态数据监听的目标 |
|
|
138
|
+
| opt.effectParams | Object | 否 | - | 动态的 params 数据，包含了 query |
|
|
139
|
+
| opt.effectQuery | Object | 否 | - | 动态的 query 数据 |
|
|
86
140
|
|
|
87
141
|
# 组件开发流程
|
|
88
142
|
|
package/package.json
CHANGED
package/src/data-model.js
CHANGED
|
@@ -227,7 +227,7 @@ class DataModel {
|
|
|
227
227
|
return new Promise((resolve, reject) => {
|
|
228
228
|
const apiUrl = this.getApiUrl(this.deleteApi, _params, ctx);
|
|
229
229
|
this.axios
|
|
230
|
-
.delete(apiUrl, { ...this.axiosConf,
|
|
230
|
+
.delete(apiUrl, { ...this.axiosConf, params: _params })
|
|
231
231
|
.then((response) => {
|
|
232
232
|
this.handleRes(
|
|
233
233
|
response,
|
|
@@ -252,7 +252,7 @@ class DataModel {
|
|
|
252
252
|
return new Promise((resolve, reject) => {
|
|
253
253
|
const apiUrl = this.getApiUrl(this.multipleDeleteApi, _params, ctx);
|
|
254
254
|
this.axios
|
|
255
|
-
.delete(apiUrl, { ...this.axiosConf,
|
|
255
|
+
.delete(apiUrl, { ...this.axiosConf, params: _params })
|
|
256
256
|
.then((response) => {
|
|
257
257
|
this.handleRes(
|
|
258
258
|
response,
|
package/src/hooks.js
CHANGED
|
@@ -5,14 +5,23 @@ import DataModel from "./data-model";
|
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* 解决 hooks 重复实例化导致 query 丢失的问题
|
|
8
|
-
* @param {
|
|
9
|
-
* @param {
|
|
8
|
+
* @param {Object} initParams 初始参数
|
|
9
|
+
* @param {Object} opt
|
|
10
|
+
* @param {Object} opt.effectTargets 动态数据监听的目标
|
|
11
|
+
* @param {Object} opt.effectParams 动态的 params 数据，包含了 query
|
|
12
|
+
* @param {Object} opt.effectQuery 动态的 query 数据
|
|
10
13
|
* @returns
|
|
11
14
|
*/
|
|
12
|
-
export const useDataModel = function (
|
|
13
|
-
const model = useRef(new DataModel(
|
|
15
|
+
export const useDataModel = function (initParams = {}, opt = {}) {
|
|
16
|
+
const model = useRef(new DataModel(initParams));
|
|
14
17
|
return useMemo(() => {
|
|
15
|
-
|
|
18
|
+
const { effectParams, effectQuery } = opt || {};
|
|
19
|
+
if (effectParams) {
|
|
20
|
+
merge(model.current, effectParams);
|
|
21
|
+
}
|
|
22
|
+
if (effectQuery) {
|
|
23
|
+
merge(model.current.query, effectQuery);
|
|
24
|
+
}
|
|
16
25
|
return model.current;
|
|
17
|
-
},
|
|
26
|
+
}, opt.effectTargets || []);
|
|
18
27
|
};
|