@hzab/list-render 1.9.4-beta → 1.9.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/CHANGELOG.md +4 -0
- package/package.json +1 -1
- package/src/list-render.jsx +2 -8
- package/src/table-render/index.jsx +3 -62
- package/src/table-render/index.less +0 -24
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
package/src/list-render.jsx
CHANGED
|
@@ -50,7 +50,6 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
50
50
|
const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
|
|
51
51
|
const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
|
|
52
52
|
const getListSourceRef = useRef();
|
|
53
|
-
const [showSearch, setShowSearch] = useState(true);
|
|
54
53
|
|
|
55
54
|
useImperativeHandle(parentRef, () => ({
|
|
56
55
|
getList,
|
|
@@ -101,7 +100,7 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
101
100
|
if (!model?.getList && Array.isArray(props.list)) {
|
|
102
101
|
setListLoading(true);
|
|
103
102
|
const { list } = props;
|
|
104
|
-
const { pageNum = 1, pageSize = 10 } =
|
|
103
|
+
const { pageNum = 1, pageSize = 10 } = paginationQueryRef.current || {};
|
|
105
104
|
setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
|
|
106
105
|
setTotal(list.length);
|
|
107
106
|
props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
|
|
@@ -325,14 +324,10 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
325
324
|
const modalProps = { ...props.dialogProps, ...props.modalProps };
|
|
326
325
|
const modalFormMount = props.dialogFormMount ?? props.modalFormMount;
|
|
327
326
|
|
|
328
|
-
const handleSetShowSearch = () => {
|
|
329
|
-
setShowSearch(!showSearch);
|
|
330
|
-
};
|
|
331
|
-
|
|
332
327
|
return (
|
|
333
328
|
<div className={`list-render ${props.className}`}>
|
|
334
329
|
<div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
|
|
335
|
-
{props.hasQuery !== false
|
|
330
|
+
{props.hasQuery !== false ? (
|
|
336
331
|
<QueryRender
|
|
337
332
|
ref={queryRef}
|
|
338
333
|
schema={schema}
|
|
@@ -383,7 +378,6 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
383
378
|
onDetail={onDetail}
|
|
384
379
|
onSearch={onSearch}
|
|
385
380
|
getList={getList}
|
|
386
|
-
setShowSearch={handleSetShowSearch}
|
|
387
381
|
loading={listLoading}
|
|
388
382
|
tableProps={props.tableProps}
|
|
389
383
|
getFieldListOpt={props.getFieldListOpt}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useEffect, useState, useMemo, useCallback, useRef } from "react";
|
|
2
|
-
import { Table, Button, Popconfirm, Tooltip
|
|
2
|
+
import { Table, Button, Popconfirm, Tooltip } from "antd";
|
|
3
3
|
import { Schema } from "@formily/json-schema";
|
|
4
|
-
import { QuestionCircleOutlined
|
|
4
|
+
import { QuestionCircleOutlined } from "@ant-design/icons";
|
|
5
5
|
import _ from "lodash";
|
|
6
6
|
|
|
7
7
|
import { FormilyField } from "../components/Formily/FormilyField";
|
|
@@ -19,15 +19,8 @@ const scenario = "table-render";
|
|
|
19
19
|
function TableRender(props) {
|
|
20
20
|
const { config = {}, query = {}, i18n } = props;
|
|
21
21
|
const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
|
|
22
|
-
const {
|
|
23
|
-
orderColType,
|
|
24
|
-
orderColWidth,
|
|
25
|
-
tableEmptyValue,
|
|
26
|
-
isShowTableFilter = false,
|
|
27
|
-
isTableSortXIdex = false,
|
|
28
|
-
} = config || {};
|
|
22
|
+
const { orderColType, orderColWidth, tableEmptyValue, isTableSortXIdex = false } = config || {};
|
|
29
23
|
const [columns, setColumns] = useState([]);
|
|
30
|
-
const [columnList, setColumnList] = useState([]);
|
|
31
24
|
|
|
32
25
|
const formilyRef = useRef({
|
|
33
26
|
fields: {},
|
|
@@ -245,8 +238,6 @@ function TableRender(props) {
|
|
|
245
238
|
}
|
|
246
239
|
|
|
247
240
|
setColumns(columns);
|
|
248
|
-
setColumnList(columns);
|
|
249
|
-
console.log("columns", columns);
|
|
250
241
|
}, [props.schema, props.config]);
|
|
251
242
|
|
|
252
243
|
// 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
|
|
@@ -254,58 +245,8 @@ function TableRender(props) {
|
|
|
254
245
|
scenario: scenario,
|
|
255
246
|
};
|
|
256
247
|
|
|
257
|
-
const onChange = (e, col) => {
|
|
258
|
-
console.log(`checked = ${e.target.checked}`);
|
|
259
|
-
|
|
260
|
-
if (e.target.checked) {
|
|
261
|
-
const list = [...columns, col];
|
|
262
|
-
// 创建映射表提高查找效率
|
|
263
|
-
const columnIndexMap = new Map(columnList.map((item, index) => [item.key, index]));
|
|
264
|
-
setColumns(list.sort((a, b) => columnIndexMap.get(a.key) - columnIndexMap.get(b.key)));
|
|
265
|
-
} else {
|
|
266
|
-
setColumns(columns.filter((item) => item.key !== col.key));
|
|
267
|
-
}
|
|
268
|
-
};
|
|
269
|
-
|
|
270
248
|
return (
|
|
271
249
|
<div className="table-render-wrap">
|
|
272
|
-
{isShowTableFilter ? (
|
|
273
|
-
<div className="table-render-wrap-header">
|
|
274
|
-
<FilterOutlined
|
|
275
|
-
className="table-filter-icon"
|
|
276
|
-
onClick={() => {
|
|
277
|
-
props.setShowSearch && props.setShowSearch();
|
|
278
|
-
}}
|
|
279
|
-
/>
|
|
280
|
-
<Popover
|
|
281
|
-
placement="bottomRight"
|
|
282
|
-
content={
|
|
283
|
-
<div className="table-popover-content">
|
|
284
|
-
{columnList.map((col) => {
|
|
285
|
-
if (col.key === "_$actions") {
|
|
286
|
-
return null;
|
|
287
|
-
}
|
|
288
|
-
return (
|
|
289
|
-
<Checkbox
|
|
290
|
-
key={col.key}
|
|
291
|
-
checked={columns.findIndex((item) => item.key === col.key) !== -1}
|
|
292
|
-
onChange={(e) => onChange(e, col)}
|
|
293
|
-
>
|
|
294
|
-
{col.title}
|
|
295
|
-
</Checkbox>
|
|
296
|
-
);
|
|
297
|
-
})}
|
|
298
|
-
</div>
|
|
299
|
-
}
|
|
300
|
-
trigger="click"
|
|
301
|
-
>
|
|
302
|
-
<div className="table-filter">
|
|
303
|
-
<SettingOutlined className="table-filter-icon" />
|
|
304
|
-
显示列
|
|
305
|
-
</div>
|
|
306
|
-
</Popover>
|
|
307
|
-
</div>
|
|
308
|
-
) : null}
|
|
309
250
|
<Table
|
|
310
251
|
className="table-render"
|
|
311
252
|
rowKey={props.idKey || "id"}
|
|
@@ -1,19 +1,4 @@
|
|
|
1
1
|
.table-render-wrap {
|
|
2
|
-
.table-render-wrap-header {
|
|
3
|
-
padding: 0 12px;
|
|
4
|
-
display: flex;
|
|
5
|
-
justify-content: flex-end;
|
|
6
|
-
align-items: center;
|
|
7
|
-
margin-bottom: 12px;
|
|
8
|
-
.table-filter {
|
|
9
|
-
font-size: 16px;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
.table-filter-icon {
|
|
12
|
-
margin-left: 10px;
|
|
13
|
-
cursor: pointer;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
2
|
.inline-block-max-w {
|
|
18
3
|
display: inline-block;
|
|
19
4
|
max-width: 100%;
|
|
@@ -30,12 +15,3 @@
|
|
|
30
15
|
text-overflow: ellipsis;
|
|
31
16
|
}
|
|
32
17
|
}
|
|
33
|
-
.table-popover-content {
|
|
34
|
-
max-width: 400px;
|
|
35
|
-
display: flex;
|
|
36
|
-
flex-direction: column;
|
|
37
|
-
.ant-checkbox-wrapper {
|
|
38
|
-
margin-bottom: 8px;
|
|
39
|
-
margin-left: 0;
|
|
40
|
-
}
|
|
41
|
-
}
|