@hzab/list-render 1.10.4 → 1.10.6
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 +9 -1
- package/README.md +78 -61
- package/package.json +1 -1
- package/src/common/utils.js +8 -3
- package/src/components/Formily/FormilyEditTable.tsx +33 -7
- package/src/list-render.jsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
+
# @hzab/list-render@1.10.6
|
|
2
|
+
|
|
3
|
+
fix: table render getVal 增加 getOptItByVal 支持通过 fieldNames 配置 下拉数据格式
|
|
4
|
+
|
|
5
|
+
# @hzab/list-render@1.10.5
|
|
6
|
+
|
|
7
|
+
feat: 行内编辑默认聚焦
|
|
8
|
+
|
|
1
9
|
# @hzab/list-render@1.10.4
|
|
2
10
|
|
|
3
|
-
feat：appendUrlQuery默认为不开启
|
|
11
|
+
feat：appendUrlQuery 默认为不开启
|
|
4
12
|
|
|
5
13
|
# @hzab/list-render@1.10.2
|
|
6
14
|
|
package/README.md
CHANGED
|
@@ -49,61 +49,62 @@ const listDM = useMemo(
|
|
|
49
49
|
|
|
50
50
|
### InfoPanel Attributes
|
|
51
51
|
|
|
52
|
-
| 属性名称 | 属性类型 | 必须 | 默认值
|
|
53
|
-
| --------------------------- | ------------------------- | ---- |
|
|
54
|
-
| layout | string | 否 | default
|
|
55
|
-
| className | string | 否 | -
|
|
56
|
-
| idKey | string | 否 | id
|
|
57
|
-
| schema | Object | 是 | -
|
|
58
|
-
| model | Object | 是 | -
|
|
59
|
-
| isPatchUpdate | boolean | 否 | false
|
|
60
|
-
| list | Array | | -
|
|
61
|
-
| closeAutoRequest | Boolean | | false
|
|
62
|
-
| hasQuery | Boolean | | true
|
|
63
|
-
| verticalHeader | Boolean | | false
|
|
64
|
-
| search | String | | -
|
|
65
|
-
| filters | Array | | []
|
|
66
|
-
| queryConf | Object | | {}
|
|
67
|
-
| createText | String/ReactNote | | 新增
|
|
68
|
-
| hasCreate | Boolean | | true
|
|
69
|
-
| hasAction | Boolean | | true
|
|
70
|
-
| hasEdit | Boolean/Function | | true
|
|
71
|
-
| hasDel | Boolean/Function | | true
|
|
72
|
-
| hasDetail | Boolean/Function | | true
|
|
73
|
-
| hasDelTips | String/Function | | "确认删除该项?"
|
|
74
|
-
| tableConf | Object | | {}
|
|
75
|
-
| tableProps | Object | | {}
|
|
76
|
-
| cardConf | Object | | {}
|
|
77
|
-
| cardProps | Object | | {}
|
|
78
|
-
| fetchOnEdit | Boolean | | true
|
|
79
|
-
| fetchById | Boolean | | true
|
|
80
|
-
| modalMode | string | | dialog
|
|
81
|
-
| modalConf | Object | | {}
|
|
82
|
-
| modalDetailProps | Object | | {}
|
|
83
|
-
| modalFormProps | Object | | {}
|
|
84
|
-
| modalProps | Object | | {}
|
|
85
|
-
| schemaScope | Object | | {}
|
|
86
|
-
| components | Object | | {}
|
|
87
|
-
| detailComponents | Object | | {}
|
|
88
|
-
| hasPagination | Boolean | | true
|
|
89
|
-
| paginationConf | Object | | {}
|
|
90
|
-
| formInitialValues | Object | | {}
|
|
91
|
-
| Slots | Object | | {}
|
|
92
|
-
| getFieldListOpt | Object | | {}
|
|
93
|
-
| onGetListEnd | Function | | -
|
|
94
|
-
| onCreateSuc | Function | | -
|
|
95
|
-
| onEditSuc | Function | | -
|
|
96
|
-
| onDelSuc | Function | | -
|
|
97
|
-
| onFormModalClose | Function | | -
|
|
98
|
-
| modalFormMount | Function | | -
|
|
99
|
-
| msgConf | Object | | {}
|
|
100
|
-
| i18n | Object | | {}
|
|
101
|
-
| queryFormInitialValues | Object | | {}
|
|
102
|
-
| queryFormIsExtendModelQuery | Boolean | | false
|
|
103
|
-
| useFormData | boolean | 否 |
|
|
104
|
-
| editMode | modal/line/line-cell/cell | 否 | modal
|
|
105
|
-
| appendUrlQuery
|
|
106
|
-
| appendUrlQueryKey
|
|
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 提交数据 |
|
|
104
|
+
| editMode | modal/line/line-cell/cell | 否 | modal | 编辑模式： modal 弹窗/抽屉编辑; line 编辑整行，编辑按钮在操作列; line-cell 编辑整行，操作按钮在单元格; cell 编辑指定单元格 |
|
|
105
|
+
| appendUrlQuery | boolean | 否 | true | 筛选条件改变时是否将参数（对象形式）设置到 url query 中 |
|
|
106
|
+
| appendUrlQueryKey | string | 否 | URL_PARAM_NAME = "defaultSearchParams" | 自定义设置 url query 对象参数的 key |
|
|
107
|
+
|
|
107
108
|
- fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
|
|
108
109
|
|
|
109
110
|
#### tableConf
|
|
@@ -556,21 +557,23 @@ async function test() {
|
|
|
556
557
|
|
|
557
558
|
- example 本地开发测试代码
|
|
558
559
|
- src 组件源码
|
|
559
|
-
- lib 组件打包编译后的代码
|
|
560
560
|
|
|
561
561
|
## 命令
|
|
562
562
|
|
|
563
|
+
- Mac 执行该命令，设置 pre-commit 为可执行文件
|
|
564
|
+
|
|
565
|
+
- npm run mac-chmod
|
|
566
|
+
- chmod +x .husky && chmod +x .husky/pre-commit
|
|
567
|
+
|
|
568
|
+
- 生成文档：npm run docs
|
|
563
569
|
- 本地运行：npm run dev
|
|
564
|
-
- 测试环境打包编译：npm run build-flow-dev
|
|
565
|
-
- 生产环境打包编译：npm run build
|
|
566
570
|
|
|
567
571
|
## 发布
|
|
568
572
|
|
|
569
|
-
-
|
|
570
|
-
|
|
573
|
+
- npm 源和云效源都需要发布
|
|
574
|
+
|
|
571
575
|
- 命令：npm publish --access public
|
|
572
576
|
- 发布目录：
|
|
573
|
-
- lib
|
|
574
577
|
- src
|
|
575
578
|
|
|
576
579
|
### 迭代发布命令
|
|
@@ -579,10 +582,24 @@ async function test() {
|
|
|
579
582
|
- 0.x.0: npm run publish-minor
|
|
580
583
|
- x.0.0: npm run publish-major
|
|
581
584
|
|
|
585
|
+
### nrm
|
|
586
|
+
|
|
587
|
+
- 安装
|
|
588
|
+
npm install -g nrm
|
|
589
|
+
- 增加源
|
|
590
|
+
nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
|
|
591
|
+
- 切换源
|
|
592
|
+
nrm use aliyun
|
|
593
|
+
nrm use npm
|
|
594
|
+
- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
|
|
595
|
+
npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
|
|
596
|
+
|
|
582
597
|
## 配置
|
|
583
598
|
|
|
584
599
|
### 配置文件
|
|
585
600
|
|
|
601
|
+
- 本地配置文件：config/config.js
|
|
602
|
+
|
|
586
603
|
### webpack 配置文件
|
|
587
604
|
|
|
588
605
|
- config/webpack.config.js
|
package/package.json
CHANGED
package/src/common/utils.js
CHANGED
|
@@ -24,6 +24,8 @@ const dateFormatEnum = {
|
|
|
24
24
|
* @returns
|
|
25
25
|
*/
|
|
26
26
|
export function getVal(field = {}, data = {}, opt = {}) {
|
|
27
|
+
console.log("field", field);
|
|
28
|
+
|
|
27
29
|
const {} = opt;
|
|
28
30
|
let val = _.get(data, field.name);
|
|
29
31
|
const {} = field || {};
|
|
@@ -70,11 +72,11 @@ export function getVal(field = {}, data = {}, opt = {}) {
|
|
|
70
72
|
Array.isArray(dataSource)
|
|
71
73
|
) {
|
|
72
74
|
if (!Array.isArray(val)) {
|
|
73
|
-
return
|
|
75
|
+
return getFieldOptItByVal(val, field, opt)?.label || val;
|
|
74
76
|
} else if (Array.isArray(val)) {
|
|
75
77
|
let _val = [];
|
|
76
78
|
val.forEach((valIt) => {
|
|
77
|
-
_val.push(
|
|
79
|
+
_val.push(getFieldOptItByVal(val, field, opt)?.label || valIt);
|
|
78
80
|
});
|
|
79
81
|
val = _val;
|
|
80
82
|
}
|
|
@@ -161,7 +163,10 @@ export const getFieldOptItByVal = function (val, field, opt) {
|
|
|
161
163
|
: Array.isArray(field.options)
|
|
162
164
|
? field.options
|
|
163
165
|
: field.dataSource || [];
|
|
164
|
-
return getOptItByVal(val, options, {
|
|
166
|
+
return getOptItByVal(val, options, {
|
|
167
|
+
fieldNames: field.fieldNames || field["x-component-props"]?.fieldNames,
|
|
168
|
+
...opt,
|
|
169
|
+
});
|
|
165
170
|
};
|
|
166
171
|
|
|
167
172
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useCallback, useRef } from "react";
|
|
1
|
+
import React, { useState, useCallback, useRef, useEffect } from "react";
|
|
2
2
|
import { Card, Slider, Rate, Form, Button } from "antd";
|
|
3
3
|
import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
|
|
4
4
|
import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
|
|
@@ -26,7 +26,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
26
26
|
record: Item;
|
|
27
27
|
index: number;
|
|
28
28
|
editable: boolean;
|
|
29
|
-
onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string) => void;
|
|
29
|
+
onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
|
|
30
30
|
onSave: () => void;
|
|
31
31
|
onCancel: () => void;
|
|
32
32
|
topProps: {
|
|
@@ -57,6 +57,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
57
57
|
const fDisplay = field?.["x-display"];
|
|
58
58
|
const { editMode = "modal" } = topProps || {};
|
|
59
59
|
const { hasEdit } = topProps?.config || {};
|
|
60
|
+
const fieldRef = useRef();
|
|
60
61
|
|
|
61
62
|
// 弹窗编辑模式
|
|
62
63
|
if (editMode === "modal") {
|
|
@@ -79,7 +80,21 @@ export const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
79
80
|
schema={{
|
|
80
81
|
type: "object",
|
|
81
82
|
properties: {
|
|
82
|
-
[field.name]: {
|
|
83
|
+
[field.name]: {
|
|
84
|
+
...field,
|
|
85
|
+
title: "",
|
|
86
|
+
["x-component-props"]: {
|
|
87
|
+
...field["x-component-props"],
|
|
88
|
+
ref: (ref) => {
|
|
89
|
+
if (field["x-component-props"] && typeof field["x-component-props"].ref === "function") {
|
|
90
|
+
field["x-component-props"].ref(ref);
|
|
91
|
+
}
|
|
92
|
+
if (ref) {
|
|
93
|
+
fieldRef.current = ref;
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
},
|
|
83
98
|
},
|
|
84
99
|
}}
|
|
85
100
|
/>
|
|
@@ -104,7 +119,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
104
119
|
onDoubleClick={(e) => {
|
|
105
120
|
e?.preventDefault();
|
|
106
121
|
e?.stopPropagation();
|
|
107
|
-
onEdit(record, dataIndex);
|
|
122
|
+
onEdit(record, dataIndex, { field, fieldRef });
|
|
108
123
|
}}
|
|
109
124
|
>
|
|
110
125
|
{children}
|
|
@@ -113,7 +128,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
113
128
|
onClick={(e) => {
|
|
114
129
|
e?.preventDefault();
|
|
115
130
|
e?.stopPropagation();
|
|
116
|
-
onEdit(record, dataIndex);
|
|
131
|
+
onEdit(record, dataIndex, { field, fieldRef });
|
|
117
132
|
}}
|
|
118
133
|
/>
|
|
119
134
|
</div>
|
|
@@ -162,21 +177,32 @@ export const useEditTable = (props) => {
|
|
|
162
177
|
const isEditing = (record: Item) => record[idKey] === editingId;
|
|
163
178
|
/** 判断当前 单元格 是否处于编辑状态 */
|
|
164
179
|
const isEditingCell = (key) => key === editingKey;
|
|
180
|
+
const editingFiledRef = useRef(null);
|
|
181
|
+
|
|
182
|
+
useEffect(() => {
|
|
183
|
+
if (editingId || editingKey) {
|
|
184
|
+
editingFiledRef.current?.current?.focus?.();
|
|
185
|
+
}
|
|
186
|
+
}, [editingId, editingKey]);
|
|
165
187
|
|
|
166
188
|
/**
|
|
167
189
|
* 点击编辑按钮
|
|
168
190
|
* @param record
|
|
169
191
|
*/
|
|
170
|
-
const onEdit = async (record: Partial<Item> & { key: React.Key }, key) => {
|
|
192
|
+
const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null }) => {
|
|
193
|
+
const { fieldRef } = opt || {};
|
|
194
|
+
editingFiledRef.current = fieldRef;
|
|
195
|
+
|
|
171
196
|
const value = await (props.onEdit && props.onEdit(record));
|
|
172
197
|
formRender?.setValues(value);
|
|
173
198
|
setEditingId(record[idKey]);
|
|
174
|
-
|
|
199
|
+
setEditingKey(key);
|
|
175
200
|
};
|
|
176
201
|
|
|
177
202
|
const onCancel = () => {
|
|
178
203
|
setEditingId("");
|
|
179
204
|
setEditingKey("");
|
|
205
|
+
editingFiledRef.current = null;
|
|
180
206
|
};
|
|
181
207
|
|
|
182
208
|
/**
|
package/src/list-render.jsx
CHANGED
|
@@ -121,7 +121,7 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
121
121
|
|
|
122
122
|
// 延迟获取表单实例
|
|
123
123
|
Promise.resolve().then(() => {
|
|
124
|
-
if (queryRef.current && queryRef.current?.formRef?.current
|
|
124
|
+
if (queryRef.current && queryRef.current?.formRef?.current?.formRender) {
|
|
125
125
|
const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
|
|
126
126
|
|
|
127
127
|
queryRef.current.formRef.current.formRender?.setValues(extractValues);
|