@hzab/list-render 1.9.6 → 1.9.7-beta

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +63 -49
  3. package/package.json +3 -3
  4. package/src/card-render/index.jsx +123 -0
  5. package/src/card-render/index.less +25 -0
  6. package/src/common/utils.js +23 -0
  7. package/src/components/PrefixNode/index.tsx +0 -2
  8. package/src/index.less +1 -2
  9. package/src/list-render.jsx +75 -25
  10. package/src/pagination-render/index.jsx +2 -6
  11. package/src/table-render/index.jsx +0 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ # @hzab/list-render@1.9.8
2
+
3
+ feat: 新增 layout 类型，card 用于卡片格式渲染，支持自定义渲染
4
+
5
+ # @hzab/list-render@1.9.7
6
+
7
+ fix: 修复 分页配置时数据覆盖问题
8
+
1
9
  # @hzab/list-render@1.9.6
2
10
 
3
11
  feat: 新增列筛选，筛选项显隐
package/README.md CHANGED
@@ -49,55 +49,58 @@ const listDM = useMemo(
49
49
 
50
50
  ### InfoPanel Attributes
51
51
 
52
- | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
53
- | --------------------------- | ---------------- | ---- | --------------- | -------------------------------------------------------------------------------------------------------- |
54
- | className | string | 否 | - | 外层 div className |
55
- | idKey | string | 否 | id | 唯一值字段的 key |
56
- | schema | Object | 是 | - | 字段描述文件，包含各个字段的信息 |
57
- | model | Object | 是 | - | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例 |
58
- | isPatchUpdate | boolean | 否 | false | 编辑提交接口是否使用 patch 发起请求 |
59
- | list | Array | | - | 本地数据源 |
60
- | closeAutoRequest | Boolean | | false | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求 |
61
- | hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 |
62
- | verticalHeader | Boolean | | false | 搜索项和新增按钮是否处于不同的行等 |
63
- | search | String | | - | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 |
64
- | filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） |
65
- | queryConf | Object | | {} | 设置 query 参数的 key |
66
- | createText | String/ReactNote | | 新增 | 新增按钮文案 |
67
- | hasCreate | Boolean | | true | 是否显示新增按钮 |
68
- | hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效 |
69
- | hasEdit | Boolean/Function | | true | 是否显示编辑按钮，可传入回调控制当前行是否显示 |
70
- | hasDel | Boolean/Function | | true | 是否显示删除按钮，可传入回调控制当前行是否显示 |
71
- | hasDetail | Boolean/Function | | true | 是否显示详情按钮，可传入回调控制当前行是否显示 |
72
- | hasDelTips | String/Function | | "确认删除该项?" | 删除按钮自定义提示，可传入回调根据当前行数据显示对应提示 |
73
- | tableConf | Object | | {} | Table 相关配置 |
74
- | tableProps | Object | | {} | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件 |
75
- | fetchOnEdit | Boolean | | true | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填 |
76
- | fetchById | Boolean | | true | 编辑中的详情请求，是否使用 id 作为入参的 key |
77
- | modalMode | string | | dialog | 新增/编辑表单、详情 展示模式： dialog drawer |
78
- | modalConf | Object | | {} | modal/Drawer 配置对象 |
79
- | modalDetailProps | Object | | {} | modal descriptions 配置对象 |
80
- | modalFormProps | Object | | {} | modal/drawer fromRender 配置对象 |
81
- | modalProps | Object | | {} | modal/drawer 配置对象 |
82
- | schemaScope | Object | | {} | formRender schemaScope props |
83
- | components | Object | | {} | formRender components props 自定义组件 |
84
- | detailComponents | Object | | {} | descriptions components props 自定义组件 |
85
- | hasPagination | Boolean | | true | 是否显示分页 |
86
- | paginationConf | Object | | {} | 可自定义 Pagination props，进行 pagination 相关设置 |
87
- | formInitialValues | Object | | {} | 给新增、编辑对话框中的表单增加默认值 |
88
- | Slots | Object | | {} | 组件插槽 |
89
- | getFieldListOpt | Object | | {} | getFieldList opt 参数 |
90
- | onGetListEnd | Function | | - | 请求列表成功返回的回调 |
91
- | onCreateSuc | Function | | - | 新增成功返回的回调 |
92
- | onEditSuc | Function | | - | 编辑成功返回的回调 |
93
- | onDelSuc | Function | | - | 删除成功返回的回调 |
94
- | onFormModalClose | Function | | - | 表单弹窗关闭回调 |
95
- | modalFormMount | Function | | - | 新增、编辑弹窗 Form 渲染完成回调 |
96
- | msgConf | Object | | {} | 新增、编辑、删除、列表查询，详情查询的报错 msg 提示设置 |
97
- | i18n | Object | | {} | 文案配置 |
98
- | queryFormInitialValues | Object | | {} | 列表上方查询 Form 默认值 |
99
- | queryFormIsExtendModelQuery | Boolean | | false | 列表上方查询 Form 默认值是否继承 data-model.query 置 |
100
- | useFormData | boolean | 否 | | 是否使用 form data 提交数据 |
52
+ | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
53
+ | --------------------------- | ---------------- | ---- | --------------- | -------------------------------------------------------------------------------------------------------------- |
54
+ | layout | string | 否 | default | 列表渲染类型格式 |
55
+ | className | string | 否 | - | 外层 div className |
56
+ | idKey | string | 否 | id | 唯一值字段的 key |
57
+ | schema | Object | 是 | - | 字段描述文件，包含各个字段的信息 |
58
+ | model | Object | 是 | - | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例 |
59
+ | isPatchUpdate | boolean | 否 | false | 编辑提交接口是否使用 patch 发起请求 |
60
+ | list | Array | | - | 本地数据源 |
61
+ | closeAutoRequest | Boolean | | false | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求 |
62
+ | hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 |
63
+ | verticalHeader | Boolean | | false | 搜索项和新增按钮是否处于不同的行等 |
64
+ | search | String | | - | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 |
65
+ | filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） |
66
+ | queryConf | Object | | {} | 设置 query 参数的 key |
67
+ | createText | String/ReactNote | | 新增 | 新增按钮文案 |
68
+ | hasCreate | Boolean | | true | 是否显示新增按钮 |
69
+ | hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效 |
70
+ | hasEdit | Boolean/Function | | true | 是否显示编辑按钮，可传入回调控制当前行是否显示 |
71
+ | hasDel | Boolean/Function | | true | 是否显示删除按钮，可传入回调控制当前行是否显示 |
72
+ | hasDetail | Boolean/Function | | true | 是否显示详情按钮，可传入回调控制当前行是否显示 |
73
+ | hasDelTips | String/Function | | "确认删除该项?" | 删除按钮自定义提示，可传入回调根据当前行数据显示对应提示 |
74
+ | tableConf | Object | | {} | Table 相关配置 |
75
+ | tableProps | Object | | {} | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件 |
76
+ | cardConf | Object | | {} | Card 相关配置 |
77
+ | cardProps | Object | | {} | 直接传给 cardRender 的 props，因内部渲染使用的的是详情组件，相关 API 可直接参考 @hzab/schema-descriptions 组件 |
78
+ | fetchOnEdit | Boolean | | true | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填 |
79
+ | fetchById | Boolean | | true | 编辑中的详情请求，是否使用 id 作为入参的 key |
80
+ | modalMode | string | | dialog | 新增/编辑表单、详情 展示模式： dialog drawer |
81
+ | modalConf | Object | | {} | modal/Drawer 配置对象 |
82
+ | modalDetailProps | Object | | {} | modal descriptions 配置对象 |
83
+ | modalFormProps | Object | | {} | modal/drawer fromRender 配置对象 |
84
+ | modalProps | Object | | {} | modal/drawer 配置对象 |
85
+ | schemaScope | Object | | {} | formRender schemaScope props |
86
+ | components | Object | | {} | formRender components props 自定义组件 |
87
+ | detailComponents | Object | | {} | descriptions components props 自定义组件 |
88
+ | hasPagination | Boolean | | true | 是否显示分页 |
89
+ | paginationConf | Object | | {} | 可自定义 Pagination props，进行 pagination 相关设置 |
90
+ | formInitialValues | Object | | {} | 给新增、编辑对话框中的表单增加默认值 |
91
+ | Slots | Object | | {} | 组件插槽 |
92
+ | getFieldListOpt | Object | | {} | getFieldList opt 参数 |
93
+ | onGetListEnd | Function | | - | 请求列表成功返回的回调 |
94
+ | onCreateSuc | Function | | - | 新增成功返回的回调 |
95
+ | onEditSuc | Function | | - | 编辑成功返回的回调 |
96
+ | onDelSuc | Function | | - | 删除成功返回的回调 |
97
+ | onFormModalClose | Function | | - | 表单弹窗关闭回调 |
98
+ | modalFormMount | Function | | - | 新增、编辑弹窗 Form 渲染完成回调 |
99
+ | msgConf | Object | | {} | 新增、编辑、删除、列表查询，详情查询的报错 msg 提示设置 |
100
+ | i18n | Object | | {} | 文案配置 |
101
+ | queryFormInitialValues | Object | | {} | 列表上方查询 Form 默认值 |
102
+ | queryFormIsExtendModelQuery | Boolean | | false | 列表上方查询 Form 默认值是否继承 data-model.query 置 |
103
+ | useFormData | boolean | 否 | | 是否使用 form data 提交数据 |
101
104
 
102
105
  - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
103
106
 
@@ -122,6 +125,17 @@ const listDM = useMemo(
122
125
  | ellipsis | boolean/Object | | - | 当前列是否超出隐藏，true 或 { showTitle: true } 开启超出隐藏 |
123
126
  | emptyValue | string/number | | undefined | table 列表单列空值展示 |
124
127
 
128
+ #### cardConf
129
+
130
+ | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
131
+ | -------------- | -------- | ---- | ------ | -------------- |
132
+ | CardItemRender | JSX | | | 自定义渲染卡片 |
133
+ | |
134
+
135
+ ##### cardConf.colConf[xxx]
136
+
137
+ | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
138
+
125
139
  #### queryConf
126
140
 
127
141
  | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzab/list-render",
3
- "version": "1.9.6",
3
+ "version": "1.9.7-beta",
4
4
  "description": "",
5
5
  "main": "src",
6
6
  "scripts": {
@@ -21,8 +21,8 @@
21
21
  "devDependencies": {
22
22
  "@ant-design/icons": "^4.8.1",
23
23
  "@hzab/data-model": "^1.7.4",
24
- "@hzab/form-render": "^1.1.5",
25
- "@hzab/schema-descriptions": "^1.0.0",
24
+ "@hzab/form-render": "^1.6.12",
25
+ "@hzab/schema-descriptions": "^1.3.0",
26
26
  "@hzab/webpack-config": "^0.7.2",
27
27
  "@types/react": "^17.0.62",
28
28
  "@types/react-dom": "^17.0.20",
package/src/card-render/index.jsx ADDED
@@ -0,0 +1,123 @@
1
+ import { useEffect, useState, useMemo, useCallback, useRef } from "react";
2
+ import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
3
+ import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
4
+ import _ from "lodash";
5
+ import DetailRender from "@hzab/schema-descriptions";
6
+ import { removeInTableFalseFields } from "../common/utils";
7
+ import "./index.less";
8
+ import { use } from "react";
9
+
10
+ const scenario = "table-render";
11
+
12
+ function CardRender(props) {
13
+ const [schema, setSchema] = useState({});
14
+
15
+ const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {} } = props;
16
+ const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
17
+ const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
18
+
19
+ const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
20
+
21
+ useEffect(() => {
22
+ const schemas = removeInTableFalseFields(props?.schema);
23
+ setSchema(schemas);
24
+ }, [props?.schema, props?.schema?.schema]);
25
+
26
+ const getColRender = (record, index) => {
27
+ const _colConf = props.config?.colConf?._$actions || {};
28
+
29
+ const slotProps = { record, index, ...functionProps };
30
+
31
+ if (Slots?.tableActionsSlot) {
32
+ return <Slots.tableActionsSlot {...slotProps} />;
33
+ }
34
+
35
+ //编辑按钮权限
36
+ const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
37
+
38
+ //详情按钮权限
39
+ const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
40
+
41
+ //删除按钮权限
42
+ const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
43
+
44
+ //删除按钮提示
45
+ const delTips =
46
+ hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
47
+
48
+ return (
49
+ <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
50
+ {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
51
+ {_hasDetail ? (
52
+ <Button
53
+ type="link"
54
+ onClick={() => {
55
+ props.onDetail && props.onDetail(record, index);
56
+ }}
57
+ >
58
+ {tableDetail}
59
+ </Button>
60
+ ) : null}
61
+ {_hasEdit ? (
62
+ <Button
63
+ type="link"
64
+ onClick={() => {
65
+ props.onEdit && props.onEdit(record, index);
66
+ }}
67
+ >
68
+ {tableEdit}
69
+ </Button>
70
+ ) : null}
71
+ {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
72
+ {_hasDel ? (
73
+ <Popconfirm
74
+ placement="topRight"
75
+ title={delTips}
76
+ onConfirm={() => {
77
+ props.onDel && props.onDel(record, index);
78
+ }}
79
+ >
80
+ <Button type="link" danger>
81
+ {tableDel}
82
+ </Button>
83
+ </Popconfirm>
84
+ ) : null}
85
+ {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
86
+ </div>
87
+ );
88
+ };
89
+
90
+ const ItemRender = ({ item, index }) => {
91
+ return CardItemRender ? (
92
+ <CardItemRender item={item} index={index} functionProps={functionProps} />
93
+ ) : (
94
+ <DetailRender
95
+ config={props.config}
96
+ schema={schema}
97
+ bordered={false}
98
+ data={item}
99
+ schemaScope={{ scenario: "table-render", ...props.schemaScope }}
100
+ components={props.components}
101
+ {...cardProps}
102
+ />
103
+ );
104
+ };
105
+ return (
106
+ <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
107
+ {props.list?.map((item, index) => {
108
+ return (
109
+ <div key={item["id"]} className="item-render-card">
110
+ {props.hasAction !== false ? (
111
+ <div className="item-render-card-title">{getColRender(item, index)}</div>
112
+ ) : null}
113
+ <div className="item-render-card-content">
114
+ <ItemRender item={item} index={index} />
115
+ </div>
116
+ </div>
117
+ );
118
+ })}
119
+ </div>
120
+ );
121
+ }
122
+
123
+ export default CardRender;
package/src/card-render/index.less ADDED
@@ -0,0 +1,25 @@
1
+ .card-render-wrap {
2
+ display: grid;
3
+ grid-gap: 12px;
4
+ padding: 0 12px;
5
+
6
+ .item-render-card {
7
+ border: 1px solid #f0f0f0;
8
+ &:hover {
9
+ border: 1px solid var(--ant-primary-color);
10
+ box-shadow: 0 0 10px var(--ant-primary-color);
11
+ .item-render-card-title {
12
+ border-color: var(--ant-primary-color);
13
+ }
14
+ }
15
+ .item-render-card-title {
16
+ padding: 8px 0px;
17
+ margin-bottom: 10px;
18
+ text-align: right;
19
+ border-bottom: 1px solid #f0f0f0;
20
+ }
21
+ .item-render-card-content {
22
+ padding: 0 12px;
23
+ }
24
+ }
25
+ }
package/src/common/utils.js CHANGED
@@ -196,3 +196,26 @@ export const getOptItByVal = function (val, options, opt) {
196
196
  }
197
197
  }
198
198
  };
199
+
200
+ /**
201
+ * 移除 schema.properties 中包含 "inTable": false 的字段
202
+ * @param {Object} data - 原始数据对象
203
+ * @returns {Object} - 处理后的新对象
204
+ */
205
+ export const removeInTableFalseFields = (data) => {
206
+ // 深拷贝原始数据
207
+ const result = _.cloneDeep(data);
208
+
209
+ // 检查是否存在 schema 和 properties
210
+ if (result?.schema?.properties) {
211
+ // 遍历properties中的所有属性
212
+ Object.keys(result.schema.properties).forEach((key) => {
213
+ if (result.schema.properties[key].inTable === false) {
214
+ // 删除整个包含inTable:false的属性
215
+ delete result.schema.properties[key];
216
+ }
217
+ });
218
+ }
219
+
220
+ return result;
221
+ };
package/src/components/PrefixNode/index.tsx CHANGED
@@ -41,8 +41,6 @@ export const PrefixNode = (props) => {
41
41
  return showVal?.map((it, i) => {
42
42
  const option = getFieldOptItByVal(it, _field) || {};
43
43
  const PreNode = option.PrefixNode;
44
- console.log(it, option);
45
-
46
44
  return (
47
45
  <div key={it + "" + i} className="table-cell-prefix-box">
48
46
  {PreNode ? (
package/src/index.less CHANGED
@@ -20,11 +20,10 @@
20
20
 
21
21
  .list-render-err-message {
22
22
  .ant-message-notice-content {
23
-
24
23
  .ant-message-error {
25
24
  display: flex;
26
25
 
27
- &>span:last-child {
26
+ & > span:last-child {
28
27
  text-align: left;
29
28
  white-space: pre-line;
30
29
  }
package/src/list-render.jsx CHANGED
@@ -10,6 +10,7 @@ import axios, { getCancelTokenSource } from "@hzab/data-model/src/axios";
10
10
  import QueryRender from "./query-render";
11
11
  import Pagination from "./pagination-render";
12
12
  import TableRender from "./table-render";
13
+ import CardRender from "./card-render";
13
14
  import FormModal from "./FormModal";
14
15
  import DetailModal from "./DetailModal";
15
16
 
@@ -17,8 +18,15 @@ import { objToFormData } from "./common/utils";
17
18
 
18
19
  import "./index.less";
19
20
 
21
+ const pageSizeOptionMap = {
22
+ default: [10, 20, 50, 100],
23
+ card: [9, 18, 54, 99],
24
+ };
25
+
20
26
  const ListRender = forwardRef(function (props, parentRef) {
21
27
  const {
28
+ /** 渲染类型 */
29
+ layout = "default",
22
30
  idKey = "id",
23
31
  i18n,
24
32
  queryFormIsExtendModelQuery = false,
@@ -36,6 +44,11 @@ const ListRender = forwardRef(function (props, parentRef) {
36
44
  */
37
45
  useFormData: _useFormData,
38
46
  } = props;
47
+ const pageSizeOptions = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
48
+ // const [pageSizeOptions, setPageSizeOptions] = useState(
49
+ // props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100],
50
+ // );
51
+
39
52
  const { createText = props.createText } = i18n || {};
40
53
  const [total, setTotal] = useState(0);
41
54
  const [list, setList] = useState([]);
@@ -47,7 +60,7 @@ const ListRender = forwardRef(function (props, parentRef) {
47
60
  const queryRef = useRef();
48
61
  const modelQueryRef = useRef({});
49
62
  const formQueryRef = useRef({});
50
- const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
63
+ const paginationQueryRef = useRef({ pageNum: 1, pageSize: pageSizeOptions[0] });
51
64
  const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
52
65
  const getListSourceRef = useRef();
53
66
  const [showSearch, setShowSearch] = useState(true);
@@ -66,13 +79,22 @@ const ListRender = forwardRef(function (props, parentRef) {
66
79
 
67
80
  const { schema = {}, config = {}, model = {}, msgConf = {} } = props;
68
81
 
82
+ // useEffect(() => {
83
+ // const list = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
84
+ // setPageSizeOptions(list);
85
+ // paginationQueryRef.current = { ...paginationQueryRef.current, pageSize: list[0] };
86
+ // }, [layout]);
87
+
69
88
  useEffect(() => {
70
89
  if (model) {
71
90
  if (!model.query) {
72
91
  model.query = {};
73
92
  } else {
74
93
  modelQueryRef.current = model?.query;
75
- paginationQueryRef.current = model?.query;
94
+ paginationQueryRef.current = {
95
+ pageNum: model?.query?.pageNum ?? paginationQueryRef.current?.pageNum,
96
+ pageSize: model?.query?.pageSize ?? paginationQueryRef.current?.pageSize,
97
+ };
76
98
  }
77
99
  model.query.pageNum = 1;
78
100
  }
@@ -102,7 +124,8 @@ const ListRender = forwardRef(function (props, parentRef) {
102
124
  if (!model?.getList && Array.isArray(props.list)) {
103
125
  setListLoading(true);
104
126
  const { list } = props;
105
- const { pageNum = 1, pageSize = 10 } = paginationQueryRef.current || {};
127
+ const { pageNum = 1, pageSize = pageSizeOptions[0] } = paginationQueryRef.current || {};
128
+
106
129
  setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
107
130
  setTotal(list.length);
108
131
  props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
@@ -184,7 +207,7 @@ const ListRender = forwardRef(function (props, parentRef) {
184
207
  paginationQueryRef.current = { ...paginationQueryRef.current, pageNum: 1 };
185
208
 
186
209
  if (model && model.query && !model.query.pageSize) {
187
- model.query.pageSize = 10;
210
+ model.query.pageSize = pageSizeOptions[0];
188
211
  }
189
212
  formQueryRef.current = query;
190
213
  model.query = Object.assign(model.query, query);
@@ -371,33 +394,60 @@ const ListRender = forwardRef(function (props, parentRef) {
371
394
  </div>
372
395
  </div>
373
396
  {Slots.HeaderOthersSuffix && <Slots.HeaderOthersSuffix onSearch={onSearch} getList={getList} />}
374
- <TableRender
375
- idKey={idKey}
376
- schema={schema?.schema}
377
- list={list}
378
- config={props.tableConf}
379
- hasAction={props.hasAction}
380
- query={model?.query}
381
- Slots={props.Slots}
382
- onEdit={onEdit}
383
- onDel={onDel}
384
- onDetail={onDetail}
385
- onSearch={onSearch}
386
- getList={getList}
387
- setShowSearch={handleSetShowSearch}
388
- loading={listLoading}
389
- tableProps={props.tableProps}
390
- getFieldListOpt={props.getFieldListOpt}
391
- components={props.components}
392
- schemaScope={props.schemaScope}
393
- i18n={i18n}
394
- />
397
+ {layout === "card" ? (
398
+ <CardRender
399
+ idKey={idKey}
400
+ schema={schema}
401
+ list={list}
402
+ config={props.cardConf}
403
+ cardProps={props.cardProps}
404
+ hasAction={props.hasAction}
405
+ query={model?.query}
406
+ Slots={props.Slots}
407
+ onEdit={onEdit}
408
+ onDel={onDel}
409
+ onDetail={onDetail}
410
+ onSearch={onSearch}
411
+ getList={getList}
412
+ loading={listLoading}
413
+ components={props.components}
414
+ schemaScope={props.schemaScope}
415
+ i18n={i18n}
416
+ />
417
+ ) : null}
418
+
419
+ {layout === "default" ? (
420
+ <TableRender
421
+ idKey={idKey}
422
+ schema={schema?.schema}
423
+ list={list}
424
+ config={props.tableConf}
425
+ hasAction={props.hasAction}
426
+ query={model?.query}
427
+ Slots={props.Slots}
428
+ onEdit={onEdit}
429
+ onDel={onDel}
430
+ onDetail={onDetail}
431
+ onSearch={onSearch}
432
+ getList={getList}
433
+ setShowSearch={handleSetShowSearch}
434
+ loading={listLoading}
435
+ tableProps={props.tableProps}
436
+ getFieldListOpt={props.getFieldListOpt}
437
+ components={props.components}
438
+ schemaScope={props.schemaScope}
439
+ i18n={i18n}
440
+ />
441
+ ) : null}
442
+
395
443
  {props.hasPagination !== false ? (
396
444
  <Pagination
445
+ layout={layout}
397
446
  onChange={onPageChange}
398
447
  total={total}
399
448
  query={{ ...model?.query, ...paginationQueryRef.current }}
400
449
  config={props.paginationConf}
450
+ pageSizeOptions={pageSizeOptions}
401
451
  i18n={i18n}
402
452
  />
403
453
  ) : null}
package/src/pagination-render/index.jsx CHANGED
@@ -3,12 +3,8 @@ import { Pagination } from "antd";
3
3
 
4
4
  import "./index.less";
5
5
 
6
- const pageSizeOptions = [10, 20, 50, 100];
7
-
8
6
  function PaginationRender(props) {
9
- const [pageSize, setPageSize] = useState(
10
- props.query?.pageSize || (props.config?.pageSizeOptions ? props.config?.pageSizeOptions[0] : pageSizeOptions[0]),
11
- );
7
+ const [pageSize, setPageSize] = useState(props.query?.pageSize || pageSizeOptions[0]);
12
8
  const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
13
9
 
14
10
  useEffect(() => {
@@ -43,7 +39,7 @@ function PaginationRender(props) {
43
39
  current={pageNum}
44
40
  pageSize={pageSize}
45
41
  onChange={onChange}
46
- pageSizeOptions={props.config?.pageSizeOptions || pageSizeOptions}
42
+ pageSizeOptions={props.pageSizeOptions}
47
43
  total={props.total}
48
44
  showTotal={(total) => `总条数 ${total} 条`}
49
45
  showSizeChanger
package/src/table-render/index.jsx CHANGED
@@ -192,7 +192,6 @@ function TableRender(props) {
192
192
  //详情按钮权限
193
193
  const _hasDetail =
194
194
  hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
195
- console.log("_hasDetail", hasDetail, _hasDetail);
196
195
 
197
196
  //删除按钮权限
198
197
  const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
@@ -247,7 +246,6 @@ function TableRender(props) {
247
246
 
248
247
  setColumns(columns);
249
248
  setColumnList(columns);
250
- console.log("columns", columns);
251
249
  }, [props.schema, props.config]);
252
250
 
253
251
  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
@@ -256,8 +254,6 @@ function TableRender(props) {
256
254
  };
257
255
 
258
256
  const onChange = (e, col) => {
259
- console.log(`checked = ${e.target.checked}`);
260
-
261
257
  if (e.target.checked) {
262
258
  const list = [...columns, col];
263
259
  // 创建映射表提高查找效率