ztxkui 3.1.4 → 3.1.7
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/DemoCom/SinaturesDemo.js +110 -18
- package/dist/DemoCom/TableDemo.js +138 -36
- package/dist/TableDemo/BasicTable.d.ts +7 -0
- package/dist/TableDemo/BasicTable.js +95 -0
- package/dist/TableDemo/EditableTable.d.ts +7 -0
- package/dist/TableDemo/EditableTable.js +336 -0
- package/dist/TableDemo/data.d.ts +17 -0
- package/dist/TableDemo/data.js +57 -0
- package/dist/TableDemo/index.d.ts +7 -0
- package/dist/TableDemo/index.js +19 -0
- package/dist/components/Table/hooks/useColumns.d.ts +17 -1
- package/dist/components/Table/hooks/useColumns.js +91 -7
- package/dist/components/Table/index.d.ts +28 -4
- package/dist/components/Table/index.js +4 -1
- package/dist/components/Table/table-enhance-cell.js +18 -3
- package/dist/components/Table/table-resizable-title.d.ts +11 -0
- package/dist/components/Table/table-resizable-title.js +39 -0
- package/dist/components/Table/table.d.ts +15 -0
- package/dist/components/Table/table.js +189 -31
- package/dist/components/Table/utils/dom.d.ts +7 -0
- package/dist/components/Table/utils/dom.js +24 -0
- package/dist/components/Table/utils/validate.d.ts +1 -0
- package/dist/components/Table/utils/validate.js +151 -0
- package/dist/components/business/Signatures/components/CompareResult.d.ts +0 -2
- package/dist/components/business/Signatures/components/CompareResult.js +15 -17
- package/dist/components/business/Signatures/components/ElectronicSeal.js +1 -1
- package/dist/components/business/Signatures/components/QunjSeal.js +2 -1
- package/dist/components/business/Signatures/components/TemplateAttach.d.ts +1 -1
- package/dist/components/business/Signatures/components/TemplateAttach.js +4 -7
- package/dist/components/business/Signatures/index.js +60 -13
- package/dist/components/business/Signatures/props.d.ts +1 -1
- package/dist/components/business/Signatures/utils.d.ts +2 -1
- package/dist/components/business/Signatures/utils.js +7 -1
- package/dist/index.css +23 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +4 -0
- package/package.json +2 -1
|
@@ -56,12 +56,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
56
56
|
}
|
|
57
57
|
return t;
|
|
58
58
|
};
|
|
59
|
-
import React, { useContext, useEffect, memo } from 'react';
|
|
59
|
+
import React, { useContext, useEffect, memo, useRef } from 'react';
|
|
60
60
|
import { EditableContext } from './table-enhance-row';
|
|
61
61
|
import { Form, Input, InputNumber, Select, message } from '../../index';
|
|
62
|
+
import { ERROR_TD_CLASSNAME } from './index';
|
|
62
63
|
var TableEnhanceCell = memo(function (_a) {
|
|
63
64
|
var title = _a.title, index = _a.index, editable = _a.editable, editableConfig = _a.editableConfig, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, restProps = __rest(_a, ["title", "index", "editable", "editableConfig", "children", "dataIndex", "record", "handleSave"]);
|
|
64
65
|
var form = useContext(EditableContext);
|
|
66
|
+
var tdRef = useRef();
|
|
65
67
|
useEffect(function () {
|
|
66
68
|
var _a;
|
|
67
69
|
if (dataIndex) {
|
|
@@ -112,6 +114,11 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
112
114
|
}
|
|
113
115
|
});
|
|
114
116
|
}); };
|
|
117
|
+
function removeErrorClass() {
|
|
118
|
+
if (tdRef.current) {
|
|
119
|
+
tdRef.current.classList.remove(ERROR_TD_CLASSNAME);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
115
122
|
/**
|
|
116
123
|
* @description 生成编辑框
|
|
117
124
|
*/
|
|
@@ -119,6 +126,7 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
119
126
|
if (!editableConfig) {
|
|
120
127
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
121
128
|
React.createElement(Input, { autoComplete: "new-password", maxLength: 50, onPressEnter: save, onBlur: save, allowClear: true, onChange: function (e) {
|
|
129
|
+
removeErrorClass();
|
|
122
130
|
if (!e.target.value) {
|
|
123
131
|
e.target.focus();
|
|
124
132
|
}
|
|
@@ -175,7 +183,10 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
175
183
|
// 处理各种类型
|
|
176
184
|
if (type === 'select') {
|
|
177
185
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
178
|
-
React.createElement(Select, __assign({ allowClear: true }, editableProps, { disabled: disabledResult, onChange:
|
|
186
|
+
React.createElement(Select, __assign({ allowClear: true }, editableProps, { disabled: disabledResult, onChange: function (value, option) {
|
|
187
|
+
removeErrorClass();
|
|
188
|
+
save(value);
|
|
189
|
+
} }), Array.isArray(selectData) &&
|
|
179
190
|
selectData.map(function (item) { return (React.createElement(Select.Option, { key: item[selectKeyValue.key] + '', value: item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.key] }, item[selectKeyValue === null || selectKeyValue === void 0 ? void 0 : selectKeyValue.label])); }))));
|
|
180
191
|
}
|
|
181
192
|
else if (type === 'inputNumber') {
|
|
@@ -191,11 +202,14 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
191
202
|
}, onFocus: function (e) {
|
|
192
203
|
var _a;
|
|
193
204
|
editableProps.onFocus && ((_a = editableProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
|
|
205
|
+
}, onChange: function () {
|
|
206
|
+
removeErrorClass();
|
|
194
207
|
} }))));
|
|
195
208
|
}
|
|
196
209
|
else if (type === 'textArea') {
|
|
197
210
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
198
211
|
React.createElement(Input.TextArea, __assign({ autoComplete: "new-password", maxLength: 200, autoSize: { maxRows: 3 } }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, onChange: function (e) {
|
|
212
|
+
removeErrorClass();
|
|
199
213
|
if (!e.target.value) {
|
|
200
214
|
e.target.focus();
|
|
201
215
|
}
|
|
@@ -204,6 +218,7 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
204
218
|
else {
|
|
205
219
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
206
220
|
React.createElement(Input, __assign({ autoComplete: "new-password", maxLength: 50 }, editableProps, { disabled: disabledResult, onPressEnter: save, onBlur: save, allowClear: true, onChange: function (e) {
|
|
221
|
+
removeErrorClass();
|
|
207
222
|
if (!e.target.value) {
|
|
208
223
|
e.target.focus();
|
|
209
224
|
}
|
|
@@ -214,6 +229,6 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
214
229
|
if (editable) {
|
|
215
230
|
childNode = createEditableDom(editableConfig);
|
|
216
231
|
}
|
|
217
|
-
return React.createElement("td", __assign({}, restProps), childNode);
|
|
232
|
+
return (React.createElement("td", __assign({ ref: tdRef }, restProps), childNode));
|
|
218
233
|
});
|
|
219
234
|
export default TableEnhanceCell;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author 陈亚雄
|
|
3
|
+
* @description
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import type { ResizeCallbackData } from 'react-resizable';
|
|
7
|
+
declare const TableResizableTitle: (props: React.HTMLAttributes<any> & {
|
|
8
|
+
onResize: (e: React.SyntheticEvent<Element>, data: any) => void;
|
|
9
|
+
width: number;
|
|
10
|
+
}) => JSX.Element;
|
|
11
|
+
export default TableResizableTitle;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* @author 陈亚雄
|
|
25
|
+
* @description
|
|
26
|
+
*/
|
|
27
|
+
import React from 'react';
|
|
28
|
+
import { Resizable } from 'react-resizable';
|
|
29
|
+
var TableResizableTitle = function (props) {
|
|
30
|
+
var onResize = props.onResize, width = props.width, restProps = __rest(props, ["onResize", "width"]);
|
|
31
|
+
if (!width) {
|
|
32
|
+
return React.createElement("th", __assign({}, restProps));
|
|
33
|
+
}
|
|
34
|
+
return (React.createElement(Resizable, { width: width, height: 0, handle: React.createElement("span", { className: "react-resizable-handle", onClick: function (e) {
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
} }), onResize: onResize, draggableOpts: { enableUserSelectHack: false } },
|
|
37
|
+
React.createElement("th", __assign({}, restProps))));
|
|
38
|
+
};
|
|
39
|
+
export default TableResizableTitle;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableProps } from 'antd/lib/table';
|
|
3
3
|
import { ColumnsType } from './';
|
|
4
|
+
import { IConfigInfo } from './hooks/useColumns';
|
|
4
5
|
import { ISummaryConfig } from './utils/getSummaryData';
|
|
5
6
|
export interface IProps<RecordType> extends Omit<TableProps<RecordType>, 'columns'> {
|
|
6
7
|
/**新增行删除行方法 */
|
|
@@ -11,6 +12,8 @@ export interface IProps<RecordType> extends Omit<TableProps<RecordType>, 'column
|
|
|
11
12
|
hideDelIcon?: boolean;
|
|
12
13
|
/**是否显示动态表头配置 */
|
|
13
14
|
showColumnDynamic?: boolean;
|
|
15
|
+
/**动态表头配置,是否缓存,动态列配置如果要缓存得话,必须得使用一个全局唯一得key来标识 */
|
|
16
|
+
showColumnDynamicKey?: string;
|
|
14
17
|
/**是否显示小计或总计 */
|
|
15
18
|
summaryConfig?: ISummaryConfig[];
|
|
16
19
|
summaryFixed?: boolean;
|
|
@@ -23,6 +26,18 @@ export interface IProps<RecordType> extends Omit<TableProps<RecordType>, 'column
|
|
|
23
26
|
/**初始化值 */
|
|
24
27
|
initColumns?: ColumnsType<RecordType>;
|
|
25
28
|
columns?: ColumnsType<RecordType>;
|
|
29
|
+
/** 是否伸缩列 */
|
|
30
|
+
isResizableColumn?: boolean;
|
|
31
|
+
/** 表格列配置相关信息 */
|
|
32
|
+
configInfo?: IConfigInfo;
|
|
33
|
+
/** 表格组件提供的方法 */
|
|
34
|
+
tableHandleRef?: React.Ref<{
|
|
35
|
+
validate: () => Promise<any>;
|
|
36
|
+
clearErrorClass: (index: number) => void;
|
|
37
|
+
[prop: string]: any;
|
|
38
|
+
}>;
|
|
39
|
+
/** 表格组件名字 */
|
|
40
|
+
tableName?: string;
|
|
26
41
|
}
|
|
27
42
|
/**
|
|
28
43
|
* TodoList
|
|
@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (_) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
12
48
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
49
|
var t = {};
|
|
14
50
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -25,14 +61,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
25
61
|
to[j] = from[i];
|
|
26
62
|
return to;
|
|
27
63
|
};
|
|
28
|
-
import React, { useCallback, memo, useState, useEffect } from 'react';
|
|
64
|
+
import React, { useCallback, memo, useState, useEffect, useRef, useImperativeHandle, } from 'react';
|
|
29
65
|
import { Table as AntTable } from 'antd';
|
|
66
|
+
import { ERROR_TD_CLASSNAME } from './';
|
|
30
67
|
import TableDynamic from './table-dynamic';
|
|
31
68
|
// import TableSummary from './table-summary';
|
|
32
69
|
import TableEnhanceRow from './table-enhance-row';
|
|
33
70
|
import TableEnhanceCell from './table-enhance-cell';
|
|
71
|
+
import TableResizableTitle from './table-resizable-title';
|
|
34
72
|
import useColumns from './hooks/useColumns';
|
|
35
73
|
import getSummaryData from './utils/getSummaryData';
|
|
74
|
+
import { domFind } from './utils/dom';
|
|
75
|
+
import { tableValidate } from './utils/validate';
|
|
36
76
|
import classNames from 'classnames';
|
|
37
77
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
38
78
|
import { DndProvider } from 'react-dnd';
|
|
@@ -60,11 +100,12 @@ var components = {
|
|
|
60
100
|
* 实现可编辑功能
|
|
61
101
|
*/
|
|
62
102
|
function Table(props) {
|
|
63
|
-
var
|
|
103
|
+
var _this = this;
|
|
104
|
+
var className = props.className, scroll = props.scroll, _a = props.pagination, pagination = _a === void 0 ? false : _a, _b = props.bordered, bordered = _b === void 0 ? true : _b, columns = props.columns, initColumns = props.initColumns, dataSource = props.dataSource, onAddAndDelHandle = props.onAddAndDelHandle, hideAddIcon = props.hideAddIcon, hideDelIcon = props.hideDelIcon, showColumnDynamic = props.showColumnDynamic, showColumnDynamicKey = props.showColumnDynamicKey, summaryConfig = props.summaryConfig, summaryFixed = props.summaryFixed, summary = props.summary, onMoveRow = props.onMoveRow, onEditableSave = props.onEditableSave, onDynamicChange = props.onDynamicChange, _c = props.isResizableColumn, isResizableColumn = _c === void 0 ? true : _c, configInfo = props.configInfo, tableHandleRef = props.tableHandleRef, tableName = props.tableName, restProps = __rest(props, ["className", "scroll", "pagination", "bordered", "columns", "initColumns", "dataSource", "onAddAndDelHandle", "hideAddIcon", "hideDelIcon", "showColumnDynamic", "showColumnDynamicKey", "summaryConfig", "summaryFixed", "summary", "onMoveRow", "onEditableSave", "onDynamicChange", "isResizableColumn", "configInfo", "tableHandleRef", "tableName"]);
|
|
64
105
|
// console.log('table render');
|
|
65
106
|
var classes = classNames('zt-table', className);
|
|
66
|
-
var
|
|
67
|
-
var
|
|
107
|
+
var _d = useState(false), dynamicVisible = _d[0], setDynamicVisible = _d[1];
|
|
108
|
+
var _e = useState(columns), _columns = _e[0], setColumns = _e[1];
|
|
68
109
|
var showDynamicHandle = useCallback(function () { return setDynamicVisible(true); }, []);
|
|
69
110
|
var hideDynamicHandle = useCallback(function () { return setDynamicVisible(false); }, []);
|
|
70
111
|
/**columns更新,重新设置columns */
|
|
@@ -75,15 +116,17 @@ function Table(props) {
|
|
|
75
116
|
* @description 根据配置生成一个新的columns
|
|
76
117
|
* 以及一个需要动态列配置的columns
|
|
77
118
|
*/
|
|
78
|
-
var
|
|
119
|
+
var _f = useColumns({
|
|
79
120
|
columns: _columns,
|
|
80
121
|
showColumnDynamic: showColumnDynamic,
|
|
122
|
+
showColumnDynamicKey: showColumnDynamicKey,
|
|
81
123
|
onAddAndDelHandle: onAddAndDelHandle,
|
|
82
124
|
hideAddIcon: hideAddIcon,
|
|
83
125
|
hideDelIcon: hideDelIcon,
|
|
84
126
|
showDynamicHandle: showDynamicHandle,
|
|
85
127
|
onEditableSave: onEditableSave,
|
|
86
|
-
|
|
128
|
+
configInfo: configInfo,
|
|
129
|
+
}), newColumns = _f.newColumns, dynamicColumns = _f.dynamicColumns, setNewColumns = _f.setNewColumns;
|
|
87
130
|
/**
|
|
88
131
|
* @description 保存列配置
|
|
89
132
|
*/
|
|
@@ -101,27 +144,7 @@ function Table(props) {
|
|
|
101
144
|
});
|
|
102
145
|
var newColumns_1 = __spreadArray(__spreadArray(__spreadArray([], leftArr_1), dynamicColumns), rightArr_1);
|
|
103
146
|
setColumns(newColumns_1);
|
|
104
|
-
|
|
105
|
-
onDynamicChange(newColumns_1.map(function (item) {
|
|
106
|
-
if (item.dataIndex || item.key) {
|
|
107
|
-
return {
|
|
108
|
-
dataIndex: item.dataIndex,
|
|
109
|
-
key: item.key,
|
|
110
|
-
hideColumn: item.hideColumn,
|
|
111
|
-
};
|
|
112
|
-
}
|
|
113
|
-
return __assign({}, item);
|
|
114
|
-
}));
|
|
115
|
-
}
|
|
116
|
-
}, [_columns, onDynamicChange]);
|
|
117
|
-
/**
|
|
118
|
-
* @description 动态列配置重置功能
|
|
119
|
-
*/
|
|
120
|
-
var resetDynamicHandle = useCallback(function () {
|
|
121
|
-
var _initColumns = initColumns || columns;
|
|
122
|
-
setColumns(_initColumns);
|
|
123
|
-
onDynamicChange &&
|
|
124
|
-
onDynamicChange((_initColumns || []).map(function (item) {
|
|
147
|
+
var catchColumns = newColumns_1.map(function (item) {
|
|
125
148
|
if (item.dataIndex || item.key) {
|
|
126
149
|
return {
|
|
127
150
|
dataIndex: item.dataIndex,
|
|
@@ -130,9 +153,55 @@ function Table(props) {
|
|
|
130
153
|
};
|
|
131
154
|
}
|
|
132
155
|
return __assign({}, item);
|
|
133
|
-
})
|
|
156
|
+
});
|
|
157
|
+
if (showColumnDynamicKey) {
|
|
158
|
+
var catchColumnsStr = '{}';
|
|
159
|
+
try {
|
|
160
|
+
catchColumnsStr = JSON.stringify(catchColumns);
|
|
161
|
+
}
|
|
162
|
+
catch (err) {
|
|
163
|
+
console.log(err);
|
|
164
|
+
}
|
|
165
|
+
localStorage.setItem(showColumnDynamicKey, catchColumnsStr);
|
|
166
|
+
}
|
|
167
|
+
onDynamicChange && onDynamicChange(catchColumns);
|
|
168
|
+
}
|
|
169
|
+
}, [_columns, onDynamicChange, showColumnDynamicKey]);
|
|
170
|
+
/**
|
|
171
|
+
* @description 动态列配置重置功能
|
|
172
|
+
*/
|
|
173
|
+
var resetDynamicHandle = useCallback(function () {
|
|
174
|
+
var _initColumns = initColumns || columns || [];
|
|
175
|
+
setColumns(__spreadArray([], _initColumns));
|
|
176
|
+
var catchColumns = (_initColumns || []).map(function (item) {
|
|
177
|
+
if (item.dataIndex || item.key) {
|
|
178
|
+
return {
|
|
179
|
+
dataIndex: item.dataIndex,
|
|
180
|
+
key: item.key,
|
|
181
|
+
hideColumn: item.hideColumn,
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
return __assign({}, item);
|
|
185
|
+
});
|
|
186
|
+
if (showColumnDynamicKey) {
|
|
187
|
+
var catchColumnsStr = '{}';
|
|
188
|
+
try {
|
|
189
|
+
catchColumnsStr = JSON.stringify(catchColumns);
|
|
190
|
+
}
|
|
191
|
+
catch (err) {
|
|
192
|
+
console.log(err);
|
|
193
|
+
}
|
|
194
|
+
localStorage.setItem(showColumnDynamicKey, catchColumnsStr);
|
|
195
|
+
}
|
|
196
|
+
onDynamicChange && onDynamicChange(catchColumns);
|
|
134
197
|
hideDynamicHandle();
|
|
135
|
-
}, [
|
|
198
|
+
}, [
|
|
199
|
+
initColumns,
|
|
200
|
+
columns,
|
|
201
|
+
hideDynamicHandle,
|
|
202
|
+
onDynamicChange,
|
|
203
|
+
showColumnDynamicKey,
|
|
204
|
+
]);
|
|
136
205
|
/**
|
|
137
206
|
* @description 切换行位置
|
|
138
207
|
*/
|
|
@@ -149,9 +218,98 @@ function Table(props) {
|
|
|
149
218
|
// onMoveRow && onMoveRow(newDataSource);
|
|
150
219
|
// }
|
|
151
220
|
}, [onMoveRow]);
|
|
152
|
-
|
|
221
|
+
/** 伸缩列 */
|
|
222
|
+
var handleResize = function (index) {
|
|
223
|
+
return function (_, _a) {
|
|
224
|
+
var size = _a.size;
|
|
225
|
+
var _newColumns = __spreadArray([], (newColumns || []));
|
|
226
|
+
_newColumns[index] = __assign(__assign({}, _newColumns[index]), { width: size.width });
|
|
227
|
+
setNewColumns(_newColumns);
|
|
228
|
+
};
|
|
229
|
+
};
|
|
230
|
+
var mergeColumns = isResizableColumn
|
|
231
|
+
? (newColumns || []).map(function (col, index) { return (__assign(__assign({}, col), { onHeaderCell: function (column) { return ({
|
|
232
|
+
width: column.width,
|
|
233
|
+
onResize: handleResize(index),
|
|
234
|
+
}); } })); })
|
|
235
|
+
: newColumns;
|
|
236
|
+
if (isResizableColumn) {
|
|
237
|
+
components.header = {
|
|
238
|
+
cell: TableResizableTitle,
|
|
239
|
+
};
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* 表格暴露方法给外部使用
|
|
243
|
+
*/
|
|
244
|
+
var tableRef = useRef();
|
|
245
|
+
function getCurrentTable() {
|
|
246
|
+
var _a;
|
|
247
|
+
// 获取表格元素
|
|
248
|
+
var tableContent = domFind(tableRef.current, '.ant-table-content');
|
|
249
|
+
var tableBody = domFind(tableContent, '.ant-table-tbody');
|
|
250
|
+
var tr = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children;
|
|
251
|
+
var arrTr = Array.prototype.slice.call(tr);
|
|
252
|
+
var resultTr = ((_a = arrTr === null || arrTr === void 0 ? void 0 : arrTr.filter) === null || _a === void 0 ? void 0 : _a.call(arrTr, function (item) { return item.className.includes('ant-table-row'); })) || [];
|
|
253
|
+
return { tableBody: tableBody, resultTr: resultTr };
|
|
254
|
+
}
|
|
255
|
+
function clearErrorClass(index) {
|
|
256
|
+
try {
|
|
257
|
+
var resultTr = getCurrentTable().resultTr;
|
|
258
|
+
if (typeof index === 'number') {
|
|
259
|
+
var tds = resultTr[index].querySelectorAll('td');
|
|
260
|
+
for (var i = 0; i < tds.length; i++) {
|
|
261
|
+
tds[i].classList.remove(ERROR_TD_CLASSNAME);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
else {
|
|
265
|
+
for (var i = 0; i < resultTr.length; i++) {
|
|
266
|
+
var tds = resultTr[i].querySelectorAll('td');
|
|
267
|
+
for (var j = 0; j < tds.length; j++) {
|
|
268
|
+
tds[j].classList.remove(ERROR_TD_CLASSNAME);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
catch (err) {
|
|
274
|
+
console.log(err);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
useImperativeHandle(tableHandleRef, function () { return ({
|
|
278
|
+
/** 错误提示 */
|
|
279
|
+
validate: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
280
|
+
return __generator(this, function (_a) {
|
|
281
|
+
switch (_a.label) {
|
|
282
|
+
case 0:
|
|
283
|
+
clearErrorClass();
|
|
284
|
+
return [4 /*yield*/, tableValidate(dataSource, mergeColumns, {
|
|
285
|
+
getCurrentTable: getCurrentTable,
|
|
286
|
+
rowSelection: props.rowSelection,
|
|
287
|
+
tableName: tableName,
|
|
288
|
+
})];
|
|
289
|
+
case 1:
|
|
290
|
+
_a.sent();
|
|
291
|
+
return [2 /*return*/];
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
}); },
|
|
295
|
+
/** 获取当前表格 */
|
|
296
|
+
getCurrentTable: function () {
|
|
297
|
+
return getCurrentTable();
|
|
298
|
+
},
|
|
299
|
+
/** 移除错误样式 */
|
|
300
|
+
clearErrorClass: clearErrorClass,
|
|
301
|
+
}); });
|
|
302
|
+
return (React.createElement("div", { style: { position: 'relative', overflow: 'hidden' }, ref: tableRef },
|
|
153
303
|
React.createElement(DndProvider, { backend: HTML5Backend, context: window },
|
|
154
|
-
React.createElement(AntTable, __assign({ className: classes, bordered: bordered, pagination: pagination, scroll: scroll ? scroll : _scroll, columns:
|
|
304
|
+
React.createElement(AntTable, __assign({ className: classes, bordered: bordered, pagination: pagination, scroll: scroll ? scroll : _scroll, columns: mergeColumns, dataSource: dataSource, components: onMoveRow || onEditableSave
|
|
305
|
+
? components
|
|
306
|
+
: isResizableColumn
|
|
307
|
+
? {
|
|
308
|
+
header: {
|
|
309
|
+
cell: TableResizableTitle,
|
|
310
|
+
},
|
|
311
|
+
}
|
|
312
|
+
: undefined, onRow: onMoveRow
|
|
155
313
|
? function (record, index) {
|
|
156
314
|
return ({
|
|
157
315
|
index: index,
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author 陈亚雄
|
|
3
|
+
* @description dom操作
|
|
4
|
+
*/
|
|
5
|
+
export function domFind(el, selector) {
|
|
6
|
+
return el.querySelector(selector);
|
|
7
|
+
}
|
|
8
|
+
export function domFindAll(el, selector) {
|
|
9
|
+
return el.querySelectorAll(selector);
|
|
10
|
+
}
|
|
11
|
+
export function domParentsUntil(el, selector) {
|
|
12
|
+
var matchesSelector = el.matches ||
|
|
13
|
+
el.webkitMatchesSelector ||
|
|
14
|
+
el.mozMatchesSelector ||
|
|
15
|
+
el.msMatchesSelector;
|
|
16
|
+
el = el.parentElement;
|
|
17
|
+
while (el) {
|
|
18
|
+
if (matchesSelector.call(el, selector)) {
|
|
19
|
+
return el;
|
|
20
|
+
}
|
|
21
|
+
el = el.parentElement;
|
|
22
|
+
}
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function tableValidate(dataSource: any, mergeColumns: any, restParams: any): Promise<never>;
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
+
function step(op) {
|
|
15
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
+
while (_) try {
|
|
17
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
+
switch (op[0]) {
|
|
20
|
+
case 0: case 1: t = op; break;
|
|
21
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
+
default:
|
|
25
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
+
if (t[2]) _.ops.pop();
|
|
30
|
+
_.trys.pop(); continue;
|
|
31
|
+
}
|
|
32
|
+
op = body.call(thisArg, _);
|
|
33
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* @author 陈亚雄
|
|
39
|
+
* @description 表格验证逻辑
|
|
40
|
+
*/
|
|
41
|
+
import { ERROR_TD_CLASSNAME } from '../index';
|
|
42
|
+
export function tableValidate(dataSource, mergeColumns, restParams) {
|
|
43
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
44
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
45
|
+
var getCurrentTable, rowSelection, tableName, requiredFileds, resultTr, i, item, j, _o, dataIndex, title, validate, index, value, err_1, errorTr, errorTds, errorTd, errorTr, errorTds, errorTd, errorTr, errorTds, errorTd;
|
|
46
|
+
return __generator(this, function (_p) {
|
|
47
|
+
switch (_p.label) {
|
|
48
|
+
case 0:
|
|
49
|
+
getCurrentTable = restParams.getCurrentTable, rowSelection = restParams.rowSelection, tableName = restParams.tableName;
|
|
50
|
+
if (!Array.isArray(dataSource) || dataSource.length === 0) {
|
|
51
|
+
console.info('没有数据,无需验证!');
|
|
52
|
+
return [2 /*return*/];
|
|
53
|
+
}
|
|
54
|
+
if (!Array.isArray(mergeColumns)) {
|
|
55
|
+
console.info('columns 不是数组!');
|
|
56
|
+
return [2 /*return*/];
|
|
57
|
+
}
|
|
58
|
+
requiredFileds = [];
|
|
59
|
+
if (Array.isArray(mergeColumns)) {
|
|
60
|
+
mergeColumns.forEach(function (column, index) {
|
|
61
|
+
if (column.validate) {
|
|
62
|
+
requiredFileds.push({
|
|
63
|
+
dataIndex: column.validate.dataIndex || column.dataIndex,
|
|
64
|
+
title: column.validate.title || column.title,
|
|
65
|
+
validate: column.validate.validate,
|
|
66
|
+
index: index + (rowSelection ? 1 : 0),
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
resultTr = getCurrentTable().resultTr;
|
|
72
|
+
i = 0;
|
|
73
|
+
_p.label = 1;
|
|
74
|
+
case 1:
|
|
75
|
+
if (!(i < dataSource.length)) return [3 /*break*/, 14];
|
|
76
|
+
item = dataSource[i];
|
|
77
|
+
j = 0;
|
|
78
|
+
_p.label = 2;
|
|
79
|
+
case 2:
|
|
80
|
+
if (!(j < requiredFileds.length)) return [3 /*break*/, 13];
|
|
81
|
+
_o = requiredFileds[j], dataIndex = _o.dataIndex, title = _o.title, validate = _o.validate, index = _o.index;
|
|
82
|
+
if (!dataIndex) {
|
|
83
|
+
return [3 /*break*/, 13];
|
|
84
|
+
}
|
|
85
|
+
value = item[dataIndex];
|
|
86
|
+
if (!validate) return [3 /*break*/, 10];
|
|
87
|
+
if (!(typeof validate === 'function')) return [3 /*break*/, 7];
|
|
88
|
+
_p.label = 3;
|
|
89
|
+
case 3:
|
|
90
|
+
_p.trys.push([3, 5, , 6]);
|
|
91
|
+
return [4 /*yield*/, validate(value, item, i + 1, title)];
|
|
92
|
+
case 4:
|
|
93
|
+
_p.sent();
|
|
94
|
+
return [3 /*break*/, 6];
|
|
95
|
+
case 5:
|
|
96
|
+
err_1 = _p.sent();
|
|
97
|
+
errorTr = resultTr[i];
|
|
98
|
+
errorTds = Array.prototype.slice.call(errorTr === null || errorTr === void 0 ? void 0 : errorTr.children);
|
|
99
|
+
errorTd = typeof index === 'number' ? errorTds[index] : null;
|
|
100
|
+
(_b = (_a = errorTd === null || errorTd === void 0 ? void 0 : errorTd.classList) === null || _a === void 0 ? void 0 : _a.add) === null || _b === void 0 ? void 0 : _b.call(_a, ERROR_TD_CLASSNAME);
|
|
101
|
+
(_c = errorTd === null || errorTd === void 0 ? void 0 : errorTd.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(errorTd);
|
|
102
|
+
return [2 /*return*/, Promise.reject(err_1)];
|
|
103
|
+
case 6: return [3 /*break*/, 9];
|
|
104
|
+
case 7:
|
|
105
|
+
if (!!((_e = (_d = validate) === null || _d === void 0 ? void 0 : _d.pattern) === null || _e === void 0 ? void 0 : _e.test(value))) return [3 /*break*/, 9];
|
|
106
|
+
errorTr = resultTr[i];
|
|
107
|
+
errorTds = Array.prototype.slice.call(errorTr === null || errorTr === void 0 ? void 0 : errorTr.children);
|
|
108
|
+
errorTd = typeof index === 'number' ? errorTds[index] : null;
|
|
109
|
+
(_g = (_f = errorTd === null || errorTd === void 0 ? void 0 : errorTd.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, ERROR_TD_CLASSNAME);
|
|
110
|
+
(_h = errorTd === null || errorTd === void 0 ? void 0 : errorTd.scrollIntoView) === null || _h === void 0 ? void 0 : _h.call(errorTd);
|
|
111
|
+
return [4 /*yield*/, Promise.reject({
|
|
112
|
+
errorFields: [
|
|
113
|
+
{
|
|
114
|
+
errors: (tableName || '') + " \u7B2C" + (i + 1) + "\u884C" + title + " " + (((_j = validate) === null || _j === void 0 ? void 0 : _j.message) || '填写错误!'),
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
})];
|
|
118
|
+
case 8:
|
|
119
|
+
_p.sent();
|
|
120
|
+
_p.label = 9;
|
|
121
|
+
case 9: return [3 /*break*/, 12];
|
|
122
|
+
case 10:
|
|
123
|
+
if (!(value === '' || value == null)) return [3 /*break*/, 12];
|
|
124
|
+
errorTr = resultTr[i];
|
|
125
|
+
errorTds = Array.prototype.slice.call(errorTr === null || errorTr === void 0 ? void 0 : errorTr.children);
|
|
126
|
+
errorTd = typeof index === 'number' ? errorTds[index] : null;
|
|
127
|
+
(_l = (_k = errorTd === null || errorTd === void 0 ? void 0 : errorTd.classList) === null || _k === void 0 ? void 0 : _k.add) === null || _l === void 0 ? void 0 : _l.call(_k, ERROR_TD_CLASSNAME);
|
|
128
|
+
(_m = errorTd === null || errorTd === void 0 ? void 0 : errorTd.scrollIntoView) === null || _m === void 0 ? void 0 : _m.call(errorTd);
|
|
129
|
+
return [4 /*yield*/, Promise.reject({
|
|
130
|
+
errorFields: [
|
|
131
|
+
{
|
|
132
|
+
errors: (tableName || '') + " \u7B2C" + (i + 1) + "\u884C" + title + "\u4E3A\u7A7A!",
|
|
133
|
+
rowIndex: i,
|
|
134
|
+
colIndex: index,
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
})];
|
|
138
|
+
case 11:
|
|
139
|
+
_p.sent();
|
|
140
|
+
_p.label = 12;
|
|
141
|
+
case 12:
|
|
142
|
+
j++;
|
|
143
|
+
return [3 /*break*/, 2];
|
|
144
|
+
case 13:
|
|
145
|
+
i++;
|
|
146
|
+
return [3 /*break*/, 1];
|
|
147
|
+
case 14: return [2 /*return*/];
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
});
|
|
151
|
+
}
|