@guo514360255/antd-lib 1.5.1 → 1.6.1
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/dist/CustomForm/form.d.ts +28 -0
- package/dist/CustomForm/index.d.ts +5 -0
- package/dist/CustomForm/index.js +157 -0
- package/dist/CustomForm/index.less +25 -0
- package/dist/CustomFormModal/index.d.ts +1 -1
- package/dist/CustomFormModal/index.js +81 -178
- package/dist/CustomFormModal/index.less +0 -29
- package/dist/FormItem/index.js +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: 郭郭
|
|
3
|
+
* @Date: 2026/1/27
|
|
4
|
+
* @Description:
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { CustomColumnProps } from '@guo514360255/antd-lib/src';
|
|
8
|
+
|
|
9
|
+
interface CustomFormProps {
|
|
10
|
+
/**
|
|
11
|
+
* 表单字段
|
|
12
|
+
*/
|
|
13
|
+
columns: CustomColumnProps[];
|
|
14
|
+
/**
|
|
15
|
+
* 表单字段
|
|
16
|
+
*/
|
|
17
|
+
formColumns?: CustomColumnProps[];
|
|
18
|
+
/**
|
|
19
|
+
* 表单字段
|
|
20
|
+
*/
|
|
21
|
+
formList?: {
|
|
22
|
+
[key: string]: CustomColumnProps[];
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* 字段key
|
|
26
|
+
*/
|
|
27
|
+
formKey?: string;
|
|
28
|
+
}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
4
|
+
/*
|
|
5
|
+
* @Author: 郭郭
|
|
6
|
+
* @Date: 2026/1/27
|
|
7
|
+
* @Description:
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { DeleteOutlined } from '@ant-design/icons';
|
|
11
|
+
import { useFormData } from "../store/useFormData";
|
|
12
|
+
import { Button, Form } from 'antd';
|
|
13
|
+
import cloneDeep from 'lodash/cloneDeep';
|
|
14
|
+
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
|
15
|
+
import useDeepCompareEffect from 'use-deep-compare-effect';
|
|
16
|
+
import CustomUpload from "../CustomUpload";
|
|
17
|
+
import FormItem from "../FormItem";
|
|
18
|
+
import "./index.less";
|
|
19
|
+
var CustomForm = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
20
|
+
var columns = props.columns,
|
|
21
|
+
_props$formList = props.formList,
|
|
22
|
+
formList = _props$formList === void 0 ? {} : _props$formList,
|
|
23
|
+
formKey = props.formKey,
|
|
24
|
+
formColumns = props.formColumns;
|
|
25
|
+
var _useFormData = useFormData(),
|
|
26
|
+
formValues = _useFormData.formValues,
|
|
27
|
+
setFieldValues = _useFormData.setFieldValues;
|
|
28
|
+
var formRef = useRef();
|
|
29
|
+
var placeholder = {
|
|
30
|
+
input: '输入',
|
|
31
|
+
upload: '上传'
|
|
32
|
+
};
|
|
33
|
+
var handleColumns = function handleColumns(columns) {
|
|
34
|
+
var newColumns = (columns || []).filter(function (item) {
|
|
35
|
+
return !item.hideInForm;
|
|
36
|
+
});
|
|
37
|
+
newColumns === null || newColumns === void 0 || newColumns.forEach(function (item) {
|
|
38
|
+
// 所有select/treeSelect都附加搜索功能
|
|
39
|
+
if (['select', 'treeSelect'].includes(item.type)) {
|
|
40
|
+
item.fieldProps = _objectSpread({
|
|
41
|
+
showSearch: true
|
|
42
|
+
}, item.fieldProps || {});
|
|
43
|
+
}
|
|
44
|
+
return item;
|
|
45
|
+
});
|
|
46
|
+
return cloneDeep(newColumns).map(function (item) {
|
|
47
|
+
if (item.formKey) {
|
|
48
|
+
var key = /_form_key$/.test(item.formKey) ? '' : formKey;
|
|
49
|
+
item.dataIndex = item.formKey + key;
|
|
50
|
+
}
|
|
51
|
+
return item;
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
var getPlaceholder = function getPlaceholder(type, title) {
|
|
55
|
+
return "\u8BF7".concat(placeholder[type || 'input'] || '选择').concat(title ? title : '');
|
|
56
|
+
};
|
|
57
|
+
useImperativeHandle(ref, function () {
|
|
58
|
+
return {
|
|
59
|
+
setValues: function setValues(values) {
|
|
60
|
+
setFieldValues(values);
|
|
61
|
+
},
|
|
62
|
+
getFormRef: function getFormRef() {
|
|
63
|
+
return formRef.current;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// 深度监听form数据
|
|
69
|
+
useDeepCompareEffect(function () {
|
|
70
|
+
var _formRef$current;
|
|
71
|
+
(_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setFieldsValue(formValues || {});
|
|
72
|
+
}, [formValues]);
|
|
73
|
+
useEffect(function () {
|
|
74
|
+
return function () {
|
|
75
|
+
setFieldValues({});
|
|
76
|
+
};
|
|
77
|
+
}, []);
|
|
78
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: "formContainer"
|
|
80
|
+
}, /*#__PURE__*/React.createElement(Form, {
|
|
81
|
+
size: "large",
|
|
82
|
+
layout: "vertical",
|
|
83
|
+
autoComplete: "off",
|
|
84
|
+
ref: formRef,
|
|
85
|
+
clearOnDestroy: true
|
|
86
|
+
}, handleColumns(Array.isArray(formColumns) && formColumns.length ? formColumns.filter(function (item) {
|
|
87
|
+
return !item.hideInForm;
|
|
88
|
+
}) : columns || []).map(function (item) {
|
|
89
|
+
var defaultPlaceholder = getPlaceholder(item.type, item.title);
|
|
90
|
+
return item.type === 'list' ? /*#__PURE__*/React.createElement(Form.List, {
|
|
91
|
+
name: item.dataIndex,
|
|
92
|
+
key: item.dataIndex
|
|
93
|
+
}, function (fields, _ref, _ref2) {
|
|
94
|
+
var add = _ref.add,
|
|
95
|
+
remove = _ref.remove;
|
|
96
|
+
var errors = _ref2.errors;
|
|
97
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field, key) {
|
|
98
|
+
return /*#__PURE__*/React.createElement(Form.Item, {
|
|
99
|
+
label: key === 0 ? "".concat(item.title) : '',
|
|
100
|
+
key: field.key,
|
|
101
|
+
rules: item.required ? [{
|
|
102
|
+
required: true
|
|
103
|
+
}] : [],
|
|
104
|
+
className: "dynamicItemContainer"
|
|
105
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
106
|
+
className: "listGroupContainer"
|
|
107
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
108
|
+
className: "listGroupContent"
|
|
109
|
+
}, (formList[item.dataIndex] || []).filter(function (item) {
|
|
110
|
+
return !item.hideInForm;
|
|
111
|
+
}).map(function (list) {
|
|
112
|
+
var placeholder = getPlaceholder(list.type, list.title);
|
|
113
|
+
return /*#__PURE__*/React.createElement(Form.Item, {
|
|
114
|
+
name: [field.name, list.dataIndex],
|
|
115
|
+
label: list.title,
|
|
116
|
+
key: list.dataIndex,
|
|
117
|
+
labelAlign: "right",
|
|
118
|
+
rules: [{
|
|
119
|
+
required: list.required,
|
|
120
|
+
message: placeholder
|
|
121
|
+
}].concat(_toConsumableArray(list.rules || []))
|
|
122
|
+
}, list.type === 'upload' ? /*#__PURE__*/React.createElement(CustomUpload, list) : /*#__PURE__*/React.createElement(FormItem, _extends({}, list, {
|
|
123
|
+
defaultPlaceholder: placeholder
|
|
124
|
+
})));
|
|
125
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
126
|
+
className: "listDelIcon"
|
|
127
|
+
}, /*#__PURE__*/React.createElement(DeleteOutlined, {
|
|
128
|
+
onClick: function onClick() {
|
|
129
|
+
return remove(field.name);
|
|
130
|
+
}
|
|
131
|
+
}))));
|
|
132
|
+
}), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
|
|
133
|
+
type: "dashed",
|
|
134
|
+
block: true,
|
|
135
|
+
onClick: function onClick() {
|
|
136
|
+
return add();
|
|
137
|
+
}
|
|
138
|
+
}, '新增' + item.title), /*#__PURE__*/React.createElement(Form.ErrorList, {
|
|
139
|
+
errors: errors
|
|
140
|
+
})));
|
|
141
|
+
}) : /*#__PURE__*/React.createElement(Form.Item, {
|
|
142
|
+
key: item.dataIndex,
|
|
143
|
+
label: item.title ? "".concat(item.title) : '',
|
|
144
|
+
name: item.dataIndex,
|
|
145
|
+
rules: [{
|
|
146
|
+
required: item.required,
|
|
147
|
+
message: defaultPlaceholder
|
|
148
|
+
}].concat(_toConsumableArray(item.rules || []))
|
|
149
|
+
}, item.type === 'upload' ?
|
|
150
|
+
/*#__PURE__*/
|
|
151
|
+
// @ts-ignore
|
|
152
|
+
React.createElement(CustomUpload, item) : /*#__PURE__*/React.createElement(FormItem, _extends({}, item, {
|
|
153
|
+
defaultPlaceholder: defaultPlaceholder
|
|
154
|
+
})));
|
|
155
|
+
})));
|
|
156
|
+
});
|
|
157
|
+
export default CustomForm;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.formContainer{
|
|
2
|
+
.dynamicItemContainer{
|
|
3
|
+
display: flex;
|
|
4
|
+
width: 100%;
|
|
5
|
+
> div {
|
|
6
|
+
width: 100%;
|
|
7
|
+
.listGroupContainer{
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: 20px;
|
|
10
|
+
background-color: #f4f4f4;
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
padding: 10px 10px 0 10px;
|
|
13
|
+
.listGroupContent{
|
|
14
|
+
flex: 1;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
> div:nth-child(2) {
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.listDelIcon{
|
|
21
|
+
color: #F5222D;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CustomFormModalProps } from "./formModal";
|
|
2
1
|
import React from 'react';
|
|
2
|
+
import type { CustomFormModalProps } from './formModal';
|
|
3
3
|
import './index.less';
|
|
4
4
|
declare const CustomFormModal: React.ForwardRefExoticComponent<Omit<CustomFormModalProps, "ref"> & React.RefAttributes<any>>;
|
|
5
5
|
export default CustomFormModal;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
4
4
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
5
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
6
5
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
7
6
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
8
7
|
var _excluded = ["type", "onSubmit", "columns", "formColumns", "saveRequest", "updateRequest", "detailRequest", "handleData", "title", "tableActionRef", "formList", "handleModalData"];
|
|
@@ -12,14 +11,10 @@ var _excluded = ["type", "onSubmit", "columns", "formColumns", "saveRequest", "u
|
|
|
12
11
|
* @Description:
|
|
13
12
|
*/
|
|
14
13
|
|
|
15
|
-
import { DeleteOutlined } from '@ant-design/icons';
|
|
16
14
|
import { useFormData } from "../store/useFormData";
|
|
17
|
-
import { Button, Drawer,
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import useDeepCompareEffect from 'use-deep-compare-effect';
|
|
21
|
-
import CustomUpload from "../CustomUpload";
|
|
22
|
-
import FormItem from "../FormItem";
|
|
15
|
+
import { Button, Drawer, message, Modal, Spin } from 'antd';
|
|
16
|
+
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
17
|
+
import CustomForm from "../CustomForm";
|
|
23
18
|
import "./index.less";
|
|
24
19
|
var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
25
20
|
var type = props.type,
|
|
@@ -62,49 +57,26 @@ var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
62
57
|
drawer: Drawer
|
|
63
58
|
};
|
|
64
59
|
var Component = modalType[type || 'drawer'];
|
|
65
|
-
var placeholder = {
|
|
66
|
-
input: '输入',
|
|
67
|
-
upload: '上传'
|
|
68
|
-
};
|
|
69
|
-
var handleColumns = function handleColumns(columns) {
|
|
70
|
-
var newColumns = (columns || []).filter(function (item) {
|
|
71
|
-
return !item.hideInForm;
|
|
72
|
-
});
|
|
73
|
-
newColumns === null || newColumns === void 0 || newColumns.forEach(function (item) {
|
|
74
|
-
// 所有select/treeSelect都附加搜索功能
|
|
75
|
-
if (['select', 'treeSelect'].includes(item.type)) {
|
|
76
|
-
item.fieldProps = _objectSpread({
|
|
77
|
-
showSearch: true
|
|
78
|
-
}, item.fieldProps || {});
|
|
79
|
-
}
|
|
80
|
-
return item;
|
|
81
|
-
});
|
|
82
|
-
return cloneDeep(newColumns).map(function (item) {
|
|
83
|
-
if (item.formKey) {
|
|
84
|
-
var _key = /_form_key$/.test(item.formKey) ? '' : formKey;
|
|
85
|
-
item.dataIndex = item.formKey + _key;
|
|
86
|
-
}
|
|
87
|
-
return item;
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
60
|
useImperativeHandle(ref, function () {
|
|
91
61
|
return {
|
|
92
62
|
open: function open(values) {
|
|
93
63
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
94
|
-
var _formRef$current
|
|
64
|
+
var _formRef$current;
|
|
65
|
+
var ref, data, newData;
|
|
95
66
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
96
67
|
while (1) switch (_context2.prev = _context2.next) {
|
|
97
68
|
case 0:
|
|
69
|
+
ref = (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFormRef();
|
|
98
70
|
setOpen(true);
|
|
99
71
|
if (!(values !== null && values !== void 0 && values.id && detailRequest)) {
|
|
100
|
-
_context2.next =
|
|
72
|
+
_context2.next = 28;
|
|
101
73
|
break;
|
|
102
74
|
}
|
|
103
75
|
setDetailLoading(true);
|
|
104
|
-
_context2.prev =
|
|
105
|
-
_context2.next =
|
|
76
|
+
_context2.prev = 4;
|
|
77
|
+
_context2.next = 7;
|
|
106
78
|
return detailRequest(values.id);
|
|
107
|
-
case
|
|
79
|
+
case 7:
|
|
108
80
|
data = _context2.sent;
|
|
109
81
|
columns === null || columns === void 0 || columns.forEach(function (item) {
|
|
110
82
|
if (item.formKey) {
|
|
@@ -112,33 +84,32 @@ var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
112
84
|
}
|
|
113
85
|
});
|
|
114
86
|
if (!handleModalData) {
|
|
115
|
-
_context2.next =
|
|
87
|
+
_context2.next = 15;
|
|
116
88
|
break;
|
|
117
89
|
}
|
|
118
|
-
_context2.next =
|
|
90
|
+
_context2.next = 12;
|
|
119
91
|
return handleModalData(data || {});
|
|
120
|
-
case
|
|
92
|
+
case 12:
|
|
121
93
|
_context2.t0 = _context2.sent;
|
|
122
|
-
_context2.next =
|
|
94
|
+
_context2.next = 16;
|
|
123
95
|
break;
|
|
124
|
-
case 14:
|
|
125
|
-
_context2.t0 = data || {};
|
|
126
96
|
case 15:
|
|
97
|
+
_context2.t0 = data || {};
|
|
98
|
+
case 16:
|
|
127
99
|
newData = _context2.t0;
|
|
128
100
|
setFieldValues(newData);
|
|
129
|
-
|
|
101
|
+
ref === null || ref === void 0 || ref.setFieldsValue(newData || {});
|
|
130
102
|
return _context2.abrupt("return");
|
|
131
|
-
case
|
|
132
|
-
_context2.prev =
|
|
133
|
-
_context2.t1 = _context2["catch"](
|
|
103
|
+
case 22:
|
|
104
|
+
_context2.prev = 22;
|
|
105
|
+
_context2.t1 = _context2["catch"](4);
|
|
134
106
|
console.warn(_context2.t1);
|
|
135
|
-
case
|
|
136
|
-
_context2.prev =
|
|
107
|
+
case 25:
|
|
108
|
+
_context2.prev = 25;
|
|
137
109
|
setDetailLoading(false);
|
|
138
|
-
return _context2.finish(
|
|
139
|
-
case
|
|
110
|
+
return _context2.finish(25);
|
|
111
|
+
case 28:
|
|
140
112
|
setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
141
|
-
var _formRef$current2;
|
|
142
113
|
var newData;
|
|
143
114
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
144
115
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -158,99 +129,112 @@ var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
158
129
|
case 7:
|
|
159
130
|
newData = _context.t0;
|
|
160
131
|
setFieldValues(newData);
|
|
161
|
-
|
|
132
|
+
ref === null || ref === void 0 || ref.setFieldsValue(newData || {});
|
|
162
133
|
case 10:
|
|
163
134
|
case "end":
|
|
164
135
|
return _context.stop();
|
|
165
136
|
}
|
|
166
137
|
}, _callee);
|
|
167
138
|
})), 0);
|
|
168
|
-
case
|
|
139
|
+
case 29:
|
|
169
140
|
case "end":
|
|
170
141
|
return _context2.stop();
|
|
171
142
|
}
|
|
172
|
-
}, _callee2, null, [[
|
|
143
|
+
}, _callee2, null, [[4, 22, 25, 28]]);
|
|
173
144
|
}))();
|
|
174
145
|
},
|
|
175
146
|
getFormRef: function getFormRef() {
|
|
176
|
-
|
|
147
|
+
var _formRef$current2;
|
|
148
|
+
return (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFormRef();
|
|
177
149
|
}
|
|
178
150
|
};
|
|
179
151
|
});
|
|
180
152
|
var submitEvent = /*#__PURE__*/function () {
|
|
181
153
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
182
|
-
var _formRef$current3
|
|
154
|
+
var _formRef$current3;
|
|
155
|
+
var ref, _tableActionRef$curre, formData, data, result, _key;
|
|
183
156
|
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
184
157
|
while (1) switch (_context3.prev = _context3.next) {
|
|
185
158
|
case 0:
|
|
186
159
|
setLoading(true);
|
|
187
|
-
|
|
188
|
-
_context3.
|
|
189
|
-
|
|
190
|
-
|
|
160
|
+
ref = (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.getFormRef();
|
|
161
|
+
_context3.prev = 2;
|
|
162
|
+
if (!(!updateRequest && !saveRequest)) {
|
|
163
|
+
_context3.next = 6;
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
messageApi.error('未提供保存或修改接口');
|
|
167
|
+
return _context3.abrupt("return");
|
|
168
|
+
case 6:
|
|
169
|
+
_context3.next = 8;
|
|
170
|
+
return ref === null || ref === void 0 ? void 0 : ref.validateFields();
|
|
171
|
+
case 8:
|
|
191
172
|
formData = _context3.sent;
|
|
192
173
|
data = _objectSpread(_objectSpread({}, formValues), formData);
|
|
193
174
|
result = {};
|
|
194
|
-
for (
|
|
195
|
-
if (new RegExp(formKey).test(
|
|
196
|
-
result[
|
|
175
|
+
for (_key in data) {
|
|
176
|
+
if (new RegExp(formKey).test(_key)) {
|
|
177
|
+
result[_key.replace(new RegExp(formKey), '')] = data[_key];
|
|
197
178
|
} else {
|
|
198
|
-
result[
|
|
179
|
+
result[_key] = data[_key];
|
|
199
180
|
}
|
|
200
181
|
}
|
|
201
182
|
if (handleData) {
|
|
202
183
|
result = handleData(result);
|
|
203
184
|
}
|
|
204
185
|
if (!formValues.id) {
|
|
205
|
-
_context3.next =
|
|
186
|
+
_context3.next = 19;
|
|
206
187
|
break;
|
|
207
188
|
}
|
|
208
189
|
if (!updateRequest) {
|
|
209
|
-
_context3.next =
|
|
190
|
+
_context3.next = 17;
|
|
210
191
|
break;
|
|
211
192
|
}
|
|
212
|
-
_context3.next =
|
|
193
|
+
_context3.next = 17;
|
|
213
194
|
return updateRequest(result);
|
|
214
|
-
case
|
|
215
|
-
_context3.next =
|
|
195
|
+
case 17:
|
|
196
|
+
_context3.next = 22;
|
|
216
197
|
break;
|
|
217
|
-
case
|
|
198
|
+
case 19:
|
|
218
199
|
if (!saveRequest) {
|
|
219
|
-
_context3.next =
|
|
200
|
+
_context3.next = 22;
|
|
220
201
|
break;
|
|
221
202
|
}
|
|
222
|
-
_context3.next =
|
|
203
|
+
_context3.next = 22;
|
|
223
204
|
return saveRequest(result);
|
|
224
|
-
case
|
|
205
|
+
case 22:
|
|
225
206
|
setOpen(false);
|
|
226
|
-
|
|
207
|
+
ref === null || ref === void 0 || ref.resetFields();
|
|
227
208
|
if (onSubmit) {
|
|
228
209
|
onSubmit();
|
|
229
210
|
}
|
|
230
211
|
messageApi.success('提交成功');
|
|
231
212
|
tableActionRef === null || tableActionRef === void 0 || (_tableActionRef$curre = tableActionRef.current) === null || _tableActionRef$curre === void 0 || _tableActionRef$curre.reload();
|
|
232
|
-
_context3.next =
|
|
213
|
+
_context3.next = 32;
|
|
233
214
|
break;
|
|
234
|
-
case
|
|
235
|
-
_context3.prev =
|
|
236
|
-
_context3.t0 = _context3["catch"](
|
|
215
|
+
case 29:
|
|
216
|
+
_context3.prev = 29;
|
|
217
|
+
_context3.t0 = _context3["catch"](2);
|
|
237
218
|
console.log(_context3.t0, 'submit request error');
|
|
238
|
-
case
|
|
219
|
+
case 32:
|
|
220
|
+
_context3.prev = 32;
|
|
239
221
|
setLoading(false);
|
|
240
|
-
|
|
222
|
+
return _context3.finish(32);
|
|
223
|
+
case 35:
|
|
241
224
|
case "end":
|
|
242
225
|
return _context3.stop();
|
|
243
226
|
}
|
|
244
|
-
}, _callee3, null, [[
|
|
227
|
+
}, _callee3, null, [[2, 29, 32, 35]]);
|
|
245
228
|
}));
|
|
246
229
|
return function submitEvent() {
|
|
247
230
|
return _ref2.apply(this, arguments);
|
|
248
231
|
};
|
|
249
232
|
}();
|
|
250
233
|
var close = function close() {
|
|
251
|
-
var _formRef$
|
|
234
|
+
var _formRef$current4;
|
|
252
235
|
setOpen(false);
|
|
253
|
-
(_formRef$
|
|
236
|
+
var ref = (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getFormRef();
|
|
237
|
+
ref === null || ref === void 0 || ref.resetFields();
|
|
254
238
|
if (onSubmit) {
|
|
255
239
|
onSubmit();
|
|
256
240
|
}
|
|
@@ -264,22 +248,11 @@ var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
264
248
|
type: "primary",
|
|
265
249
|
size: "large",
|
|
266
250
|
loading: loading,
|
|
267
|
-
onClick: submitEvent
|
|
251
|
+
onClick: submitEvent,
|
|
252
|
+
style: {
|
|
253
|
+
marginLeft: 20
|
|
254
|
+
}
|
|
268
255
|
}, "\u63D0\u4EA4")];
|
|
269
|
-
var getPlaceholder = function getPlaceholder(type, title) {
|
|
270
|
-
return "\u8BF7".concat(placeholder[type || 'input'] || '选择').concat(title ? title : '');
|
|
271
|
-
};
|
|
272
|
-
|
|
273
|
-
// 深度监听form数据
|
|
274
|
-
useDeepCompareEffect(function () {
|
|
275
|
-
var _formRef$current6;
|
|
276
|
-
(_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(formValues || {});
|
|
277
|
-
}, [formValues]);
|
|
278
|
-
useEffect(function () {
|
|
279
|
-
return function () {
|
|
280
|
-
setFieldValues({});
|
|
281
|
-
};
|
|
282
|
-
}, []);
|
|
283
256
|
return /*#__PURE__*/React.createElement("div", {
|
|
284
257
|
className: "custom-modal-container"
|
|
285
258
|
}, messageHolder, /*#__PURE__*/React.createElement(Spin, {
|
|
@@ -292,83 +265,13 @@ var CustomFormModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
292
265
|
title: "".concat(!!formValues.id ? '编辑' : '新增').concat(title || '')
|
|
293
266
|
}, other, {
|
|
294
267
|
open: open,
|
|
295
|
-
onClose: close
|
|
296
|
-
|
|
297
|
-
}), /*#__PURE__*/React.createElement(Form, {
|
|
298
|
-
size: "large",
|
|
299
|
-
layout: "vertical",
|
|
300
|
-
autoComplete: "off",
|
|
268
|
+
onClose: close
|
|
269
|
+
}), /*#__PURE__*/React.createElement(CustomForm, {
|
|
301
270
|
ref: formRef,
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
return item.type === 'list' ? /*#__PURE__*/React.createElement(Form.List, {
|
|
308
|
-
name: item.dataIndex,
|
|
309
|
-
key: item.dataIndex
|
|
310
|
-
}, function (fields, _ref3, _ref4) {
|
|
311
|
-
var add = _ref3.add,
|
|
312
|
-
remove = _ref3.remove;
|
|
313
|
-
var errors = _ref4.errors;
|
|
314
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field, key) {
|
|
315
|
-
return /*#__PURE__*/React.createElement(Form.Item, {
|
|
316
|
-
label: key === 0 ? "".concat(item.title) : '',
|
|
317
|
-
key: field.key,
|
|
318
|
-
rules: item.required ? [{
|
|
319
|
-
required: true
|
|
320
|
-
}] : [],
|
|
321
|
-
className: "dynamicItemContainer"
|
|
322
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
323
|
-
className: "listGroupContainer"
|
|
324
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
325
|
-
className: "listGroupContent"
|
|
326
|
-
}, (formList[item.dataIndex] || []).filter(function (item) {
|
|
327
|
-
return !item.hideInForm;
|
|
328
|
-
}).map(function (list) {
|
|
329
|
-
var placeholder = getPlaceholder(list.type, list.title);
|
|
330
|
-
return /*#__PURE__*/React.createElement(Form.Item, {
|
|
331
|
-
name: [field.name, list.dataIndex],
|
|
332
|
-
label: list.title,
|
|
333
|
-
key: list.dataIndex,
|
|
334
|
-
labelAlign: "right",
|
|
335
|
-
rules: [{
|
|
336
|
-
required: list.required,
|
|
337
|
-
message: placeholder
|
|
338
|
-
}].concat(_toConsumableArray(list.rules || []))
|
|
339
|
-
}, list.type === 'upload' ? /*#__PURE__*/React.createElement(CustomUpload, list) : /*#__PURE__*/React.createElement(FormItem, _extends({}, list, {
|
|
340
|
-
defaultPlaceholder: placeholder
|
|
341
|
-
})));
|
|
342
|
-
})), /*#__PURE__*/React.createElement("span", {
|
|
343
|
-
className: "listDelIcon"
|
|
344
|
-
}, /*#__PURE__*/React.createElement(DeleteOutlined, {
|
|
345
|
-
onClick: function onClick() {
|
|
346
|
-
return remove(field.name);
|
|
347
|
-
}
|
|
348
|
-
}))));
|
|
349
|
-
}), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
|
|
350
|
-
type: "dashed",
|
|
351
|
-
block: true,
|
|
352
|
-
onClick: function onClick() {
|
|
353
|
-
return add();
|
|
354
|
-
}
|
|
355
|
-
}, '新增' + item.title), /*#__PURE__*/React.createElement(Form.ErrorList, {
|
|
356
|
-
errors: errors
|
|
357
|
-
})));
|
|
358
|
-
}) : /*#__PURE__*/React.createElement(Form.Item, {
|
|
359
|
-
key: item.dataIndex,
|
|
360
|
-
label: item.title ? "".concat(item.title) : '',
|
|
361
|
-
name: item.dataIndex,
|
|
362
|
-
rules: [{
|
|
363
|
-
required: item.required,
|
|
364
|
-
message: defaultPlaceholder
|
|
365
|
-
}].concat(_toConsumableArray(item.rules || []))
|
|
366
|
-
}, item.type === 'upload' ?
|
|
367
|
-
/*#__PURE__*/
|
|
368
|
-
// @ts-ignore
|
|
369
|
-
React.createElement(CustomUpload, item) : /*#__PURE__*/React.createElement(FormItem, _extends({}, item, {
|
|
370
|
-
defaultPlaceholder: defaultPlaceholder
|
|
371
|
-
})));
|
|
372
|
-
}))));
|
|
271
|
+
columns: columns,
|
|
272
|
+
formList: formList,
|
|
273
|
+
formKey: formKey,
|
|
274
|
+
formColumns: formColumns
|
|
275
|
+
})));
|
|
373
276
|
});
|
|
374
277
|
export default CustomFormModal;
|
|
@@ -3,32 +3,3 @@
|
|
|
3
3
|
z-index: 1001
|
|
4
4
|
}
|
|
5
5
|
}
|
|
6
|
-
.formContainer{
|
|
7
|
-
.ant-drawer-footer{
|
|
8
|
-
display: flex;
|
|
9
|
-
gap: 16px;
|
|
10
|
-
}
|
|
11
|
-
.dynamicItemContainer{
|
|
12
|
-
display: flex;
|
|
13
|
-
width: 100%;
|
|
14
|
-
> div {
|
|
15
|
-
width: 100%;
|
|
16
|
-
.listGroupContainer{
|
|
17
|
-
display: flex;
|
|
18
|
-
gap: 20px;
|
|
19
|
-
background-color: #f4f4f4;
|
|
20
|
-
border-radius: 4px;
|
|
21
|
-
padding: 10px 10px 0 10px;
|
|
22
|
-
.listGroupContent{
|
|
23
|
-
flex: 1;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
> div:nth-child(2) {
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
.listDelIcon{
|
|
30
|
-
color: #F5222D;
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
package/dist/FormItem/index.js
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ export { default as CustomTable } from './CustomTable';
|
|
|
7
7
|
export type { CustomTableProps } from './CustomTable/table';
|
|
8
8
|
export { default as CustomScroll } from './CustomScroll';
|
|
9
9
|
export type { CustomScrollProps } from './CustomScroll/scroll';
|
|
10
|
+
export { default as CustomForm } from './CustomForm';
|
|
11
|
+
export type { CustomFormProps } from './CustomForm/form';
|
|
10
12
|
export { default as CustomTag } from './CustomTag';
|
|
11
13
|
export { default as CustomUpload } from './CustomUpload';
|
|
12
14
|
export { default as DynamicIcon } from './DynamicIcon';
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as CustomDetailModal } from "./CustomDetailModal";
|
|
|
2
2
|
export { default as CustomModal } from "./CustomFormModal";
|
|
3
3
|
export { default as CustomTable } from "./CustomTable";
|
|
4
4
|
export { default as CustomScroll } from "./CustomScroll";
|
|
5
|
+
export { default as CustomForm } from "./CustomForm";
|
|
5
6
|
export { default as CustomTag } from "./CustomTag";
|
|
6
7
|
export { default as CustomUpload } from "./CustomUpload";
|
|
7
8
|
export { default as DynamicIcon } from "./DynamicIcon";
|