@hzab/list-render 1.10.0-beta5 → 1.10.0-beta7
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 +1 -1
- package/README.md +53 -53
- package/package.json +1 -1
- package/src/components/Formily/FormilyEditTable.tsx +108 -36
- package/src/list-render.jsx +6 -2
- package/src/table-render/index.jsx +11 -4
- package/src/table-render/index.less +33 -2
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -49,59 +49,59 @@ const listDM = useMemo(
|
|
|
49
49
|
|
|
50
50
|
### InfoPanel Attributes
|
|
51
51
|
|
|
52
|
-
| 属性名称 | 属性类型
|
|
53
|
-
| --------------------------- |
|
|
54
|
-
| layout | string
|
|
55
|
-
| className | string
|
|
56
|
-
| idKey | string
|
|
57
|
-
| schema | Object
|
|
58
|
-
| model | Object
|
|
59
|
-
| isPatchUpdate | boolean
|
|
60
|
-
| list | Array
|
|
61
|
-
| closeAutoRequest | Boolean
|
|
62
|
-
| hasQuery | Boolean
|
|
63
|
-
| verticalHeader | Boolean
|
|
64
|
-
| search | String
|
|
65
|
-
| filters | Array
|
|
66
|
-
| queryConf | Object
|
|
67
|
-
| createText | String/ReactNote
|
|
68
|
-
| hasCreate | Boolean
|
|
69
|
-
| hasAction | Boolean
|
|
70
|
-
| hasEdit | Boolean/Function
|
|
71
|
-
| hasDel | Boolean/Function
|
|
72
|
-
| hasDetail | Boolean/Function
|
|
73
|
-
| hasDelTips | String/Function
|
|
74
|
-
| tableConf | Object
|
|
75
|
-
| tableProps | Object
|
|
76
|
-
| cardConf | Object
|
|
77
|
-
| cardProps | Object
|
|
78
|
-
| fetchOnEdit | Boolean
|
|
79
|
-
| fetchById | Boolean
|
|
80
|
-
| modalMode | string
|
|
81
|
-
| modalConf | Object
|
|
82
|
-
| modalDetailProps | Object
|
|
83
|
-
| modalFormProps | Object
|
|
84
|
-
| modalProps | Object
|
|
85
|
-
| schemaScope | Object
|
|
86
|
-
| components | Object
|
|
87
|
-
| detailComponents | Object
|
|
88
|
-
| hasPagination | Boolean
|
|
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
|
|
103
|
-
| useFormData | boolean
|
|
104
|
-
|
|
|
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
105
|
|
|
106
106
|
- fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
|
|
107
107
|
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useState, useCallback, useRef } from "react";
|
|
2
2
|
import { Card, Slider, Rate, Form, Button } from "antd";
|
|
3
|
+
import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
|
|
3
4
|
import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
|
|
4
5
|
import { cloneDeep } from "lodash";
|
|
5
6
|
|
|
@@ -24,6 +25,14 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
24
25
|
inputType: "number" | "text";
|
|
25
26
|
record: Item;
|
|
26
27
|
index: number;
|
|
28
|
+
editable: boolean;
|
|
29
|
+
onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string) => void;
|
|
30
|
+
onSave: () => void;
|
|
31
|
+
onCancel: () => void;
|
|
32
|
+
topProps: {
|
|
33
|
+
config: { hasEdit: boolean | Function };
|
|
34
|
+
editMode: "modal" | "line" | "line-cell" | "cell";
|
|
35
|
+
};
|
|
27
36
|
children: React.ReactNode;
|
|
28
37
|
}
|
|
29
38
|
|
|
@@ -36,32 +45,88 @@ export const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
36
45
|
inputType,
|
|
37
46
|
record,
|
|
38
47
|
index,
|
|
48
|
+
onEdit,
|
|
49
|
+
onSave,
|
|
50
|
+
onCancel,
|
|
51
|
+
editable,
|
|
52
|
+
topProps,
|
|
39
53
|
children,
|
|
40
54
|
...restProps
|
|
41
55
|
}) => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
const fPattern = field?.["x-pattern"];
|
|
57
|
+
const fDisplay = field?.["x-display"];
|
|
58
|
+
const { editMode = "modal" } = topProps || {};
|
|
59
|
+
const { hasEdit } = topProps?.config || {};
|
|
60
|
+
|
|
61
|
+
// 弹窗编辑模式
|
|
62
|
+
if (editMode === "modal") {
|
|
63
|
+
return <td {...restProps}>{children}</td>;
|
|
64
|
+
}
|
|
65
|
+
// 无编辑权限或禁止编辑
|
|
66
|
+
const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
|
|
67
|
+
let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
|
|
68
|
+
if (!_editable) {
|
|
69
|
+
return <td {...restProps}>{children}</td>;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 编辑中状态
|
|
73
|
+
if (editing) {
|
|
74
|
+
// 使用 Schema 渲染模式
|
|
75
|
+
return (
|
|
76
|
+
<td {...restProps}>
|
|
77
|
+
<div className="editable-table-cell table-cell-editing">
|
|
78
|
+
<SchemaField
|
|
79
|
+
schema={{
|
|
80
|
+
type: "object",
|
|
81
|
+
properties: {
|
|
82
|
+
[field.name]: { ...field, title: "" },
|
|
83
|
+
},
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
86
|
+
{editMode !== "line" ? (
|
|
87
|
+
<div className="cell-editing-actions">
|
|
88
|
+
<CheckOutlined className="table-cell-confirm-icon" onClick={onSave} />
|
|
89
|
+
<CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
|
|
90
|
+
</div>
|
|
91
|
+
) : null}
|
|
92
|
+
</div>
|
|
93
|
+
</td>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 行内单元格编辑按钮
|
|
98
|
+
const showEditIcon = editMode === "line-cell" || editMode === "cell";
|
|
99
|
+
if (showEditIcon) {
|
|
100
|
+
return (
|
|
101
|
+
<td {...restProps}>
|
|
102
|
+
<div
|
|
103
|
+
className="editable-table-cell"
|
|
104
|
+
onDoubleClick={(e) => {
|
|
105
|
+
e?.preventDefault();
|
|
106
|
+
e?.stopPropagation();
|
|
107
|
+
onEdit(record, dataIndex);
|
|
52
108
|
}}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
109
|
+
>
|
|
110
|
+
{children}
|
|
111
|
+
<EditOutlined
|
|
112
|
+
className="table-cell-edit-icon"
|
|
113
|
+
onClick={(e) => {
|
|
114
|
+
e?.preventDefault();
|
|
115
|
+
e?.stopPropagation();
|
|
116
|
+
onEdit(record, dataIndex);
|
|
117
|
+
}}
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
</td>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
return <td {...restProps}>{children}</td>;
|
|
59
124
|
};
|
|
60
125
|
|
|
61
126
|
export const useEditTable = (props) => {
|
|
62
|
-
const {
|
|
127
|
+
const { topProps, idKey, columns, onEditSubmit, formRender } = props;
|
|
128
|
+
const { editMode = "modal" } = topProps || {};
|
|
63
129
|
|
|
64
|
-
const schema = _schema?.schema || _schema || {};
|
|
65
130
|
// 创建 formily 表单相关参数
|
|
66
131
|
/** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
|
|
67
132
|
const schemaScopeRef = useRef<{ _$tempData: Object }>();
|
|
@@ -90,21 +155,27 @@ export const useEditTable = (props) => {
|
|
|
90
155
|
);
|
|
91
156
|
|
|
92
157
|
// 是否可编辑状态逻辑处理
|
|
158
|
+
const [editingId, setEditingId] = useState("");
|
|
159
|
+
// 当前编辑的字段
|
|
93
160
|
const [editingKey, setEditingKey] = useState("");
|
|
94
|
-
/**
|
|
95
|
-
const isEditing = (record: Item) => record[idKey] ===
|
|
161
|
+
/** 判断当前 行 是否处于编辑状态 */
|
|
162
|
+
const isEditing = (record: Item) => record[idKey] === editingId;
|
|
163
|
+
/** 判断当前 单元格 是否处于编辑状态 */
|
|
164
|
+
const isEditingCell = (key) => key === editingKey;
|
|
96
165
|
|
|
97
166
|
/**
|
|
98
167
|
* 点击编辑按钮
|
|
99
168
|
* @param record
|
|
100
169
|
*/
|
|
101
|
-
const onEdit = async (record: Partial<Item> & { key: React.Key }) => {
|
|
170
|
+
const onEdit = async (record: Partial<Item> & { key: React.Key }, key) => {
|
|
102
171
|
const value = await (props.onEdit && props.onEdit(record));
|
|
103
172
|
formRender?.setValues(value);
|
|
104
|
-
|
|
173
|
+
setEditingId(record[idKey]);
|
|
174
|
+
editMode === "cell" && setEditingKey(key);
|
|
105
175
|
};
|
|
106
176
|
|
|
107
177
|
const onCancel = () => {
|
|
178
|
+
setEditingId("");
|
|
108
179
|
setEditingKey("");
|
|
109
180
|
};
|
|
110
181
|
|
|
@@ -117,6 +188,7 @@ export const useEditTable = (props) => {
|
|
|
117
188
|
(await formRender?.validate()) as Item;
|
|
118
189
|
onEditSubmit && onEditSubmit(formRender.values);
|
|
119
190
|
// 清除编辑目标
|
|
191
|
+
setEditingId("");
|
|
120
192
|
setEditingKey("");
|
|
121
193
|
} catch (errInfo) {
|
|
122
194
|
console.error("Validate Failed:", errInfo);
|
|
@@ -124,10 +196,11 @@ export const useEditTable = (props) => {
|
|
|
124
196
|
};
|
|
125
197
|
|
|
126
198
|
const mergedColumns = cloneDeep(columns)?.map((col) => {
|
|
127
|
-
|
|
199
|
+
const isActions = col.key === "_$actions";
|
|
200
|
+
if (!col.editable && !isActions) {
|
|
128
201
|
return col;
|
|
129
202
|
}
|
|
130
|
-
|
|
203
|
+
|
|
131
204
|
const resCol = {
|
|
132
205
|
...col,
|
|
133
206
|
onCell: (record: Item, ...args) => ({
|
|
@@ -137,14 +210,23 @@ export const useEditTable = (props) => {
|
|
|
137
210
|
field: col.field,
|
|
138
211
|
dataIndex: col.dataIndex,
|
|
139
212
|
title: col.title,
|
|
140
|
-
|
|
213
|
+
editable: col.editable,
|
|
214
|
+
editing: isActions
|
|
215
|
+
? false
|
|
216
|
+
: editMode === "cell"
|
|
217
|
+
? isEditing(record) && isEditingCell(col.dataIndex)
|
|
218
|
+
: isEditing(record),
|
|
219
|
+
topProps: props.topProps,
|
|
220
|
+
onEdit,
|
|
221
|
+
onSave,
|
|
222
|
+
onCancel,
|
|
141
223
|
}),
|
|
142
224
|
};
|
|
143
225
|
// 操作列编辑态改成保存、取消按钮
|
|
144
226
|
if (isActions) {
|
|
145
227
|
resCol.render = (record, index) => {
|
|
146
228
|
// 编辑态操作栏变成保存和取消按钮
|
|
147
|
-
if (record[idKey] ===
|
|
229
|
+
if (editMode === "line" && record[idKey] === editingId) {
|
|
148
230
|
return (
|
|
149
231
|
<div className="edit-table-actions">
|
|
150
232
|
<Button type="link" onClick={onSave}>
|
|
@@ -165,16 +247,6 @@ export const useEditTable = (props) => {
|
|
|
165
247
|
return {
|
|
166
248
|
onEdit,
|
|
167
249
|
SchemaField,
|
|
168
|
-
formRender,
|
|
169
250
|
mergedColumns,
|
|
170
|
-
Form: (props) => {
|
|
171
|
-
return (
|
|
172
|
-
<FormProvider form={formRender}>
|
|
173
|
-
<Form layout={schema?.form?.layout}>
|
|
174
|
-
<FormConsumer>{() => props.children}</FormConsumer>
|
|
175
|
-
</Form>
|
|
176
|
-
</FormProvider>
|
|
177
|
-
);
|
|
178
|
-
},
|
|
179
251
|
};
|
|
180
252
|
};
|
package/src/list-render.jsx
CHANGED
|
@@ -274,7 +274,8 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
function onEdit(row, idx) {
|
|
277
|
-
const {
|
|
277
|
+
const { editMode = "modal" } = props;
|
|
278
|
+
const isEditTable = editMode !== "modal";
|
|
278
279
|
if (props.fetchOnEdit !== false) {
|
|
279
280
|
const getQuery = {};
|
|
280
281
|
if (props.fetchById !== false) {
|
|
@@ -285,7 +286,9 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
285
286
|
return model
|
|
286
287
|
.get(getQuery)
|
|
287
288
|
.then((res) => {
|
|
289
|
+
// 解决非弹窗编辑模式触发弹窗问题
|
|
288
290
|
!isEditTable && handleEdit(res, row[idKey]);
|
|
291
|
+
return res;
|
|
289
292
|
})
|
|
290
293
|
.catch((err) => {
|
|
291
294
|
console.error("err", err);
|
|
@@ -293,6 +296,7 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
293
296
|
return Promise.reject(err);
|
|
294
297
|
});
|
|
295
298
|
} else {
|
|
299
|
+
// 解决非弹窗编辑模式触发弹窗问题
|
|
296
300
|
!isEditTable && handleEdit(row, row[idKey]);
|
|
297
301
|
return Promise.resolve(row);
|
|
298
302
|
}
|
|
@@ -445,7 +449,7 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
445
449
|
schemaScope={props.schemaScope}
|
|
446
450
|
i18n={i18n}
|
|
447
451
|
onEditSubmit={onEditSubmit}
|
|
448
|
-
|
|
452
|
+
topProps={props}
|
|
449
453
|
/>
|
|
450
454
|
) : null}
|
|
451
455
|
|
|
@@ -23,7 +23,7 @@ import "./index.less";
|
|
|
23
23
|
const scenario = "table-render";
|
|
24
24
|
|
|
25
25
|
function TableRender(props) {
|
|
26
|
-
const {
|
|
26
|
+
const { topProps, config = {}, query = {}, i18n, setList } = props;
|
|
27
27
|
const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
|
|
28
28
|
const {
|
|
29
29
|
dragColConf = {},
|
|
@@ -35,6 +35,8 @@ function TableRender(props) {
|
|
|
35
35
|
isShowTableFilter = false,
|
|
36
36
|
isTableSortXIdex = false,
|
|
37
37
|
} = config || {};
|
|
38
|
+
const { editMode = "modal" } = topProps || {};
|
|
39
|
+
const isEditTable = editMode !== "modal";
|
|
38
40
|
|
|
39
41
|
const [columns, setColumns] = useState([]);
|
|
40
42
|
const [columnList, setColumnList] = useState([]);
|
|
@@ -90,6 +92,7 @@ function TableRender(props) {
|
|
|
90
92
|
formRender,
|
|
91
93
|
components: props.components,
|
|
92
94
|
schemaScope: props.schemaScope,
|
|
95
|
+
topProps: props.topProps,
|
|
93
96
|
});
|
|
94
97
|
|
|
95
98
|
useEffect(() => {
|
|
@@ -232,7 +235,6 @@ function TableRender(props) {
|
|
|
232
235
|
|
|
233
236
|
columns.push({
|
|
234
237
|
..._colConf,
|
|
235
|
-
editable: isEditTable,
|
|
236
238
|
title: "操作",
|
|
237
239
|
key: "_$actions",
|
|
238
240
|
render: getColRender(function (text, record, index) {
|
|
@@ -243,8 +245,12 @@ function TableRender(props) {
|
|
|
243
245
|
return <Slots.tableActionsSlot {...slotProps} />;
|
|
244
246
|
}
|
|
245
247
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
+
const { editMode = "modal" } = props.topProps || {};
|
|
249
|
+
// 编辑按钮权限
|
|
250
|
+
const _hasEdit =
|
|
251
|
+
editMode !== "cell" &&
|
|
252
|
+
editMode !== "line-cell" &&
|
|
253
|
+
(hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
|
|
248
254
|
|
|
249
255
|
//详情按钮权限
|
|
250
256
|
const _hasDetail =
|
|
@@ -346,6 +352,7 @@ function TableRender(props) {
|
|
|
346
352
|
expandable: config.expandable,
|
|
347
353
|
loading: props.loading,
|
|
348
354
|
onRow: config?.onRow,
|
|
355
|
+
topProps: props.topProps,
|
|
349
356
|
...props.tableProps,
|
|
350
357
|
};
|
|
351
358
|
|
|
@@ -36,10 +36,41 @@
|
|
|
36
36
|
text-overflow: ellipsis;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
.editable-table-cell {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
.ant-formily-item {
|
|
43
|
+
margin-bottom: 0;
|
|
44
|
+
}
|
|
45
|
+
.table-cell-edit-icon {
|
|
46
|
+
margin-left: 8px;
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
color: var(--ant-primary-color, #1890ff);
|
|
49
|
+
opacity: 0;
|
|
50
|
+
}
|
|
51
|
+
.cell-editing-actions {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
.table-cell-confirm-icon,
|
|
54
|
+
.table-cell-cancel-icon {
|
|
55
|
+
margin-left: 12px;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
.table-cell-confirm-icon {
|
|
59
|
+
color: var(--ant-primary-color, #1890ff);
|
|
60
|
+
}
|
|
61
|
+
.table-cell-cancel-icon {
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
&:hover {
|
|
65
|
+
.table-cell-edit-icon {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
39
70
|
}
|
|
40
71
|
|
|
41
72
|
.row-dragging {
|
|
42
|
-
background: #
|
|
73
|
+
background: #fff;
|
|
43
74
|
border: 1px solid #ccc;
|
|
44
75
|
display: flex;
|
|
45
76
|
justify-content: space-between;
|
|
@@ -63,4 +94,4 @@
|
|
|
63
94
|
margin-bottom: 8px;
|
|
64
95
|
margin-left: 0 !important;
|
|
65
96
|
}
|
|
66
|
-
}
|
|
97
|
+
}
|