@kep-platform/business-component 0.0.29 → 0.0.32
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/ConfigColumnsModal/index.d.ts +25 -0
- package/dist/ConfigColumnsModal/index.js +172 -0
- package/dist/ConfigTable/config.d.ts +45 -0
- package/dist/ConfigTable/config.js +64 -0
- package/dist/ConfigTable/index.d.ts +7 -0
- package/dist/ConfigTable/index.js +232 -0
- package/dist/ConfigTable/test.d.ts +2 -0
- package/dist/ConfigTable/test.js +10 -0
- package/dist/ConfigTable/utils.d.ts +4 -0
- package/dist/ConfigTable/utils.js +40 -0
- package/dist/table-config.d.ts +20 -0
- package/dist/table-config.js +22 -0
- package/package.json +79 -74
@@ -0,0 +1,25 @@
|
|
1
|
+
import React, { ReactNode } from 'react';
|
2
|
+
export interface ColumnType {
|
3
|
+
title: ReactNode;
|
4
|
+
dataIndex: string;
|
5
|
+
key: string;
|
6
|
+
align?: 'center' | 'left' | 'right';
|
7
|
+
width: number;
|
8
|
+
offset?: number;
|
9
|
+
hideInTable?: boolean;
|
10
|
+
sorter?: 'desc' | 'asc' | null;
|
11
|
+
type?: CellType;
|
12
|
+
render?: (text: any, record: any, index: number) => ReactNode;
|
13
|
+
editable?: boolean;
|
14
|
+
sticky?: 'left' | 'right';
|
15
|
+
filterValue?: string | null;
|
16
|
+
}
|
17
|
+
type CellType = 'string' | 'number' | 'date' | 'image' | 'icon';
|
18
|
+
export declare function ConfigColumnsModal(props: {
|
19
|
+
columns: ColumnType[];
|
20
|
+
open: boolean;
|
21
|
+
onClose: () => void;
|
22
|
+
onConfirm: (columns: ColumnType[]) => void;
|
23
|
+
title?: string;
|
24
|
+
}): React.JSX.Element;
|
25
|
+
export {};
|
@@ -0,0 +1,172 @@
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
3
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
4
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
8
|
+
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; }
|
9
|
+
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; } }
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
+
//用来配置表格列的表格字段,支持拖动排序功能,勾选和取消
|
12
|
+
|
13
|
+
import { CloseCircleOutlined } from '@ant-design/icons';
|
14
|
+
import { Card, Col, Modal, Row, Space, Tag } from 'antd';
|
15
|
+
import React, { useEffect, useRef, useState } from 'react';
|
16
|
+
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
17
|
+
import { HTML5Backend } from 'react-dnd-html5-backend';
|
18
|
+
function DragListItem(props) {
|
19
|
+
var item = props.item,
|
20
|
+
index = props.index,
|
21
|
+
handleDrag = props.handleDrag,
|
22
|
+
handleClose = props.handleClose;
|
23
|
+
var ref = useRef(null);
|
24
|
+
var _useDrop = useDrop({
|
25
|
+
accept: 'drag-item',
|
26
|
+
hover: function hover(item, monitor) {
|
27
|
+
if (!ref.current) return;
|
28
|
+
var dragIndex = item.index;
|
29
|
+
var hoverIndex = index;
|
30
|
+
// Do nothing if target and source are same
|
31
|
+
if (dragIndex === hoverIndex) return;
|
32
|
+
var hoverRect = ref.current.getBoundingClientRect();
|
33
|
+
// Get vertical middle
|
34
|
+
var hoverMiddleY = (hoverRect.bottom - hoverRect.top) / 2;
|
35
|
+
// Determine mouse position
|
36
|
+
var clientOffset = monitor.getClientOffset();
|
37
|
+
if (!clientOffset) return;
|
38
|
+
// Get pixels to the top
|
39
|
+
var hoverClientY = clientOffset.y - hoverRect.top;
|
40
|
+
|
41
|
+
// Only move when the mouse has crossed half of the items height
|
42
|
+
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
43
|
+
return;
|
44
|
+
}
|
45
|
+
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
46
|
+
return;
|
47
|
+
}
|
48
|
+
handleDrag(dragIndex, hoverIndex);
|
49
|
+
item.index = hoverIndex;
|
50
|
+
}
|
51
|
+
}),
|
52
|
+
_useDrop2 = _slicedToArray(_useDrop, 2),
|
53
|
+
drop = _useDrop2[1];
|
54
|
+
var _useDrag = useDrag({
|
55
|
+
type: 'drag-item',
|
56
|
+
item: {
|
57
|
+
item: item,
|
58
|
+
index: index
|
59
|
+
}
|
60
|
+
}, [item, index]),
|
61
|
+
_useDrag2 = _slicedToArray(_useDrag, 2),
|
62
|
+
drag = _useDrag2[1];
|
63
|
+
useEffect(function () {
|
64
|
+
drop(drag(ref));
|
65
|
+
}, []);
|
66
|
+
return /*#__PURE__*/React.createElement("li", {
|
67
|
+
ref: ref
|
68
|
+
}, /*#__PURE__*/React.createElement(Card, {
|
69
|
+
style: {
|
70
|
+
position: 'relative'
|
71
|
+
}
|
72
|
+
}, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
|
73
|
+
onClick: function onClick() {
|
74
|
+
handleClose(item.key);
|
75
|
+
},
|
76
|
+
style: {
|
77
|
+
position: 'absolute',
|
78
|
+
right: '7px',
|
79
|
+
top: '7px',
|
80
|
+
color: 'red'
|
81
|
+
}
|
82
|
+
}), /*#__PURE__*/React.createElement("strong", null, item.title)));
|
83
|
+
}
|
84
|
+
export function ConfigColumnsModal(props) {
|
85
|
+
var columns = props.columns,
|
86
|
+
open = props.open,
|
87
|
+
onClose = props.onClose,
|
88
|
+
onConfirm = props.onConfirm,
|
89
|
+
title = props.title;
|
90
|
+
var _useState = useState(columns.filter(function (item) {
|
91
|
+
return !item.hideInTable;
|
92
|
+
})),
|
93
|
+
_useState2 = _slicedToArray(_useState, 2),
|
94
|
+
columnsUpdate = _useState2[0],
|
95
|
+
setColumnsUpdate = _useState2[1];
|
96
|
+
var _useState3 = useState(columns.filter(function (column) {
|
97
|
+
return !columnsUpdate.includes(column);
|
98
|
+
})),
|
99
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
100
|
+
columnsHidden = _useState4[0],
|
101
|
+
setColumnsHidden = _useState4[1];
|
102
|
+
var handleDrag = function handleDrag(dragIndex, hoverIndex) {
|
103
|
+
setColumnsUpdate(function (prev) {
|
104
|
+
var copy = _toConsumableArray(prev);
|
105
|
+
var card = copy[dragIndex];
|
106
|
+
// remove origin
|
107
|
+
copy.splice(dragIndex, 1);
|
108
|
+
// add to target
|
109
|
+
copy.splice(hoverIndex, 0, card);
|
110
|
+
return copy;
|
111
|
+
});
|
112
|
+
};
|
113
|
+
var handleClose = function handleClose(key) {
|
114
|
+
setColumnsUpdate(columnsUpdate.filter(function (column) {
|
115
|
+
return column.key !== key;
|
116
|
+
}));
|
117
|
+
var deleteColumn = columns.find(function (column) {
|
118
|
+
return column.key === key;
|
119
|
+
});
|
120
|
+
setColumnsHidden(columnsHidden.concat(deleteColumn));
|
121
|
+
};
|
122
|
+
return /*#__PURE__*/React.createElement(Modal, {
|
123
|
+
title: title || '配置表格列',
|
124
|
+
open: open,
|
125
|
+
width: 600,
|
126
|
+
onCancel: onClose,
|
127
|
+
onOk: function onOk() {
|
128
|
+
columnsUpdate.forEach(function (column) {
|
129
|
+
column.hideInTable = false;
|
130
|
+
});
|
131
|
+
columnsHidden.forEach(function (column) {
|
132
|
+
column.hideInTable = true;
|
133
|
+
});
|
134
|
+
onConfirm(columnsUpdate.concat.apply(columnsUpdate, _toConsumableArray(columnsHidden)));
|
135
|
+
},
|
136
|
+
okText: "\u786E\u8BA4",
|
137
|
+
cancelText: "\u53D6\u6D88"
|
138
|
+
}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
|
139
|
+
span: 3
|
140
|
+
}, /*#__PURE__*/React.createElement("strong", null, "\u9690\u85CF\u7684\u5217")), /*#__PURE__*/React.createElement(Col, {
|
141
|
+
span: 21
|
142
|
+
}, /*#__PURE__*/React.createElement(Space, null, columnsHidden.map(function (column) {
|
143
|
+
return /*#__PURE__*/React.createElement(Tag, {
|
144
|
+
style: {
|
145
|
+
cursor: 'pointer'
|
146
|
+
},
|
147
|
+
key: column.key,
|
148
|
+
onClick: function onClick() {
|
149
|
+
setColumnsUpdate(columnsUpdate.concat(column));
|
150
|
+
setColumnsHidden(columnsHidden.filter(function (c) {
|
151
|
+
return c.key !== column.key;
|
152
|
+
}));
|
153
|
+
}
|
154
|
+
}, column.title);
|
155
|
+
})))), /*#__PURE__*/React.createElement(DndProvider, {
|
156
|
+
backend: HTML5Backend
|
157
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
158
|
+
style: {
|
159
|
+
listStyle: 'none',
|
160
|
+
padding: '0',
|
161
|
+
paddingTop: '12px'
|
162
|
+
}
|
163
|
+
}, columnsUpdate.map(function (column, index) {
|
164
|
+
return /*#__PURE__*/React.createElement(DragListItem, {
|
165
|
+
item: column,
|
166
|
+
key: column.key,
|
167
|
+
index: index,
|
168
|
+
handleDrag: handleDrag,
|
169
|
+
handleClose: handleClose
|
170
|
+
});
|
171
|
+
}))));
|
172
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
declare const _default: {
|
2
|
+
columns: ({
|
3
|
+
key: string;
|
4
|
+
title: string;
|
5
|
+
align: string;
|
6
|
+
type: string;
|
7
|
+
allowGroup: boolean;
|
8
|
+
dataIndex: string;
|
9
|
+
render: {
|
10
|
+
__isFunction__: boolean;
|
11
|
+
source: string;
|
12
|
+
};
|
13
|
+
} | {
|
14
|
+
key: string;
|
15
|
+
title: string;
|
16
|
+
dataIndex: string;
|
17
|
+
align: string;
|
18
|
+
type: string;
|
19
|
+
allowGroup?: undefined;
|
20
|
+
render?: undefined;
|
21
|
+
})[];
|
22
|
+
title: string;
|
23
|
+
actions: string[];
|
24
|
+
request: {
|
25
|
+
url: string;
|
26
|
+
method: string;
|
27
|
+
params: {
|
28
|
+
username: {
|
29
|
+
type: string;
|
30
|
+
required: boolean;
|
31
|
+
max: number;
|
32
|
+
};
|
33
|
+
age: {
|
34
|
+
type: string;
|
35
|
+
min: number;
|
36
|
+
max: number;
|
37
|
+
};
|
38
|
+
email: {
|
39
|
+
type: string;
|
40
|
+
required: boolean;
|
41
|
+
};
|
42
|
+
};
|
43
|
+
};
|
44
|
+
};
|
45
|
+
export default _default;
|
@@ -0,0 +1,64 @@
|
|
1
|
+
export default {
|
2
|
+
//列定义
|
3
|
+
columns: [{
|
4
|
+
key: 'name',
|
5
|
+
title: '名称',
|
6
|
+
align: 'center',
|
7
|
+
type: 'string',
|
8
|
+
allowGroup: true,
|
9
|
+
dataIndex: 'name',
|
10
|
+
render: {
|
11
|
+
__isFunction__: true,
|
12
|
+
source: 'function render(value) {\n return value + 1;\n }'
|
13
|
+
}
|
14
|
+
}, {
|
15
|
+
key: 'number',
|
16
|
+
title: '编号',
|
17
|
+
dataIndex: 'number',
|
18
|
+
align: 'center',
|
19
|
+
type: 'string'
|
20
|
+
}, {
|
21
|
+
key: 'version',
|
22
|
+
title: '版本',
|
23
|
+
dataIndex: 'version',
|
24
|
+
align: 'center',
|
25
|
+
type: 'string'
|
26
|
+
}, {
|
27
|
+
key: 'checkOutStatus',
|
28
|
+
title: '检入检出状态',
|
29
|
+
dataIndex: 'checkOutStatus',
|
30
|
+
align: 'center',
|
31
|
+
type: 'string'
|
32
|
+
}, {
|
33
|
+
key: 'owner',
|
34
|
+
title: '创建者',
|
35
|
+
dataIndex: 'owner',
|
36
|
+
align: 'center',
|
37
|
+
type: 'string'
|
38
|
+
}],
|
39
|
+
title: '零件',
|
40
|
+
//表格标题
|
41
|
+
actions: ['配置表格列', '分组'],
|
42
|
+
//可能的操作项,这个是预先开发好的
|
43
|
+
//接口描述
|
44
|
+
request: {
|
45
|
+
url: 'http://ao.renrunqi.com/service-icapp/search/advance',
|
46
|
+
method: 'post',
|
47
|
+
params: {
|
48
|
+
username: {
|
49
|
+
type: 'string',
|
50
|
+
required: true,
|
51
|
+
max: 20
|
52
|
+
},
|
53
|
+
age: {
|
54
|
+
type: 'number',
|
55
|
+
min: 18,
|
56
|
+
max: 100
|
57
|
+
},
|
58
|
+
email: {
|
59
|
+
type: 'email',
|
60
|
+
required: true
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
};
|
@@ -0,0 +1,232 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
+
var _excluded = ["tableId"];
|
3
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
4
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
5
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
6
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
7
|
+
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; }
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
9
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
10
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
11
|
+
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); }
|
12
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
13
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
14
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
15
|
+
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; }
|
16
|
+
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; } }
|
17
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
18
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
19
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
20
|
+
import { Button, Space, Spin, Table } from '@kep-platform/basic-component';
|
21
|
+
import { Card, Select, Tag } from 'antd';
|
22
|
+
import axios from 'axios';
|
23
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
24
|
+
import { ConfigColumnsModal } from "../ConfigColumnsModal";
|
25
|
+
import configJson from "./config";
|
26
|
+
import { allGroup, deserialize, getGroupFromList, serialize } from "./utils";
|
27
|
+
var mockDataSource = [{
|
28
|
+
name: '姜鑫',
|
29
|
+
number: 'jx',
|
30
|
+
version: '0.0.1',
|
31
|
+
checkOutStatus: 'c/i'
|
32
|
+
}, {
|
33
|
+
name: 'jss',
|
34
|
+
number: 'jss',
|
35
|
+
version: '0.0.2',
|
36
|
+
checkOutStatus: 'c/i'
|
37
|
+
}];
|
38
|
+
export default function ConfigTable(props) {
|
39
|
+
var tableId = props.tableId,
|
40
|
+
context = _objectWithoutProperties(props, _excluded);
|
41
|
+
var _useState = useState(null),
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
43
|
+
config = _useState2[0],
|
44
|
+
setConfig = _useState2[1];
|
45
|
+
var _useState3 = useState(false),
|
46
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
47
|
+
fetchConfigLoading = _useState4[0],
|
48
|
+
setFetchConfigLoading = _useState4[1];
|
49
|
+
var _useState5 = useState(false),
|
50
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
51
|
+
fetchDataSourceLoading = _useState6[0],
|
52
|
+
setFetchDataSourceLoading = _useState6[1];
|
53
|
+
var _useState7 = useState([]),
|
54
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
55
|
+
dataSource = _useState8[0],
|
56
|
+
setDataSource = _useState8[1];
|
57
|
+
var _useState9 = useState(false),
|
58
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
59
|
+
configColumnsModalOpen = _useState10[0],
|
60
|
+
setConfigColumnsModalOpen = _useState10[1];
|
61
|
+
var _useState11 = useState(allGroup),
|
62
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
63
|
+
activeGroupItem = _useState12[0],
|
64
|
+
setActiveGroupItem = _useState12[1];
|
65
|
+
var _useState13 = useState(null),
|
66
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
67
|
+
groupBy = _useState14[0],
|
68
|
+
setGroupBy = _useState14[1];
|
69
|
+
var _useState15 = useState({
|
70
|
+
current: 1,
|
71
|
+
pageSize: 10
|
72
|
+
}),
|
73
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
74
|
+
pagination = _useState16[0],
|
75
|
+
setPagination = _useState16[1];
|
76
|
+
var groupMap = useMemo(function () {
|
77
|
+
if (!groupBy) return null;
|
78
|
+
var map = getGroupFromList(dataSource, groupBy.value);
|
79
|
+
return map;
|
80
|
+
}, [dataSource, groupBy]);
|
81
|
+
var formatDataSource = useMemo(function () {
|
82
|
+
if (groupMap && activeGroupItem) {
|
83
|
+
return groupMap[activeGroupItem] || [];
|
84
|
+
} else {
|
85
|
+
return dataSource;
|
86
|
+
}
|
87
|
+
}, [groupMap, dataSource, activeGroupItem]);
|
88
|
+
function fetchConfigJson(tableId) {
|
89
|
+
console.log(tableId);
|
90
|
+
setFetchConfigLoading(true);
|
91
|
+
return new Promise(function () {
|
92
|
+
setTimeout(function () {
|
93
|
+
setFetchConfigLoading(false);
|
94
|
+
setConfig(deserialize(serialize(configJson)));
|
95
|
+
}, 1000);
|
96
|
+
});
|
97
|
+
}
|
98
|
+
function fetchDataSource(config, pagination) {
|
99
|
+
var _config$request = config.request,
|
100
|
+
url = _config$request.url,
|
101
|
+
method = _config$request.method,
|
102
|
+
data = _config$request.data,
|
103
|
+
params = _config$request.params;
|
104
|
+
console.log(pagination);
|
105
|
+
setFetchDataSourceLoading(true);
|
106
|
+
axios(url, {
|
107
|
+
method: method,
|
108
|
+
params: params ? _objectSpread(_objectSpread({}, params), context) : undefined,
|
109
|
+
data: data ? _objectSpread(_objectSpread({}, data), context) : undefined
|
110
|
+
}).then(function (resp) {
|
111
|
+
setFetchDataSourceLoading(false);
|
112
|
+
console.log(resp);
|
113
|
+
setDataSource(mockDataSource);
|
114
|
+
}, function (error) {
|
115
|
+
console.log(error.message);
|
116
|
+
setFetchDataSourceLoading(false);
|
117
|
+
setDataSource(mockDataSource);
|
118
|
+
});
|
119
|
+
}
|
120
|
+
useEffect(function () {
|
121
|
+
fetchConfigJson(tableId);
|
122
|
+
}, [tableId]);
|
123
|
+
useEffect(function () {
|
124
|
+
if (config) {
|
125
|
+
fetchDataSource(config, pagination);
|
126
|
+
}
|
127
|
+
}, [config, pagination]);
|
128
|
+
useEffect(function () {
|
129
|
+
setActiveGroupItem(allGroup);
|
130
|
+
}, [groupMap]);
|
131
|
+
var groupOptions = useMemo(function () {
|
132
|
+
if (config) {
|
133
|
+
return config.columns.filter(function (column) {
|
134
|
+
return column.allowGroup;
|
135
|
+
}).map(function (column) {
|
136
|
+
return {
|
137
|
+
label: column.title,
|
138
|
+
value: column.key
|
139
|
+
};
|
140
|
+
});
|
141
|
+
} else {
|
142
|
+
return [];
|
143
|
+
}
|
144
|
+
}, [config]);
|
145
|
+
var actions = useMemo(function () {
|
146
|
+
if (config !== null && config !== void 0 && config.actions) {
|
147
|
+
return config.actions.map(function (action) {
|
148
|
+
switch (action) {
|
149
|
+
case '配置表格列':
|
150
|
+
return /*#__PURE__*/React.createElement(Button, {
|
151
|
+
onClick: function onClick() {
|
152
|
+
setConfigColumnsModalOpen(true);
|
153
|
+
}
|
154
|
+
}, "\u914D\u7F6E\u8868\u683C\u5217");
|
155
|
+
case '分组':
|
156
|
+
return /*#__PURE__*/React.createElement(Select, {
|
157
|
+
value: groupBy === null || groupBy === void 0 ? void 0 : groupBy.value,
|
158
|
+
options: groupOptions,
|
159
|
+
placeholder: "\u9009\u62E9\u5206\u7EC4\u89C4\u5219",
|
160
|
+
onSelect: function onSelect(value, option) {
|
161
|
+
setGroupBy(option);
|
162
|
+
}
|
163
|
+
});
|
164
|
+
default:
|
165
|
+
return false;
|
166
|
+
}
|
167
|
+
});
|
168
|
+
}
|
169
|
+
}, [config, groupBy]);
|
170
|
+
var title = useMemo(function () {
|
171
|
+
if (config && groupBy && groupMap) {
|
172
|
+
var _groupOptions$find;
|
173
|
+
return /*#__PURE__*/React.createElement(Space, null, groupBy.value && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u6839\u636E"), /*#__PURE__*/React.createElement(Tag, null, (_groupOptions$find = groupOptions.find(function (option) {
|
174
|
+
return option.value === groupBy.value;
|
175
|
+
})) === null || _groupOptions$find === void 0 ? void 0 : _groupOptions$find.label), /*#__PURE__*/React.createElement("span", null, "\u5206\u7EC4:")), /*#__PURE__*/React.createElement(Tag, {
|
176
|
+
color: activeGroupItem === allGroup ? 'blue' : 'default',
|
177
|
+
onClick: function onClick() {
|
178
|
+
setActiveGroupItem(allGroup);
|
179
|
+
},
|
180
|
+
hidden: !groupBy
|
181
|
+
}, "\u5168\u90E8"), Object.keys(groupMap).map(function (key) {
|
182
|
+
return /*#__PURE__*/React.createElement(Tag, {
|
183
|
+
onClick: function onClick() {
|
184
|
+
setActiveGroupItem(key);
|
185
|
+
},
|
186
|
+
key: key,
|
187
|
+
color: activeGroupItem === key ? 'blue' : 'default'
|
188
|
+
}, key);
|
189
|
+
}));
|
190
|
+
} else {
|
191
|
+
return '';
|
192
|
+
}
|
193
|
+
}, [groupBy, config, activeGroupItem]);
|
194
|
+
return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Spin, {
|
195
|
+
spinning: fetchConfigLoading || fetchDataSourceLoading
|
196
|
+
}, /*#__PURE__*/React.createElement("h5", null, title), config ? /*#__PURE__*/React.createElement(Table, {
|
197
|
+
dataSource: formatDataSource,
|
198
|
+
actions: actions,
|
199
|
+
columns: [{
|
200
|
+
key: 'order',
|
201
|
+
dataIndex: 'order',
|
202
|
+
title: '序号',
|
203
|
+
width: 70,
|
204
|
+
render: function render(_, __, index) {
|
205
|
+
return (pagination.current - 1) * pagination.pageSize + index + 1;
|
206
|
+
},
|
207
|
+
align: 'center'
|
208
|
+
}].concat(_toConsumableArray(config.columns)),
|
209
|
+
rowKey: 'oid',
|
210
|
+
pagination: pagination,
|
211
|
+
onChange: function onChange(_p) {
|
212
|
+
setPagination(_p);
|
213
|
+
},
|
214
|
+
empty: /*#__PURE__*/React.createElement("div", {
|
215
|
+
style: {
|
216
|
+
textAlign: 'center',
|
217
|
+
padding: '24px',
|
218
|
+
color: '#777'
|
219
|
+
}
|
220
|
+
}, "\u6682\u65E0\u6570\u636E")
|
221
|
+
}) : /*#__PURE__*/React.createElement("div", null, "\u914D\u7F6E\u6587\u4EF6\u52A0\u8F7D\u4E2D..."), configColumnsModalOpen && config && /*#__PURE__*/React.createElement(ConfigColumnsModal, {
|
222
|
+
columns: config.columns,
|
223
|
+
open: configColumnsModalOpen,
|
224
|
+
onClose: function onClose() {
|
225
|
+
setConfigColumnsModalOpen(false);
|
226
|
+
},
|
227
|
+
onConfirm: function onConfirm(columns) {
|
228
|
+
config.columns = columns;
|
229
|
+
setConfigColumnsModalOpen(false);
|
230
|
+
}
|
231
|
+
})));
|
232
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { GlobalStyles } from '@kep-platform/basic-component';
|
2
|
+
import React from 'react';
|
3
|
+
import ConfigTable from '.';
|
4
|
+
export default function Test() {
|
5
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
|
6
|
+
$css: []
|
7
|
+
}), /*#__PURE__*/React.createElement(ConfigTable, {
|
8
|
+
tableId: "name"
|
9
|
+
}));
|
10
|
+
}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export declare function serialize(obj: Record<string, any>): string;
|
2
|
+
export declare function deserialize(serializedStr: string): any;
|
3
|
+
export declare const allGroup: unique symbol;
|
4
|
+
export declare function getGroupFromList(arr: Record<string | symbol, any>[], propertyName: string): Record<string | symbol, Record<string, any>[]>;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
3
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
4
|
+
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); }
|
5
|
+
// 自定义序列化函数
|
6
|
+
export function serialize(obj) {
|
7
|
+
return JSON.stringify(obj, function (key, value) {
|
8
|
+
if (typeof value === 'function') {
|
9
|
+
return {
|
10
|
+
__isFunction__: true,
|
11
|
+
source: value.toString()
|
12
|
+
};
|
13
|
+
}
|
14
|
+
return value;
|
15
|
+
});
|
16
|
+
}
|
17
|
+
|
18
|
+
// 自定义反序列化函数
|
19
|
+
export function deserialize(serializedStr) {
|
20
|
+
return JSON.parse(serializedStr, function (key, value) {
|
21
|
+
if (value && value.__isFunction__) {
|
22
|
+
return new Function('return ' + value.source)();
|
23
|
+
}
|
24
|
+
return value;
|
25
|
+
});
|
26
|
+
}
|
27
|
+
export var allGroup = Symbol('全部');
|
28
|
+
export function getGroupFromList(arr, propertyName) {
|
29
|
+
var grouped = arr.reduce(function (acc, obj) {
|
30
|
+
var key = obj[propertyName];
|
31
|
+
if (key) {
|
32
|
+
if (!acc[key]) {
|
33
|
+
acc[key] = [];
|
34
|
+
}
|
35
|
+
acc[key].push(obj);
|
36
|
+
} else {}
|
37
|
+
return acc;
|
38
|
+
}, _defineProperty({}, allGroup, arr));
|
39
|
+
return grouped;
|
40
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
type ColumnType = {
|
3
|
+
key: string;
|
4
|
+
dataIndex: string;
|
5
|
+
title: string;
|
6
|
+
align: 'left' | 'right' | 'center';
|
7
|
+
type: 'icon' | 'string' | 'date' | 'number';
|
8
|
+
render?: (value: any, record: any, index: number) => ReactNode;
|
9
|
+
fixed?: 'left' | 'right';
|
10
|
+
filter?: boolean;
|
11
|
+
sorter?: boolean;
|
12
|
+
allowGroup?: boolean;
|
13
|
+
};
|
14
|
+
type Action = '配置表格列';
|
15
|
+
type TableInfoType = {
|
16
|
+
columns: ColumnType[];
|
17
|
+
actions: Action[];
|
18
|
+
};
|
19
|
+
export declare function getTableInfoByTableId(id: string): TableInfoType;
|
20
|
+
export {};
|
@@ -0,0 +1,22 @@
|
|
1
|
+
var tableId = 'table-1';
|
2
|
+
export function getTableInfoByTableId(id) {
|
3
|
+
console.log(id);
|
4
|
+
var tableInfo = {
|
5
|
+
columns: [{
|
6
|
+
key: 'name',
|
7
|
+
title: 'name',
|
8
|
+
align: 'center',
|
9
|
+
type: 'string',
|
10
|
+
dataIndex: 'name'
|
11
|
+
}, {
|
12
|
+
key: 'number',
|
13
|
+
title: 'number',
|
14
|
+
dataIndex: 'number',
|
15
|
+
align: 'center',
|
16
|
+
type: 'string'
|
17
|
+
}],
|
18
|
+
actions: ['配置表格列']
|
19
|
+
};
|
20
|
+
return tableInfo;
|
21
|
+
}
|
22
|
+
console.log(JSON.stringify(getTableInfoByTableId(tableId)));
|
package/package.json
CHANGED
@@ -1,77 +1,82 @@
|
|
1
1
|
{
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
"
|
9
|
-
|
10
|
-
"build": "father build",
|
11
|
-
"build:watch": "father dev",
|
12
|
-
"docs:build": "dumi build",
|
13
|
-
"docs:preview": "dumi preview",
|
14
|
-
"prepare": "dumi setup",
|
15
|
-
"doctor": "father doctor",
|
16
|
-
"lint": "npm run lint:es && npm run lint:css",
|
17
|
-
"lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
|
18
|
-
"lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
|
19
|
-
"prepublishOnly": "father doctor && npm run build"
|
20
|
-
},
|
21
|
-
"authors": [],
|
22
|
-
"license": "MIT",
|
23
|
-
"files": [
|
24
|
-
"dist"
|
25
|
-
],
|
26
|
-
"commitlint": {
|
27
|
-
"extends": [
|
28
|
-
"@commitlint/config-conventional"
|
29
|
-
]
|
30
|
-
},
|
31
|
-
"lint-staged": {
|
32
|
-
"*.{md,json}": [
|
33
|
-
"prettier --write --no-error-on-unmatched-pattern"
|
2
|
+
"name": "@kep-platform/business-component",
|
3
|
+
"version": "0.0.32",
|
4
|
+
"description": "A react library developed with dumi",
|
5
|
+
"license": "MIT",
|
6
|
+
"module": "dist/index.js",
|
7
|
+
"types": "dist/index.d.ts",
|
8
|
+
"files": [
|
9
|
+
"dist"
|
34
10
|
],
|
35
|
-
"
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
"
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
"
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
11
|
+
"scripts": {
|
12
|
+
"build": "father build",
|
13
|
+
"build:watch": "father dev",
|
14
|
+
"dev": "dumi dev",
|
15
|
+
"docs:build": "dumi build",
|
16
|
+
"docs:preview": "dumi preview",
|
17
|
+
"doctor": "father doctor",
|
18
|
+
"lint": "npm run lint:es && npm run lint:css",
|
19
|
+
"lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
|
20
|
+
"lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
|
21
|
+
"prepare": "dumi setup",
|
22
|
+
"prepublishOnly": "npm run build",
|
23
|
+
"start": "npm run dev"
|
24
|
+
},
|
25
|
+
"commitlint": {
|
26
|
+
"extends": [
|
27
|
+
"@commitlint/config-conventional"
|
28
|
+
]
|
29
|
+
},
|
30
|
+
"lint-staged": {
|
31
|
+
"*.{md,json}": [
|
32
|
+
"prettier --write --no-error-on-unmatched-pattern"
|
33
|
+
],
|
34
|
+
"*.{css,less}": [
|
35
|
+
"stylelint --fix",
|
36
|
+
"prettier --write"
|
37
|
+
],
|
38
|
+
"*.{js,jsx}": [
|
39
|
+
"eslint --fix",
|
40
|
+
"prettier --write"
|
41
|
+
],
|
42
|
+
"*.{ts,tsx}": [
|
43
|
+
"eslint --fix",
|
44
|
+
"prettier --parser=typescript --write"
|
45
|
+
]
|
46
|
+
},
|
47
|
+
"dependencies": {
|
48
|
+
"@kep-platform/basic-component": "^0.0.32"
|
49
|
+
},
|
50
|
+
"devDependencies": {
|
51
|
+
"@commitlint/cli": "^17.1.2",
|
52
|
+
"@commitlint/config-conventional": "^17.1.0",
|
53
|
+
"@types/react": "^18.0.0",
|
54
|
+
"@types/react-dom": "^18.0.0",
|
55
|
+
"@umijs/lint": "^4.0.0",
|
56
|
+
"dumi": "^2.3.0",
|
57
|
+
"eslint": "^8.23.0",
|
58
|
+
"father": "^4.1.0",
|
59
|
+
"husky": "^8.0.1",
|
60
|
+
"lint-staged": "^13.0.3",
|
61
|
+
"prettier": "^2.7.1",
|
62
|
+
"prettier-plugin-organize-imports": "^3.0.0",
|
63
|
+
"prettier-plugin-packagejson": "^2.2.18",
|
64
|
+
"react": "^18.0.0",
|
65
|
+
"react-dom": "^18.0.0",
|
66
|
+
"stylelint": "^14.9.1"
|
67
|
+
},
|
68
|
+
"peerDependencies": {
|
69
|
+
"@ant-design/icons": ">=5.0.0",
|
70
|
+
"antd": ">=5.0.0",
|
71
|
+
"axios": ">=1.0.0",
|
72
|
+
"react": ">=16.9.0",
|
73
|
+
"react-dnd": ">=16.0.1",
|
74
|
+
"react-dnd-html5-backend": ">=16.0.1",
|
75
|
+
"react-dom": ">=16.9.0"
|
76
|
+
},
|
77
|
+
"publishConfig": {
|
78
|
+
"access": "public"
|
79
|
+
},
|
80
|
+
"authors": [],
|
81
|
+
"gitHead": "581914abdd5785a77fa0400eb7cce9f25e07eabf"
|
77
82
|
}
|