@vtx/components 4.0.0-beta.7 → 4.0.0-beta.71
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 +19 -19
- package/es/index.js +3 -0
- package/es/utils/components/LabelIconTip/index.js +7 -7
- package/es/utils/conversionMomentValue/index.js +25 -25
- package/es/utils/filterSpecialCharacters.js +53 -52
- package/es/utils/genCopyable/index.js +6 -6
- package/es/utils/getFieldPropsOrFormItemProps/index.js +7 -7
- package/es/utils/hooks/useDebounceFn/index.js +4 -4
- package/es/utils/hooks/useDebounceValue/index.js +6 -6
- package/es/utils/hooks/useDeepCompareMemo/index.js +7 -7
- package/es/utils/hooks/useLatest/index.js +2 -2
- package/es/utils/hooks/useRefCallback/index.js +5 -5
- package/es/utils/index.js +1 -2
- package/es/utils/isBrowser/index.js +7 -7
- package/es/utils/isUrl/index.js +4 -4
- package/es/utils/merge/index.js +4 -4
- package/es/utils/nanoid/index.js +4 -4
- package/es/utils/omitBoolean/index.js +4 -4
- package/es/utils/parseValueToMoment/index.js +4 -4
- package/es/utils/proFieldParsingText/index.js +10 -10
- package/es/utils/transformKeySubmitValue/index.js +57 -57
- package/es/utils/useEditableArray/index.js +46 -46
- package/es/utils/useEditableMap/index.js +22 -22
- package/es/utils/useMediaQuery/index.js +5 -5
- package/es/vtx-color-picker/index.js +138 -33
- package/es/vtx-color-picker/style/index.js +36 -12
- package/es/vtx-combogrid/Combogrid.js +16 -10
- package/es/vtx-combogrid/index.js +7 -4
- package/es/vtx-combogrid/style/index.js +4 -4
- package/es/vtx-datagrid/Store/Provide.js +109 -132
- package/es/vtx-datagrid/ToolBar/components/ColumnSetting/index.js +15 -9
- package/es/vtx-datagrid/ToolBar/components/ColumnSetting/style.js +5 -2
- package/es/vtx-datagrid/ToolBar/components/Density/index.js +3 -0
- package/es/vtx-datagrid/ToolBar/components/TableStyle/index.js +3 -0
- package/es/vtx-datagrid/ToolBar/index.js +2 -2
- package/es/vtx-datagrid/columnState.js +64 -0
- package/es/vtx-datagrid/index.js +114 -35
- package/es/vtx-datagrid/mergeComponents.js +15 -0
- package/es/vtx-datagrid/renderColumnButtons.js +30 -11
- package/es/vtx-datagrid/style/index.js +102 -20
- package/es/vtx-datagrid/style/index.less +242 -242
- package/es/vtx-date-picker/QdatePicker.js +1 -1
- package/es/vtx-date-picker/style/index.less +39 -39
- package/es/vtx-descriptions/Descriptions.js +29 -0
- package/es/vtx-descriptions/index.js +3 -0
- package/es/vtx-descriptions/style/index.js +19 -0
- package/es/vtx-ellipsis-text/index.js +7 -2
- package/es/vtx-ellipsis-text/style/index.js +3 -1
- package/es/vtx-export/index.js +33 -33
- package/es/vtx-export-async/History.js +11 -3
- package/es/vtx-export-async/index.js +45 -15
- package/es/vtx-form-layout/Card.js +10 -10
- package/es/vtx-form-layout/Divider.js +1 -1
- package/es/vtx-form-layout/FormItem.js +18 -17
- package/es/vtx-form-layout/Pane.js +23 -12
- package/es/vtx-icon/index.js +54 -45
- package/es/vtx-icon/index.js1 +90 -0
- package/es/vtx-image/Preview.js +11 -6
- package/es/vtx-image/style/index.js +0 -1
- package/es/vtx-import/index.js +155 -43
- package/es/vtx-import/result.js +6 -2
- package/es/vtx-import/style/index.js +16 -1
- package/es/vtx-import2/Content.js +2 -1
- package/es/vtx-import2/index.js +31 -20
- package/es/vtx-import2/style/index.js +60 -9
- package/es/vtx-input/TextArea/index.js +11 -6
- package/es/vtx-modal/index.js +11 -6
- package/es/vtx-modal/style/index.js +5 -3
- package/es/vtx-page-layout/Basic.js +2 -2
- package/es/vtx-page-layout/Content.js +1 -1
- package/es/vtx-page-layout/TabLayout.js +7 -13
- package/es/vtx-page-layout/TableLayout.js +24 -14
- package/es/vtx-page-layout/TableWrap.js +3 -2
- package/es/vtx-page-layout/TreeLayout.js +8 -14
- package/es/vtx-page-layout/container.js +8 -7
- package/es/vtx-page-layout/style/index.js +4 -2
- package/es/vtx-provider/index.js +50 -40
- package/es/vtx-provider/intl.js +9 -9
- package/es/vtx-provider/locale/en_US.js +65 -5
- package/es/vtx-provider/locale/zh_CN.js +75 -5
- package/es/vtx-provider/useStyle/index.js +25 -21
- package/es/vtx-scrollable-row/index.js +38 -28
- package/es/vtx-search/index.js +18 -13
- package/es/vtx-search/style/index.js +2 -1
- package/es/vtx-select/index.js +132 -46
- package/es/vtx-select/style/index.js +11 -56
- package/es/vtx-signature/index.js +5 -4
- package/es/vtx-signature/style/index.js +1 -1
- package/es/vtx-split-pane/Resizer.js +0 -1
- package/es/vtx-split-pane/SplitPane.js +34 -25
- package/es/vtx-split-pane/style/index.js +8 -112
- package/es/vtx-time-picker/index.js +27 -1
- package/es/vtx-transfer/Transfer.js +29 -0
- package/es/vtx-transfer/index.js +3 -0
- package/es/vtx-transfer/style/index.js +19 -0
- package/es/vtx-transfer-select/TransferSelect.js +143 -0
- package/es/vtx-transfer-select/index.js +3 -0
- package/es/vtx-transfer-select/style/index.js +19 -0
- package/es/vtx-tree/index.js +104 -40
- package/es/vtx-tree-select/index.js +75 -105
- package/es/vtx-tree-select/style/index.js +9 -3
- package/es/vtx-upload/FilePreview.js +2 -1
- package/es/vtx-wang-editor/index.js +291 -113
- package/es/vtx-wang-editor/style/index.less +12 -12
- package/es/vtx-wang-editor/wangEditorUtil.js +59 -9
- package/lib/index.js +36 -0
- package/lib/utils/components/LabelIconTip/index.js +7 -7
- package/lib/utils/conversionMomentValue/index.js +25 -25
- package/lib/utils/filterSpecialCharacters.js +54 -52
- package/lib/utils/genCopyable/index.js +6 -6
- package/lib/utils/getFieldPropsOrFormItemProps/index.js +7 -7
- package/lib/utils/hooks/useDebounceFn/index.js +4 -4
- package/lib/utils/hooks/useDebounceValue/index.js +6 -6
- package/lib/utils/hooks/useDeepCompareMemo/index.js +7 -7
- package/lib/utils/hooks/useLatest/index.js +2 -2
- package/lib/utils/hooks/useRefCallback/index.js +5 -5
- package/lib/utils/index.js +0 -7
- package/lib/utils/isBrowser/index.js +7 -7
- package/lib/utils/isUrl/index.js +4 -4
- package/lib/utils/merge/index.js +4 -4
- package/lib/utils/nanoid/index.js +4 -4
- package/lib/utils/omitBoolean/index.js +4 -4
- package/lib/utils/parseValueToMoment/index.js +4 -4
- package/lib/utils/proFieldParsingText/index.js +10 -10
- package/lib/utils/transformKeySubmitValue/index.js +57 -57
- package/lib/utils/useEditableArray/index.js +46 -46
- package/lib/utils/useEditableMap/index.js +22 -22
- package/lib/utils/useMediaQuery/index.js +5 -5
- package/lib/vtx-color-picker/index.js +139 -34
- package/lib/vtx-color-picker/style/index.js +36 -12
- package/lib/vtx-combogrid/Combogrid.js +16 -10
- package/lib/vtx-combogrid/index.js +7 -4
- package/lib/vtx-combogrid/style/index.js +4 -4
- package/lib/vtx-datagrid/Store/Provide.js +116 -138
- package/lib/vtx-datagrid/ToolBar/components/ColumnSetting/index.js +15 -10
- package/lib/vtx-datagrid/ToolBar/components/ColumnSetting/style.js +5 -2
- package/lib/vtx-datagrid/ToolBar/components/Density/index.js +3 -0
- package/lib/vtx-datagrid/ToolBar/components/TableStyle/index.js +3 -0
- package/lib/vtx-datagrid/ToolBar/index.js +2 -2
- package/lib/vtx-datagrid/columnState.js +73 -0
- package/lib/vtx-datagrid/index.js +115 -35
- package/lib/vtx-datagrid/mergeComponents.js +21 -0
- package/lib/vtx-datagrid/renderColumnButtons.js +30 -11
- package/lib/vtx-datagrid/style/index.js +102 -20
- package/lib/vtx-datagrid/style/index.less +242 -242
- package/lib/vtx-date-picker/QdatePicker.js +1 -1
- package/lib/vtx-date-picker/style/index.less +39 -39
- package/lib/vtx-descriptions/Descriptions.js +38 -0
- package/lib/vtx-descriptions/index.js +15 -0
- package/lib/vtx-descriptions/style/index.js +25 -0
- package/lib/vtx-ellipsis-text/index.js +7 -2
- package/lib/vtx-ellipsis-text/style/index.js +3 -1
- package/lib/vtx-export/index.js +34 -34
- package/lib/vtx-export-async/History.js +11 -3
- package/lib/vtx-export-async/index.js +43 -13
- package/lib/vtx-form-layout/Card.js +9 -9
- package/lib/vtx-form-layout/Divider.js +1 -1
- package/lib/vtx-form-layout/FormItem.js +18 -17
- package/lib/vtx-form-layout/Pane.js +22 -11
- package/lib/vtx-icon/index.js +54 -52
- package/lib/vtx-icon/index.js1 +90 -0
- package/lib/vtx-image/Preview.js +11 -6
- package/lib/vtx-image/style/index.js +0 -1
- package/lib/vtx-import/index.js +154 -42
- package/lib/vtx-import/result.js +6 -2
- package/lib/vtx-import/style/index.js +16 -1
- package/lib/vtx-import2/Content.js +2 -1
- package/lib/vtx-import2/index.js +30 -19
- package/lib/vtx-import2/style/index.js +60 -9
- package/lib/vtx-input/TextArea/index.js +11 -6
- package/lib/vtx-modal/index.js +11 -6
- package/lib/vtx-modal/style/index.js +5 -3
- package/lib/vtx-page-layout/Basic.js +2 -2
- package/lib/vtx-page-layout/Content.js +1 -1
- package/lib/vtx-page-layout/TabLayout.js +8 -14
- package/lib/vtx-page-layout/TableLayout.js +24 -14
- package/lib/vtx-page-layout/TableWrap.js +3 -2
- package/lib/vtx-page-layout/TreeLayout.js +9 -15
- package/lib/vtx-page-layout/container.js +8 -7
- package/lib/vtx-page-layout/style/index.js +4 -2
- package/lib/vtx-provider/index.js +49 -40
- package/lib/vtx-provider/intl.js +9 -9
- package/lib/vtx-provider/locale/en_US.js +65 -5
- package/lib/vtx-provider/locale/zh_CN.js +75 -5
- package/lib/vtx-provider/useStyle/index.js +25 -21
- package/lib/vtx-scrollable-row/index.js +38 -28
- package/lib/vtx-search/index.js +18 -13
- package/lib/vtx-search/style/index.js +2 -1
- package/lib/vtx-select/index.js +134 -48
- package/lib/vtx-select/style/index.js +11 -56
- package/lib/vtx-signature/index.js +4 -3
- package/lib/vtx-signature/style/index.js +1 -1
- package/lib/vtx-split-pane/Resizer.js +0 -1
- package/lib/vtx-split-pane/SplitPane.js +32 -23
- package/lib/vtx-split-pane/style/index.js +8 -112
- package/lib/vtx-time-picker/index.js +27 -1
- package/lib/vtx-transfer/Transfer.js +38 -0
- package/lib/vtx-transfer/index.js +15 -0
- package/lib/vtx-transfer/style/index.js +25 -0
- package/lib/vtx-transfer-select/TransferSelect.js +151 -0
- package/lib/vtx-transfer-select/index.js +15 -0
- package/lib/vtx-transfer-select/style/index.js +25 -0
- package/lib/vtx-tree/index.js +102 -38
- package/lib/vtx-tree-select/index.js +75 -105
- package/lib/vtx-tree-select/style/index.js +9 -3
- package/lib/vtx-upload/FilePreview.js +2 -1
- package/lib/vtx-wang-editor/index.js +289 -113
- package/lib/vtx-wang-editor/style/index.less +12 -12
- package/lib/vtx-wang-editor/wangEditorUtil.js +59 -10
- package/package.json +238 -222
- package/es/utils/hooks/useFetchData/index.js +0 -82
- package/lib/utils/hooks/useFetchData/index.js +0 -89
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { lazy, memo, Suspense, useMemo } from 'react';
|
|
2
|
+
import AlignRightOutlined from './svg/alignRightOutlined.js';
|
|
3
|
+
import ColumnHeightOutlined from './svg/columnHeightOutlined.js';
|
|
4
|
+
import DownOutlined from './svg/downOutlined.js';
|
|
5
|
+
import Fullscreen from './svg/fullscreen.js';
|
|
6
|
+
import RedoOutlined from './svg/redoOutlined.js';
|
|
7
|
+
import RightOutlined from './svg/rightOutlined.js';
|
|
8
|
+
import SettingOutlined from './svg/settingOutlined.js';
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const iconComponents = {
|
|
12
|
+
alignRightOutlined: AlignRightOutlined,
|
|
13
|
+
columnHeightOutlined: ColumnHeightOutlined,
|
|
14
|
+
downOutlined: DownOutlined,
|
|
15
|
+
fullscreen: Fullscreen,
|
|
16
|
+
redoOutlined: RedoOutlined,
|
|
17
|
+
rightOutlined: RightOutlined,
|
|
18
|
+
settingOutlined: SettingOutlined,
|
|
19
|
+
// 低频图标如果确实需要,可以再考虑 lazy
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// const iconComponents = {
|
|
23
|
+
// // 核心:添加你需要的所有图标, 动态导入有的组件会失败
|
|
24
|
+
// alignRightOutlined: lazy(() => import('./svg/alignRightOutlined.js')),
|
|
25
|
+
// columnHeightOutlined: lazy(() => import('./svg/columnHeightOutlined.js')),
|
|
26
|
+
// downOutlined: lazy(() => import('./svg/downOutlined.js')),
|
|
27
|
+
// fullscreen: lazy(() => import('./svg/fullscreen.js')),
|
|
28
|
+
// redoOutlined: lazy(() => import('./svg/redoOutlined.js')),
|
|
29
|
+
// rightOutlined: lazy(() => import('./svg/rightOutlined.js')),
|
|
30
|
+
// settingOutlined: lazy(() => import('./svg/settingOutlined.js')),
|
|
31
|
+
// // 新增其他图标...
|
|
32
|
+
// };
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const VtxIcon = memo(({
|
|
36
|
+
type,
|
|
37
|
+
size = 16,
|
|
38
|
+
className = '',
|
|
39
|
+
style = {},
|
|
40
|
+
color,
|
|
41
|
+
fileType = 'webp',
|
|
42
|
+
...props
|
|
43
|
+
}) => {
|
|
44
|
+
const width = props.width || size;
|
|
45
|
+
const height = props.height || size;
|
|
46
|
+
if (!type) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
// const SvgComponent = useMemo(() => {
|
|
50
|
+
// // 动态导入并缓存结果
|
|
51
|
+
// return lazy(() => import(/* @vite-ignore */`./svg/${type}.js`));
|
|
52
|
+
// }, [type]);
|
|
53
|
+
|
|
54
|
+
const SvgComponent = useMemo(() => {
|
|
55
|
+
// 兜底:找不到对应图标时,返回一个空组件(避免报错)
|
|
56
|
+
return iconComponents[type] || lazy(() => Promise.resolve({ default: () => <svg width={width} height={height} /> }));
|
|
57
|
+
}, [type, width, height]);
|
|
58
|
+
|
|
59
|
+
// 默认返回空元素
|
|
60
|
+
if (fileType == 'svg') {
|
|
61
|
+
try {
|
|
62
|
+
// const SvgComponent = lazy(() => import(`./svg/${type}.js`));
|
|
63
|
+
return (
|
|
64
|
+
<Suspense fallback={<div style={{ width, height, ...style }} />}>
|
|
65
|
+
<SvgComponent
|
|
66
|
+
className={className}
|
|
67
|
+
style={{ width, height, ...style }}
|
|
68
|
+
fill={color}
|
|
69
|
+
{...props}
|
|
70
|
+
/>
|
|
71
|
+
</Suspense>
|
|
72
|
+
);
|
|
73
|
+
} catch (error) {
|
|
74
|
+
// 如果动态导入失败,返回空的 SVG 元素
|
|
75
|
+
return (
|
|
76
|
+
<svg width={width} height={height} style={style} className={className} {...props} />
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
} else {
|
|
80
|
+
return (
|
|
81
|
+
// <img
|
|
82
|
+
// src={require(`./assets/${type}.${fileType}`)}
|
|
83
|
+
// style={{ width, height, ...style }}
|
|
84
|
+
// />
|
|
85
|
+
<></>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
export { VtxIcon }
|
|
90
|
+
export default VtxIcon;
|
package/lib/vtx-image/Preview.js
CHANGED
|
@@ -28,15 +28,12 @@ var VIEWER = 'viewer';
|
|
|
28
28
|
// 多张
|
|
29
29
|
var GALLERY = 'gallery';
|
|
30
30
|
function checkMode(x) {
|
|
31
|
-
var mode = '';
|
|
32
|
-
if ((0, _utils.isObject)(x)) {
|
|
33
|
-
mode = VIEWER;
|
|
34
|
-
}
|
|
35
31
|
if (Array.isArray(x)) {
|
|
36
32
|
var len = x.length;
|
|
37
|
-
|
|
33
|
+
if (len === 0) return null;
|
|
34
|
+
return len === 1 ? VIEWER : GALLERY;
|
|
38
35
|
}
|
|
39
|
-
return
|
|
36
|
+
return (0, _utils.isObject)(x) ? VIEWER : null;
|
|
40
37
|
}
|
|
41
38
|
function Preview(props) {
|
|
42
39
|
var _useState = (0, _react.useState)(),
|
|
@@ -93,6 +90,9 @@ function Preview(props) {
|
|
|
93
90
|
setContainer(container);
|
|
94
91
|
setViewer(viewer);
|
|
95
92
|
return function () {
|
|
93
|
+
if (container) {
|
|
94
|
+
container.innerHTML = '';
|
|
95
|
+
}
|
|
96
96
|
viewer && viewer.destroy();
|
|
97
97
|
};
|
|
98
98
|
}, []);
|
|
@@ -102,6 +102,7 @@ function Preview(props) {
|
|
|
102
102
|
container.innerHTML = '';
|
|
103
103
|
}
|
|
104
104
|
var mode = checkMode(photo);
|
|
105
|
+
if (!mode) return null;
|
|
105
106
|
var newIndex = index;
|
|
106
107
|
// 单张
|
|
107
108
|
if (mode === VIEWER) {
|
|
@@ -132,6 +133,10 @@ function Preview(props) {
|
|
|
132
133
|
}
|
|
133
134
|
viewer.update();
|
|
134
135
|
viewer.view(newIndex);
|
|
136
|
+
} else {
|
|
137
|
+
if (container) {
|
|
138
|
+
container.innerHTML = '';
|
|
139
|
+
}
|
|
135
140
|
}
|
|
136
141
|
}, [visible]);
|
|
137
142
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
|
|
@@ -26,7 +26,6 @@ var center = function center() {
|
|
|
26
26
|
};
|
|
27
27
|
var genVtxImageStyle = function genVtxImageStyle(token) {
|
|
28
28
|
var componentCls = token.componentCls;
|
|
29
|
-
console.log('componentCls', componentCls);
|
|
30
29
|
return _defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-aspectFit', {
|
|
31
30
|
position: 'relative',
|
|
32
31
|
height: '100%',
|
package/lib/vtx-import/index.js
CHANGED
|
@@ -14,9 +14,9 @@ var _result = _interopRequireDefault(require("./result"));
|
|
|
14
14
|
var _getToken = _interopRequireDefault(require("../utils/getToken"));
|
|
15
15
|
var _md = _interopRequireDefault(require("md5"));
|
|
16
16
|
var _utils = require("@vtx/utils");
|
|
17
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
18
17
|
var _index = require("./style/index");
|
|
19
18
|
var _vtxProvider = require("../vtx-provider");
|
|
19
|
+
var _vtxModal = _interopRequireDefault(require("../vtx-modal"));
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -32,8 +32,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
32
32
|
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; }
|
|
33
33
|
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; } }
|
|
34
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
|
-
|
|
35
|
+
function _readOnlyError(name) { throw new TypeError("\"" + name + "\" is read-only"); }
|
|
36
36
|
function VtxImport(props) {
|
|
37
|
+
var token = (0, _getToken.default)();
|
|
38
|
+
if (props.token) {
|
|
39
|
+
props.token, _readOnlyError("token");
|
|
40
|
+
}
|
|
37
41
|
var intl = (0, _vtxProvider.useIntl)();
|
|
38
42
|
var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
|
|
39
43
|
getPrefixCls = _useContext.getPrefixCls;
|
|
@@ -41,14 +45,19 @@ function VtxImport(props) {
|
|
|
41
45
|
var _useStyle = (0, _index.useStyle)(prefixCls),
|
|
42
46
|
wrapSSR = _useStyle.wrapSSR,
|
|
43
47
|
hashId = _useStyle.hashId;
|
|
48
|
+
|
|
49
|
+
// 用 useRef 管理 DOM 引用,而不是 state
|
|
50
|
+
var fileInputRef = (0, _react.useRef)(null);
|
|
51
|
+
var iframeRef = (0, _react.useRef)(null);
|
|
52
|
+
var formRef = (0, _react.useRef)(null);
|
|
53
|
+
|
|
54
|
+
// 用于追踪当前 XHR 请求,方便取消
|
|
55
|
+
var xhrRef = (0, _react.useRef)(null);
|
|
44
56
|
var indexRef = (0, _react.useRef)(0);
|
|
45
57
|
var _useSet = (0, _useSet3.default)({
|
|
46
|
-
fileForm: null,
|
|
47
|
-
//
|
|
48
|
-
|
|
49
|
-
// 保存上传的文件
|
|
50
|
-
iframe: null,
|
|
51
|
-
// form表单提交之后跳转的
|
|
58
|
+
// fileForm: null, // form表单
|
|
59
|
+
// fileInput: null, // 保存上传的文件
|
|
60
|
+
// iframe: null, // form表单提交之后跳转的
|
|
52
61
|
useFormData: window.FormData ? true : false,
|
|
53
62
|
// 是否查看
|
|
54
63
|
uploading: false,
|
|
@@ -76,7 +85,8 @@ function VtxImport(props) {
|
|
|
76
85
|
currentIndex: 0,
|
|
77
86
|
chunkId: '',
|
|
78
87
|
chunks: [],
|
|
79
|
-
operation: props.operation || intl.getMessage('import.operation', '导入')
|
|
88
|
+
operation: props.operation || intl.getMessage('import.operation', '导入'),
|
|
89
|
+
fileName: ''
|
|
80
90
|
}),
|
|
81
91
|
_useSet2 = _slicedToArray(_useSet, 2),
|
|
82
92
|
state = _useSet2[0],
|
|
@@ -111,7 +121,7 @@ function VtxImport(props) {
|
|
|
111
121
|
data.append('chunkNo', i + 1);
|
|
112
122
|
data.append('chunkId', state.chunkId);
|
|
113
123
|
data.append('tenantId', (0, _utils.getVtxToken)('tenantId'));
|
|
114
|
-
data.append('file', new File([e],
|
|
124
|
+
data.append('file', new File([e], fileInputRef.current.files[0].name));
|
|
115
125
|
dataArr.push(data);
|
|
116
126
|
});
|
|
117
127
|
uploadAsync(dataArr);
|
|
@@ -121,6 +131,7 @@ function VtxImport(props) {
|
|
|
121
131
|
function uploadAsync(list) {
|
|
122
132
|
if (indexRef.current < list.length) {
|
|
123
133
|
var xhr = new XMLHttpRequest();
|
|
134
|
+
xhrRef.current = xhr;
|
|
124
135
|
xhr.onload = function () {
|
|
125
136
|
if (xhr.status === 200) {
|
|
126
137
|
setState({
|
|
@@ -144,15 +155,27 @@ function VtxImport(props) {
|
|
|
144
155
|
// 合并分片
|
|
145
156
|
function mergeFile() {
|
|
146
157
|
var xhr = new XMLHttpRequest();
|
|
158
|
+
xhrRef.current = xhr;
|
|
147
159
|
// 当上传完成时调用
|
|
148
160
|
xhr.onload = function () {
|
|
149
161
|
if (xhr.status === 200) {
|
|
150
|
-
var
|
|
151
|
-
|
|
162
|
+
var _res;
|
|
163
|
+
var res;
|
|
164
|
+
try {
|
|
165
|
+
res = JSON.parse(xhr.responseText);
|
|
166
|
+
} catch (e) {
|
|
167
|
+
_antd.message.error(intl.getMessage('import.error', '解析响应失败'));
|
|
168
|
+
setState({
|
|
169
|
+
uploading: false
|
|
170
|
+
});
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
if (((_res = res) === null || _res === void 0 ? void 0 : _res.result) == 0) {
|
|
152
174
|
_antd.message.success(intl.getMessage('import.success', '上传成功'));
|
|
153
175
|
chunkUpload(res.data);
|
|
154
176
|
} else {
|
|
155
|
-
|
|
177
|
+
var _res2;
|
|
178
|
+
_antd.message.error(((_res2 = res) === null || _res2 === void 0 ? void 0 : _res2.msg) || intl.getMessage('import.error', '上传失败'));
|
|
156
179
|
}
|
|
157
180
|
}
|
|
158
181
|
};
|
|
@@ -161,11 +184,13 @@ function VtxImport(props) {
|
|
|
161
184
|
};
|
|
162
185
|
// 发送请求
|
|
163
186
|
xhr.open('POST', '/cloudFile/common/mergeChunk', true);
|
|
187
|
+
xhr.setRequestHeader('Authorization', token ? "Bearer ".concat(token) : '');
|
|
188
|
+
xhr.setRequestHeader('access_token', token ? "".concat(token) : '');
|
|
164
189
|
var data = new FormData();
|
|
165
190
|
data.append('chunkId', state.chunkId);
|
|
166
191
|
data.append('tenantId', (0, _utils.getVtxToken)('tenantId'));
|
|
167
192
|
data.append('chunkSize', state.chunks.length);
|
|
168
|
-
data.append('fileName',
|
|
193
|
+
data.append('fileName', fileInputRef.current.files[0].name);
|
|
169
194
|
xhr.send(data);
|
|
170
195
|
}
|
|
171
196
|
|
|
@@ -175,6 +200,7 @@ function VtxImport(props) {
|
|
|
175
200
|
var postData = props.postData || {};
|
|
176
201
|
if (state.useFormData) {
|
|
177
202
|
var request = new XMLHttpRequest();
|
|
203
|
+
xhrRef.current = request;
|
|
178
204
|
// 发送请求
|
|
179
205
|
request.open('POST', postUrl);
|
|
180
206
|
request.setRequestHeader('Authorization', token ? "Bearer ".concat(token) : '');
|
|
@@ -205,6 +231,7 @@ function VtxImport(props) {
|
|
|
205
231
|
var postData = props.postData || {};
|
|
206
232
|
if (state.useFormData) {
|
|
207
233
|
var request = new XMLHttpRequest();
|
|
234
|
+
xhrRef.current = request;
|
|
208
235
|
// 发送请求
|
|
209
236
|
request.open('POST', postUrl);
|
|
210
237
|
request.setRequestHeader('Authorization', token ? "Bearer ".concat(token) : '');
|
|
@@ -225,7 +252,7 @@ function VtxImport(props) {
|
|
|
225
252
|
};
|
|
226
253
|
//创建formdata对象
|
|
227
254
|
var fmd = new FormData();
|
|
228
|
-
fmd.append(state.fileKey,
|
|
255
|
+
fmd.append(state.fileKey, fileInputRef.current.files[0]);
|
|
229
256
|
request.send(fmd);
|
|
230
257
|
}
|
|
231
258
|
}
|
|
@@ -256,7 +283,9 @@ function VtxImport(props) {
|
|
|
256
283
|
return postArray.length > 0 ? "".concat(postUrl, "?").concat(postArray.join('&')) : postUrl;
|
|
257
284
|
};
|
|
258
285
|
var closeModal = function closeModal() {
|
|
259
|
-
|
|
286
|
+
if (fileInputRef.current) {
|
|
287
|
+
fileInputRef.current.value = '';
|
|
288
|
+
}
|
|
260
289
|
if (typeof props.close === 'function') {
|
|
261
290
|
props.close();
|
|
262
291
|
} else {
|
|
@@ -267,15 +296,24 @@ function VtxImport(props) {
|
|
|
267
296
|
};
|
|
268
297
|
// 上传之后的回调 - 展示报错信息
|
|
269
298
|
var uploadSuccess = function uploadSuccess(data) {
|
|
270
|
-
|
|
299
|
+
var _parseData;
|
|
300
|
+
if (fileInputRef.current) {
|
|
301
|
+
fileInputRef.current.value = '';
|
|
302
|
+
}
|
|
271
303
|
setState({
|
|
272
304
|
uploading: false
|
|
273
305
|
});
|
|
306
|
+
var parseData;
|
|
307
|
+
try {
|
|
308
|
+
parseData = JSON.parse(data);
|
|
309
|
+
} catch (e) {
|
|
310
|
+
_antd.message.error(intl.getMessage('import.error', '解析响应数据失败'));
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
274
313
|
if (typeof props.afterUpload === 'function') {
|
|
275
314
|
afterUpload(data);
|
|
276
315
|
}
|
|
277
|
-
|
|
278
|
-
if (Array.isArray(parseData === null || parseData === void 0 ? void 0 : parseData.data)) {
|
|
316
|
+
if (Array.isArray((_parseData = parseData) === null || _parseData === void 0 ? void 0 : _parseData.data)) {
|
|
279
317
|
setState({
|
|
280
318
|
resultVisible: true,
|
|
281
319
|
resultData: parseData.data.map(function (item, index) {
|
|
@@ -290,7 +328,8 @@ function VtxImport(props) {
|
|
|
290
328
|
} else {
|
|
291
329
|
// 新增其他错误提示
|
|
292
330
|
if (parseData.result !== 0) {
|
|
293
|
-
|
|
331
|
+
var _parseData2;
|
|
332
|
+
_antd.message.error(((_parseData2 = parseData) === null || _parseData2 === void 0 ? void 0 : _parseData2.msg) || intl.getMessage('import.success', '上传成功'));
|
|
294
333
|
}
|
|
295
334
|
}
|
|
296
335
|
};
|
|
@@ -305,7 +344,10 @@ function VtxImport(props) {
|
|
|
305
344
|
onCancel: function onCancel() {
|
|
306
345
|
return closeModal();
|
|
307
346
|
},
|
|
308
|
-
maskClosable: false,
|
|
347
|
+
// maskClosable: false,
|
|
348
|
+
mask: {
|
|
349
|
+
closable: false
|
|
350
|
+
},
|
|
309
351
|
footer: [templateURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
|
|
310
352
|
onClick: function onClick() {
|
|
311
353
|
window.open(templateURL);
|
|
@@ -315,22 +357,21 @@ function VtxImport(props) {
|
|
|
315
357
|
type: "primary",
|
|
316
358
|
loading: state.uploading,
|
|
317
359
|
onClick: function onClick() {
|
|
360
|
+
var _fileInputRef$current2;
|
|
318
361
|
if (typeof props.beforeUpload === 'function') {
|
|
319
|
-
var
|
|
362
|
+
var _fileInputRef$current;
|
|
363
|
+
var flag = beforeUpload((_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || (_fileInputRef$current = _fileInputRef$current.files) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current[0]);
|
|
320
364
|
if (!flag) {
|
|
321
|
-
|
|
322
|
-
setState({
|
|
323
|
-
fileInput: null
|
|
324
|
-
});
|
|
365
|
+
fileInputRef.current.value = '';
|
|
325
366
|
return;
|
|
326
367
|
}
|
|
327
368
|
}
|
|
328
|
-
if (
|
|
369
|
+
if ((_fileInputRef$current2 = fileInputRef.current) !== null && _fileInputRef$current2 !== void 0 && _fileInputRef$current2.value) {
|
|
329
370
|
setState({
|
|
330
371
|
uploading: true
|
|
331
372
|
});
|
|
332
373
|
// 上传文件
|
|
333
|
-
checkFile(
|
|
374
|
+
checkFile(fileInputRef.current.files[0]);
|
|
334
375
|
// const postUrl = getPostURL();
|
|
335
376
|
// if (state.useFormData) {
|
|
336
377
|
// const request = new XMLHttpRequest();
|
|
@@ -359,7 +400,8 @@ function VtxImport(props) {
|
|
|
359
400
|
closeModal();
|
|
360
401
|
},
|
|
361
402
|
children: intl.getMessage('switch.close', '关闭')
|
|
362
|
-
}, "closeWindow")]
|
|
403
|
+
}, "closeWindow")],
|
|
404
|
+
width: 520
|
|
363
405
|
};
|
|
364
406
|
var resultProps = {
|
|
365
407
|
visible: state.resultVisible,
|
|
@@ -372,36 +414,106 @@ function VtxImport(props) {
|
|
|
372
414
|
},
|
|
373
415
|
modalWidth: state.modalWidth
|
|
374
416
|
};
|
|
417
|
+
|
|
418
|
+
// 组件卸载时清理
|
|
419
|
+
(0, _react.useEffect)(function () {
|
|
420
|
+
return function () {
|
|
421
|
+
// 取消进行中的 XHR 请求
|
|
422
|
+
if (xhrRef.current) {
|
|
423
|
+
xhrRef.current.abort();
|
|
424
|
+
xhrRef.current = null;
|
|
425
|
+
}
|
|
426
|
+
// 清理文件输入
|
|
427
|
+
if (fileInputRef.current) {
|
|
428
|
+
fileInputRef.current.value = '';
|
|
429
|
+
}
|
|
430
|
+
};
|
|
431
|
+
}, []);
|
|
375
432
|
(0, _react.useEffect)(function () {
|
|
376
433
|
if (state.chunkId) {
|
|
377
434
|
startUpload();
|
|
378
435
|
}
|
|
379
436
|
}, [state.chunkId]);
|
|
380
|
-
|
|
381
|
-
|
|
437
|
+
var truncateFileName = function truncateFileName(fileName) {
|
|
438
|
+
var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 28;
|
|
439
|
+
if (fileName.length <= maxLength) return fileName;
|
|
440
|
+
var extIndex = fileName.lastIndexOf('.');
|
|
441
|
+
var ext = extIndex !== -1 ? fileName.slice(extIndex) : '';
|
|
442
|
+
var name = extIndex !== -1 ? fileName.slice(0, extIndex) : fileName;
|
|
443
|
+
var availableLength = maxLength - ext.length - 3; // 3 是 "..."
|
|
444
|
+
if (availableLength <= 0) return "...".concat(ext);
|
|
445
|
+
var startLength = Math.ceil(availableLength / 2);
|
|
446
|
+
var endLength = Math.floor(availableLength / 2);
|
|
447
|
+
var start = name.slice(0, startLength);
|
|
448
|
+
var end = name.slice(-endLength);
|
|
449
|
+
return "".concat(start, "...").concat(end).concat(ext);
|
|
450
|
+
};
|
|
451
|
+
|
|
452
|
+
// 处理文件选择变化
|
|
453
|
+
var handleFileChange = function handleFileChange(event) {
|
|
454
|
+
var _event$target$files;
|
|
455
|
+
var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
|
|
456
|
+
if (file) {
|
|
457
|
+
setState(function (prev) {
|
|
458
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
459
|
+
fileName: truncateFileName(file.name)
|
|
460
|
+
});
|
|
461
|
+
});
|
|
462
|
+
// 这里可以添加文件上传或其他处理逻辑
|
|
463
|
+
// 例如:uploadFile(file);
|
|
464
|
+
} else {
|
|
465
|
+
setState(function (prev) {
|
|
466
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
467
|
+
fileName: ''
|
|
468
|
+
});
|
|
469
|
+
});
|
|
470
|
+
}
|
|
471
|
+
};
|
|
472
|
+
var handleSelectFile = function handleSelectFile() {
|
|
473
|
+
var _fileInputRef$current3;
|
|
474
|
+
(_fileInputRef$current3 = fileInputRef.current) === null || _fileInputRef$current3 === void 0 || _fileInputRef$current3.click();
|
|
475
|
+
};
|
|
476
|
+
return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vtxModal.default, _objectSpread(_objectSpread({}, modalProps), {}, {
|
|
477
|
+
children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
|
|
382
478
|
encType: "multipart/form-data",
|
|
383
479
|
method: "post",
|
|
384
480
|
target: "tmp",
|
|
385
481
|
action: uploadURL,
|
|
386
|
-
ref:
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
482
|
+
ref: formRef,
|
|
483
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
484
|
+
className: "".concat(prefixCls, "-btn"),
|
|
485
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
|
|
486
|
+
onClick: handleSelectFile,
|
|
487
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
488
|
+
className: "".concat(prefixCls, "-label"),
|
|
489
|
+
children: intl.getMessage('import.selectFile', '选择文件')
|
|
490
|
+
})
|
|
491
|
+
}), state.fileName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
|
|
492
|
+
title: state.fileName,
|
|
493
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
494
|
+
className: "".concat(prefixCls, "-file-name"),
|
|
495
|
+
children: state.fileName
|
|
496
|
+
})
|
|
497
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
498
|
+
className: "".concat(prefixCls, "-file-name"),
|
|
499
|
+
children: intl.getMessage('import.noFileSelected', '未选择任何文件')
|
|
500
|
+
})]
|
|
501
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
390
502
|
type: "file",
|
|
391
503
|
name: state.fileKey,
|
|
392
504
|
accept: state.accept,
|
|
393
|
-
ref:
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
505
|
+
ref: fileInputRef,
|
|
506
|
+
style: {
|
|
507
|
+
display: 'none'
|
|
508
|
+
},
|
|
509
|
+
onChange: handleFileChange
|
|
510
|
+
})]
|
|
397
511
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
|
|
398
512
|
name: "tmp",
|
|
399
513
|
style: {
|
|
400
514
|
display: 'none'
|
|
401
515
|
},
|
|
402
|
-
ref:
|
|
403
|
-
if (dom) state.iframe = dom;
|
|
404
|
-
}
|
|
516
|
+
ref: iframeRef
|
|
405
517
|
}), state.resultVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_result.default, _objectSpread({}, resultProps))]
|
|
406
518
|
})));
|
|
407
519
|
}
|
package/lib/vtx-import/result.js
CHANGED
|
@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
11
11
|
var _useSet3 = _interopRequireDefault(require("../utils/useSet"));
|
|
12
12
|
var _vtxDatagrid = _interopRequireDefault(require("../vtx-datagrid"));
|
|
13
13
|
var _vtxProvider = require("../vtx-provider");
|
|
14
|
+
var _vtxModal = _interopRequireDefault(require("../vtx-modal"));
|
|
14
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -46,7 +47,10 @@ function VtxImportResult(props) {
|
|
|
46
47
|
}
|
|
47
48
|
},
|
|
48
49
|
width: state.modalWidth,
|
|
49
|
-
maskClosable: false,
|
|
50
|
+
// maskClosable: false,
|
|
51
|
+
mask: {
|
|
52
|
+
closable: false
|
|
53
|
+
},
|
|
50
54
|
footer: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
|
|
51
55
|
onClick: function onClick() {
|
|
52
56
|
if (typeof props.hideVisible === 'function') {
|
|
@@ -65,7 +69,7 @@ function VtxImportResult(props) {
|
|
|
65
69
|
pagination: false,
|
|
66
70
|
autoFit: false
|
|
67
71
|
};
|
|
68
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
72
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vtxModal.default, _objectSpread(_objectSpread({}, modalProps), {}, {
|
|
69
73
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
70
74
|
style: {
|
|
71
75
|
maxHeight: 600,
|
|
@@ -13,7 +13,22 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
13
13
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
14
14
|
var genVtxImportStyle = function genVtxImportStyle(token) {
|
|
15
15
|
var componentCls = token.componentCls;
|
|
16
|
-
return _defineProperty({}, componentCls, {
|
|
16
|
+
return _defineProperty({}, componentCls, _defineProperty({
|
|
17
|
+
'.ant-modal-container': {
|
|
18
|
+
padding: 0,
|
|
19
|
+
'.ant-modal-header': {
|
|
20
|
+
padding: 20
|
|
21
|
+
},
|
|
22
|
+
'.ant-modal-body': {
|
|
23
|
+
padding: 20
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}, '&-btn', {
|
|
27
|
+
display: 'flex',
|
|
28
|
+
justifyContent: 'flex-start',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
gap: 8
|
|
31
|
+
}));
|
|
17
32
|
};
|
|
18
33
|
function useStyle(prefixCls) {
|
|
19
34
|
return (0, _vtxProvider.useStyle)('VtxImport', function (token) {
|
|
@@ -107,6 +107,7 @@ Content.propTypes = {
|
|
|
107
107
|
customText: _propTypes.default.string,
|
|
108
108
|
extraText: _propTypes.default.string,
|
|
109
109
|
TextEnum: _propTypes.default.object,
|
|
110
|
-
extraDom: [
|
|
110
|
+
// extraDom: [PropTypes.string, PropTypes.node],
|
|
111
|
+
extraDom: _propTypes.default.object
|
|
111
112
|
};
|
|
112
113
|
var _default = exports.default = Content;
|