fan-standard-comp 4.1.3 → 4.1.4
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/fan-standard-comp.min.css +1 -1
- package/dist/fan-standard-comp.min.js +1 -1
- package/es/CompositeTable/index.d.ts +0 -0
- package/es/CompositeTable/index.js +211 -0
- package/es/CompositeTable/index.style.d.ts +5 -0
- package/es/CompositeTable/index.style.js +27 -0
- package/es/FormComp/FieldComponent/index.js +2 -6
- package/es/StandardContent/ContentHeader.js +17 -25
- package/es/StandardContent/SubfieldContent.js +12 -9
- package/es/StandardContent/WrapperContent.js +9 -8
- package/es/StandardContent/styles/Subfield.js +18 -5
- package/es/StandardContent/styles/Wrapper.js +13 -2
- package/es/StandardContent/styles/index.less +8 -2
- package/es/StandardFilter/index.js +26 -12
- package/es/StandardFilter/style/FilterStyle.js +3 -2
- package/es/StandardFilter/style/index.less +7 -0
- package/es/StandardTable/index.d.ts +3 -3
- package/es/StandardTable/index.js +9 -3
- package/es/StandardTablePro/index.d.ts +2 -12
- package/es/StandardTablePro/index.js +216 -31
- package/es/StandardTablePro/types.d.ts +29 -0
- package/es/StandardTablePro/types.js +1 -0
- package/es/StandardTablePro/useFetchData.d.ts +0 -0
- package/es/StandardTablePro/useFetchData.js +275 -0
- package/es/StandardTablePro/utils.d.ts +3 -0
- package/es/StandardTablePro/utils.js +49 -0
- package/es/utils/ValueFormat.js +1 -0
- package/es/utils/getParentNodes.js +1 -1
- package/lib/CompositeTable/index.d.ts +0 -0
- package/lib/CompositeTable/index.js +212 -0
- package/lib/CompositeTable/index.style.d.ts +5 -0
- package/lib/CompositeTable/index.style.js +33 -0
- package/lib/FormComp/FieldComponent/index.js +2 -6
- package/lib/StandardContent/ContentHeader.js +16 -24
- package/lib/StandardContent/SubfieldContent.js +12 -9
- package/lib/StandardContent/WrapperContent.js +9 -8
- package/lib/StandardContent/styles/Subfield.js +18 -5
- package/lib/StandardContent/styles/Wrapper.js +13 -2
- package/lib/StandardContent/styles/index.less +8 -2
- package/lib/StandardFilter/index.js +26 -12
- package/lib/StandardFilter/style/FilterStyle.js +3 -2
- package/lib/StandardFilter/style/index.less +7 -0
- package/lib/StandardTable/index.d.ts +3 -3
- package/lib/StandardTable/index.js +8 -2
- package/lib/StandardTablePro/index.d.ts +2 -12
- package/lib/StandardTablePro/index.js +214 -29
- package/lib/StandardTablePro/types.d.ts +29 -0
- package/lib/StandardTablePro/types.js +5 -1
- package/lib/StandardTablePro/useFetchData.d.ts +0 -0
- package/lib/StandardTablePro/useFetchData.js +276 -0
- package/lib/StandardTablePro/utils.d.ts +3 -0
- package/lib/StandardTablePro/utils.js +55 -0
- package/lib/utils/ValueFormat.js +1 -0
- package/lib/utils/getParentNodes.js +1 -1
- package/package.json +2 -2
|
File without changes
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
/*
|
|
2
|
+
/!**
|
|
3
|
+
* 组合组件;配置"筛选StandardFilter"、"列表StandardTable"
|
|
4
|
+
* 不加业务相关的功能
|
|
5
|
+
* @param {Object} dataSource 数据源
|
|
6
|
+
* @value {Array} list 列表数据
|
|
7
|
+
* @value {Object} pagination 页码配置
|
|
8
|
+
* @param {Function} request 接口请求数据源
|
|
9
|
+
* @param {Object} params 请求参数:页码、筛选条件等
|
|
10
|
+
* @param {Object} defaultParams 默认参数,在筛选重置的情况下不会更改
|
|
11
|
+
* request:
|
|
12
|
+
* 1、列表接口数据
|
|
13
|
+
* *!/
|
|
14
|
+
import React, { ReactNode, forwardRef, useEffect, useState, useCallback, useImperativeHandle, useMemo } from 'react'
|
|
15
|
+
import { StandardFilter, StandardTable, ButtonGroup, } from "fan-standard-comp";
|
|
16
|
+
import { useStyles } from './index.style'
|
|
17
|
+
import { commonUse } from "@/data";
|
|
18
|
+
import { Spin } from 'antd';
|
|
19
|
+
import dayjs from "dayjs";
|
|
20
|
+
|
|
21
|
+
interface FilterFormProps {
|
|
22
|
+
formItemGroup: any[]
|
|
23
|
+
buttonGroup?: any[] | ReactNode
|
|
24
|
+
syncToUrl?: (values) => void // 从url上取值后进行转换
|
|
25
|
+
dateFormatter?: 'dayjs' | 'string' // 日期类的控件是否将其格式转换
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
interface CompositeTableProps {
|
|
29
|
+
dataSource?: any // 列表数据静态数据来源
|
|
30
|
+
request?: Function // 接口数据
|
|
31
|
+
params?: any // 请求参数/页码
|
|
32
|
+
defaultParams?: any // 默认的参数,在筛选重置的情况下不会更改
|
|
33
|
+
formItemGroup?: any[]
|
|
34
|
+
buttonGroup?: any[] | ReactNode
|
|
35
|
+
commonUse: any
|
|
36
|
+
children?: ReactNode
|
|
37
|
+
onChange?: (targetKey: string, data?: any) => void // 页码或表单触发更新
|
|
38
|
+
formatForm?: (fields: any) => void; // 转换筛选表单值
|
|
39
|
+
page?: number | string, // 页码
|
|
40
|
+
size?: number | string // 单页数量
|
|
41
|
+
getTableData?: Function // 获取表格数据
|
|
42
|
+
form?: FilterFormProps // 筛选表单
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
const CompositeTable = forwardRef((props: CompositeTableProps, ref) => {
|
|
47
|
+
const {
|
|
48
|
+
dataSource, buttonGroup = [], params = {}, defaultParams = {}, columns, children, request,
|
|
49
|
+
onChange,
|
|
50
|
+
getTableData,
|
|
51
|
+
form,
|
|
52
|
+
title
|
|
53
|
+
} = props;
|
|
54
|
+
const {
|
|
55
|
+
formItemGroup = [], syncToUrl,
|
|
56
|
+
} = form
|
|
57
|
+
const { styles, cx } = useStyles();
|
|
58
|
+
const [resDataSource, setResDataSource] = useState({
|
|
59
|
+
list: [],
|
|
60
|
+
pagination: {},
|
|
61
|
+
keywords: {}
|
|
62
|
+
})
|
|
63
|
+
const [formKeywords, setFormKeywords] = useState({})
|
|
64
|
+
const [queryLoading, setQueryLoading] = useState(false)
|
|
65
|
+
const [searchLoading, setSearchLoading] = useState(false)
|
|
66
|
+
const [filterForm, setFilterForm] = useState({
|
|
67
|
+
values: {},
|
|
68
|
+
form: undefined,
|
|
69
|
+
})
|
|
70
|
+
const paramsKey = useMemo(() => {
|
|
71
|
+
return params
|
|
72
|
+
}, [params])
|
|
73
|
+
|
|
74
|
+
const localPagination = {page:1, size: 10} // 基础页码
|
|
75
|
+
|
|
76
|
+
// ref 的转发
|
|
77
|
+
useImperativeHandle(ref, () => {
|
|
78
|
+
return {
|
|
79
|
+
...filterForm,
|
|
80
|
+
dataSource: resDataSource,
|
|
81
|
+
setDataSource: setResDataSource,
|
|
82
|
+
reload: (filter) => loadData('refresh', {}, filter) // 更新列表
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
/!**
|
|
86
|
+
* 加载数据方法
|
|
87
|
+
* @param {string} updateKey 触发列表位置
|
|
88
|
+
* @param {Object} pagination 分页选项器
|
|
89
|
+
* @param {Object} filters 过滤条件
|
|
90
|
+
* @param {Object} sorter 排序条件
|
|
91
|
+
*!/
|
|
92
|
+
const loadData: any = useCallback(async (updateKey: string, pagination?: any = {}, filters?: any = {}, sorter?: any = {},
|
|
93
|
+
) => {
|
|
94
|
+
if (updateKey !== 'init') {
|
|
95
|
+
handleChange(updateKey, updateKey === 'reset' ? {} : { ...pagination, ...filters, ...sorter })
|
|
96
|
+
}
|
|
97
|
+
if (request) {
|
|
98
|
+
setQueryLoading(true)
|
|
99
|
+
let parameter = Object.assign(
|
|
100
|
+
{ ...defaultParams },
|
|
101
|
+
// updateKey === 'init' ? { ...params } : {}, // 重置条件下,会清空params
|
|
102
|
+
syncToUrl ? syncToUrl(params) : { ...params },
|
|
103
|
+
{
|
|
104
|
+
page: pagination?.page || params?.page || localPagination.page,
|
|
105
|
+
size: pagination?.size || params?.size || localPagination.size
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
...filters
|
|
109
|
+
},
|
|
110
|
+
// 排序与筛选待定
|
|
111
|
+
// (sorter && sorter.field && {
|
|
112
|
+
// sortField: sorter.field
|
|
113
|
+
// }) || {},
|
|
114
|
+
// (sorter && sorter.order && {
|
|
115
|
+
// sortOrder: sorter.order
|
|
116
|
+
// }) || {},
|
|
117
|
+
)
|
|
118
|
+
const response = await request(parameter)
|
|
119
|
+
setQueryLoading(false)
|
|
120
|
+
setSearchLoading(false)
|
|
121
|
+
// 转换列表数据
|
|
122
|
+
if (response.code === '200') {
|
|
123
|
+
setResDataSource(Object.assign({
|
|
124
|
+
list: response?.data?.records,
|
|
125
|
+
total: response?.data?.total || 0,
|
|
126
|
+
pagination: {
|
|
127
|
+
total: response?.data?.total || 0,
|
|
128
|
+
current: response?.data?.current || commonUse.basePagination.page,
|
|
129
|
+
pageSize: response?.data?.pageSize || commonUse.basePagination.size,
|
|
130
|
+
},
|
|
131
|
+
keywords: parameter || {}, // 关键字搜索字段
|
|
132
|
+
}),)
|
|
133
|
+
} else {
|
|
134
|
+
setResDataSource({
|
|
135
|
+
list: [],
|
|
136
|
+
pagination: {},
|
|
137
|
+
keywords: {}
|
|
138
|
+
})
|
|
139
|
+
}
|
|
140
|
+
} else if (dataSource) {
|
|
141
|
+
setResDataSource(dataSource)
|
|
142
|
+
}
|
|
143
|
+
}, [params, formItemGroup, dataSource, request])
|
|
144
|
+
// console.log('resDataSource', resDataSource.keywords)
|
|
145
|
+
useEffect(() => {
|
|
146
|
+
getTableData && getTableData(resDataSource)
|
|
147
|
+
}, [resDataSource])
|
|
148
|
+
const fetchData = () => {
|
|
149
|
+
|
|
150
|
+
}
|
|
151
|
+
const handleChange = (targetKey: string, data?: any) => {
|
|
152
|
+
onChange && onChange(targetKey, data)
|
|
153
|
+
}
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
setFormKeywords(syncToUrl ? syncToUrl({ ...params }) : { ...params })
|
|
156
|
+
}, [params, syncToUrl])
|
|
157
|
+
useEffect(() => {
|
|
158
|
+
loadData('init')
|
|
159
|
+
}, [])
|
|
160
|
+
return <div className={cx('f-composite-container', styles.CompositeContainerStyle)}>
|
|
161
|
+
<StandardFilter {...form}
|
|
162
|
+
formItemGroup={formItemGroup}
|
|
163
|
+
gridLayout={'horizontal'} // 表单组与按钮组的排版
|
|
164
|
+
formLayout={'horizontal'} // 表单控件组的排版
|
|
165
|
+
min={100}
|
|
166
|
+
itemGroupConfig={{
|
|
167
|
+
columnCount: 4
|
|
168
|
+
}}
|
|
169
|
+
getFormFields={(fields, form) => {
|
|
170
|
+
setFilterForm({ values: fields, form: form?.current })
|
|
171
|
+
}}
|
|
172
|
+
initialValues={formKeywords}
|
|
173
|
+
onFilterSearch={(fields) => {
|
|
174
|
+
setSearchLoading(true)
|
|
175
|
+
formItemGroup.forEach(fItem => {
|
|
176
|
+
if (fItem.searchTransform && fields[fItem.filedName]) {
|
|
177
|
+
// 筛选参数转换
|
|
178
|
+
let trans = fItem.searchTransform(fields[fItem.filedName])
|
|
179
|
+
delete fields[fItem.filedName] // 提交时,删除有格式转换的字段名
|
|
180
|
+
fields = { ...fields, ...trans }
|
|
181
|
+
}
|
|
182
|
+
})
|
|
183
|
+
loadData('search', { ...commonUse.basePagination }, fields)
|
|
184
|
+
}}
|
|
185
|
+
onFilterReset={() => {
|
|
186
|
+
loadData('reset', {page: 1,}, {})
|
|
187
|
+
}}
|
|
188
|
+
className={cx('f-composite-filter', styles.CompositeFilterStyle)}
|
|
189
|
+
confirmButtonProps={{
|
|
190
|
+
loading: searchLoading
|
|
191
|
+
}}
|
|
192
|
+
// dateFormatter={'string'}
|
|
193
|
+
/>
|
|
194
|
+
<StandardTable data={resDataSource} columns={columns}
|
|
195
|
+
title={title}
|
|
196
|
+
buttonGroup={buttonGroup}
|
|
197
|
+
className={cx('f-composite-table', styles.CompositeTableStyle)}
|
|
198
|
+
onChange={(pagination, filters, sorter,) => {
|
|
199
|
+
// console.log(' pagination, filters, sorter', pagination, filters, sorter)
|
|
200
|
+
loadData('table', {
|
|
201
|
+
page: pagination.current,
|
|
202
|
+
size: pagination.pageSize
|
|
203
|
+
}, filters, sorter)
|
|
204
|
+
}}
|
|
205
|
+
/>
|
|
206
|
+
{children}
|
|
207
|
+
</div>
|
|
208
|
+
})
|
|
209
|
+
|
|
210
|
+
export default CompositeTable
|
|
211
|
+
*/
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
CompositeContainerStyle: import("antd-style").SerializedStyles;
|
|
3
|
+
CompositeFilterStyle: import("antd-style").SerializedStyles;
|
|
4
|
+
CompositeTableStyle: import("antd-style").SerializedStyles;
|
|
5
|
+
}>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var token = _ref.token,
|
|
6
|
+
css = _ref.css,
|
|
7
|
+
cx = _ref.cx;
|
|
8
|
+
var commonCard = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: ", "px;\n padding: ", "px;\n "])), token.borderRadiusLG, token.paddingLG);
|
|
9
|
+
return {
|
|
10
|
+
CompositeContainerStyle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow-x: hidden;\n "]))),
|
|
11
|
+
CompositeFilterStyle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .filter-form {\n padding: ", "px;\n padding-bottom: 0;\n background-color: ", ";\n //margin-bottom: ", "px;\n //border-radius: ", "px;\n }\n\n .filter-btns {\n padding: ", "px;\n padding-bottom: 0;\n // border-top-left-radius: ", "px;\n // border-top-right-radius: ", "px;\n background-color: ", ";\n }\n "])), token.paddingMD, token.colorBgBase, token.marginMD, token.borderRadiusLG, token.paddingMD, token.borderRadiusLG, token.borderRadiusLG, token.colorBgBase),
|
|
12
|
+
// CompositeButtonGroupStyle: css`
|
|
13
|
+
// padding: ${token.paddingMD}px;
|
|
14
|
+
// background-color: ${token.colorBgBase};
|
|
15
|
+
// border-top-left-radius: ${token.borderRadiusLG}px;
|
|
16
|
+
// border-top-right-radius: ${token.borderRadiusLG}px;
|
|
17
|
+
// display: flex;
|
|
18
|
+
// .f-composite-button-group-grid {
|
|
19
|
+
// flex: 1;
|
|
20
|
+
// &.align-right{
|
|
21
|
+
// text-align: right;
|
|
22
|
+
// }
|
|
23
|
+
// }
|
|
24
|
+
// `,
|
|
25
|
+
CompositeTableStyle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &.f-composite-table {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n // padding: ", "px;\n // padding-top: 0;\n .spec-pagination {\n background-color: ", ";\n //justify-content: flex-start;\n }\n }\n "])), token.paddingMD, token.colorBgBase)
|
|
26
|
+
};
|
|
27
|
+
});
|
|
@@ -141,9 +141,7 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
141
141
|
compContent = viewOnly ? value || 0 : /*#__PURE__*/React.createElement(InputNumber, _extends({
|
|
142
142
|
placeholder: fieldStatus === 'disabled' || defaultProps.disabled ? '' : defaultProps.placeholder || placeholder || '请输入数字'
|
|
143
143
|
}, sortLimitRule, defaultProps, {
|
|
144
|
-
style: _objectSpread(_objectSpread({}, defaultStyle),
|
|
145
|
-
width: '120px'
|
|
146
|
-
}, defaultProps.style)
|
|
144
|
+
style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style) // 去掉width: '120px',
|
|
147
145
|
}));
|
|
148
146
|
break;
|
|
149
147
|
case 'select':
|
|
@@ -282,9 +280,7 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
282
280
|
type: type,
|
|
283
281
|
protoConfig: protoConfig
|
|
284
282
|
}) : /*#__PURE__*/React.createElement(TimePicker, _extends({}, defaultProps, {
|
|
285
|
-
style: _objectSpread(_objectSpread(
|
|
286
|
-
width: 'auto'
|
|
287
|
-
})
|
|
283
|
+
style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style) // 去掉 width: 'auto'
|
|
288
284
|
}));
|
|
289
285
|
break;
|
|
290
286
|
case 'timePickerRange':
|
|
@@ -11,46 +11,33 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
11
11
|
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; } }
|
|
12
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
13
|
import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
|
|
14
|
-
import { Breadcrumb, Button } from "antd";
|
|
14
|
+
import { Breadcrumb, Button, Tabs } from "antd";
|
|
15
15
|
import classNames from 'classnames';
|
|
16
16
|
import useStyle from "./styles/Header";
|
|
17
17
|
import SpecIcon from "../SpecIcon/index";
|
|
18
|
-
var Child = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
19
|
-
var _useState = useState(0),
|
|
20
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
-
count = _useState2[0],
|
|
22
|
-
setCount = _useState2[1];
|
|
23
|
-
useImperativeHandle(ref, function () {
|
|
24
|
-
return {
|
|
25
|
-
getCurrentCount: function getCurrentCount() {
|
|
26
|
-
return count;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
}, [count]);
|
|
30
|
-
return /*#__PURE__*/React.createElement("div", null, "Count: ", count);
|
|
31
|
-
});
|
|
32
18
|
var ContentHeader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
|
-
var _breadcrumb$items;
|
|
19
|
+
var _breadcrumb$items, _tabs$items;
|
|
34
20
|
var breadcrumb = props.breadcrumb,
|
|
35
21
|
className = props.className,
|
|
36
22
|
title = props.title,
|
|
37
23
|
getClientHeight = props.getClientHeight,
|
|
38
24
|
extra = props.extra,
|
|
39
25
|
prefix = props.prefix,
|
|
40
|
-
goBack = props.goBack
|
|
26
|
+
goBack = props.goBack,
|
|
27
|
+
tabs = props.tabs;
|
|
41
28
|
var componentName = 'spec-content-header';
|
|
42
29
|
var _useStyle = useStyle(componentName),
|
|
43
30
|
_useStyle2 = _slicedToArray(_useStyle, 2),
|
|
44
31
|
wrapSSR = _useStyle2[0],
|
|
45
32
|
hashId = _useStyle2[1];
|
|
46
|
-
var
|
|
33
|
+
var _useState = useState(false),
|
|
34
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
+
visible = _useState2[0],
|
|
36
|
+
setVisible = _useState2[1];
|
|
37
|
+
var _useState3 = useState(0),
|
|
47
38
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var _useState5 = useState(0),
|
|
51
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
52
|
-
clientHeight = _useState6[0],
|
|
53
|
-
setClientHeight = _useState6[1];
|
|
39
|
+
clientHeight = _useState4[0],
|
|
40
|
+
setClientHeight = _useState4[1];
|
|
54
41
|
var headerRef = useRef(null);
|
|
55
42
|
var handleGoBack = function handleGoBack() {
|
|
56
43
|
if (goBack) {
|
|
@@ -118,6 +105,11 @@ var ContentHeader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
118
105
|
className: componentName + '-title-name'
|
|
119
106
|
}, " ", title), extra && /*#__PURE__*/React.createElement("div", {
|
|
120
107
|
className: componentName + '-title-extra'
|
|
121
|
-
}, " ", extra)) : null))
|
|
108
|
+
}, " ", extra)) : null, (tabs === null || tabs === void 0 || (_tabs$items = tabs.items) === null || _tabs$items === void 0 ? void 0 : _tabs$items.length) && /*#__PURE__*/React.createElement("div", {
|
|
109
|
+
className: componentName + '-tabs'
|
|
110
|
+
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
111
|
+
type: "card",
|
|
112
|
+
items: (tabs === null || tabs === void 0 ? void 0 : tabs.items) || []
|
|
113
|
+
}))));
|
|
122
114
|
});
|
|
123
115
|
export default ContentHeader;
|
|
@@ -67,15 +67,14 @@ var SubfieldContent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
67
67
|
style: style,
|
|
68
68
|
ref: contentRef
|
|
69
69
|
}, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/React.createElement(ContentHeader, _extends({
|
|
70
|
-
ref: headerRef
|
|
71
|
-
getClientHeight
|
|
70
|
+
ref: headerRef
|
|
71
|
+
// getClientHeight={setHeaderHeight}
|
|
72
|
+
,
|
|
72
73
|
className: classNames('spec-grid-content-header', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade = proLayoutProps.header) !== null && _proLayoutProps$heade !== void 0 && _proLayoutProps$heade.fixed || header !== null && header !== void 0 && header.fixed ? 'spec-grid-content-header-fixed' : '')
|
|
73
74
|
}, (proLayoutProps === null || proLayoutProps === void 0 ? void 0 : proLayoutProps.header) || {}, header || {})) : null, /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: 'spec-grid-content-body'
|
|
75
|
-
style: {
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
}, /*#__PURE__*/React.createElement(DragContent, {
|
|
75
|
+
className: 'spec-grid-content-body'
|
|
76
|
+
// style={{ height: `calc(100% - ${headerHeight ? headerHeight + 20 : 0}px` }}
|
|
77
|
+
}, leftSiderNode && /*#__PURE__*/React.createElement(DragContent, {
|
|
79
78
|
direction: leftSiderDragDirection,
|
|
80
79
|
className: classNames('spec-grid-left', leftSiderClassName),
|
|
81
80
|
style: {
|
|
@@ -83,8 +82,12 @@ var SubfieldContent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
83
82
|
},
|
|
84
83
|
moveMaxWidth: leftSiderMoveMaxWidth,
|
|
85
84
|
moveMaxHeight: leftSiderMoveMaxHeight
|
|
86
|
-
},
|
|
85
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: 'spec-grid-left-cont'
|
|
87
|
+
}, leftSiderNode)), /*#__PURE__*/React.createElement("div", {
|
|
87
88
|
className: "spec-grid-right"
|
|
88
|
-
},
|
|
89
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
90
|
+
className: "spec-grid-right-cont"
|
|
91
|
+
}, children)))));
|
|
89
92
|
});
|
|
90
93
|
export default SubfieldContent;
|
|
@@ -18,7 +18,7 @@ import useStyle from "./styles/Wrapper";
|
|
|
18
18
|
import { FanContext } from "../ConfigContext";
|
|
19
19
|
import ContentHeader from "./ContentHeader";
|
|
20
20
|
var WrapperContent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
21
|
-
var _proLayoutProps$heade, _proLayoutProps$heade2;
|
|
21
|
+
var _proLayoutProps$heade, _proLayoutProps$heade2, _proLayoutProps$heade3;
|
|
22
22
|
var InitFanContext = useContext(FanContext);
|
|
23
23
|
var providerConfig = InitFanContext['SubfieldContent'] || {}; // 使用上下文(全局配置)设置扩展的配置项
|
|
24
24
|
var proLayoutProps = InitFanContext['proLayoutProps'] || {};
|
|
@@ -56,21 +56,22 @@ var WrapperContent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
58
|
return wrapSSR( /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: classNames(componentName, className, noMargin ? 'has-margin' : '', hashId),
|
|
59
|
+
className: classNames(componentName, className, noMargin ? 'has-margin' : '', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade = proLayoutProps.header) !== null && _proLayoutProps$heade !== void 0 && _proLayoutProps$heade.fixed || header !== null && header !== void 0 && header.fixed ? componentName + '-fixed' : '', hashId),
|
|
60
60
|
style: style,
|
|
61
61
|
ref: contentRef
|
|
62
|
-
}, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/React.createElement(ContentHeader
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
}, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/React.createElement(ContentHeader
|
|
63
|
+
// getClientHeight={setHeaderHeight}
|
|
64
|
+
, _extends({
|
|
65
|
+
className: classNames('spec-wrapper-content-header', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade2 = proLayoutProps.header) !== null && _proLayoutProps$heade2 !== void 0 && _proLayoutProps$heade2.fixed || header !== null && header !== void 0 && header.fixed ? 'spec-wrapper-content-header-fixed' : '')
|
|
65
66
|
}, (proLayoutProps === null || proLayoutProps === void 0 ? void 0 : proLayoutProps.header) || {}, header || {})) : null, light ? /*#__PURE__*/React.createElement("div", {
|
|
66
67
|
className: "spec-wrapper-content-block light-block"
|
|
67
68
|
}, /*#__PURE__*/React.createElement("div", {
|
|
68
69
|
className: 'spec-wrapper-content-body'
|
|
69
70
|
}, children)) : /*#__PURE__*/React.createElement("div", {
|
|
70
71
|
className: 'spec-wrapper-content-body',
|
|
71
|
-
style: proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$
|
|
72
|
-
height:
|
|
73
|
-
overflow: 'auto'
|
|
72
|
+
style: proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade3 = proLayoutProps.header) !== null && _proLayoutProps$heade3 !== void 0 && _proLayoutProps$heade3.fixed || header !== null && header !== void 0 && header.fixed ? {
|
|
73
|
+
// height: `calc(100% - ${headerHeight ? headerHeight + 20 : 0}px)`,
|
|
74
|
+
// overflow: 'auto'
|
|
74
75
|
} : {}
|
|
75
76
|
}, children)));
|
|
76
77
|
});
|
|
@@ -15,11 +15,18 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
|
|
|
15
15
|
return createStyleHook(prefix, function (token) {
|
|
16
16
|
var prefixCls = ".".concat(prefix);
|
|
17
17
|
// console.log(' new TinyColor(token.colorPrimary).setAlpha(0.1)' ,new TinyColor(token.colorPrimary).setAlpha(0.1).toRgbString(), )
|
|
18
|
-
return [_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
|
|
18
|
+
return [_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
|
|
19
|
+
// height: '500px',
|
|
20
|
+
background: 'pink',
|
|
21
|
+
display: 'flex',
|
|
22
|
+
flexDirection: 'column'
|
|
23
|
+
}, scrollBar(token)), {}, {
|
|
19
24
|
'.spec-grid-content-header + .spec-grid-content-body': {
|
|
20
25
|
// height: `calc(100% - 60px)`
|
|
21
26
|
},
|
|
22
27
|
'.spec-grid-content-body': {
|
|
28
|
+
flex: 1,
|
|
29
|
+
overflow: 'hidden',
|
|
23
30
|
display: 'flex',
|
|
24
31
|
position: 'relative',
|
|
25
32
|
height: '100%'
|
|
@@ -29,17 +36,23 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
|
|
|
29
36
|
height: '100%',
|
|
30
37
|
overflow: 'auto'
|
|
31
38
|
}, scrollBar(token)),
|
|
32
|
-
'& .spec-grid-left': _objectSpread({
|
|
39
|
+
'& .spec-grid-left': _objectSpread(_objectSpread({
|
|
33
40
|
height: '100%',
|
|
34
41
|
// overflow: 'hidden',
|
|
35
42
|
overflow: 'auto',
|
|
36
43
|
padding: token.paddingMD,
|
|
37
44
|
background: token.colorBgBase,
|
|
38
45
|
boxSizing: 'border-box'
|
|
39
|
-
}, scrollBar(token)),
|
|
46
|
+
}, scrollBar(token)), {}, {
|
|
47
|
+
'+ .spec-grid-right': {
|
|
48
|
+
marginLeft: token.marginMD
|
|
49
|
+
},
|
|
50
|
+
'.spec-grid-left-cont': {
|
|
51
|
+
marginRight: '-8px'
|
|
52
|
+
}
|
|
53
|
+
}),
|
|
40
54
|
'& .spec-grid-right': _objectSpread({
|
|
41
|
-
padding: 0
|
|
42
|
-
marginLeft: token.marginMD
|
|
55
|
+
padding: 0
|
|
43
56
|
}, scrollBar(token))
|
|
44
57
|
}))];
|
|
45
58
|
}, prepareComponentToken // 当前组件扩展的变量
|
|
@@ -14,7 +14,7 @@ var WrapperContentStyleFunc = function WrapperContentStyleFunc(prefix) {
|
|
|
14
14
|
};
|
|
15
15
|
return createStyleHook(prefix, function (token) {
|
|
16
16
|
var prefixCls = ".".concat(prefix);
|
|
17
|
-
return [_defineProperty(_defineProperty(_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
|
|
17
|
+
return [_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
|
|
18
18
|
position: 'relative',
|
|
19
19
|
// padding: token.paddingMD,
|
|
20
20
|
// margin: -token.marginMD,
|
|
@@ -26,7 +26,18 @@ var WrapperContentStyleFunc = function WrapperContentStyleFunc(prefix) {
|
|
|
26
26
|
padding: token.paddingMD,
|
|
27
27
|
background: token.colorBgBase
|
|
28
28
|
}
|
|
29
|
-
})), '
|
|
29
|
+
})), '&.spec-wrapper-content-fixed', {
|
|
30
|
+
display: 'flex',
|
|
31
|
+
flexDirection: 'column',
|
|
32
|
+
'.spec-wrapper-content-header': {
|
|
33
|
+
width: '100%'
|
|
34
|
+
},
|
|
35
|
+
'.spec-wrapper-content-body': {
|
|
36
|
+
width: '100%',
|
|
37
|
+
flex: 1,
|
|
38
|
+
overflow: 'auto'
|
|
39
|
+
}
|
|
40
|
+
}), '.spec-wrapper-content-header', {}), '.spec-wrapper-content-body', {})];
|
|
30
41
|
}, prepareComponentToken // 当前组件扩展的变量
|
|
31
42
|
);
|
|
32
43
|
};
|
|
@@ -59,10 +59,16 @@
|
|
|
59
59
|
.spec-grid-right {
|
|
60
60
|
flex: 1;
|
|
61
61
|
height: 100%;
|
|
62
|
+
overflow: auto;
|
|
62
63
|
//height: calc(100vh - @layout-header-height);
|
|
63
64
|
//padding: @padding-lg;
|
|
64
|
-
overflow-y: auto;
|
|
65
|
-
overflow-x:
|
|
65
|
+
//overflow-y: auto;
|
|
66
|
+
//overflow-x: auto;
|
|
66
67
|
//margin-left: 200px
|
|
67
68
|
}
|
|
69
|
+
|
|
70
|
+
.spec-grid-right-cont {
|
|
71
|
+
width: 100%;
|
|
72
|
+
overflow: auto;
|
|
73
|
+
}
|
|
68
74
|
}
|
|
@@ -65,7 +65,10 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
65
65
|
colon = _providerConfig$props10 === void 0 ? true : _providerConfig$props10,
|
|
66
66
|
dateFormatter = _providerConfig$props.dateFormatter,
|
|
67
67
|
_providerConfig$props11 = _providerConfig$props.collapseable,
|
|
68
|
-
collapseable = _providerConfig$props11 === void 0 ? false : _providerConfig$props11
|
|
68
|
+
collapseable = _providerConfig$props11 === void 0 ? false : _providerConfig$props11,
|
|
69
|
+
parseTransform = _providerConfig$props.parseTransform,
|
|
70
|
+
_providerConfig$props12 = _providerConfig$props.forceListener,
|
|
71
|
+
forceListener = _providerConfig$props12 === void 0 ? true : _providerConfig$props12;
|
|
69
72
|
var filterFormRef = useRef();
|
|
70
73
|
// ref 的转发
|
|
71
74
|
useImperativeHandle(ref, function () {
|
|
@@ -198,7 +201,8 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
198
201
|
protoFormItem: {
|
|
199
202
|
style: {
|
|
200
203
|
textAlign: filterFormLayout === 'horizontal' ? 'right' : 'left'
|
|
201
|
-
}
|
|
204
|
+
},
|
|
205
|
+
className: filterFormLayout === 'horizontal' ? 'filter-action-right' : 'filter-action-left'
|
|
202
206
|
},
|
|
203
207
|
colSpan: filterButtonColSpan || 24 - calculateTimes * (24 / general.modalSize[itemGroupSize].columnNumber)
|
|
204
208
|
}, filterButtonConfig), {}, {
|
|
@@ -235,7 +239,6 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
235
239
|
|
|
236
240
|
// 更新表单控件值,用于外部获取当前表单实例(force是否强制清空表单)
|
|
237
241
|
var updateFormFields = function updateFormFields(newVal, force) {
|
|
238
|
-
// console.log('更新表单控件值,用于外部获取当前表单实例(force是否强制清空表单)')
|
|
239
242
|
var resetValues = {};
|
|
240
243
|
if (force) {
|
|
241
244
|
// this.filterFormRef.current.resetFields()
|
|
@@ -249,17 +252,20 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
249
252
|
var filterDateFields = formItemGroup.filter(function (fItem) {
|
|
250
253
|
return dateFieldTypes.includes(fItem.type);
|
|
251
254
|
});
|
|
255
|
+
if (parseTransform) {
|
|
256
|
+
newVal = parseTransform(_objectSpread({}, newVal));
|
|
257
|
+
}
|
|
252
258
|
// 如果配置了dateFormatter='string',则将默认对其他进行格式转换
|
|
253
259
|
if (dateFormatter === 'string') {
|
|
254
260
|
// 需要将字符串转换成日期格式
|
|
255
261
|
filterDateFields.forEach(function (dItem) {
|
|
256
|
-
if (newVal[dItem.filedName]) {
|
|
257
|
-
if (typeof newVal[dItem.filedName] === 'string') {
|
|
262
|
+
if (newVal[dItem.filedName || dItem.fieldName]) {
|
|
263
|
+
if (typeof newVal[dItem.filedName || dItem.fieldName] === 'string') {
|
|
258
264
|
// console.log('将字符串转换成dayjs')
|
|
259
|
-
newVal[dItem.filedName] = dayjs(newVal[dItem.filedName]);
|
|
260
|
-
} else if (Array.isArray(newVal[dItem.filedName])) {
|
|
265
|
+
newVal[dItem.filedName || dItem.fieldName] = dayjs(newVal[dItem.filedName || dItem.fieldName]);
|
|
266
|
+
} else if (Array.isArray(newVal[dItem.filedName || dItem.fieldName])) {
|
|
261
267
|
// console.log('将数组转换成dayjs数组')
|
|
262
|
-
newVal[dItem.filedName] = newVal[dItem.filedName].map(function (valItem) {
|
|
268
|
+
newVal[dItem.filedName || dItem.fieldName] = newVal[dItem.filedName || dItem.fieldName].map(function (valItem) {
|
|
263
269
|
return typeof valItem === 'string' ? dayjs(valItem) : valItem;
|
|
264
270
|
});
|
|
265
271
|
} else {
|
|
@@ -369,11 +375,19 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
369
375
|
}
|
|
370
376
|
}, [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()]);
|
|
371
377
|
useEffect(function () {
|
|
372
|
-
if (
|
|
373
|
-
|
|
378
|
+
if (!forceListener) {
|
|
379
|
+
if (initialValues && JSON.stringify(initialValues) !== '{}') {
|
|
380
|
+
updateFormFields(initialValues, true);
|
|
381
|
+
}
|
|
374
382
|
}
|
|
375
|
-
}, [
|
|
376
|
-
|
|
383
|
+
}, []);
|
|
384
|
+
useEffect(function () {
|
|
385
|
+
if (forceListener) {
|
|
386
|
+
if (initialValues && JSON.stringify(initialValues) !== '{}') {
|
|
387
|
+
updateFormFields(initialValues, true);
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
}, [forceListener, initialValues]);
|
|
377
391
|
// / 表单列表组 formItemGroup 类型为数组或者React.Node
|
|
378
392
|
var renderFormItemGroup = function renderFormItemGroup() {
|
|
379
393
|
if (Array.isArray(reFormItemGroup)) {
|
|
@@ -16,8 +16,9 @@ var StandardFilterStyleFunc = function StandardFilterStyleFunc(prefix) {
|
|
|
16
16
|
// backgroundColor: token.colorBgBase,
|
|
17
17
|
'.filter-form': {
|
|
18
18
|
'.ant-form-item-control, ant-form-item-label': {
|
|
19
|
-
lineHeight: token.controlHeight + 'px'
|
|
20
|
-
}
|
|
19
|
+
// lineHeight: token.controlHeight + 'px'// @input-height-base;
|
|
20
|
+
},
|
|
21
|
+
'.ant-btn .ant-btn-icon': {}
|
|
21
22
|
},
|
|
22
23
|
'.filter-form .ant-form-item': {
|
|
23
24
|
marginRight: token.paddingMD,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import './style/index.less';
|
|
3
3
|
import type { StandardTableProps } from './types';
|
|
4
|
-
declare const
|
|
5
|
-
export default
|
|
4
|
+
declare const _default: React.NamedExoticComponent<StandardTableProps>;
|
|
5
|
+
export default _default;
|