@teamix/pro 1.2.11 → 1.2.12
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/212.js +1 -1
- package/dist/pro.css +1 -1
- package/dist/pro.js +1382 -644
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/es/actions/index.scss +14 -0
- package/es/form/Filter/index.d.ts +2 -5
- package/es/form/Filter/index.js +3 -44
- package/es/form/Filter/index.scss +71 -0
- package/es/form/Filter/index2.d.ts +8 -0
- package/es/form/Filter/index2.js +318 -0
- package/es/form/ProForm/index.scss +1 -19
- package/es/form/ProForm/useFormDisplayValues.d.ts +3 -5
- package/es/form/ProForm/useFormDisplayValues.js +44 -38
- package/es/form/index.d.ts +2 -1
- package/es/form/index.js +3 -2
- package/es/form/typing.d.ts +3 -0
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/table/components/Filter/index.js +8 -6
- package/es/table/components/Filter/index.scss +7 -3
- package/es/table/components/Layout/index.js +10 -1
- package/es/table/index.js +2 -3
- package/lib/actions/index.scss +14 -0
- package/lib/form/Filter/index.d.ts +2 -5
- package/lib/form/Filter/index.js +4 -45
- package/lib/form/Filter/index.scss +71 -0
- package/lib/form/Filter/index2.d.ts +8 -0
- package/lib/form/Filter/index2.js +342 -0
- package/lib/form/ProForm/index.scss +1 -19
- package/lib/form/ProForm/useFormDisplayValues.d.ts +3 -5
- package/lib/form/ProForm/useFormDisplayValues.js +51 -44
- package/lib/form/index.d.ts +2 -1
- package/lib/form/index.js +5 -3
- package/lib/form/typing.d.ts +3 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/table/components/Filter/index.js +8 -6
- package/lib/table/components/Filter/index.scss +7 -3
- package/lib/table/components/Layout/index.js +10 -1
- package/lib/table/index.js +1 -2
- package/package.json +4 -4
package/es/actions/index.scss
CHANGED
@@ -96,3 +96,17 @@
|
|
96
96
|
margin-bottom: 0px;
|
97
97
|
}
|
98
98
|
}
|
99
|
+
|
100
|
+
.next-dialog-body {
|
101
|
+
.teamix-pro-info {
|
102
|
+
.next-card-content-container {
|
103
|
+
margin-top: 10px;
|
104
|
+
padding-bottom: 10px;
|
105
|
+
.next-col.next-col-24:last-child {
|
106
|
+
.teamix-pro-field-info-form-item:last-child {
|
107
|
+
padding-bottom: 0px;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
@@ -1,16 +1,13 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import type { IFilterProps } from '../typing';
|
3
|
+
import './index.scss';
|
3
4
|
/**
|
4
5
|
* 简单筛选
|
5
6
|
*/
|
6
7
|
declare const SimpleFilter: React.FC<IFilterProps>;
|
7
|
-
/**
|
8
|
-
* 查询筛选
|
9
|
-
*/
|
10
|
-
declare const QueryFilter: React.FC<IFilterProps>;
|
11
8
|
/**
|
12
9
|
* 高级筛选
|
13
10
|
*/
|
14
11
|
declare const AdvancedFilter: React.FC<IFilterProps>;
|
15
|
-
export { AdvancedFilter, SimpleFilter
|
12
|
+
export { AdvancedFilter, SimpleFilter };
|
16
13
|
export default AdvancedFilter;
|
package/es/form/Filter/index.js
CHANGED
@@ -1,5 +1,4 @@
|
|
1
|
-
var _excluded = ["schema", "triggerType", "onFilter"]
|
2
|
-
_excluded2 = ["schema", "triggerType", "onFilter"];
|
1
|
+
var _excluded = ["schema", "triggerType", "onFilter"];
|
3
2
|
|
4
3
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
5
4
|
|
@@ -29,6 +28,7 @@ import { usePrefixCls, getMessage } from '@teamix/utils';
|
|
29
28
|
import { createForm } from '@formily/core';
|
30
29
|
import ProForm from '../ProForm';
|
31
30
|
import { mergeArrayValue } from '../utils';
|
31
|
+
import './index.scss';
|
32
32
|
|
33
33
|
var getEventProps = function getEventProps(triggerType, onFilter) {
|
34
34
|
var keydownEvent = {
|
@@ -89,47 +89,6 @@ var SimpleFilter = /*#__PURE__*/memo(function (props) {
|
|
89
89
|
SimpleFilter.defaultProps = {
|
90
90
|
triggerType: 'change'
|
91
91
|
};
|
92
|
-
/**
|
93
|
-
* 查询筛选
|
94
|
-
*/
|
95
|
-
|
96
|
-
var QueryFilter = /*#__PURE__*/memo(function (props) {
|
97
|
-
var schema = props.schema,
|
98
|
-
triggerType = props.triggerType,
|
99
|
-
onFilter = props.onFilter,
|
100
|
-
otherProps = _objectWithoutProperties(props, _excluded2);
|
101
|
-
|
102
|
-
var prefixCls = usePrefixCls('', {
|
103
|
-
prefix: 'teamix-pro-form-filter-query'
|
104
|
-
});
|
105
|
-
var querySchema = useMemo(function () {
|
106
|
-
return [{
|
107
|
-
component: 'QueryFilter',
|
108
|
-
props: {
|
109
|
-
placeholder: 'placeholder'
|
110
|
-
},
|
111
|
-
children: schema
|
112
|
-
}, {
|
113
|
-
type: 'void',
|
114
|
-
decorator: null,
|
115
|
-
component: 'Submit',
|
116
|
-
props: {
|
117
|
-
style: _objectSpread({}, triggerType === 'submit' ? {} : {
|
118
|
-
display: 'none'
|
119
|
-
})
|
120
|
-
}
|
121
|
-
}];
|
122
|
-
}, []);
|
123
|
-
var eventProps = getEventProps(triggerType, onFilter);
|
124
|
-
return /*#__PURE__*/React.createElement(ProForm, _objectSpread(_objectSpread(_objectSpread({
|
125
|
-
feedbackLayout: "none",
|
126
|
-
breakpoints: [],
|
127
|
-
bordered: false
|
128
|
-
}, otherProps), eventProps), {}, {
|
129
|
-
className: cls(prefixCls, props.className),
|
130
|
-
schema: querySchema
|
131
|
-
}));
|
132
|
-
});
|
133
92
|
/**
|
134
93
|
* 高级筛选
|
135
94
|
*/
|
@@ -221,5 +180,5 @@ AdvancedFilter.defaultProps = {
|
|
221
180
|
labelCol: 6,
|
222
181
|
wrapperCol: 18
|
223
182
|
};
|
224
|
-
export { AdvancedFilter, SimpleFilter
|
183
|
+
export { AdvancedFilter, SimpleFilter };
|
225
184
|
export default AdvancedFilter;
|
@@ -0,0 +1,71 @@
|
|
1
|
+
@import '../global.scss';
|
2
|
+
|
3
|
+
$query-filter: #{$teamix-pro-form}-query-filter;
|
4
|
+
|
5
|
+
.#{$query-filter} {
|
6
|
+
.#{$query-filter}-inline {
|
7
|
+
display: flex;
|
8
|
+
justify-content: space-between;
|
9
|
+
}
|
10
|
+
.#{$query-filter}-left {
|
11
|
+
display: flex;
|
12
|
+
}
|
13
|
+
.#{$query-filter}-addonBefore {
|
14
|
+
flex: 0 1 auto;
|
15
|
+
margin-right: 8px;
|
16
|
+
}
|
17
|
+
.#{$query-filter}-simple {
|
18
|
+
flex: 0 0 auto;
|
19
|
+
margin-right: -8px;
|
20
|
+
margin-bottom: 8px;
|
21
|
+
}
|
22
|
+
.#{$query-filter}-toggle {
|
23
|
+
margin-bottom: 8px;
|
24
|
+
}
|
25
|
+
.#{$query-filter}-addonAfter {
|
26
|
+
flex: 0 1 auto;
|
27
|
+
margin-left: 8px;
|
28
|
+
}
|
29
|
+
.#{$query-filter}-tag-title {
|
30
|
+
margin-right: 12px;
|
31
|
+
color: var(--color-text1-8, #848484);
|
32
|
+
}
|
33
|
+
.#{$query-filter}-tag-content {
|
34
|
+
color: var(--color-text1-2, #5a5a5a);
|
35
|
+
font-weight: bold;
|
36
|
+
}
|
37
|
+
.#{$query-filter}-tag-hidden {
|
38
|
+
display: none;
|
39
|
+
}
|
40
|
+
.#{$query-filter}-advanced {
|
41
|
+
padding: 16px;
|
42
|
+
background-color: var(--color-fill1-2, #f7f7f7);
|
43
|
+
}
|
44
|
+
.#{$query-filter}-advanced-hidden {
|
45
|
+
display: none;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
// 筛选
|
50
|
+
.#{$teamix-pro-form}-filter-advanced,
|
51
|
+
.#{$teamix-pro-form}-filter-simple {
|
52
|
+
.#{$form-item-cls}-feedback-layout-popover {
|
53
|
+
margin-bottom: 0;
|
54
|
+
}
|
55
|
+
.#{$css-prefix}date-picker2-input {
|
56
|
+
.#{$css-prefix}input {
|
57
|
+
width: inherit;
|
58
|
+
input {
|
59
|
+
width: inherit;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
// 筛选和抽屉按钮
|
66
|
+
.#{$teamix-pro-form}-filter-advanced,
|
67
|
+
.#{$css-prefix}drawer-footer {
|
68
|
+
.#{$css-prefix}formily-button-group {
|
69
|
+
margin-top: 0;
|
70
|
+
}
|
71
|
+
}
|
@@ -0,0 +1,318 @@
|
|
1
|
+
var _excluded = ["schema", "triggerType", "onFilter"];
|
2
|
+
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
|
+
|
5
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
6
|
+
|
7
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
8
|
+
|
9
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
10
|
+
|
11
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
12
|
+
|
13
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
14
|
+
|
15
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
16
|
+
|
17
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
18
|
+
|
19
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
20
|
+
|
21
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
22
|
+
|
23
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
24
|
+
|
25
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
26
|
+
|
27
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
28
|
+
|
29
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
30
|
+
|
31
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
32
|
+
|
33
|
+
import React, { memo, useCallback, useMemo, useState } from 'react';
|
34
|
+
import cls from 'classnames';
|
35
|
+
import { Tag, Button, Badge } from '@alicloudfe/components';
|
36
|
+
import TeamixIcon from '@teamix/icon';
|
37
|
+
import { createForm } from '@formily/core';
|
38
|
+
import { usePrefixCls, getMessage } from '@teamix/utils';
|
39
|
+
import ProForm from '../ProForm';
|
40
|
+
import { getFormDisplayValues } from '../ProForm/useFormDisplayValues';
|
41
|
+
import { mergeArrayValue } from '../utils';
|
42
|
+
import './index.scss';
|
43
|
+
|
44
|
+
var getEventProps = function getEventProps(triggerType, onFilter) {
|
45
|
+
var keydownEvent = {
|
46
|
+
onSubmit: onFilter
|
47
|
+
};
|
48
|
+
var changeEvent = {
|
49
|
+
onChange: onFilter
|
50
|
+
};
|
51
|
+
var eventMap = {
|
52
|
+
keydown: keydownEvent,
|
53
|
+
change: _objectSpread(_objectSpread({}, keydownEvent), changeEvent),
|
54
|
+
submit: keydownEvent
|
55
|
+
};
|
56
|
+
return eventMap[triggerType];
|
57
|
+
};
|
58
|
+
|
59
|
+
var schemaTemp = [{
|
60
|
+
name: 'taskName',
|
61
|
+
title: '实例名称',
|
62
|
+
component: 'Input',
|
63
|
+
required: true,
|
64
|
+
props: {
|
65
|
+
style: {
|
66
|
+
width: 180
|
67
|
+
},
|
68
|
+
placeholder: '请输入'
|
69
|
+
}
|
70
|
+
}];
|
71
|
+
/**
|
72
|
+
* 简单筛选
|
73
|
+
*/
|
74
|
+
|
75
|
+
var SimpleFilter = /*#__PURE__*/memo(function (props) {
|
76
|
+
var schema = props.schema,
|
77
|
+
triggerType = props.triggerType,
|
78
|
+
onFilter = props.onFilter,
|
79
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
80
|
+
|
81
|
+
var prefixCls = usePrefixCls('', {
|
82
|
+
prefix: 'teamix-pro-form-filter-simple'
|
83
|
+
});
|
84
|
+
var simpleSchema = useMemo(function () {
|
85
|
+
return [{
|
86
|
+
component: 'FormFlex',
|
87
|
+
props: {
|
88
|
+
size: 8
|
89
|
+
},
|
90
|
+
children: [].concat(_toConsumableArray(schema), [{
|
91
|
+
type: 'void',
|
92
|
+
decorator: null,
|
93
|
+
component: 'Submit',
|
94
|
+
props: {
|
95
|
+
style: _objectSpread({}, triggerType === 'submit' ? {} : {
|
96
|
+
display: 'none'
|
97
|
+
})
|
98
|
+
}
|
99
|
+
}])
|
100
|
+
}];
|
101
|
+
}, []);
|
102
|
+
var eventProps = getEventProps(triggerType, onFilter);
|
103
|
+
return /*#__PURE__*/React.createElement(ProForm, _objectSpread(_objectSpread(_objectSpread({
|
104
|
+
feedbackLayout: "popover",
|
105
|
+
breakpoints: [],
|
106
|
+
inset: true
|
107
|
+
}, otherProps), eventProps), {}, {
|
108
|
+
className: cls(prefixCls, props.className),
|
109
|
+
schema: simpleSchema
|
110
|
+
}));
|
111
|
+
});
|
112
|
+
SimpleFilter.defaultProps = {
|
113
|
+
triggerType: 'change'
|
114
|
+
};
|
115
|
+
/**
|
116
|
+
* 高级筛选
|
117
|
+
*/
|
118
|
+
|
119
|
+
var AdvancedFilter = /*#__PURE__*/memo(function (props) {
|
120
|
+
var form = useMemo(function () {
|
121
|
+
return (props === null || props === void 0 ? void 0 : props.form) || createForm();
|
122
|
+
}, []);
|
123
|
+
var schema = props.schema,
|
124
|
+
triggerType = props.triggerType,
|
125
|
+
onFilter = props.onFilter,
|
126
|
+
onReset = props.onReset,
|
127
|
+
layout = props.layout,
|
128
|
+
labelAlign = props.labelAlign,
|
129
|
+
wrapperAlign = props.wrapperAlign,
|
130
|
+
labelCol = props.labelCol,
|
131
|
+
wrapperCol = props.wrapperCol;
|
132
|
+
var prefixCls = usePrefixCls('', {
|
133
|
+
prefix: 'teamix-pro-form-filter-advanced'
|
134
|
+
});
|
135
|
+
var gridSchema = useMemo(function () {
|
136
|
+
return [{
|
137
|
+
name: 'FormGrid',
|
138
|
+
component: 'FormGrid',
|
139
|
+
props: {
|
140
|
+
breakpoints: [480, 720, 990, 1200, Infinity],
|
141
|
+
maxColumns: [1, 2, 3, 3, 4],
|
142
|
+
columnGap: 16,
|
143
|
+
rowGap: 12
|
144
|
+
},
|
145
|
+
children: [].concat(_toConsumableArray(schema), [{
|
146
|
+
component: 'FormGrid.GridColumn',
|
147
|
+
props: {
|
148
|
+
gridSpan: -1
|
149
|
+
},
|
150
|
+
children: [{
|
151
|
+
component: 'FormButtonGroup',
|
152
|
+
props: {
|
153
|
+
align: 'right'
|
154
|
+
},
|
155
|
+
children: [{
|
156
|
+
component: 'Reset',
|
157
|
+
props: {
|
158
|
+
onResetValidateSuccess: onReset,
|
159
|
+
style: _objectSpread({}, triggerType === 'submit' ? {} : {
|
160
|
+
marginRight: -16
|
161
|
+
}),
|
162
|
+
children: getMessage('reset')
|
163
|
+
}
|
164
|
+
}, {
|
165
|
+
component: 'Submit',
|
166
|
+
props: {
|
167
|
+
style: _objectSpread({}, triggerType === 'submit' ? {
|
168
|
+
marginRight: -8
|
169
|
+
} : {
|
170
|
+
display: 'none'
|
171
|
+
}),
|
172
|
+
children: getMessage('search')
|
173
|
+
}
|
174
|
+
}]
|
175
|
+
}]
|
176
|
+
}])
|
177
|
+
}];
|
178
|
+
}, []);
|
179
|
+
var getTeamixLayout = useMemo(function () {
|
180
|
+
return {
|
181
|
+
breakpoints: [990],
|
182
|
+
layout: mergeArrayValue(['vertical'], layout),
|
183
|
+
labelAlign: mergeArrayValue(['left'], labelAlign),
|
184
|
+
wrapperAlign: mergeArrayValue(['left'], wrapperAlign),
|
185
|
+
labelCol: mergeArrayValue([24], labelCol),
|
186
|
+
wrapperCol: mergeArrayValue([24], wrapperCol)
|
187
|
+
};
|
188
|
+
}, [layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
|
189
|
+
var eventProps = getEventProps(triggerType, onFilter);
|
190
|
+
return /*#__PURE__*/React.createElement(ProForm, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
191
|
+
feedbackLayout: "popover"
|
192
|
+
}, props), eventProps), getTeamixLayout), {}, {
|
193
|
+
form: form,
|
194
|
+
className: cls(prefixCls, props.className),
|
195
|
+
schema: gridSchema,
|
196
|
+
onSubmit: onFilter
|
197
|
+
}));
|
198
|
+
});
|
199
|
+
AdvancedFilter.defaultProps = {
|
200
|
+
triggerType: 'change',
|
201
|
+
layout: 'horizontal',
|
202
|
+
labelAlign: 'right',
|
203
|
+
labelCol: 6,
|
204
|
+
wrapperCol: 18
|
205
|
+
};
|
206
|
+
/**
|
207
|
+
* 查询筛选
|
208
|
+
*/
|
209
|
+
|
210
|
+
var QueryFilter = /*#__PURE__*/memo(function (props) {
|
211
|
+
var _useState = useState(true),
|
212
|
+
_useState2 = _slicedToArray(_useState, 2),
|
213
|
+
advancedFilterVisible = _useState2[0],
|
214
|
+
setAdvancedFilterVisible = _useState2[1];
|
215
|
+
|
216
|
+
var _useState3 = useState([]),
|
217
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
218
|
+
tagDataSource = _useState4[0],
|
219
|
+
setTagDataSource = _useState4[1]; // const [values, setValues] = useState<any>();
|
220
|
+
|
221
|
+
|
222
|
+
var form = useMemo(function () {
|
223
|
+
return (props === null || props === void 0 ? void 0 : props.form) || createForm({
|
224
|
+
validateFirst: true
|
225
|
+
});
|
226
|
+
}, []);
|
227
|
+
var schema = props.schema,
|
228
|
+
addonAfter = props.addonAfter,
|
229
|
+
addonBefore = props.addonBefore;
|
230
|
+
var prefixCls = usePrefixCls('', {
|
231
|
+
prefix: 'teamix-pro-form-query-filter'
|
232
|
+
}); // 展开收起高级筛选
|
233
|
+
|
234
|
+
var toggleAdvancedFilter = useCallback(function () {
|
235
|
+
setAdvancedFilterVisible(function (visible) {
|
236
|
+
return !visible;
|
237
|
+
});
|
238
|
+
}, []); // 获取标签数据
|
239
|
+
|
240
|
+
var getTagDataSource = useCallback(function (form) {
|
241
|
+
var displayValues = getFormDisplayValues(form);
|
242
|
+
return Object.entries(displayValues).map(function (_ref) {
|
243
|
+
var _data$displayValue;
|
244
|
+
|
245
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
246
|
+
key = _ref2[0],
|
247
|
+
data = _ref2[1];
|
248
|
+
|
249
|
+
return {
|
250
|
+
key: key,
|
251
|
+
label: data.title,
|
252
|
+
value: (_data$displayValue = data.displayValue) !== null && _data$displayValue !== void 0 ? _data$displayValue : data.value
|
253
|
+
};
|
254
|
+
}); // .filter((item) => isValid(item.value));
|
255
|
+
}, []); // 表单值变化
|
256
|
+
|
257
|
+
var onFormValueChange = useCallback(function (values) {
|
258
|
+
setTagDataSource(getTagDataSource(form));
|
259
|
+
}, []);
|
260
|
+
console.log(tagDataSource); // useEffect(() => {
|
261
|
+
// console.log(form.values);
|
262
|
+
// }, [form.values]);
|
263
|
+
|
264
|
+
return /*#__PURE__*/React.createElement("div", {
|
265
|
+
className: cls(prefixCls, props.className)
|
266
|
+
}, /*#__PURE__*/React.createElement("div", {
|
267
|
+
className: "".concat(prefixCls, "-inline")
|
268
|
+
}, /*#__PURE__*/React.createElement("div", {
|
269
|
+
className: "".concat(prefixCls, "-left")
|
270
|
+
}, addonBefore ? /*#__PURE__*/React.createElement("div", {
|
271
|
+
className: "".concat(prefixCls, "-addonBefore")
|
272
|
+
}, addonBefore) : null, /*#__PURE__*/React.createElement("div", {
|
273
|
+
className: "".concat(prefixCls, "-simple")
|
274
|
+
}, /*#__PURE__*/React.createElement(SimpleFilter, {
|
275
|
+
schema: schemaTemp
|
276
|
+
})), /*#__PURE__*/React.createElement("div", {
|
277
|
+
className: "".concat(prefixCls, "-toggle")
|
278
|
+
}, /*#__PURE__*/React.createElement(Badge, {
|
279
|
+
count: tagDataSource.length,
|
280
|
+
style: _objectSpread({
|
281
|
+
backgroundColor: 'var(--color-brand1-6, #0064c8)',
|
282
|
+
color: 'var(--color-white, #fff)'
|
283
|
+
}, advancedFilterVisible ? {
|
284
|
+
display: 'none'
|
285
|
+
} : {})
|
286
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
287
|
+
onClick: toggleAdvancedFilter
|
288
|
+
}, advancedFilterVisible ? /*#__PURE__*/React.createElement(TeamixIcon, {
|
289
|
+
type: "up-line"
|
290
|
+
}) : /*#__PURE__*/React.createElement(TeamixIcon, {
|
291
|
+
type: "filter-line"
|
292
|
+
}), getMessage('advancedFilter'))))), addonAfter ? /*#__PURE__*/React.createElement("div", {
|
293
|
+
className: "".concat(prefixCls, "-addonAfter")
|
294
|
+
}, addonAfter) : null), /*#__PURE__*/React.createElement("div", {
|
295
|
+
className: "".concat(prefixCls, "-panel")
|
296
|
+
}, /*#__PURE__*/React.createElement("div", {
|
297
|
+
className: cls("".concat(prefixCls, "-tag"), !advancedFilterVisible ? "".concat(prefixCls, "-tag-hidden") : '')
|
298
|
+
}, /*#__PURE__*/React.createElement(Tag.Group, null, tagDataSource.map(function (_ref3) {
|
299
|
+
var key = _ref3.key,
|
300
|
+
label = _ref3.label,
|
301
|
+
value = _ref3.value;
|
302
|
+
return /*#__PURE__*/React.createElement(Tag.Closeable, {
|
303
|
+
key: key,
|
304
|
+
afterClose: console.log
|
305
|
+
}, /*#__PURE__*/React.createElement("span", {
|
306
|
+
className: "".concat(prefixCls, "-tag-title")
|
307
|
+
}, label), /*#__PURE__*/React.createElement("span", {
|
308
|
+
className: "".concat(prefixCls, "-tag-content")
|
309
|
+
}, value));
|
310
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
311
|
+
className: cls("".concat(prefixCls, "-advanced"), !advancedFilterVisible ? "".concat(prefixCls, "-advanced-hidden") : '')
|
312
|
+
}, /*#__PURE__*/React.createElement(AdvancedFilter, _objectSpread(_objectSpread({
|
313
|
+
form: form
|
314
|
+
}, props), {}, {
|
315
|
+
onFilter: onFormValueChange
|
316
|
+
})))));
|
317
|
+
});
|
318
|
+
export { QueryFilter };
|
@@ -230,14 +230,12 @@
|
|
230
230
|
}
|
231
231
|
}
|
232
232
|
|
233
|
-
//
|
234
|
-
.#{$teamix-pro-form}-filter-advanced,
|
233
|
+
// 抽屉按钮
|
235
234
|
.#{$css-prefix}drawer-footer {
|
236
235
|
.#{$css-prefix}formily-button-group {
|
237
236
|
margin-top: 0;
|
238
237
|
}
|
239
238
|
}
|
240
|
-
|
241
239
|
.#{$teamix-pro-form}-button-affix-auto.#{$css-prefix}affix,
|
242
240
|
.#{$teamix-pro-form}-button-affix-always.#{$css-prefix}affix {
|
243
241
|
left: 0;
|
@@ -259,22 +257,6 @@
|
|
259
257
|
}
|
260
258
|
}
|
261
259
|
|
262
|
-
// 高级筛选
|
263
|
-
.#{$teamix-pro-form}-filter-advanced,
|
264
|
-
.#{$teamix-pro-form}-filter-simple {
|
265
|
-
.#{$form-item-cls}-feedback-layout-popover {
|
266
|
-
margin-bottom: 0;
|
267
|
-
}
|
268
|
-
.#{$css-prefix}date-picker2-input {
|
269
|
-
.#{$css-prefix}input {
|
270
|
-
width: inherit;
|
271
|
-
input {
|
272
|
-
width: inherit;
|
273
|
-
}
|
274
|
-
}
|
275
|
-
}
|
276
|
-
}
|
277
|
-
|
278
260
|
// ArrayItems
|
279
261
|
.#{$css-prefix}formily-array-items {
|
280
262
|
.#{$css-prefix}formily-grid-layout {
|
@@ -1,6 +1,4 @@
|
|
1
|
-
|
2
|
-
* 获取表单值的可显示值
|
3
|
-
* @returns 如果某字段有dataSource,则返回value对应label
|
4
|
-
*/
|
1
|
+
import type { Form } from '@formily/core';
|
5
2
|
declare const useFormDisplayValues: () => any;
|
6
|
-
|
3
|
+
declare const getFormDisplayValues: (form: Form) => any;
|
4
|
+
export { useFormDisplayValues, getFormDisplayValues };
|
@@ -15,51 +15,57 @@ import { isArr, isPlainObj, getValueByValue } from '@teamix/utils';
|
|
15
15
|
/**
|
16
16
|
* 获取表单值的可显示值
|
17
17
|
* @returns 如果某字段有dataSource,则返回value对应label
|
18
|
+
* @example const example = {
|
19
|
+
a: [
|
20
|
+
[{ b: 'a.0.0.b', c: 'a.0.0.c' }, { d: 'a.0.1.d' }],
|
21
|
+
{ e: [{ f: { g: [{ h: 'a.1.e.0.f.g.0.h' }] } }, 'a.1.e.1'] },
|
22
|
+
],
|
23
|
+
};
|
24
|
+
console.log(getDisplayValues(example));
|
18
25
|
*/
|
19
26
|
|
20
|
-
var
|
21
|
-
var
|
22
|
-
var
|
27
|
+
var getDisplayValues = function getDisplayValues(form, values) {
|
28
|
+
var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
29
|
+
var displayValues; // 判断值的类型,递归获取每个值在该结构中的完整路径
|
23
30
|
|
24
|
-
|
25
|
-
|
26
|
-
|
31
|
+
if (isPlainObj(values)) {
|
32
|
+
displayValues = {};
|
33
|
+
Object.entries(values).forEach(function (_ref) {
|
34
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
35
|
+
key = _ref2[0],
|
36
|
+
value = _ref2[1];
|
27
37
|
|
28
|
-
|
29
|
-
displayValues =
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
value = _ref2[1];
|
38
|
+
var path = prefix ? "".concat(prefix, ".").concat(key) : "".concat(key);
|
39
|
+
displayValues[key] = getDisplayValues(form, value, path);
|
40
|
+
});
|
41
|
+
} else if (isArr(values)) {
|
42
|
+
displayValues = []; // todo 如果对象或数组的值不再是对象或数组,并且找不到路径,判断为非复合组件,直接返回原始值
|
34
43
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
}
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
}
|
44
|
+
values.map(function (value, index) {
|
45
|
+
var path = prefix ? "".concat(prefix, ".").concat(index) : "".concat(index);
|
46
|
+
displayValues[index] = getDisplayValues(form, value, path);
|
47
|
+
});
|
48
|
+
} else {
|
49
|
+
// 通过值的完整路径获取字段address(从form实例的indexes中),然后获取该字段的value在该字段dataSource中对应的label
|
50
|
+
var address = form.indexes[prefix];
|
51
|
+
var field = form.query(address).take();
|
52
|
+
displayValues = {
|
53
|
+
title: field === null || field === void 0 ? void 0 : field.title,
|
54
|
+
value: values,
|
55
|
+
displayValue: getValueByValue(field === null || field === void 0 ? void 0 : field.dataSource, values)
|
56
|
+
};
|
57
|
+
}
|
50
58
|
|
51
|
-
|
52
|
-
|
53
|
-
// const example = {
|
54
|
-
// a: [
|
55
|
-
// [{ b: 'a.0.0.b', c: 'a.0.0.c' }, { d: 'a.0.1.d' }],
|
56
|
-
// { e: [{ f: { g: [{ h: 'a.1.e.0.f.g.0.h' }] } }, 'a.1.e.1'] },
|
57
|
-
// ],
|
58
|
-
// };
|
59
|
-
// console.log(getDisplayValues(example));
|
59
|
+
return displayValues;
|
60
|
+
};
|
60
61
|
|
62
|
+
var useFormDisplayValues = function useFormDisplayValues() {
|
63
|
+
var form = useForm();
|
64
|
+
return getDisplayValues(form, form.values);
|
65
|
+
};
|
61
66
|
|
62
|
-
|
67
|
+
var getFormDisplayValues = function getFormDisplayValues(form) {
|
68
|
+
return getDisplayValues(form, form.values);
|
63
69
|
};
|
64
70
|
|
65
|
-
export
|
71
|
+
export { useFormDisplayValues, getFormDisplayValues };
|
package/es/form/index.d.ts
CHANGED
@@ -108,7 +108,8 @@ export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, Fo
|
|
108
108
|
/**
|
109
109
|
* 导出 Filter 组件
|
110
110
|
*/
|
111
|
-
import { AdvancedFilter, SimpleFilter
|
111
|
+
import { AdvancedFilter, SimpleFilter } from './Filter';
|
112
|
+
import { QueryFilter } from './Filter/index2';
|
112
113
|
export { AdvancedFilter, SimpleFilter, QueryFilter };
|
113
114
|
/**
|
114
115
|
* 导出 ProForm 组件,支持快速搭建表单
|
package/es/form/index.js
CHANGED
@@ -19,7 +19,7 @@ export { _formilyReactive as formilyReactive };
|
|
19
19
|
import * as _formilyTeamix from '@teamix/formily';
|
20
20
|
export { _formilyTeamix as formilyTeamix };
|
21
21
|
import * as originalFormilyReact from '@formily/react';
|
22
|
-
import useFormDisplayValues from './ProForm/useFormDisplayValues';
|
22
|
+
import { useFormDisplayValues } from './ProForm/useFormDisplayValues';
|
23
23
|
import useFieldRequest from './ProForm/useFieldRequest';
|
24
24
|
|
25
25
|
var formilyReact = _objectSpread(_objectSpread({}, originalFormilyReact), {}, {
|
@@ -40,7 +40,8 @@ export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, Fo
|
|
40
40
|
* 导出 Filter 组件
|
41
41
|
*/
|
42
42
|
|
43
|
-
import { AdvancedFilter, SimpleFilter
|
43
|
+
import { AdvancedFilter, SimpleFilter } from './Filter';
|
44
|
+
import { QueryFilter } from './Filter/index2';
|
44
45
|
export { AdvancedFilter, SimpleFilter, QueryFilter };
|
45
46
|
/**
|
46
47
|
* 导出 ProForm 组件,支持快速搭建表单
|