@hzab/list-render 0.1.3 → 0.1.4
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 +226 -63
- package/docs/form-linkage.md +203 -0
- package/docs/remote-data.md +72 -22
- package/docs/table.md +86 -0
- package/lib/data-model.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +2 -1
- package/src/data-model.js +2 -225
- package/src/index.js +1 -1
- package/src/list-render.jsx +0 -1
- package/src/pagination-render/index.jsx +2 -2
- package/src/table-render/index.jsx +10 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hzab/list-render",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib",
|
|
6
6
|
"scripts": {
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"author": "CaiYansong",
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"devDependencies": {
|
|
22
|
+
"@hzab/data-model": "^0.0.2",
|
|
22
23
|
"@hzab/webpack-config": "0.0.12",
|
|
23
24
|
"@types/react": "^18.0.26",
|
|
24
25
|
"@types/react-dom": "^18.0.9",
|
package/src/data-model.js
CHANGED
|
@@ -1,228 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import axios from "axios";
|
|
1
|
+
export * from "@hzab/data-model";
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
class DataModel {
|
|
7
|
-
constructor(params) {
|
|
8
|
-
const {
|
|
9
|
-
ctx,
|
|
10
|
-
query,
|
|
11
|
-
createApi,
|
|
12
|
-
createMap,
|
|
13
|
-
getApi,
|
|
14
|
-
getMap,
|
|
15
|
-
getListApi,
|
|
16
|
-
getListMap,
|
|
17
|
-
getListFunc,
|
|
18
|
-
updateApi,
|
|
19
|
-
updateMap,
|
|
20
|
-
deleteApi,
|
|
21
|
-
multipleDeleteApi,
|
|
22
|
-
axios: as,
|
|
23
|
-
axiosConf,
|
|
24
|
-
} = params;
|
|
25
|
-
|
|
26
|
-
this.ctx = ctx || {};
|
|
27
|
-
this.query = query || {};
|
|
28
|
-
this.axios = as || _$Temp.axios || axios;
|
|
29
|
-
this.axiosConf = axiosConf || {};
|
|
30
|
-
|
|
31
|
-
this.createApi = createApi;
|
|
32
|
-
this.createMap = createMap;
|
|
33
|
-
this.getApi = getApi;
|
|
34
|
-
this.getMap = getMap;
|
|
35
|
-
this.getListApi = getListApi;
|
|
36
|
-
this.getListMap = getListMap;
|
|
37
|
-
this.getListFunc = getListFunc;
|
|
38
|
-
this.updateApi = updateApi;
|
|
39
|
-
this.updateMap = updateMap;
|
|
40
|
-
this.deleteApi = deleteApi;
|
|
41
|
-
this.multipleDeleteApi = multipleDeleteApi;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
getApiUrl(api, record, ctx = this.ctx) {
|
|
45
|
-
if (!api) {
|
|
46
|
-
throw new Error("Error api 不能为空", api, record, ctx);
|
|
47
|
-
}
|
|
48
|
-
let apiUrl = api;
|
|
49
|
-
const params = _.merge({}, record, ctx);
|
|
50
|
-
_.each(params, (value, key) => {
|
|
51
|
-
if (!_.isString(value) || !_.isNumber(value) || _.isBoolean(value)) {
|
|
52
|
-
apiUrl = apiUrl.replace(`:${key}`, value);
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
return apiUrl;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
get(q = {}, ctx = {}) {
|
|
59
|
-
let query = _.merge({}, this.query, q);
|
|
60
|
-
query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
|
|
61
|
-
|
|
62
|
-
return new Promise((resolve, reject) => {
|
|
63
|
-
const apiUrl = this.getApiUrl(this.getApi, query, ctx);
|
|
64
|
-
this.axios
|
|
65
|
-
.get(apiUrl, {
|
|
66
|
-
...this.axiosConf,
|
|
67
|
-
params: query,
|
|
68
|
-
})
|
|
69
|
-
.then((response) => {
|
|
70
|
-
this.handleRes(
|
|
71
|
-
response,
|
|
72
|
-
(res) => {
|
|
73
|
-
if (this.getMap) {
|
|
74
|
-
res = this.getMap(res);
|
|
75
|
-
}
|
|
76
|
-
resolve(res);
|
|
77
|
-
},
|
|
78
|
-
reject,
|
|
79
|
-
);
|
|
80
|
-
})
|
|
81
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
async getList(q, ctx) {
|
|
86
|
-
let query = _.merge({}, this.query, q);
|
|
87
|
-
query = _.pickBy(query, (val) => !_.isNil(val) && val !== "");
|
|
88
|
-
|
|
89
|
-
let resultList = null;
|
|
90
|
-
if (this.getListFunc) {
|
|
91
|
-
resultList = await this.getListFunc(query);
|
|
92
|
-
} else {
|
|
93
|
-
const getPro = new Promise((resolve, reject) => {
|
|
94
|
-
const apiUrl = this.getApiUrl(this.getListApi, q, ctx);
|
|
95
|
-
this.axios
|
|
96
|
-
.get(apiUrl, {
|
|
97
|
-
...this.axiosConf,
|
|
98
|
-
params: query,
|
|
99
|
-
})
|
|
100
|
-
.then((response) => {
|
|
101
|
-
this.handleRes(
|
|
102
|
-
response,
|
|
103
|
-
(res) => {
|
|
104
|
-
// data: { list: [], pagination: { current: 0, total: 1 } }
|
|
105
|
-
if (this.getListMap) {
|
|
106
|
-
res.list = res.list.map((record) => this.getListMap(record));
|
|
107
|
-
}
|
|
108
|
-
resolve(res);
|
|
109
|
-
},
|
|
110
|
-
reject,
|
|
111
|
-
);
|
|
112
|
-
})
|
|
113
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
114
|
-
});
|
|
115
|
-
resultList = await getPro;
|
|
116
|
-
}
|
|
117
|
-
return resultList;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
create(params, ctx) {
|
|
121
|
-
return new Promise((resolve, reject) => {
|
|
122
|
-
const apiUrl = this.getApiUrl(this.createApi, params, ctx);
|
|
123
|
-
const opt = { ...this.axiosConf };
|
|
124
|
-
if (params instanceof FormData) {
|
|
125
|
-
opt.headers = { "Content-Type": "multipart/form-data" };
|
|
126
|
-
}
|
|
127
|
-
this.axios
|
|
128
|
-
.post(apiUrl, params, opt)
|
|
129
|
-
.then((response) => {
|
|
130
|
-
this.handleRes(response, resolve, reject);
|
|
131
|
-
})
|
|
132
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
update(params, ctx) {
|
|
137
|
-
return new Promise((resolve, reject) => {
|
|
138
|
-
const apiUrl = this.getApiUrl(this.updateApi, params, ctx);
|
|
139
|
-
const opt = { ...this.axiosConf };
|
|
140
|
-
if (params instanceof FormData) {
|
|
141
|
-
opt.headers = { "Content-Type": "multipart/form-data" };
|
|
142
|
-
}
|
|
143
|
-
this.axios
|
|
144
|
-
.put(apiUrl, params, opt)
|
|
145
|
-
.then((response) => {
|
|
146
|
-
this.handleRes(response, resolve, reject);
|
|
147
|
-
})
|
|
148
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
delete(params, ctx) {
|
|
153
|
-
return new Promise((resolve, reject) => {
|
|
154
|
-
const apiUrl = this.getApiUrl(this.deleteApi, params, ctx);
|
|
155
|
-
this.axios
|
|
156
|
-
.delete(apiUrl, { ...this.axiosConf, ...params })
|
|
157
|
-
.then((response) => {
|
|
158
|
-
this.handleRes(response, resolve, reject);
|
|
159
|
-
})
|
|
160
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
multipleDelete(params, ctx) {
|
|
165
|
-
return new Promise((resolve, reject) => {
|
|
166
|
-
const apiUrl = this.getApiUrl(this.multipleDeleteApi, params, ctx);
|
|
167
|
-
this.axios
|
|
168
|
-
.delete(apiUrl, { ...this.axiosConf, ...params })
|
|
169
|
-
.then((response) => {
|
|
170
|
-
this.handleRes(response, resolve, reject);
|
|
171
|
-
})
|
|
172
|
-
.catch((err) => this.errorHandler(err, reject));
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
handleRes(response, resolve, reject) {
|
|
177
|
-
if (typeof response !== "object") {
|
|
178
|
-
reject(new Error("response not object"));
|
|
179
|
-
return;
|
|
180
|
-
}
|
|
181
|
-
let _res = response;
|
|
182
|
-
// 兼容 传入的是 response.data 的情况
|
|
183
|
-
if (_res.data && _res.headers && _res.request && typeof _res.data?.code === "number") {
|
|
184
|
-
_res = _res.data;
|
|
185
|
-
}
|
|
186
|
-
const { code, message, data, msg } = _res;
|
|
187
|
-
if (code === 200) {
|
|
188
|
-
let _data = data ?? {};
|
|
189
|
-
if (_.isObject(_data) && _data.message === undefined) {
|
|
190
|
-
// 前缀 _ 避免与 data 里已有的 message 冲突
|
|
191
|
-
_data._message = message || msg;
|
|
192
|
-
}
|
|
193
|
-
resolve(_data);
|
|
194
|
-
} else {
|
|
195
|
-
const error = new Error(message || msg);
|
|
196
|
-
error.code = code;
|
|
197
|
-
error.response = response;
|
|
198
|
-
error._message = message || msg;
|
|
199
|
-
reject(error);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
errorHandler(err, reject) {
|
|
204
|
-
const response = err.response || err;
|
|
205
|
-
if (response) {
|
|
206
|
-
const message = (response.data && (response.data.message || response.data.msg)) || response.msg;
|
|
207
|
-
const error = new Error(message || response.statusText || "未知错误");
|
|
208
|
-
error.code = response.status;
|
|
209
|
-
error.response = response;
|
|
210
|
-
if (message) {
|
|
211
|
-
// 前缀 _ 避免与 data 里已有的 message 冲突
|
|
212
|
-
error._message = message;
|
|
213
|
-
}
|
|
214
|
-
return reject(error);
|
|
215
|
-
}
|
|
216
|
-
return reject(err);
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
function setDefaultAxios(ax) {
|
|
221
|
-
if (ax) {
|
|
222
|
-
_$Temp.axios = ax;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
export { axios, DataModel, setDefaultAxios };
|
|
3
|
+
import DataModel from "@hzab/data-model";
|
|
227
4
|
|
|
228
5
|
export default DataModel;
|
package/src/index.js
CHANGED
package/src/list-render.jsx
CHANGED
|
@@ -239,7 +239,6 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
239
239
|
ref={formDialogRef}
|
|
240
240
|
schema={schema}
|
|
241
241
|
dialogConf={props.dialogConf}
|
|
242
|
-
formSlots={props.formSlots}
|
|
243
242
|
formInitialValues={props.formInitialValues}
|
|
244
243
|
onClose={props.onFormDialogClose}
|
|
245
244
|
onSubmit={formState === "edit" ? onEditSubmit : onCreateSubmit}
|
|
@@ -7,7 +7,7 @@ const pageSizeOptions = [10, 20, 50, 100];
|
|
|
7
7
|
|
|
8
8
|
function PaginationRender(props) {
|
|
9
9
|
const [pageSize, setPageSize] = useState(
|
|
10
|
-
props.query?.pageSize || (props.pageSizeOptions ? props.pageSizeOptions[0] : pageSizeOptions[0]),
|
|
10
|
+
props.query?.pageSize || (props.config?.pageSizeOptions ? props.config?.pageSizeOptions[0] : pageSizeOptions[0]),
|
|
11
11
|
);
|
|
12
12
|
const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
|
|
13
13
|
|
|
@@ -43,7 +43,7 @@ function PaginationRender(props) {
|
|
|
43
43
|
current={pageNum}
|
|
44
44
|
pageSize={pageSize}
|
|
45
45
|
onChange={onChange}
|
|
46
|
-
pageSizeOptions={props.pageSizeOptions || pageSizeOptions}
|
|
46
|
+
pageSizeOptions={props.config?.pageSizeOptions || pageSizeOptions}
|
|
47
47
|
total={props.total}
|
|
48
48
|
showTotal={(total) => `总条数 ${total} 条`}
|
|
49
49
|
showSizeChanger
|
|
@@ -111,7 +111,7 @@ function TableRender(props) {
|
|
|
111
111
|
});
|
|
112
112
|
|
|
113
113
|
if (props.hasAction !== false) {
|
|
114
|
-
const { hasEdit, hasDel } = props.config || {};
|
|
114
|
+
const { hasEdit, hasDel, hasDelTips } = props.config || {};
|
|
115
115
|
|
|
116
116
|
const _colConf = props.config?.colConf?._$actions || {};
|
|
117
117
|
|
|
@@ -126,14 +126,14 @@ function TableRender(props) {
|
|
|
126
126
|
return <Slots.tableActionsSlot {...slotProps} />;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
129
|
+
//编辑按钮权限
|
|
130
|
+
const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
|
|
131
|
+
|
|
132
|
+
//删除按钮权限
|
|
133
|
+
const _hasDel = hasDel && typeof hasDel === "function" ? hasEdit(record, index) : hasDel !== false;
|
|
134
|
+
|
|
135
|
+
//删除按钮提示
|
|
136
|
+
const delTips = hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || "确认删除该项?";
|
|
137
137
|
|
|
138
138
|
return (
|
|
139
139
|
<div style={{ width: _colConf?.width, maxWidth: "100%" }}>
|
|
@@ -152,7 +152,7 @@ function TableRender(props) {
|
|
|
152
152
|
{_hasDel ? (
|
|
153
153
|
<Popconfirm
|
|
154
154
|
placement="topRight"
|
|
155
|
-
title={
|
|
155
|
+
title={delTips}
|
|
156
156
|
onConfirm={() => {
|
|
157
157
|
props.onDel && props.onDel(record, index);
|
|
158
158
|
}}
|