@bit-sun/business-component 2.2.33 → 2.2.35

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.
Files changed (5) hide show
  1. package/dist/index.esm.js +9 -6
  2. package/dist/index.js +9 -6
  3. package/package.json +77 -77
  4. package/src/components/Business/BsLayouts/index.tsx +5 -5
  5. package/src/components/Business/moreTreeTable/index.tsx +365 -363
package/dist/index.esm.js CHANGED
@@ -21613,12 +21613,12 @@ var BasicLayout = /*#__PURE__*/function (_React$PureComponent) {
21613
21613
  // }
21614
21614
  // });
21615
21615
  (_window$$wujie = window.$wujie) === null || _window$$wujie === void 0 ? void 0 : _window$$wujie.bus.$on("main-route-change", function (appname, info) {
21616
- if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
21617
- localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
21618
- } else {
21619
- localStorage.setItem('isTabChange', true);
21620
- }
21621
21616
  if (appname === itemPath) {
21617
+ if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
21618
+ localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
21619
+ } else {
21620
+ localStorage.setItem('isTabChange', true);
21621
+ }
21622
21622
  istParent = 1;
21623
21623
  if (info.type === 'main') {
21624
21624
  var newPath = encodeUrlQuery(info.path);
@@ -22600,9 +22600,12 @@ var index$7 = /*#__PURE__*/forwardRef(function (props, ref) {
22600
22600
  }, /*#__PURE__*/React.createElement("tbody", null, config.colLastData.map(function (item, index) {
22601
22601
  var fixedTop = item.fixed ? "".concat(index * 40 + config.colHeaderToTop, "px") : 0;
22602
22602
  return /*#__PURE__*/React.createElement("tr", null, colTableData.map(function (record, index) {
22603
+ var _record$_rowConfig;
22604
+ var tdHidden = (record === null || record === void 0 ? void 0 : (_record$_rowConfig = record['_rowConfig']) === null || _record$_rowConfig === void 0 ? void 0 : _record$_rowConfig.hidden) ? 'none' : 'table-cell';
22603
22605
  return /*#__PURE__*/React.createElement("td", {
22604
22606
  style: {
22605
- background: index % 2 === 1 || item.fixed ? '#f7f8fb' : '#fff',
22607
+ display: tdHidden,
22608
+ background: index % 2 === 1 || item.fixed ? '#FAFAFA' : '#fff',
22606
22609
  minWidth: '100px',
22607
22610
  width: "".concat(itemWidth, "px"),
22608
22611
  height: '40px',
package/dist/index.js CHANGED
@@ -21631,12 +21631,12 @@ var BasicLayout = /*#__PURE__*/function (_React$PureComponent) {
21631
21631
  // }
21632
21632
  // });
21633
21633
  (_window$$wujie = window.$wujie) === null || _window$$wujie === void 0 ? void 0 : _window$$wujie.bus.$on("main-route-change", function (appname, info) {
21634
- if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
21635
- localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
21636
- } else {
21637
- localStorage.setItem('isTabChange', true);
21638
- }
21639
21634
  if (appname === itemPath) {
21635
+ if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
21636
+ localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
21637
+ } else {
21638
+ localStorage.setItem('isTabChange', true);
21639
+ }
21640
21640
  istParent = 1;
21641
21641
  if (info.type === 'main') {
21642
21642
  var newPath = encodeUrlQuery(info.path);
@@ -22618,9 +22618,12 @@ var index$7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
22618
22618
  }, /*#__PURE__*/React__default['default'].createElement("tbody", null, config.colLastData.map(function (item, index) {
22619
22619
  var fixedTop = item.fixed ? "".concat(index * 40 + config.colHeaderToTop, "px") : 0;
22620
22620
  return /*#__PURE__*/React__default['default'].createElement("tr", null, colTableData.map(function (record, index) {
22621
+ var _record$_rowConfig;
22622
+ var tdHidden = (record === null || record === void 0 ? void 0 : (_record$_rowConfig = record['_rowConfig']) === null || _record$_rowConfig === void 0 ? void 0 : _record$_rowConfig.hidden) ? 'none' : 'table-cell';
22621
22623
  return /*#__PURE__*/React__default['default'].createElement("td", {
22622
22624
  style: {
22623
- background: index % 2 === 1 || item.fixed ? '#f7f8fb' : '#fff',
22625
+ display: tdHidden,
22626
+ background: index % 2 === 1 || item.fixed ? '#FAFAFA' : '#fff',
22624
22627
  minWidth: '100px',
22625
22628
  width: "".concat(itemWidth, "px"),
22626
22629
  height: '40px',
package/package.json CHANGED
@@ -1,77 +1,77 @@
1
- {
2
- "name": "@bit-sun/business-component",
3
- "version": "2.2.33",
4
- "scripts": {
5
- "start": "dumi dev",
6
- "docs:build": "dumi build",
7
- "docs:deploy": "gh-pages -d docs-dist",
8
- "build": "father-build",
9
- "deploy": "npm run docs:build && npm run docs:deploy",
10
- "release": "npm run build && npm publish",
11
- "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
12
- "test": "umi-test",
13
- "test:coverage": "umi-test --coverage"
14
- },
15
- "main": "dist/index.js",
16
- "module": "dist/index.esm.js",
17
- "typings": "dist/index.d.ts",
18
- "gitHooks": {
19
- "pre-commit": "lint-staged"
20
- },
21
- "lint-staged": {
22
- "*.{js,jsx,less,md,json}": [
23
- "prettier --write"
24
- ],
25
- "*.ts?(x)": [
26
- "prettier --parser=typescript --write"
27
- ]
28
- },
29
- "peerDependencies": {
30
- "antd": "^4.17.2",
31
- "bssula": "^2.0.0",
32
- "umi-plugin-bssula": "1.0.13",
33
- "umi": "^3.5.20",
34
- "@ant-design/pro-layout": "^6.5.0",
35
- "react-dnd": "^16.0.1",
36
- "react-dnd-html5-backend": "^16.0.1"
37
- },
38
- "dependencies": {
39
- "@ant-design/icons": "^4.7.0",
40
- "@monaco-editor/react": "^3.3.0",
41
- "serialize-javascript": "^6.0.0",
42
- "@types/react-resizable": "^1.7.4",
43
- "@umijs/plugin-antd": "latest",
44
- "ahooks": "^3.1.2",
45
- "array-move": "^4.0.0",
46
- "axios": "^0.24.0",
47
- "classnames": "^2.3.1",
48
- "lodash": "^4.17.21",
49
- "querystring": "^0.2.1",
50
- "react": "^16.12.0",
51
- "react-beautiful-dnd": "10.0.0",
52
- "react-resizable": "^3.0.4",
53
- "react-sortable-hoc": "^2.0.0",
54
- "warning": "^4.0.3",
55
- "ast-types": "^0.13.3"
56
- },
57
- "devDependencies": {
58
- "@ant-design/pro-layout": "^7.1.3",
59
- "@types/lodash": "^4.14.185",
60
- "@umijs/test": "^3.0.5",
61
- "acorn": "^7.2.0",
62
- "acorn-walk": "^7.1.1",
63
- "antd": "^4.17.2",
64
- "bssula": "^2.1.29",
65
- "dumi": "^1.0.14",
66
- "father-build": "^1.17.2",
67
- "gh-pages": "^3.0.0",
68
- "lint-staged": "^10.0.7",
69
- "prettier": "^2.2.1",
70
- "react-dnd": "^16.0.1",
71
- "react-dnd-html5-backend": "^16.0.1",
72
- "rollup-plugin-commonjs": "^10.1.0"
73
- },
74
- "publishConfig": {
75
- "access": "public"
76
- }
77
- }
1
+ {
2
+ "name": "@bit-sun/business-component",
3
+ "version": "2.2.35",
4
+ "scripts": {
5
+ "start": "dumi dev",
6
+ "docs:build": "dumi build",
7
+ "docs:deploy": "gh-pages -d docs-dist",
8
+ "build": "father-build",
9
+ "deploy": "npm run docs:build && npm run docs:deploy",
10
+ "release": "npm run build && npm publish",
11
+ "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
12
+ "test": "umi-test",
13
+ "test:coverage": "umi-test --coverage"
14
+ },
15
+ "main": "dist/index.js",
16
+ "module": "dist/index.esm.js",
17
+ "typings": "dist/index.d.ts",
18
+ "gitHooks": {
19
+ "pre-commit": "lint-staged"
20
+ },
21
+ "lint-staged": {
22
+ "*.{js,jsx,less,md,json}": [
23
+ "prettier --write"
24
+ ],
25
+ "*.ts?(x)": [
26
+ "prettier --parser=typescript --write"
27
+ ]
28
+ },
29
+ "peerDependencies": {
30
+ "antd": "^4.17.2",
31
+ "bssula": "^2.0.0",
32
+ "umi-plugin-bssula": "1.0.13",
33
+ "umi": "^3.5.20",
34
+ "@ant-design/pro-layout": "^6.5.0",
35
+ "react-dnd": "^16.0.1",
36
+ "react-dnd-html5-backend": "^16.0.1"
37
+ },
38
+ "dependencies": {
39
+ "@ant-design/icons": "^4.7.0",
40
+ "@monaco-editor/react": "^3.3.0",
41
+ "serialize-javascript": "^6.0.0",
42
+ "@types/react-resizable": "^1.7.4",
43
+ "@umijs/plugin-antd": "latest",
44
+ "ahooks": "^3.1.2",
45
+ "array-move": "^4.0.0",
46
+ "axios": "^0.24.0",
47
+ "classnames": "^2.3.1",
48
+ "lodash": "^4.17.21",
49
+ "querystring": "^0.2.1",
50
+ "react": "^16.12.0",
51
+ "react-beautiful-dnd": "10.0.0",
52
+ "react-resizable": "^3.0.4",
53
+ "react-sortable-hoc": "^2.0.0",
54
+ "warning": "^4.0.3",
55
+ "ast-types": "^0.13.3"
56
+ },
57
+ "devDependencies": {
58
+ "@ant-design/pro-layout": "^7.1.3",
59
+ "@types/lodash": "^4.14.185",
60
+ "@umijs/test": "^3.0.5",
61
+ "acorn": "^7.2.0",
62
+ "acorn-walk": "^7.1.1",
63
+ "antd": "^4.17.2",
64
+ "bssula": "^2.1.29",
65
+ "dumi": "^1.0.14",
66
+ "father-build": "^1.17.2",
67
+ "gh-pages": "^3.0.0",
68
+ "lint-staged": "^10.0.7",
69
+ "prettier": "^2.2.1",
70
+ "react-dnd": "^16.0.1",
71
+ "react-dnd-html5-backend": "^16.0.1",
72
+ "rollup-plugin-commonjs": "^10.1.0"
73
+ },
74
+ "publishConfig": {
75
+ "access": "public"
76
+ }
77
+ }
package/src/components/Business/BsLayouts/index.tsx CHANGED
@@ -360,12 +360,12 @@ class BasicLayout extends React.PureComponent {
360
360
  // });
361
361
 
362
362
  window.$wujie?.bus.$on("main-route-change", function (appname, info) {
363
- if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
364
- localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
365
- } else {
366
- localStorage.setItem('isTabChange', true);
367
- }
368
363
  if (appname === itemPath) {
364
+ if (localStorage.getItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK)) {
365
+ localStorage.removeItem(ENUM.BROWSER_CACHE.CHILD_APP_BACK);
366
+ } else {
367
+ localStorage.setItem('isTabChange', true);
368
+ }
369
369
  istParent = 1;
370
370
  if (info.type === 'main') {
371
371
  let newPath = encodeUrlQuery(info.path);
package/src/components/Business/moreTreeTable/index.tsx CHANGED
@@ -1,363 +1,365 @@
1
- // @ts-nocheck
2
- import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo, useRef } from 'react';
3
- import { getAllColumns, convertToRows, headersToRows } from './utils';
4
- import './index.less';
5
-
6
-
7
- export default forwardRef((props, ref) => {
8
- const [show, setShow] = useState(false);
9
- const [config, setConfig] = useState({
10
- tableType: 'col-header-table',
11
- colHeader: [],
12
- colLastData: [],
13
- rowHeader: [],
14
- rowLastData: [],
15
- colHeaderWidth: 400,
16
- colHeaderToTop: 0,
17
- });
18
- const [colTableData, setColTableData] = useState([]); //纵向表头数据
19
- const [multiTableData, setMmultiTableData] = useState({}); //多表头数据
20
- const [viewCount, setViewCount] = useState(10); //虚拟表格每次渲染数量
21
- const itemWidth = 100; // 表格每一项宽度
22
-
23
- const viewPort = useRef(null);
24
-
25
- //起始渲染item
26
- const [startIndex, setStartIndex] = useState(0);
27
-
28
- //结束渲染item
29
- const endIndex = useMemo(() => {
30
- return startIndex + viewCount;
31
- }, [startIndex, viewCount])
32
-
33
- //表格偏移量
34
- const [offsetWidth, setOffset] = useState(0);
35
-
36
- useEffect(() => { //根据容器宽度计算每次渲染个数
37
- let viewPortWidth = viewPort.current.clientWidth;
38
- let defaultTableWidth = viewPortWidth - (props.colHeaderWidth || 400);
39
- let viewCount = Math.floor(defaultTableWidth/itemWidth) + 2 <= 10 ? 10 : Math.floor(defaultTableWidth/itemWidth) + 2;
40
- setViewCount(viewCount)
41
- }, [])
42
-
43
- const onScroll = () => {
44
- const scrollWidth = viewPort.current.scrollLeft;
45
- const startIndex = Math.floor(scrollWidth/itemWidth);
46
- const offsetWidth = startIndex * itemWidth;
47
- setStartIndex(startIndex);
48
- setOffset(offsetWidth);
49
- }
50
-
51
- // 占位符，表格列总宽度
52
- const placeholderWidth = useMemo(() => {
53
- return colTableData.length*100
54
- }, [colTableData])
55
-
56
-
57
- useImperativeHandle(ref, () => ({
58
- // 暴露子组件刷新表格方法出去，父组件可以调用该方法刷新表格数据
59
- getDataSource: getDataSource,
60
- }));
61
-
62
- // 设置表头相关信息
63
- useEffect(() => {
64
- const { colData, rowData, colHeaderWidth=400 } = props;
65
- let tableType;
66
- if (colData && colData.length && rowData && rowData.length) {
67
- tableType = 'multi-header-table';
68
- const colHeaderData = convertToRows(colData);
69
- const rowHeaderData = headersToRows(rowData);
70
- const { rowHeader } = rowHeaderData;
71
- setConfig({
72
- colHeader: [],
73
- colLastData: [],
74
- rowHeader: [],
75
- rowLastData: [],
76
- ...colHeaderData,
77
- ...rowHeaderData,
78
- colHeaderWidth: colHeaderWidth,
79
- colHeaderToTop: (rowHeader?.length || 0)*40,
80
- tableType: tableType
81
- })
82
- } else if (colData && colData.length) {
83
- tableType = 'col-header-table';
84
- const colHeaderData = convertToRows(colData);
85
- setConfig({
86
- colHeader: [],
87
- colLastData: [],
88
- rowHeader: [],
89
- rowLastData: [],
90
- ...colHeaderData,
91
- colHeaderWidth: colHeaderWidth || 400,
92
- colHeaderToTop: 0,
93
- tableType: tableType
94
- })
95
- }
96
- }, [props.colData, props.rowData]);
97
-
98
- // 设置多表头表格数据
99
- useEffect(() => {
100
- if (!config.colLastData.length || !config.rowLastData.length || !props.multiTableData) return;
101
- let tableData = {};
102
- let [row, col] = [config.rowLastData, config.colLastData];
103
- col.forEach(x => {
104
- row.forEach(y => {
105
- let key = x.id + "__" + y.id;
106
- tableData[key] = "";
107
- });
108
- });
109
- Object.assign(tableData, props.multiTableData);
110
- setMmultiTableData({
111
- ...tableData
112
- });
113
- }, [config.colLastData, config.rowLastData, props.multiTableData])
114
-
115
- // 设置纵向表格数据
116
- useEffect(() => {
117
- if (props?.colTableData && props?.colTableData.length) {
118
- setColTableData([
119
- ...props.colTableData
120
- ])
121
- }
122
- }, [props.colTableData])
123
-
124
- const getDataSource = () => {
125
- return colTableData;
126
- }
127
-
128
- const tableInsFn = {
129
- getDataSource: getDataSource,
130
- }
131
-
132
-
133
-
134
- // if (!show) {
135
- // return <div>loading</div>;
136
- // }
137
-
138
- const {width, height } = props;
139
- let tableWidth = width ? `${width}px` : '100%';
140
- let tableHeight = `${height || 400}px`;
141
- const rightAreaWidth = 'calc(100% - ' + `${config.colHeaderWidth}px` + ')';
142
- return (
143
- <div
144
- style={{width: tableWidth, height: tableHeight}}
145
- key='moreTreeTable'
146
- className={'editTableWrapper'}
147
- onScroll={onScroll}
148
- ref={viewPort}
149
- >
150
- <div style={{
151
- width: `${config.colHeaderWidth + 1 + placeholderWidth}px`,
152
- position: 'absolute',
153
- top: 0,
154
- left: 0,
155
- height: '100%',
156
- }}
157
- ></div>
158
- {/* -------------------------------------左上角区域--------------------------------------- */}
159
- <table
160
- style={{
161
- width: `${config.colHeaderWidth+1}px`,
162
- height: `${config.colHeaderToTop}px`,
163
- display: config.tableType === 'col-header-table' ? 'none' : '',
164
- }}
165
- className={`${'north__west'}`}
166
- >
167
- </table>
168
-
169
- {/* --------------------------------------纵向表头---------------------------------------- */}
170
- <table
171
- style={{
172
- width: `${config.colHeaderWidth+1}px`,
173
- top: `${config.colHeaderToTop}px`,
174
- left: '0px',
175
- position: 'sticky',
176
- }}
177
- className={`${'south__west'} ${'editTable__block'} ${'table_border_style'}`}
178
- >
179
- <tbody>
180
- {config.colHeader.map((item, index) => {
181
- return (
182
- <tr>
183
- {item.map((innerItem) => {
184
- if (!innerItem) return null;
185
- let fixedTop = innerItem.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
186
- return (
187
- <td
188
- style={{
189
- // width: '200px',
190
- height: '40px',
191
- background: '#f7f8fb',
192
- lineHeight: '28px',
193
- color: '#000000',
194
- fontWeight: 500,
195
- position: innerItem.fixed ? 'sticky' : '',
196
- top: fixedTop,
197
- }}
198
- rowSpan={innerItem && innerItem.colSpan}
199
- colSpan={innerItem && innerItem.rowSpan}
200
- >
201
- {innerItem && innerItem.title}
202
- </td>
203
- );
204
- })}
205
- {/* <td></td> */}
206
- </tr>
207
- );
208
- })}
209
- </tbody>
210
- </table>
211
- <table
212
- className={` ${'editTable__block'} ${'table_border_style'}`}
213
- style={{
214
- width: '100%',
215
- top: 0,
216
- left: `${config.colHeaderWidth}px`,
217
- position: 'absolute',
218
- display: config.tableType === 'col-header-table' ? 'none' : ''
219
- }}
220
- >
221
- <colgroup>
222
- {
223
- config.rowLastData.map(row => {
224
- return (<col width={row.width ? `${row.width}px` : '100px'} />)
225
- })
226
- }
227
- </colgroup>
228
- <tbody>
229
- {
230
- config.rowHeader.map((item) => {
231
- return (
232
- <tr>
233
- {
234
- item.map((innerItem) => {
235
- if (!innerItem) return null;
236
- return (
237
- <td
238
- style={{
239
- height: '40px',
240
- background: '#f7f8fb',
241
- color: '#000000',
242
- fontWeight: 500,
243
- width: innerItem.width ? `${innerItem.width}px` : '100px',
244
- }}
245
- rowSpan={innerItem && innerItem.rowSpan}
246
- colSpan={innerItem && innerItem.colSpan}
247
- >
248
- {innerItem && innerItem.title}
249
- </td>
250
- )
251
- })
252
- }
253
- </tr>
254
- )
255
- })
256
- }
257
- </tbody>
258
- </table>
259
- <div
260
- style={{
261
- position: 'absolute',
262
- left: `${config.colHeaderWidth}px`,
263
- top: `${config.colHeaderToTop}px`,
264
- minWidth: rightAreaWidth,
265
- zIndex: 0,
266
- }}
267
- >
268
- {/* --------------------------------------横向表头---------------------------------------- */}
269
- {/* <div style={{position: 'relative'}}>
270
-
271
- </div> */}
272
- <div
273
- style={{
274
- width: '100%',
275
- position: 'relative'
276
- }}
277
- className={`${'value_table'} ${'table_border_style'}`}
278
- >
279
- {/* ------------------------------------纵向表头数据-------------------------------------- */}
280
- <table
281
- style={{
282
- tableLayout:'auto',
283
- width: '800px',
284
- display: config.tableType === 'col-header-table' ? '' : 'none',
285
- transform: `translateX(${offsetWidth}px)`
286
- }}
287
- className={`${'editTable__block'} ${'table_border_style'}`}
288
- >
289
- <tbody>
290
- {config.colLastData.map((item, index) => {
291
- let fixedTop = item.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
292
- return (
293
- <tr>
294
- {colTableData.map((record, index) => {
295
- return (
296
- <td
297
- style={{
298
- background: (index % 2 === 1) || item.fixed ? '#f7f8fb' : '#fff',
299
- minWidth: '100px',
300
- width: `${itemWidth}px`,
301
- height: '40px',
302
- position: item.fixed ? 'sticky' : '',
303
- top: fixedTop,
304
- color: item.fixed ? '#000000' : 'inherit',
305
- zIndex: item.fixed ? 10 : '',
306
- }}
307
- >
308
- {
309
- item.render ? item.render({text:record[item.key || item.dataIndex], record, index, table: tableInsFn}) : record[item.key || item.dataIndex]
310
- }
311
- {/* {record[item.key || item.dataIndex]?.value} */}
312
- </td>
313
- );
314
- }).slice(startIndex, endIndex+1)}
315
- {/* <td></td> */}
316
- </tr>
317
- );
318
- })}
319
- </tbody>
320
- </table>
321
- {/* -------------------------------------多表头数据-------------------------------------- */}
322
- <table
323
- style={{
324
- width: '100%',
325
- display: config.tableType === 'col-header-table' ? 'none' : '',
326
- }}
327
- className={`${'editTable__block'} ${'table_border_style'}`}
328
- >
329
- <colgroup>
330
- {
331
- config.rowLastData.map(row => {
332
- return (<col width={row.width ? `${row.width}px` : '100px'} />)
333
- })
334
- }
335
- </colgroup>
336
- <tbody>
337
- {config.colLastData.map((col) => {
338
- return (
339
- <tr>
340
- {config.rowLastData.map((row, index) => {
341
- return (
342
- <td
343
- style={{
344
- background: (index % 2 === 0) ? '#fff' : '#f7f8fb',
345
- width: row.width ? `${row.width}px` : '100px',
346
- height: '40px',
347
- }}
348
- >
349
- {multiTableData[(row.key || row.dataIndex)+'__'+(col.key || col.dataIndex)]}
350
- </td>
351
- );
352
- })}
353
- {/* <td></td> */}
354
- </tr>
355
- );
356
- })}
357
- </tbody>
358
- </table>
359
- </div>
360
- </div>
361
- </div>
362
- );
363
- });
1
+ // @ts-nocheck
2
+ import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo, useRef } from 'react';
3
+ import { getAllColumns, convertToRows, headersToRows } from './utils';
4
+ import './index.less';
5
+
6
+
7
+ export default forwardRef((props, ref) => {
8
+ const [show, setShow] = useState(false);
9
+ const [config, setConfig] = useState({
10
+ tableType: 'col-header-table',
11
+ colHeader: [],
12
+ colLastData: [],
13
+ rowHeader: [],
14
+ rowLastData: [],
15
+ colHeaderWidth: 400,
16
+ colHeaderToTop: 0,
17
+ });
18
+ const [colTableData, setColTableData] = useState([]); //纵向表头数据
19
+ const [multiTableData, setMmultiTableData] = useState({}); //多表头数据
20
+ const [viewCount, setViewCount] = useState(10); //虚拟表格每次渲染数量
21
+ const itemWidth = 100; // 表格每一项宽度
22
+
23
+ const viewPort = useRef(null);
24
+
25
+ //起始渲染item
26
+ const [startIndex, setStartIndex] = useState(0);
27
+
28
+ //结束渲染item
29
+ const endIndex = useMemo(() => {
30
+ return startIndex + viewCount;
31
+ }, [startIndex, viewCount])
32
+
33
+ //表格偏移量
34
+ const [offsetWidth, setOffset] = useState(0);
35
+
36
+ useEffect(() => { //根据容器宽度计算每次渲染个数
37
+ let viewPortWidth = viewPort.current.clientWidth;
38
+ let defaultTableWidth = viewPortWidth - (props.colHeaderWidth || 400);
39
+ let viewCount = Math.floor(defaultTableWidth/itemWidth) + 2 <= 10 ? 10 : Math.floor(defaultTableWidth/itemWidth) + 2;
40
+ setViewCount(viewCount)
41
+ }, [])
42
+
43
+ const onScroll = () => {
44
+ const scrollWidth = viewPort.current.scrollLeft;
45
+ const startIndex = Math.floor(scrollWidth/itemWidth);
46
+ const offsetWidth = startIndex * itemWidth;
47
+ setStartIndex(startIndex);
48
+ setOffset(offsetWidth);
49
+ }
50
+
51
+ // 占位符，表格列总宽度
52
+ const placeholderWidth = useMemo(() => {
53
+ return colTableData.length*100
54
+ }, [colTableData])
55
+
56
+
57
+ useImperativeHandle(ref, () => ({
58
+ // 暴露子组件刷新表格方法出去，父组件可以调用该方法刷新表格数据
59
+ getDataSource: getDataSource,
60
+ }));
61
+
62
+ // 设置表头相关信息
63
+ useEffect(() => {
64
+ const { colData, rowData, colHeaderWidth=400 } = props;
65
+ let tableType;
66
+ if (colData && colData.length && rowData && rowData.length) {
67
+ tableType = 'multi-header-table';
68
+ const colHeaderData = convertToRows(colData);
69
+ const rowHeaderData = headersToRows(rowData);
70
+ const { rowHeader } = rowHeaderData;
71
+ setConfig({
72
+ colHeader: [],
73
+ colLastData: [],
74
+ rowHeader: [],
75
+ rowLastData: [],
76
+ ...colHeaderData,
77
+ ...rowHeaderData,
78
+ colHeaderWidth: colHeaderWidth,
79
+ colHeaderToTop: (rowHeader?.length || 0)*40,
80
+ tableType: tableType
81
+ })
82
+ } else if (colData && colData.length) {
83
+ tableType = 'col-header-table';
84
+ const colHeaderData = convertToRows(colData);
85
+ setConfig({
86
+ colHeader: [],
87
+ colLastData: [],
88
+ rowHeader: [],
89
+ rowLastData: [],
90
+ ...colHeaderData,
91
+ colHeaderWidth: colHeaderWidth || 400,
92
+ colHeaderToTop: 0,
93
+ tableType: tableType
94
+ })
95
+ }
96
+ }, [props.colData, props.rowData]);
97
+
98
+ // 设置多表头表格数据
99
+ useEffect(() => {
100
+ if (!config.colLastData.length || !config.rowLastData.length || !props.multiTableData) return;
101
+ let tableData = {};
102
+ let [row, col] = [config.rowLastData, config.colLastData];
103
+ col.forEach(x => {
104
+ row.forEach(y => {
105
+ let key = x.id + "__" + y.id;
106
+ tableData[key] = "";
107
+ });
108
+ });
109
+ Object.assign(tableData, props.multiTableData);
110
+ setMmultiTableData({
111
+ ...tableData
112
+ });
113
+ }, [config.colLastData, config.rowLastData, props.multiTableData])
114
+
115
+ // 设置纵向表格数据
116
+ useEffect(() => {
117
+ if (props?.colTableData && props?.colTableData.length) {
118
+ setColTableData([
119
+ ...props.colTableData
120
+ ])
121
+ }
122
+ }, [props.colTableData])
123
+
124
+ const getDataSource = () => {
125
+ return colTableData;
126
+ }
127
+
128
+ const tableInsFn = {
129
+ getDataSource: getDataSource,
130
+ }
131
+
132
+
133
+
134
+ // if (!show) {
135
+ // return <div>loading</div>;
136
+ // }
137
+
138
+ const {width, height } = props;
139
+ let tableWidth = width ? `${width}px` : '100%';
140
+ let tableHeight = `${height || 400}px`;
141
+ const rightAreaWidth = 'calc(100% - ' + `${config.colHeaderWidth}px` + ')';
142
+ return (
143
+ <div
144
+ style={{width: tableWidth, height: tableHeight}}
145
+ key='moreTreeTable'
146
+ className={'editTableWrapper'}
147
+ onScroll={onScroll}
148
+ ref={viewPort}
149
+ >
150
+ <div style={{
151
+ width: `${config.colHeaderWidth + 1 + placeholderWidth}px`,
152
+ position: 'absolute',
153
+ top: 0,
154
+ left: 0,
155
+ height: '100%',
156
+ }}
157
+ ></div>
158
+ {/* -------------------------------------左上角区域--------------------------------------- */}
159
+ <table
160
+ style={{
161
+ width: `${config.colHeaderWidth+1}px`,
162
+ height: `${config.colHeaderToTop}px`,
163
+ display: config.tableType === 'col-header-table' ? 'none' : '',
164
+ }}
165
+ className={`${'north__west'}`}
166
+ >
167
+ </table>
168
+
169
+ {/* --------------------------------------纵向表头---------------------------------------- */}
170
+ <table
171
+ style={{
172
+ width: `${config.colHeaderWidth+1}px`,
173
+ top: `${config.colHeaderToTop}px`,
174
+ left: '0px',
175
+ position: 'sticky',
176
+ }}
177
+ className={`${'south__west'} ${'editTable__block'} ${'table_border_style'}`}
178
+ >
179
+ <tbody>
180
+ {config.colHeader.map((item, index) => {
181
+ return (
182
+ <tr>
183
+ {item.map((innerItem) => {
184
+ if (!innerItem) return null;
185
+ let fixedTop = innerItem.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
186
+ return (
187
+ <td
188
+ style={{
189
+ // width: '200px',
190
+ height: '40px',
191
+ background: '#f7f8fb',
192
+ lineHeight: '28px',
193
+ color: '#000000',
194
+ fontWeight: 500,
195
+ position: innerItem.fixed ? 'sticky' : '',
196
+ top: fixedTop,
197
+ }}
198
+ rowSpan={innerItem && innerItem.colSpan}
199
+ colSpan={innerItem && innerItem.rowSpan}
200
+ >
201
+ {innerItem && innerItem.title}
202
+ </td>
203
+ );
204
+ })}
205
+ {/* <td></td> */}
206
+ </tr>
207
+ );
208
+ })}
209
+ </tbody>
210
+ </table>
211
+ <table
212
+ className={` ${'editTable__block'} ${'table_border_style'}`}
213
+ style={{
214
+ width: '100%',
215
+ top: 0,
216
+ left: `${config.colHeaderWidth}px`,
217
+ position: 'absolute',
218
+ display: config.tableType === 'col-header-table' ? 'none' : ''
219
+ }}
220
+ >
221
+ <colgroup>
222
+ {
223
+ config.rowLastData.map(row => {
224
+ return (<col width={row.width ? `${row.width}px` : '100px'} />)
225
+ })
226
+ }
227
+ </colgroup>
228
+ <tbody>
229
+ {
230
+ config.rowHeader.map((item) => {
231
+ return (
232
+ <tr>
233
+ {
234
+ item.map((innerItem) => {
235
+ if (!innerItem) return null;
236
+ return (
237
+ <td
238
+ style={{
239
+ height: '40px',
240
+ background: '#f7f8fb',
241
+ color: '#000000',
242
+ fontWeight: 500,
243
+ width: innerItem.width ? `${innerItem.width}px` : '100px',
244
+ }}
245
+ rowSpan={innerItem && innerItem.rowSpan}
246
+ colSpan={innerItem && innerItem.colSpan}
247
+ >
248
+ {innerItem && innerItem.title}
249
+ </td>
250
+ )
251
+ })
252
+ }
253
+ </tr>
254
+ )
255
+ })
256
+ }
257
+ </tbody>
258
+ </table>
259
+ <div
260
+ style={{
261
+ position: 'absolute',
262
+ left: `${config.colHeaderWidth}px`,
263
+ top: `${config.colHeaderToTop}px`,
264
+ minWidth: rightAreaWidth,
265
+ zIndex: 0,
266
+ }}
267
+ >
268
+ {/* --------------------------------------横向表头---------------------------------------- */}
269
+ {/* <div style={{position: 'relative'}}>
270
+
271
+ </div> */}
272
+ <div
273
+ style={{
274
+ width: '100%',
275
+ position: 'relative'
276
+ }}
277
+ className={`${'value_table'} ${'table_border_style'}`}
278
+ >
279
+ {/* ------------------------------------纵向表头数据-------------------------------------- */}
280
+ <table
281
+ style={{
282
+ tableLayout:'auto',
283
+ width: '800px',
284
+ display: config.tableType === 'col-header-table' ? '' : 'none',
285
+ transform: `translateX(${offsetWidth}px)`
286
+ }}
287
+ className={`${'editTable__block'} ${'table_border_style'}`}
288
+ >
289
+ <tbody>
290
+ {config.colLastData.map((item, index) => {
291
+ let fixedTop = item.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
292
+ return (
293
+ <tr>
294
+ {colTableData.map((record, index) => {
295
+ let tdHidden = record?.['_rowConfig']?.hidden ? 'none' : 'table-cell'
296
+ return (
297
+ <td
298
+ style={{
299
+ display: tdHidden,
300
+ background: (index % 2 === 1) || item.fixed ? '#FAFAFA' : '#fff',
301
+ minWidth: '100px',
302
+ width: `${itemWidth}px`,
303
+ height: '40px',
304
+ position: item.fixed ? 'sticky' : '',
305
+ top: fixedTop,
306
+ color: item.fixed ? '#000000' : 'inherit',
307
+ zIndex: item.fixed ? 10 : '',
308
+ }}
309
+ >
310
+ {
311
+ item.render ? item.render({text:record[item.key || item.dataIndex], record, index, table: tableInsFn}) : record[item.key || item.dataIndex]
312
+ }
313
+ {/* {record[item.key || item.dataIndex]?.value} */}
314
+ </td>
315
+ );
316
+ }).slice(startIndex, endIndex+1)}
317
+ {/* <td></td> */}
318
+ </tr>
319
+ );
320
+ })}
321
+ </tbody>
322
+ </table>
323
+ {/* -------------------------------------多表头数据-------------------------------------- */}
324
+ <table
325
+ style={{
326
+ width: '100%',
327
+ display: config.tableType === 'col-header-table' ? 'none' : '',
328
+ }}
329
+ className={`${'editTable__block'} ${'table_border_style'}`}
330
+ >
331
+ <colgroup>
332
+ {
333
+ config.rowLastData.map(row => {
334
+ return (<col width={row.width ? `${row.width}px` : '100px'} />)
335
+ })
336
+ }
337
+ </colgroup>
338
+ <tbody>
339
+ {config.colLastData.map((col) => {
340
+ return (
341
+ <tr>
342
+ {config.rowLastData.map((row, index) => {
343
+ return (
344
+ <td
345
+ style={{
346
+ background: (index % 2 === 0) ? '#fff' : '#f7f8fb',
347
+ width: row.width ? `${row.width}px` : '100px',
348
+ height: '40px',
349
+ }}
350
+ >
351
+ {multiTableData[(row.key || row.dataIndex)+'__'+(col.key || col.dataIndex)]}
352
+ </td>
353
+ );
354
+ })}
355
+ {/* <td></td> */}
356
+ </tr>
357
+ );
358
+ })}
359
+ </tbody>
360
+ </table>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ );
365
+ });