fan-standard-comp 4.0.3 → 4.0.5
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/README.md +7 -0
- package/dist/fan-standard-comp.min.css +1 -1
- package/dist/fan-standard-comp.min.js +1 -1
- package/es/FormComp/RenderItemGroup/index.js +11 -41
- package/es/FormComp/RenderItemGroup/style/index.js +1 -1
- package/es/StandardFilter/index.d.ts +1 -0
- package/es/StandardFilter/index.js +137 -37
- package/es/StandardForm/StepForm.js +9 -8
- package/es/StandardForm/style/index.js +2 -2
- package/es/StandardModal/style/index.js +8 -2
- package/es/StandardTable/index.js +2 -2
- package/es/StandardTable/style/index.js +2 -2
- package/es/StandardTable/style/index.less +0 -24
- package/es/data/general.config.js +4 -4
- package/es/theme/index.js +1 -1
- package/lib/FormComp/RenderItemGroup/index.js +10 -40
- package/lib/FormComp/RenderItemGroup/style/index.js +1 -1
- package/lib/StandardFilter/index.d.ts +1 -0
- package/lib/StandardFilter/index.js +137 -37
- package/lib/StandardForm/StepForm.js +9 -8
- package/lib/StandardForm/style/index.js +2 -2
- package/lib/StandardModal/style/index.js +8 -2
- package/lib/StandardTable/index.js +2 -2
- package/lib/StandardTable/style/index.js +2 -2
- package/lib/StandardTable/style/index.less +0 -24
- package/lib/data/general.config.js +4 -4
- package/lib/theme/index.js +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
12
12
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
14
|
/* eslint-disable */
|
|
15
|
-
import React, { useCallback } from "react";
|
|
15
|
+
import React, { useEffect, useCallback } from "react";
|
|
16
16
|
import { Row, Col, Tooltip, Form, Space } from "antd";
|
|
17
17
|
import { general } from "../../data";
|
|
18
18
|
import Field from "../FieldComponent";
|
|
@@ -43,12 +43,6 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
43
43
|
_useStyle2 = _slicedToArray(_useStyle, 2),
|
|
44
44
|
wrapSSR = _useStyle2[0],
|
|
45
45
|
hashId = _useStyle2[1];
|
|
46
|
-
// 栅格数量
|
|
47
|
-
// const columnNumber: number = useMemo(() => {
|
|
48
|
-
// // @ts-ignore
|
|
49
|
-
// return general.modalSize[size].columnNumber || 1
|
|
50
|
-
// }, [size, columnCount])
|
|
51
|
-
|
|
52
46
|
var setColSpan = function setColSpan(display, modalSize, columnCount) {
|
|
53
47
|
if (_typeof(display) === 'object' || display === 'block') {
|
|
54
48
|
// 栅格数量为:1
|
|
@@ -72,13 +66,13 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
72
66
|
return 12;
|
|
73
67
|
};
|
|
74
68
|
var updateFormFields = function updateFormFields() {
|
|
69
|
+
// console.log('用于触发更新表单实例赋值')
|
|
75
70
|
// if (newVal) form && form.setFieldsValue({ ...newVal })
|
|
76
71
|
if (doUpdateFormFields) doUpdateFormFields(); // 用于触发更新表单实例赋值
|
|
77
72
|
};
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
// }, [form])
|
|
73
|
+
useEffect(function () {
|
|
74
|
+
updateFormFields();
|
|
75
|
+
}, [form]);
|
|
82
76
|
|
|
83
77
|
// 渲染隐藏指定控件
|
|
84
78
|
var itemIsHide = function itemIsHide(isHide, getFieldsValue, FormInstance) {
|
|
@@ -207,7 +201,8 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
207
201
|
if (layout === "horizontal" || layout === "vertical") {
|
|
208
202
|
return /*#__PURE__*/React.createElement(Col, {
|
|
209
203
|
key: index,
|
|
210
|
-
span: item.colSpan || setColSpan(item.display, size, columnCount)
|
|
204
|
+
span: item.colSpan || setColSpan(item.display, size, columnCount),
|
|
205
|
+
style: item.style
|
|
211
206
|
}, /*#__PURE__*/React.createElement(FormItem, _extends({
|
|
212
207
|
name: type !== 'custom' && filedName,
|
|
213
208
|
className: classNames(fieldStatus === 'viewOnly' ? 'form-item-view-only' : '', 'spec-item-group-form-item'),
|
|
@@ -244,34 +239,7 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
244
239
|
type = item.type,
|
|
245
240
|
_item$display = item.display,
|
|
246
241
|
display = _item$display === void 0 ? 'side' : _item$display; // 当前可传参的配置值
|
|
247
|
-
|
|
248
242
|
var formLayout = calculateFormLayout(item);
|
|
249
|
-
// if (displayLayout) {
|
|
250
|
-
// // 如果未配置,则使用以下配置值
|
|
251
|
-
// formLayout = { ...displayLayout }
|
|
252
|
-
// }
|
|
253
|
-
// 优先级 displayLayout.side > displayLayout > general
|
|
254
|
-
// 优先级:若有displayLayout.block 则直接使用 general > displayLayout
|
|
255
|
-
// 还需要判断 layout为vertical还是horizontal
|
|
256
|
-
// @ts-ignore
|
|
257
|
-
// formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : ((!displayLayout || JSON.stringify(displayLayout) === '{}') ? general.modalSize[size].formLayout : displayLayout))
|
|
258
|
-
// if (item.hasOwnProperty('display')) {
|
|
259
|
-
// if (typeof display === 'string') {
|
|
260
|
-
// if (display === 'block') {
|
|
261
|
-
// // @ts-ignore
|
|
262
|
-
// formLayout = displayLayout?.block || general.modalSize[size].formBlockLayout
|
|
263
|
-
// } else {
|
|
264
|
-
// // 使用默认
|
|
265
|
-
// // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : displayLayout) || general.modalSize[size].formLayout
|
|
266
|
-
// }
|
|
267
|
-
// } else {
|
|
268
|
-
// formLayout = item.display // 对象类型传值如: {labelCol: {span: 3},wrapperCol: {span: 8}} 优先级最高
|
|
269
|
-
// }
|
|
270
|
-
// }
|
|
271
|
-
// // 当布局为 'inline' 时,不配置栅格结构
|
|
272
|
-
// if (layout === 'inline') {
|
|
273
|
-
// formLayout = {}
|
|
274
|
-
// }
|
|
275
243
|
// title标题或html渲染
|
|
276
244
|
if (type === 'title' || type === 'html') {
|
|
277
245
|
return /*#__PURE__*/React.createElement(FormItem, {
|
|
@@ -282,7 +250,8 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
282
250
|
var _item$protoConfig;
|
|
283
251
|
// isHide 返回为true则隐藏当前控件
|
|
284
252
|
return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? /*#__PURE__*/React.createElement(Col, {
|
|
285
|
-
span: item.colSpan || 24
|
|
253
|
+
span: item.colSpan || 24,
|
|
254
|
+
style: item.style
|
|
286
255
|
}, type === 'title' ? /*#__PURE__*/React.createElement("h3", _extends({}, item.protoConfig, {
|
|
287
256
|
className: "modalPanelTitle ".concat((item === null || item === void 0 || (_item$protoConfig = item.protoConfig) === null || _item$protoConfig === void 0 ? void 0 : _item$protoConfig.className) || '')
|
|
288
257
|
}), label) : label) : /*#__PURE__*/React.createElement(React.Fragment, null, null);
|
|
@@ -299,6 +268,7 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
299
268
|
return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? renderColFormItem(item, index, formLayout) : null;
|
|
300
269
|
});
|
|
301
270
|
}
|
|
271
|
+
// 常规表单项结构
|
|
302
272
|
return renderColFormItem(item, index, formLayout);
|
|
303
273
|
});
|
|
304
274
|
};
|
|
@@ -314,7 +284,7 @@ var RenderItemGroup = function RenderItemGroup(props) {
|
|
|
314
284
|
// 布局配置为horizontal或vertical
|
|
315
285
|
: /*#__PURE__*/React.createElement(Row, {
|
|
316
286
|
className: itemGroupCls,
|
|
317
|
-
gutter: layout === 'vertical' ? gutter || [
|
|
287
|
+
gutter: layout === 'vertical' ? gutter || [16, 16] : gutter
|
|
318
288
|
}, renderItemGroupNode())
|
|
319
289
|
/* itemGroup = ReactNode则直接返回 */ : /*#__PURE__*/React.createElement("div", {
|
|
320
290
|
className: itemGroupCls
|
|
@@ -28,7 +28,7 @@ var ItemGroupStyleFunc = function ItemGroupStyleFunc(prefix) {
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
'.modalPanelTitle, .modal-grid-title': {
|
|
31
|
-
margin: "0 0 ".concat(token.
|
|
31
|
+
margin: "0 0 ".concat(token.margin, "px 0"),
|
|
32
32
|
// paddingBottom: token.paddingXS,
|
|
33
33
|
borderBottom: "1px solid ".concat(token.colorBorder),
|
|
34
34
|
fontSize: token.fontSize
|
|
@@ -22,6 +22,7 @@ export interface StandardFilterProps {
|
|
|
22
22
|
colon?: boolean;
|
|
23
23
|
dateFormatter?: 'dayjs' | 'string';
|
|
24
24
|
itemGroupConfig?: object;
|
|
25
|
+
collapseable?: boolean;
|
|
25
26
|
[k: string]: any;
|
|
26
27
|
}
|
|
27
28
|
declare const StandardFilter: React.ForwardRefExoticComponent<Omit<StandardFilterProps, "ref"> & React.RefAttributes<unknown>>;
|
|
@@ -21,8 +21,10 @@ import { general } from "../data/";
|
|
|
21
21
|
import "./style/index.less";
|
|
22
22
|
import { FanContext } from "../ConfigContext";
|
|
23
23
|
import useStyle from "./style/FilterStyle";
|
|
24
|
+
import SpecIcon from "../SpecIcon";
|
|
24
25
|
var FormItem = Form.Item;
|
|
25
26
|
var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
27
|
+
var _filterFormRef$curren4;
|
|
26
28
|
var InitFanContext = useContext(FanContext);
|
|
27
29
|
var providerConfig = InitFanContext['StandardFilter'] || {}; // 使用上下文(全局配置)设置扩展的配置项
|
|
28
30
|
var _providerConfig$props = _objectSpread(_objectSpread({}, providerConfig), props),
|
|
@@ -56,7 +58,9 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
56
58
|
filterBtnsStyle = _providerConfig$props.filterBtnsStyle,
|
|
57
59
|
_providerConfig$props7 = _providerConfig$props.colon,
|
|
58
60
|
colon = _providerConfig$props7 === void 0 ? true : _providerConfig$props7,
|
|
59
|
-
dateFormatter = _providerConfig$props.dateFormatter
|
|
61
|
+
dateFormatter = _providerConfig$props.dateFormatter,
|
|
62
|
+
_providerConfig$props8 = _providerConfig$props.collapseable,
|
|
63
|
+
collapseable = _providerConfig$props8 === void 0 ? false : _providerConfig$props8;
|
|
60
64
|
var filterFormRef = useRef();
|
|
61
65
|
// ref 的转发
|
|
62
66
|
useImperativeHandle(ref, function () {
|
|
@@ -70,7 +74,10 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
70
74
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
71
75
|
isHideCount = _useState4[0],
|
|
72
76
|
setIsHideCount = _useState4[1]; // 表单隐藏项数量值
|
|
73
|
-
|
|
77
|
+
var _useState5 = useState(false),
|
|
78
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
79
|
+
collapsed = _useState6[0],
|
|
80
|
+
setCollapsed = _useState6[1];
|
|
74
81
|
var componentName = 'spec-standard-filter';
|
|
75
82
|
var _useStyle = useStyle(componentName),
|
|
76
83
|
_useStyle2 = _slicedToArray(_useStyle, 2),
|
|
@@ -79,8 +86,9 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
79
86
|
var filterFormLayout = useMemo(function () {
|
|
80
87
|
return formLayout || 'inline';
|
|
81
88
|
}, [formLayout]);
|
|
82
|
-
|
|
83
|
-
|
|
89
|
+
|
|
90
|
+
// 计算当前栅格数量,及对应的size
|
|
91
|
+
var columnNumberAndSize = useMemo(function () {
|
|
84
92
|
// 当前栅栅数量
|
|
85
93
|
var itemGroupSize = (itemGroupConfig === null || itemGroupConfig === void 0 ? void 0 : itemGroupConfig.size) || (filterFormLayout === 'horizontal' ? 'xxlg' : 'md');
|
|
86
94
|
if (itemGroupConfig !== null && itemGroupConfig !== void 0 && itemGroupConfig.columnCount) {
|
|
@@ -100,8 +108,31 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
100
108
|
break;
|
|
101
109
|
}
|
|
102
110
|
}
|
|
111
|
+
return {
|
|
112
|
+
columnNumber: general.modalSize[itemGroupSize].columnNumber,
|
|
113
|
+
itemGroupSize: itemGroupSize
|
|
114
|
+
};
|
|
115
|
+
}, [itemGroupConfig, filterFormLayout]);
|
|
116
|
+
|
|
117
|
+
// 计算表单隐藏项(开启展开与收缩)
|
|
118
|
+
var calculateHideCount = function calculateHideCount(filterFormRef, groups) {
|
|
119
|
+
var _filterFormRef$curren;
|
|
120
|
+
var formValues = filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren = filterFormRef.current) === null || _filterFormRef$curren === void 0 ? void 0 : _filterFormRef$curren.getFieldValue();
|
|
121
|
+
setIsHideCount((groups || []).filter(function (item) {
|
|
122
|
+
return (item === null || item === void 0 ? void 0 : item.isHidden) || (item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), filterFormRef) : false);
|
|
123
|
+
}).length);
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
// 配置筛选按钮(确认与取消)
|
|
127
|
+
var filterActionButtons = useMemo(function () {
|
|
128
|
+
var itemGroupSize = columnNumberAndSize.itemGroupSize,
|
|
129
|
+
columnNumber = columnNumberAndSize.columnNumber;
|
|
103
130
|
// 计算扣除栅格列数是否还有多余的项,用来判断筛选按钮的版式(初始化的时候,可能会受默认值内配置的isHide影响导致计算错误;或自定义表单控件组栅格影响)
|
|
104
|
-
|
|
131
|
+
// if (collapseable) {
|
|
132
|
+
// columnNumber = collapsed ? columnNumber : (columnNumber === 1 ? columnNumber = 2 : columnNumber)
|
|
133
|
+
// }
|
|
134
|
+
var calculateTimes = (reFormItemGroup.length - isHideCount) % columnNumber;
|
|
135
|
+
// console.log('当前多余的数量', calculateTimes, '当前隐藏的控件数量isHideCount==>', isHideCount, itemGroupSize, 'columnNumber', columnNumber)
|
|
105
136
|
// xs:1列 sm:1列 【span:24】
|
|
106
137
|
// md:2列 【span:12】
|
|
107
138
|
// lg:3列 xlg:3列 【span:8】
|
|
@@ -111,12 +142,16 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
111
142
|
label: '',
|
|
112
143
|
type: 'custom',
|
|
113
144
|
// display: 'block',
|
|
145
|
+
filedName: 'filterAction',
|
|
114
146
|
display: {
|
|
115
147
|
wrapperCol: {
|
|
116
|
-
// 占用的格子数按对应size配置的formItem(md
|
|
117
|
-
span: general.modalSize[itemGroupSize].formLayout.labelCol.span + general.modalSize[itemGroupSize].formLayout.wrapperCol.span + (itemGroupSize === 'md' ? 1 : 0)
|
|
148
|
+
// 占用的格子数按对应size配置的formItem(未配置折叠展开时,在md情况下需要额外再新增1)
|
|
149
|
+
span: general.modalSize[itemGroupSize].formLayout.labelCol.span + general.modalSize[itemGroupSize].formLayout.wrapperCol.span + (!collapseable && itemGroupSize === 'md' ? 1 : 0)
|
|
118
150
|
}
|
|
119
151
|
},
|
|
152
|
+
style: {
|
|
153
|
+
// textAlign: 'right'
|
|
154
|
+
},
|
|
120
155
|
protoFormItem: {
|
|
121
156
|
style: {
|
|
122
157
|
textAlign: filterFormLayout === 'horizontal' ? 'right' : 'left'
|
|
@@ -127,20 +162,33 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
127
162
|
customRender: function customRender() {
|
|
128
163
|
return /*#__PURE__*/React.createElement(FormItem, {
|
|
129
164
|
noStyle: true
|
|
130
|
-
},
|
|
165
|
+
}, onFilterReset && /*#__PURE__*/React.createElement(Button, _extends({
|
|
131
166
|
type: "primary",
|
|
132
|
-
|
|
133
|
-
|
|
167
|
+
onClick: handleReset,
|
|
168
|
+
ghost: true
|
|
169
|
+
}, cancelButtonProps), cancelText || '重置'), onFilterSearch && /*#__PURE__*/React.createElement(Button, _extends({
|
|
134
170
|
type: "primary",
|
|
135
171
|
style: {
|
|
136
172
|
marginLeft: 8
|
|
137
173
|
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
174
|
+
htmlType: "submit"
|
|
175
|
+
}, confirmButtonProps), confirmText || '查询'), filterFormLayout === 'horizontal' && collapseable && reFormItemGroup.length > columnNumberAndSize.columnNumber - 1 ? /*#__PURE__*/React.createElement(Button, {
|
|
176
|
+
type: 'link',
|
|
177
|
+
onClick: function onClick() {
|
|
178
|
+
return setCollapsed(!collapsed);
|
|
179
|
+
},
|
|
180
|
+
style: {
|
|
181
|
+
marginLeft: 8,
|
|
182
|
+
paddingInlineStart: 0,
|
|
183
|
+
paddingInlineEnd: 0
|
|
184
|
+
}
|
|
185
|
+
}, collapsed ? '收起' : '展开', /*#__PURE__*/React.createElement(SpecIcon, {
|
|
186
|
+
noPrefix: true,
|
|
187
|
+
name: collapsed ? 'speci-up' : 'speci-down'
|
|
188
|
+
})) : null);
|
|
141
189
|
}
|
|
142
190
|
})];
|
|
143
|
-
}, [confirmText, cancelText, filterFormLayout, reFormItemGroup, onFilterSearch, onFilterReset,
|
|
191
|
+
}, [confirmText, cancelText, filterFormLayout, reFormItemGroup, onFilterSearch, onFilterReset, columnNumberAndSize, filterFormRef, isHideCount, collapseable, collapsed]);
|
|
144
192
|
|
|
145
193
|
// 更新表单控件值,用于外部获取当前表单实例(force是否强制清空表单)
|
|
146
194
|
var updateFormFields = function updateFormFields(newVal, force) {
|
|
@@ -175,37 +223,29 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
175
223
|
})
|
|
176
224
|
} */
|
|
177
225
|
filterFormRef.current.setFieldsValue(_objectSpread(_objectSpread({}, resetValues), newVal || {})); // 直接清空表单的赋值
|
|
178
|
-
|
|
179
|
-
if (getFormFields) getFormFields(filterFormRef.current.getFieldsValue(), filterFormRef);
|
|
226
|
+
forceUpdateForm();
|
|
180
227
|
};
|
|
181
228
|
// 强制更新表单值,用于赋初始化实例值
|
|
182
229
|
var forceUpdateForm = useCallback(function () {
|
|
183
230
|
var formValues = filterFormRef.current.getFieldsValue();
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
if (getFormFields) getFormFields(
|
|
189
|
-
}, [dateFormatter, formItemGroup]);
|
|
190
|
-
// 计算表单隐藏项
|
|
191
|
-
var updateCalculate = useCallback(function (formValues) {
|
|
192
|
-
setIsHideCount(reFormItemGroup.filter(function (item) {
|
|
193
|
-
return item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), filterFormRef) : false;
|
|
194
|
-
}).length);
|
|
231
|
+
if (Object.prototype.hasOwnProperty.call(formValues, false)) {
|
|
232
|
+
delete formValues.false; // 自定义结构会莫名的出来一个false字段
|
|
233
|
+
}
|
|
234
|
+
calculateHideCount(filterFormRef, reFormItemGroup); // 更新当前表单数量,排除被隐藏的值
|
|
235
|
+
if (getFormFields) getFormFields(formValues, filterFormRef);
|
|
195
236
|
}, [reFormItemGroup, filterFormRef]);
|
|
196
237
|
var handleSearch = function handleSearch(values) {
|
|
197
238
|
if (Object.prototype.hasOwnProperty.call(values, false)) {
|
|
198
|
-
delete values.false; //
|
|
239
|
+
delete values.false; // 自定义结构会莫名的出来一个false字段
|
|
199
240
|
}
|
|
200
|
-
var resultValues = dateFormatter === 'string' ? UtilValueFormat(values,
|
|
201
|
-
console.log('格式化前数据', values)
|
|
202
|
-
console.log('格式化后数据', resultValues)
|
|
241
|
+
var resultValues = dateFormatter === 'string' ? UtilValueFormat(values, reFormItemGroup) : values;
|
|
242
|
+
// console.log('格式化前数据', values)
|
|
243
|
+
// console.log('格式化后数据', resultValues)
|
|
203
244
|
if (onFilterSearch) {
|
|
204
245
|
onFilterSearch(_objectSpread({}, resultValues));
|
|
205
246
|
}
|
|
206
247
|
};
|
|
207
248
|
var handleReset = function handleReset() {
|
|
208
|
-
var _filterFormRef$curren;
|
|
209
249
|
// 使用此方法,表单校验无法清空掉
|
|
210
250
|
// const resetValues = this.filterFormRef.current.getFieldsValue()
|
|
211
251
|
// Object.keys(resetValues).forEach((item) => {
|
|
@@ -214,20 +254,78 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
214
254
|
// this.filterFormRef.current.setFieldsValue({ ...resetValues }) // 直接清空表单的赋值
|
|
215
255
|
filterFormRef.current.resetFields();
|
|
216
256
|
setReFormItemGroup(formItemGroup); // 重新渲染列表
|
|
217
|
-
|
|
257
|
+
calculateHideCount(filterFormRef, reFormItemGroup);
|
|
218
258
|
if (onFilterReset) {
|
|
219
259
|
var _filterFormRef$curren2;
|
|
220
260
|
onFilterReset(filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren2 = filterFormRef.current) === null || _filterFormRef$curren2 === void 0 ? void 0 : _filterFormRef$curren2.getFieldsValue());
|
|
221
261
|
}
|
|
222
262
|
};
|
|
263
|
+
|
|
264
|
+
// 判断是否隐藏结构, display:'none'
|
|
265
|
+
var setItemHiddenNode = function setItemHiddenNode(item, index, collapsed, showItemNumber) {
|
|
266
|
+
// console.log('判断是否隐藏结构==>当前执行序号', index, showItemNumber)
|
|
267
|
+
if (item.filedName === 'filterAction') {
|
|
268
|
+
return {
|
|
269
|
+
isHidden: false
|
|
270
|
+
};
|
|
271
|
+
}
|
|
272
|
+
return {
|
|
273
|
+
// 栅格列为1时,显示1个表单项
|
|
274
|
+
isHidden: collapsed ? false : showItemNumber === 0 ? index !== 0 : !(index < showItemNumber)
|
|
275
|
+
};
|
|
276
|
+
};
|
|
277
|
+
// 渲染隐藏指定控件
|
|
278
|
+
var itemIsHide = function itemIsHide(isHide, getFieldsValue, FormInstance) {
|
|
279
|
+
if (typeof isHide === 'function') {
|
|
280
|
+
return isHide(getFieldsValue, FormInstance, 'default');
|
|
281
|
+
}
|
|
282
|
+
return isHide || false;
|
|
283
|
+
};
|
|
284
|
+
var updateGroupByCollapsed = function updateGroupByCollapsed(groups, formValues) {
|
|
285
|
+
// console.log('判断当前是否需要按展开与收缩显示对应的表单项')
|
|
286
|
+
var showItemNumber = columnNumberAndSize.columnNumber - 1;
|
|
287
|
+
return new Promise(function (resolve, reject) {
|
|
288
|
+
if (Array.isArray(groups)) {
|
|
289
|
+
resolve(groups.map(function (item, index) {
|
|
290
|
+
if (collapseable && filterFormLayout === "horizontal") {
|
|
291
|
+
var _setItemHiddenNode = setItemHiddenNode(item, index, collapsed, showItemNumber),
|
|
292
|
+
isHidden = _setItemHiddenNode.isHidden;
|
|
293
|
+
item.isHidden = isHidden;
|
|
294
|
+
item.style = _objectSpread(_objectSpread({}, item.style || {}), {}, {
|
|
295
|
+
display: item.isHidden ? 'none' : 'block'
|
|
296
|
+
});
|
|
297
|
+
if (item.hasOwnProperty('isHide') && itemIsHide(item.isHide, formValues, filterFormRef)) {
|
|
298
|
+
showItemNumber++;
|
|
299
|
+
item.isHidden = true;
|
|
300
|
+
// console.log('当前是结构是隐藏未渲染,跳到下个序号', showItemNumber)
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
return _objectSpread({}, item);
|
|
304
|
+
}));
|
|
305
|
+
} else {
|
|
306
|
+
resolve(groups);
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
};
|
|
310
|
+
useEffect(function () {
|
|
311
|
+
// 初始化表单数据数据
|
|
312
|
+
if (collapseable && filterFormLayout === "horizontal") {
|
|
313
|
+
var _filterFormRef$curren3;
|
|
314
|
+
var formValues = filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren3 = filterFormRef.current) === null || _filterFormRef$curren3 === void 0 ? void 0 : _filterFormRef$curren3.getFieldValue();
|
|
315
|
+
updateGroupByCollapsed(formItemGroup, formValues).then(function (groups) {
|
|
316
|
+
setReFormItemGroup(groups);
|
|
317
|
+
calculateHideCount(filterFormRef, groups);
|
|
318
|
+
});
|
|
319
|
+
} else {
|
|
320
|
+
setReFormItemGroup(formItemGroup);
|
|
321
|
+
}
|
|
322
|
+
}, [formItemGroup, collapseable, filterFormLayout, collapsed, columnNumberAndSize === null || columnNumberAndSize === void 0 ? void 0 : columnNumberAndSize.columnNumber, itemGroupConfig, filterFormRef, filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren4 = filterFormRef.current) === null || _filterFormRef$curren4 === void 0 ? void 0 : _filterFormRef$curren4.getFieldValue()]);
|
|
223
323
|
useEffect(function () {
|
|
224
324
|
if (initialValues && JSON.stringify(initialValues) !== '{}') {
|
|
225
325
|
updateFormFields(initialValues, true);
|
|
226
326
|
}
|
|
227
327
|
}, [initialValues]);
|
|
228
|
-
|
|
229
|
-
setReFormItemGroup(formItemGroup);
|
|
230
|
-
}, [formItemGroup]);
|
|
328
|
+
|
|
231
329
|
// / 表单列表组 formItemGroup 类型为数组或者React.Node
|
|
232
330
|
var renderFormItemGroup = function renderFormItemGroup() {
|
|
233
331
|
if (Array.isArray(reFormItemGroup)) {
|
|
@@ -237,7 +335,9 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
237
335
|
size: filterFormLayout === 'horizontal' ? 'xxlg' : 'md' // size决定栅格排列数量(4列排版)
|
|
238
336
|
,
|
|
239
337
|
layout: filterFormLayout,
|
|
240
|
-
form: filterFormRef
|
|
338
|
+
form: filterFormRef,
|
|
339
|
+
collapseable: collapseable,
|
|
340
|
+
collapsed: collapsed
|
|
241
341
|
// displayLayout={{labelCol: { span: 8 }, wrapperCol: { span: 16 },}}
|
|
242
342
|
,
|
|
243
343
|
doUpdateFormFields: function doUpdateFormFields() {
|
|
@@ -29,19 +29,20 @@ var StepForm = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
29
29
|
formItemGroup = _providerConfig$props2 === void 0 ? [] : _providerConfig$props2,
|
|
30
30
|
_providerConfig$props3 = _providerConfig$props.grid,
|
|
31
31
|
grid = _providerConfig$props3 === void 0 ? 'md' : _providerConfig$props3,
|
|
32
|
-
|
|
32
|
+
_providerConfig$props4 = _providerConfig$props.layout,
|
|
33
|
+
layout = _providerConfig$props4 === void 0 ? 'horizontal' : _providerConfig$props4,
|
|
33
34
|
onSubmit = _providerConfig$props.onSubmit,
|
|
34
|
-
_providerConfig$
|
|
35
|
-
actionAlign = _providerConfig$
|
|
35
|
+
_providerConfig$props5 = _providerConfig$props.actionAlign,
|
|
36
|
+
actionAlign = _providerConfig$props5 === void 0 ? 'center' : _providerConfig$props5,
|
|
36
37
|
fieldStatus = _providerConfig$props.fieldStatus,
|
|
37
|
-
_providerConfig$
|
|
38
|
-
fieldSize = _providerConfig$
|
|
38
|
+
_providerConfig$props6 = _providerConfig$props.fieldSize,
|
|
39
|
+
fieldSize = _providerConfig$props6 === void 0 ? "middle" : _providerConfig$props6,
|
|
39
40
|
initialValues = _providerConfig$props.initialValues,
|
|
40
41
|
actionHide = _providerConfig$props.actionHide,
|
|
41
|
-
_providerConfig$
|
|
42
|
-
stepsConfig = _providerConfig$
|
|
42
|
+
_providerConfig$props7 = _providerConfig$props.stepsConfig,
|
|
43
|
+
stepsConfig = _providerConfig$props7 === void 0 ? {
|
|
43
44
|
current: 0
|
|
44
|
-
} : _providerConfig$
|
|
45
|
+
} : _providerConfig$props7,
|
|
45
46
|
stepClick = _providerConfig$props.stepClick,
|
|
46
47
|
displayLayout = _providerConfig$props.displayLayout;
|
|
47
48
|
var _useState = useState(),
|
|
@@ -40,10 +40,10 @@ var StandardFormStyleFunc = function StandardFormStyleFunc(prefix) {
|
|
|
40
40
|
}
|
|
41
41
|
}), '.spec-standard-form', {
|
|
42
42
|
'.stepForm-content': {
|
|
43
|
-
margin: "".concat(token.
|
|
43
|
+
margin: "".concat(token.margin, "px 0px"),
|
|
44
44
|
'&.stepForm-content-vertical': {
|
|
45
45
|
'.standardForm-actions': {
|
|
46
|
-
marginTop: "".concat(token.
|
|
46
|
+
marginTop: "".concat(token.margin, "px")
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
}
|
|
@@ -14,8 +14,14 @@ var StandardPanelStyleFunc = function StandardPanelStyleFunc(prefix) {
|
|
|
14
14
|
};
|
|
15
15
|
return createStyleHook(prefix, function (token) {
|
|
16
16
|
var prefixCls = ".".concat(prefix);
|
|
17
|
+
console.log('token', token);
|
|
17
18
|
return [_defineProperty(_defineProperty(_defineProperty({}, prefixCls, {
|
|
18
|
-
'.ant-modal-body ': _objectSpread({}, scrollBar(token)),
|
|
19
|
+
'.ant-modal-body ': _objectSpread(_objectSpread({}, scrollBar(token)), {}, {
|
|
20
|
+
padding: "".concat(token.paddingXS, "px 0")
|
|
21
|
+
}),
|
|
22
|
+
'&.ant-modal .ant-modal-footer .ant-btn + .ant-btn': {
|
|
23
|
+
marginInlineStart: token.marginXS
|
|
24
|
+
},
|
|
19
25
|
'.modalForm': {
|
|
20
26
|
'&.ant-form-horizontal .ant-form-item-label': {
|
|
21
27
|
'> label': {
|
|
@@ -36,7 +42,7 @@ var StandardPanelStyleFunc = function StandardPanelStyleFunc(prefix) {
|
|
|
36
42
|
borderLeft: " 4px solid ".concat(token.colorPrimary)
|
|
37
43
|
}
|
|
38
44
|
}), '.modalPanelTitle, .modal-grid-title', {
|
|
39
|
-
margin: "0 0 ".concat(token.
|
|
45
|
+
margin: "0 0 ".concat(token.margin, "px 0"),
|
|
40
46
|
paddingBottom: token.paddingXS,
|
|
41
47
|
borderBottom: "1px solid ".concat(token.colorBorder)
|
|
42
48
|
})];
|
|
@@ -160,10 +160,10 @@ var StandardTable = function StandardTable(props) {
|
|
|
160
160
|
className: classNames(componentName, 'standard-table', className, hashId),
|
|
161
161
|
bordered: false,
|
|
162
162
|
title: title,
|
|
163
|
-
extra: /*#__PURE__*/React.createElement(RenderExtraButtonGroup, {
|
|
163
|
+
extra: batchButtonGroup || buttonGroup ? /*#__PURE__*/React.createElement(RenderExtraButtonGroup, {
|
|
164
164
|
buttonGroup: buttonGroup,
|
|
165
165
|
batchButtonGroup: batchButtonGroup
|
|
166
|
-
})
|
|
166
|
+
}) : null
|
|
167
167
|
}, /*#__PURE__*/React.createElement(Table, _extends({
|
|
168
168
|
rowKey: rowKey || 'id',
|
|
169
169
|
rowSelection: rowSelection ? _objectSpread({
|
|
@@ -25,8 +25,8 @@ var StandardTableStyleFunc = function StandardTableStyleFunc(prefix) {
|
|
|
25
25
|
return [_defineProperty(_defineProperty(_defineProperty({}, prefixCls, {
|
|
26
26
|
'.spec-standard-table': {},
|
|
27
27
|
'.spec-pagination': {
|
|
28
|
-
padding:
|
|
29
|
-
background: token.colorBgBase
|
|
28
|
+
// padding: `${token.paddingSM}px 0 ${token.paddingXS}px 0`,
|
|
29
|
+
// background: token.colorBgBase,
|
|
30
30
|
},
|
|
31
31
|
'.ant-table-body': _objectSpread({}, scrollBar(token)),
|
|
32
32
|
'.spec-table-dropdown': {
|
|
@@ -7,19 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
.spec-pagination {
|
|
9
9
|
width: 100%;
|
|
10
|
-
margin-top: 0;
|
|
11
|
-
margin-bottom: 0;
|
|
12
|
-
//padding: @padding-sm 0 @padding-xs 0;
|
|
13
10
|
text-align: right;
|
|
14
|
-
//background: @background-color-base;
|
|
15
|
-
border-radius: 0;
|
|
16
|
-
|
|
17
|
-
.ant-pagination-total-text {
|
|
18
|
-
float: left;
|
|
19
|
-
flex:1;
|
|
20
|
-
text-align: left;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
11
|
.ant-pagination-options-size-changer.ant-select {
|
|
24
12
|
margin-right: 0
|
|
25
13
|
}
|
|
@@ -54,11 +42,6 @@
|
|
|
54
42
|
.ant-table-fixed-left .ant-table-thead > tr > th:first-child {
|
|
55
43
|
padding: 0;
|
|
56
44
|
}
|
|
57
|
-
|
|
58
|
-
.ant-table-body {
|
|
59
|
-
//.spec-scrollbar-base()
|
|
60
|
-
}
|
|
61
|
-
|
|
62
45
|
.spec-table-dropdown {
|
|
63
46
|
li a[disabled] {
|
|
64
47
|
//color: @disabled-bg;
|
|
@@ -72,12 +55,6 @@
|
|
|
72
55
|
//border-color: @error-color
|
|
73
56
|
}
|
|
74
57
|
|
|
75
|
-
.themeTech {
|
|
76
|
-
.standard-table .spec-pagination {
|
|
77
|
-
background: transparent;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
58
|
.spec-pagination {
|
|
82
59
|
.ant-pagination-total-text {
|
|
83
60
|
float: left;
|
|
@@ -169,7 +146,6 @@
|
|
|
169
146
|
}
|
|
170
147
|
}
|
|
171
148
|
}
|
|
172
|
-
|
|
173
149
|
//.ant-table-tbody > tr.ant-table-expanded-row,
|
|
174
150
|
//.ant-table-tbody > tr.ant-table-expanded-row:hover {
|
|
175
151
|
// background: #f9f9fb;
|
|
@@ -98,18 +98,18 @@ export default {
|
|
|
98
98
|
width: 560,
|
|
99
99
|
formLayout: {
|
|
100
100
|
labelCol: {
|
|
101
|
-
span:
|
|
101
|
+
span: 7
|
|
102
102
|
},
|
|
103
103
|
wrapperCol: {
|
|
104
|
-
span:
|
|
104
|
+
span: 15
|
|
105
105
|
}
|
|
106
106
|
},
|
|
107
107
|
formBlockLayout: {
|
|
108
108
|
labelCol: {
|
|
109
|
-
span:
|
|
109
|
+
span: 7
|
|
110
110
|
},
|
|
111
111
|
wrapperCol: {
|
|
112
|
-
span:
|
|
112
|
+
span: 15
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
},
|
package/es/theme/index.js
CHANGED
|
@@ -5,7 +5,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
5
5
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
6
6
|
export var scrollBar = function scrollBar(token) {
|
|
7
7
|
return _defineProperty(_defineProperty(_defineProperty({}, '&::-webkit-scrollbar-track-piece', {
|
|
8
|
-
background: new TinyColor('#c1c1c1').setAlpha(0.
|
|
8
|
+
background: new TinyColor('#c1c1c1').setAlpha(0.02).toRgbString() // new TinyColor(token.colorPrimary).setAlpha(0.1)
|
|
9
9
|
}), '&::-webkit-scrollbar', {
|
|
10
10
|
width: '6px',
|
|
11
11
|
height: '6px'
|