@bit-sun/business-component 2.0.32 → 2.0.34-alpha.0

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 (100) hide show
  1. package/.editorconfig +16 -16
  2. package/.fatherrc.ts +4 -4
  3. package/.gitlab-ci.yml +174 -174
  4. package/.prettierignore +7 -7
  5. package/.prettierrc +11 -11
  6. package/.umirc.ts +74 -74
  7. package/README.md +27 -27
  8. package/dist/index.esm.js +5885 -7643
  9. package/dist/index.js +5882 -7640
  10. package/docs/index.md +21 -21
  11. package/lib/assets/drag.svg +17 -17
  12. package/lib/assets/exportFail.svg +37 -37
  13. package/lib/assets/exportProcessing.svg +28 -28
  14. package/lib/assets/exportSuccess.svg +34 -34
  15. package/lib/assets/label_icon_bottom.svg +25 -25
  16. package/lib/assets/upExport.svg +22 -22
  17. package/package.json +69 -69
  18. package/src/assets/btn-delete.svg +29 -29
  19. package/src/assets/btn-edit.svg +19 -19
  20. package/src/assets/btn-more.svg +17 -17
  21. package/src/assets/btn-submit.svg +19 -19
  22. package/src/assets/close.svg +26 -26
  23. package/src/assets/drag.svg +17 -17
  24. package/src/assets/exportFail.svg +37 -37
  25. package/src/assets/exportProcessing.svg +28 -28
  26. package/src/assets/exportSuccess.svg +34 -34
  27. package/src/assets/fixed-left-active.svg +11 -11
  28. package/src/assets/fixed-left.svg +15 -15
  29. package/src/assets/fixed-right-active.svg +11 -11
  30. package/src/assets/fixed-right.svg +15 -15
  31. package/src/assets/icon-quanping.svg +15 -15
  32. package/src/assets/icon-shezhi.svg +17 -17
  33. package/src/assets/label_icon_bottom.svg +25 -25
  34. package/src/assets/scanning.svg +24 -24
  35. package/src/assets/upExport.svg +22 -22
  36. package/src/components/Business/AddSelectBusiness/index.md +41 -41
  37. package/src/components/Business/AddSelectBusiness/index.tsx +290 -290
  38. package/src/components/Business/BsSulaQueryTable/index.less +219 -219
  39. package/src/components/Business/BsSulaQueryTable/index.tsx +534 -534
  40. package/src/components/Business/BsSulaQueryTable/setting.tsx +817 -817
  41. package/src/components/Business/BsSulaQueryTable/utils.less +65 -65
  42. package/src/components/Business/BsSulaQueryTable/utils.tsx +690 -690
  43. package/src/components/Business/CommodityEntry/index.md +70 -70
  44. package/src/components/Business/CommodityEntry/index.tsx +80 -80
  45. package/src/components/Business/CommonAlert/index.tsx +23 -23
  46. package/src/components/Business/CommonGuideWrapper/index.less +111 -111
  47. package/src/components/Business/CommonGuideWrapper/index.md +39 -39
  48. package/src/components/Business/CommonGuideWrapper/index.tsx +83 -83
  49. package/src/components/Business/DetailPageWrapper/index.less +79 -79
  50. package/src/components/Business/DetailPageWrapper/index.tsx +324 -324
  51. package/src/components/Business/DetailPageWrapper/utils.tsx +110 -110
  52. package/src/components/Business/HomePageWrapper/index.less +33 -33
  53. package/src/components/Business/HomePageWrapper/index.md +45 -45
  54. package/src/components/Business/HomePageWrapper/index.tsx +150 -150
  55. package/src/components/Business/SearchSelect/BusinessUtils.ts +1448 -1448
  56. package/src/components/Business/SearchSelect/common.ts +53 -53
  57. package/src/components/Business/SearchSelect/index.md +1137 -1137
  58. package/src/components/Business/SearchSelect/index.tsx +51 -51
  59. package/src/components/Business/SearchSelect/utils.ts +99 -99
  60. package/src/components/Business/StateFlow/index.less +130 -130
  61. package/src/components/Business/StateFlow/index.md +60 -60
  62. package/src/components/Business/StateFlow/index.tsx +29 -29
  63. package/src/components/Business/TreeSearchSelect/index.md +126 -126
  64. package/src/components/Business/TreeSearchSelect/index.tsx +34 -34
  65. package/src/components/Business/TreeSearchSelect/utils.ts +60 -60
  66. package/src/components/Business/columnSettingTable/columnSetting.tsx +762 -762
  67. package/src/components/Business/columnSettingTable/index.less +247 -247
  68. package/src/components/Business/columnSettingTable/index.md +357 -357
  69. package/src/components/Business/columnSettingTable/index.tsx +225 -225
  70. package/src/components/Business/columnSettingTable/sulaSettingTable.tsx +233 -233
  71. package/src/components/Business/columnSettingTable/utils.tsx +68 -68
  72. package/src/components/Functional/AddSelect/index.less +367 -367
  73. package/src/components/Functional/AddSelect/index.md +122 -122
  74. package/src/components/Functional/AddSelect/index.tsx +962 -962
  75. package/src/components/Functional/BillEntry/index.less +371 -371
  76. package/src/components/Functional/BillEntry/index.md +39 -37
  77. package/src/components/Functional/BillEntry/index.tsx +607 -547
  78. package/src/components/Functional/DataImport/index.less +63 -63
  79. package/src/components/Functional/DataImport/index.md +44 -44
  80. package/src/components/Functional/DataImport/index.tsx +689 -689
  81. package/src/components/Functional/DataValidation/index.less +63 -63
  82. package/src/components/Functional/DataValidation/index.md +38 -38
  83. package/src/components/Functional/DataValidation/index.tsx +681 -681
  84. package/src/components/Functional/ExportFunctions/ExportIcon/index.md +37 -37
  85. package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx +59 -59
  86. package/src/components/Functional/QueryMutipleInput/index.less +37 -37
  87. package/src/components/Functional/QueryMutipleInput/index.md +33 -33
  88. package/src/components/Functional/QueryMutipleInput/index.tsx +128 -128
  89. package/src/components/Functional/SearchSelect/index.less +115 -115
  90. package/src/components/Functional/SearchSelect/index.md +141 -141
  91. package/src/components/Functional/SearchSelect/index.tsx +812 -812
  92. package/src/components/Functional/TreeSearchSelect/index.md +47 -47
  93. package/src/components/Functional/TreeSearchSelect/index.tsx +149 -149
  94. package/src/index.ts +30 -30
  95. package/src/utils/CheckOneUser/index.md +39 -39
  96. package/src/utils/CheckOneUser/index.ts +51 -51
  97. package/src/utils/requestUtils.ts +32 -32
  98. package/src/utils/utils.ts +22 -22
  99. package/tsconfig.json +29 -29
  100. package/typings.d.ts +4 -4
@@ -1,534 +1,534 @@
1
- // @ts-nocheck
2
- import React, { useState, useEffect, useRef, useMemo } from 'react';
3
- import { useLocation } from 'umi';
4
- import { QueryTable } from 'bssula';
5
- import {
6
- handleTextDouble,
7
- handleTextLineFeed,
8
- handleTextOverflow,
9
- handleTooltip,
10
- handleTooltipHours,
11
- tableColumnsImage,
12
- userColumns,
13
- getItemDefaultWidth,
14
- authFn,
15
- queryParams,
16
- } from './utils';
17
- import { Menu, Tooltip,} from 'antd';
18
- import SortableTable from './setting';
19
- import { Resizable } from 'react-resizable';
20
- import quanping from '../../../assets/icon-quanping.svg';
21
- import scanning from '../../../assets/scanning.svg';
22
- import { debounce } from 'lodash';
23
- import ExportIcon from '@/components/Functional/ExportFunctions/ExportIcon';
24
-
25
- const MemoQueryTable = React.memo(QueryTable);
26
-
27
- const ResizeableTitle = (props) => {
28
- const { onResize, width, ...restProps } = props;
29
-
30
- if (!width) {
31
- return <th {...restProps} />;
32
- }
33
- return (
34
- <Resizable
35
- width={width}
36
- height={0}
37
- onResize={onResize}
38
- draggableOpts={{ enableUserSelectHack: false }}
39
- >
40
- <th {...restProps} />
41
- </Resizable>
42
- );
43
- };
44
-
45
- export default (props: any) => {
46
- const refs = useRef(null);
47
- const [pagePath, setPagePath] = useState('');
48
- const { pathname } = useLocation();
49
- const [id]: any = useState(
50
- Number(Math.random().toString().substr(2, 0) + Date.now()).toString(36),
51
- );
52
- const [isFullScreen, setIsFnllScreen]: any = useState(false);
53
- // @ts-nocheck
54
- const [value, setValue]: any = useState(props);
55
- const [showColumn, setShowColumns] = useState([]);
56
-
57
- // 获取 table columns中所有的 key 防止有的地方是 dataindex
58
- const [checkedList, setCheckedList] = useState(
59
- value.columns.map((d: any) => d.key || d.dataIndex),
60
- );
61
- const { isPage = true, pagination } = props;
62
-
63
- const [height, setHeight]: any = useState('100vh');
64
- const sortTableRef = useRef(null);
65
-
66
- // 获取table高度
67
- const getTableHeight = () => {
68
- const cancelHeight = window.top == window ? 303 : 223;
69
- const isFullScreen: any =
70
- document.fullScreen ||
71
- document.webkitIsFullScreen ||
72
- document.mozFullScreen;
73
- const h =
74
- document.body.clientHeight -
75
- (document.querySelector('.table-bssula-summary')?.clientHeight || 0) -
76
- (document.querySelector('.ant-form ant-form-horizontal')?.clientHeight ||
77
- 0) -
78
- (isFullScreen
79
- ? 0
80
- : document.querySelector('.ant-pro-page-container-warp')
81
- ?.clientHeight || 0) -
82
- cancelHeight +
83
- 'px';
84
- setHeight(h);
85
- setValue({ ...value });
86
- };
87
-
88
- //监测是否按下esc键
89
- function checkFull() {
90
- let globalDocument = window?.parent?.document || document;
91
- var isFull =
92
- globalDocument.fullscreenElement ||
93
- globalDocument.mozFullScreenElement ||
94
- globalDocument.webkitFullscreenElement;
95
- if (isFull == undefined) isFull = false;
96
- return isFull;
97
- }
98
-
99
- const getConfigFromlocalstorage = () => {
100
- let config = localStorage.getItem('columnCondition') || '[]';
101
- let configArray = JSON.parse(config);
102
- let configSetting = configArray.filter(
103
- (item) => item.code === window.location.hash,
104
- );
105
-
106
- if (configSetting.length) {
107
- return JSON.parse(configSetting[0].detail || '[]');
108
- }
109
- return [];
110
- };
111
-
112
- // 处理按钮权限
113
- useEffect(() => {
114
- getTableHeight();
115
- window.addEventListener('resize', (e) => {
116
- watchWinResize();
117
- });
118
-
119
- // @ts-ignore
120
- setPagePath(pathname); // 做处理,记录当前页面渲染的初始pathname,用于进行判断当前列表页面数据是否需要重新渲染
121
- if (props.notPermissionButtonNow) return;
122
-
123
- // 获取当前列表定义数据
124
- let columnConfig = getConfigFromlocalstorage();
125
-
126
- const resourceCodeArray = {};
127
- if (props.actionsRender && props.actionsRender.length) {
128
- props.actionsRender.forEach((item: any) => {
129
- if (item.code) {
130
- if (resourceCodeArray[item.code]) {
131
- resourceCodeArray[item.code + 1] = item;
132
- } else {
133
- resourceCodeArray[item.code] = item;
134
- }
135
- }
136
- });
137
- }
138
-
139
- setValue({
140
- ...value,
141
- columns: columnConfig.length
142
- ? columnConfig.map((item) => {
143
- let inner = props.columns.filter(
144
- (inneritem) =>
145
- (inneritem.dataIndex &&
146
- inneritem.dataIndex === item.dataIndex) ||
147
- (inneritem.key && inneritem.key === item.key),
148
- )[0];
149
-
150
- return {
151
- ...inner,
152
- ...item,
153
- };
154
- })
155
- : props.columns,
156
- });
157
-
158
- if (props.columns && props.columns.length) {
159
- props.columns.forEach((item: any) => {
160
- if (item.isPermissionColumn && item.render && item.render.length) {
161
- item.render.forEach((inneritem: any) => {
162
- if (inneritem.code) {
163
- if (resourceCodeArray[inneritem.code]) {
164
- resourceCodeArray[inneritem.code + 1] = inneritem;
165
- } else {
166
- resourceCodeArray[inneritem.code] = inneritem;
167
- }
168
- }
169
- });
170
- }
171
- });
172
- }
173
- setCommonRenderFn(props.columns);
174
- const authButton = localStorage.getItem('menuAuth_mainProject')
175
- ? JSON.parse(localStorage.getItem('menuAuth_mainProject') as string)
176
- : [];
177
- Object.keys(resourceCodeArray).forEach((item: any) => {
178
- let Item = item;
179
- if (Number(item.slice(-1)) >= 1) {
180
- Item = item.substr(0, item.length - 1);
181
- }
182
- if (!authButton.filter((itemInner: any) => Item === itemInner).length) {
183
- resourceCodeArray[item].visible = false;
184
- }
185
- });
186
- }, []);
187
-
188
- useEffect(() => {
189
- const { columns } = value;
190
- let columnConfig = getConfigFromlocalstorage();
191
- let showColumns = columnConfig.length ? columnConfig.map((item) => {
192
- let inner = columns.filter(
193
- (inneritem) =>
194
- (inneritem.dataIndex &&
195
- inneritem.dataIndex === item.dataIndex) ||
196
- (inneritem.key && inneritem.key === item.key),
197
- )[0];
198
-
199
- return {
200
- ...inner,
201
- ...item,
202
- };
203
- }) : columns.filter(
204
- (column) => column.notRegularCheckList || checkedList.indexOf(column.key || column.dataIndex) > -1,
205
- )
206
- showColumns.forEach((item, index) => {
207
- item.width = item.width || getItemDefaultWidth(item);
208
- item.onHeaderCell = (column) => ({
209
- ...item,
210
- width:
211
- typeof column.width === 'number'
212
- ? column.width
213
- : parseInt(column.width.replace('px', '')),
214
- onResize: handleResize(index),
215
- });
216
- });
217
- setShowColumns([...showColumns]);
218
- }, [value, checkedList]);
219
-
220
- const watchWinResize = debounce(() => {
221
- getTableHeight();
222
- if (!checkFull()) {
223
- // addTabsNavStyle(true);
224
- // 全屏下按键esc后要执行的动作
225
- // isFullScreen 为true 此时为全屏状态 false 为非全屏状态
226
- if (!isFullScreen) {
227
- // 按下esc键退出全屏
228
- setIsFnllScreen(false);
229
- } else {
230
- setIsFnllScreen(false);
231
- }
232
- }
233
- }, 10);
234
-
235
- const setCommonRenderFn = (columns: any[]) => {
236
- columns.forEach((column) => {
237
- if (column.showDetailUserInfo) {
238
- column.render = ({ text }: any) => userColumns({ name: text });
239
- }
240
- });
241
- };
242
-
243
- // 处理 table 基本参数
244
- const setTableProps = () => {
245
- let tableProps = value.tableProps || {};
246
- tableProps = {
247
- ...tableProps,
248
- size: value.size || 'middle',
249
- defaultPageSize: 20,
250
- pageSize: 20,
251
- initialPaging: {
252
- pagination: pagination
253
- ? false
254
- : {
255
- defaultPageSize: 20,
256
- pageSize: 20,
257
- showTotal: (total: any) => `共 ${total} 条`,
258
- showQuickJumper: true,
259
- hideOnSinglePage: value.hideOnSinglePage || false,
260
- },
261
- },
262
- initialSelectedRowKeys: value.initialSelectedRowKeys || [],
263
- expandable: value.expandable,
264
- scroll: { x: props.overScrollX || 'max-content', y: height },
265
- bordered: value.bordered || false,
266
- sticky: true,
267
- rowClassName: (record: object | null | undefined, index: number) =>
268
- index % 2 === 0 ? 'table_base' : 'table_odd',
269
- ...value.tableProps,
270
- components: {
271
- header: {
272
- cell: ResizeableTitle,
273
- },
274
- },
275
- };
276
-
277
- // @ts-ignore
278
- if (tableProps?.initialPaging?.pagination) {
279
- // @ts-ignore
280
- tableProps.initialPaging.pagination.showSizeChanger = true;
281
- }
282
- return tableProps;
283
- };
284
-
285
- const menu = <Menu style={{ padding: '15px' }}></Menu>;
286
-
287
- const addTabsNavStyle = (isFullScreen: boolean) => {
288
- let globalTabsNav = document
289
- .getElementById('globalTabs')
290
- ?.getElementsByClassName('ant-tabs-nav');
291
- console.log(globalTabsNav);
292
- if (globalTabsNav && globalTabsNav[0]) {
293
- if (isFullScreen) {
294
- globalTabsNav[0].classList.remove('global_tab_nav_style');
295
- } else {
296
- globalTabsNav[0].classList.add('global_tab_nav_style');
297
- }
298
- }
299
- };
300
-
301
- const ShowFullScreen = () => {
302
- if (window.top != window) {
303
- window.parent.postMessage(
304
- {
305
- type: 'screenChange',
306
- id: 'distribution',
307
- },
308
- '*',
309
- );
310
- setIsFnllScreen(!isFullScreen);
311
- } else {
312
- const isFullScreen: any =
313
- document.fullScreen ||
314
- document.webkitIsFullScreen ||
315
- document.mozFullScreen;
316
- let contentEle: any = document.querySelector(`body`);
317
- // addTabsNavStyle(isFullScreen);
318
- if (contentEle && !isFullScreen) {
319
- let fullScreenEle =
320
- contentEle.requestFullscreen ||
321
- contentEle.mozRequestFullScreen ||
322
- contentEle.webkitRequestFullScreen ||
323
- contentEle.msRequestFullscreen;
324
- if (fullScreenEle) {
325
- fullScreenEle.call(contentEle);
326
- setIsFnllScreen(true);
327
- // getTableHeight(true);
328
- return;
329
- }
330
- }
331
- if (document && isFullScreen) {
332
- let exitFullScreen =
333
- document.exitFullscreen ||
334
- document.mozCancelFullScreen ||
335
- document.webkitCancelFullScreen ||
336
- document.msExitFullscreen;
337
- if (exitFullScreen) {
338
- exitFullScreen.call(document);
339
- setIsFnllScreen(false);
340
- // getTableHeight();
341
- return;
342
- }
343
- }
344
- }
345
- };
346
-
347
- const handleTimeValue = () => {
348
- let actionsRender = value.actionsRender || [];
349
- actionsRender = [
350
- ...actionsRender,
351
- {
352
- type: 'text',
353
- props: {
354
- children: (
355
- <>
356
- <Tooltip title="列设置">
357
- <span className="ant-dropdown-link">
358
- <SortableTable
359
- ref={sortTableRef}
360
- setCheckedList={setCheckedList}
361
- value={value}
362
- setValue={setValue}
363
- showColumn={showColumn}
364
- checkedList={checkedList}
365
- datasource={value?.columns || []}
366
- />
367
- </span>
368
- </Tooltip>
369
- </>
370
- ),
371
- },
372
- },
373
- {
374
- type: 'text',
375
- props: {
376
- children: (
377
- <a>
378
- {isFullScreen ? (
379
- <Tooltip title="取消全屏">
380
- <img
381
- onClick={() => {
382
- ShowFullScreen();
383
- }}
384
- width={32}
385
- src={scanning}
386
- />
387
- </Tooltip>
388
- ) : (
389
- <Tooltip title="全屏">
390
- <img
391
- onClick={() => {
392
- ShowFullScreen();
393
- }}
394
- width={32}
395
- src={quanping}
396
- />
397
- </Tooltip>
398
- )}
399
- </a>
400
- ),
401
- },
402
- },
403
- {
404
- type: 'text',
405
- props: {
406
- children:
407
- value?.exportConfig && authFn(value?.exportConfig?.code) ? (
408
- <ExportIcon
409
- request={{
410
- url: `/oms-ops/excel/exportAsync/${value?.exportConfig?.type}`,
411
- params: value?.exportConfig?.params || queryParams,
412
- }}
413
- tableRef={props.forwardedRef || refs}
414
- />
415
- ) : (
416
- <span />
417
- ),
418
- },
419
- },
420
- ];
421
- // 防止 多选框 过宽
422
- if (value && value?.columns?.length > 0) {
423
- if (value.rowSelection) {
424
- value.rowSelection.columnWidth = 50;
425
- }
426
- value.columns.forEach((d: any) => {
427
- // 处理要显示 时分秒的时间
428
- if (d.timeRenderHour) {
429
- d.render = ({ text }: any) =>
430
- handleTooltipHours(text, d.timeRenderHour);
431
- }
432
- // 处理不显示 时分秒的时间
433
- if (d.timeRender) {
434
- d.render = ({ text }: any) => handleTooltip(text, d.timeRender);
435
- }
436
- // 处理文字太长
437
- if (d.textOverflow) {
438
- d.render = ({ text }: any) => handleTextOverflow(text);
439
- }
440
- if (d.images) {
441
- d.render = ({ text }: any) => tableColumnsImage(text);
442
- }
443
- if (d.double) {
444
- d.render = ({ record }: any) =>
445
- handleTextDouble(record[d.textOne], record[d.textTwo]);
446
- }
447
- if (d.lineFeed) {
448
- d.render = ({ text }: any) => handleTextLineFeed(text);
449
- }
450
-
451
- // 处理序号
452
- if (d.indexNumber) {
453
- d.render = ({ index }: any) => index + 1;
454
- }
455
- // 没有值默认显示 - -
456
- if (!d.render) {
457
- d.render = ({ text }: any) => text || '- -';
458
- }
459
- });
460
- }
461
- return {
462
- ...value,
463
- actionsRender,
464
- };
465
- };
466
-
467
- const handleResize =
468
- (index) =>
469
- (e, { size }) => {
470
- setShowColumns((columns: any) => {
471
- let newColumns = [...columns];
472
- newColumns[index] = {
473
- ...newColumns[index],
474
- width: size.width,
475
- };
476
- return [...newColumns];
477
- });
478
- };
479
-
480
- const setVisibleColumn = (columnTitle: string) => {
481
- sortTableRef?.current?.handleTableHeadHidden?.(columnTitle);
482
- };
483
-
484
- const config = {
485
- visibleFieldsCount: 3,
486
- tableWrapperStyle: {
487
- padding: '10px',
488
- background: '#f3f3f3',
489
- },
490
- setVisibleColumn: setVisibleColumn,
491
- itemLayout: {
492
- span: 8, // 栅格占位格数
493
- labelCol: {
494
- // label标签布局;可设置 span、offset
495
- span: 8,
496
- },
497
- wrapperCol: {
498
- // value布局, 方式同labelCol(horizontal状态下配置)
499
- span: 16,
500
- },
501
- },
502
- rowSelection: false, // 默认无多选
503
- ...handleTimeValue(),
504
- tableProps: setTableProps(),
505
- columns: [...showColumn.filter((item) => !item.hidden)],
506
- ref: props.forwardedRef || refs,
507
- isFullScreen,
508
- };
509
-
510
- useEffect(() => {
511
- if (!localStorage.getItem('isTabChange')) {
512
- if (pagePath === pathname) {
513
- // @ts-ignore
514
- config.ref?.current?.tableRef?.current?.refreshTable();
515
- }
516
- } else {
517
- setTimeout(() => {
518
- // 处理页面刷新两面
519
- localStorage.removeItem('isTabChange');
520
- }, 0);
521
- }
522
- }, [pathname]);
523
-
524
- const memoConfig = useMemo(
525
- () => ({
526
- ...config,
527
- summary: props.summary,
528
- statusMapping: props.statusMapping,
529
- }),
530
- [value, checkedList, showColumn, props.statusMapping],
531
- );
532
-
533
- return <MemoQueryTable {...memoConfig} />;
534
- };
1
+ // @ts-nocheck
2
+ import React, { useState, useEffect, useRef, useMemo } from 'react';
3
+ import { useLocation } from 'umi';
4
+ import { QueryTable } from 'bssula';
5
+ import {
6
+ handleTextDouble,
7
+ handleTextLineFeed,
8
+ handleTextOverflow,
9
+ handleTooltip,
10
+ handleTooltipHours,
11
+ tableColumnsImage,
12
+ userColumns,
13
+ getItemDefaultWidth,
14
+ authFn,
15
+ queryParams,
16
+ } from './utils';
17
+ import { Menu, Tooltip,} from 'antd';
18
+ import SortableTable from './setting';
19
+ import { Resizable } from 'react-resizable';
20
+ import quanping from '../../../assets/icon-quanping.svg';
21
+ import scanning from '../../../assets/scanning.svg';
22
+ import { debounce } from 'lodash';
23
+ import ExportIcon from '@/components/Functional/ExportFunctions/ExportIcon';
24
+
25
+ const MemoQueryTable = React.memo(QueryTable);
26
+
27
+ const ResizeableTitle = (props) => {
28
+ const { onResize, width, ...restProps } = props;
29
+
30
+ if (!width) {
31
+ return <th {...restProps} />;
32
+ }
33
+ return (
34
+ <Resizable
35
+ width={width}
36
+ height={0}
37
+ onResize={onResize}
38
+ draggableOpts={{ enableUserSelectHack: false }}
39
+ >
40
+ <th {...restProps} />
41
+ </Resizable>
42
+ );
43
+ };
44
+
45
+ export default (props: any) => {
46
+ const refs = useRef(null);
47
+ const [pagePath, setPagePath] = useState('');
48
+ const { pathname } = useLocation();
49
+ const [id]: any = useState(
50
+ Number(Math.random().toString().substr(2, 0) + Date.now()).toString(36),
51
+ );
52
+ const [isFullScreen, setIsFnllScreen]: any = useState(false);
53
+ // @ts-nocheck
54
+ const [value, setValue]: any = useState(props);
55
+ const [showColumn, setShowColumns] = useState([]);
56
+
57
+ // 获取 table columns中所有的 key 防止有的地方是 dataindex
58
+ const [checkedList, setCheckedList] = useState(
59
+ value.columns.map((d: any) => d.key || d.dataIndex),
60
+ );
61
+ const { isPage = true, pagination } = props;
62
+
63
+ const [height, setHeight]: any = useState('100vh');
64
+ const sortTableRef = useRef(null);
65
+
66
+ // 获取table高度
67
+ const getTableHeight = () => {
68
+ const cancelHeight = window.top == window ? 303 : 223;
69
+ const isFullScreen: any =
70
+ document.fullScreen ||
71
+ document.webkitIsFullScreen ||
72
+ document.mozFullScreen;
73
+ const h =
74
+ document.body.clientHeight -
75
+ (document.querySelector('.table-bssula-summary')?.clientHeight || 0) -
76
+ (document.querySelector('.ant-form ant-form-horizontal')?.clientHeight ||
77
+ 0) -
78
+ (isFullScreen
79
+ ? 0
80
+ : document.querySelector('.ant-pro-page-container-warp')
81
+ ?.clientHeight || 0) -
82
+ cancelHeight +
83
+ 'px';
84
+ setHeight(h);
85
+ setValue({ ...value });
86
+ };
87
+
88
+ //监测是否按下esc键
89
+ function checkFull() {
90
+ let globalDocument = window?.parent?.document || document;
91
+ var isFull =
92
+ globalDocument.fullscreenElement ||
93
+ globalDocument.mozFullScreenElement ||
94
+ globalDocument.webkitFullscreenElement;
95
+ if (isFull == undefined) isFull = false;
96
+ return isFull;
97
+ }
98
+
99
+ const getConfigFromlocalstorage = () => {
100
+ let config = localStorage.getItem('columnCondition') || '[]';
101
+ let configArray = JSON.parse(config);
102
+ let configSetting = configArray.filter(
103
+ (item) => item.code === window.location.hash,
104
+ );
105
+
106
+ if (configSetting.length) {
107
+ return JSON.parse(configSetting[0].detail || '[]');
108
+ }
109
+ return [];
110
+ };
111
+
112
+ // 处理按钮权限
113
+ useEffect(() => {
114
+ getTableHeight();
115
+ window.addEventListener('resize', (e) => {
116
+ watchWinResize();
117
+ });
118
+
119
+ // @ts-ignore
120
+ setPagePath(pathname); // 做处理,记录当前页面渲染的初始pathname,用于进行判断当前列表页面数据是否需要重新渲染
121
+ if (props.notPermissionButtonNow) return;
122
+
123
+ // 获取当前列表定义数据
124
+ let columnConfig = getConfigFromlocalstorage();
125
+
126
+ const resourceCodeArray = {};
127
+ if (props.actionsRender && props.actionsRender.length) {
128
+ props.actionsRender.forEach((item: any) => {
129
+ if (item.code) {
130
+ if (resourceCodeArray[item.code]) {
131
+ resourceCodeArray[item.code + 1] = item;
132
+ } else {
133
+ resourceCodeArray[item.code] = item;
134
+ }
135
+ }
136
+ });
137
+ }
138
+
139
+ setValue({
140
+ ...value,
141
+ columns: columnConfig.length
142
+ ? columnConfig.map((item) => {
143
+ let inner = props.columns.filter(
144
+ (inneritem) =>
145
+ (inneritem.dataIndex &&
146
+ inneritem.dataIndex === item.dataIndex) ||
147
+ (inneritem.key && inneritem.key === item.key),
148
+ )[0];
149
+
150
+ return {
151
+ ...inner,
152
+ ...item,
153
+ };
154
+ })
155
+ : props.columns,
156
+ });
157
+
158
+ if (props.columns && props.columns.length) {
159
+ props.columns.forEach((item: any) => {
160
+ if (item.isPermissionColumn && item.render && item.render.length) {
161
+ item.render.forEach((inneritem: any) => {
162
+ if (inneritem.code) {
163
+ if (resourceCodeArray[inneritem.code]) {
164
+ resourceCodeArray[inneritem.code + 1] = inneritem;
165
+ } else {
166
+ resourceCodeArray[inneritem.code] = inneritem;
167
+ }
168
+ }
169
+ });
170
+ }
171
+ });
172
+ }
173
+ setCommonRenderFn(props.columns);
174
+ const authButton = localStorage.getItem('menuAuth_mainProject')
175
+ ? JSON.parse(localStorage.getItem('menuAuth_mainProject') as string)
176
+ : [];
177
+ Object.keys(resourceCodeArray).forEach((item: any) => {
178
+ let Item = item;
179
+ if (Number(item.slice(-1)) >= 1) {
180
+ Item = item.substr(0, item.length - 1);
181
+ }
182
+ if (!authButton.filter((itemInner: any) => Item === itemInner).length) {
183
+ resourceCodeArray[item].visible = false;
184
+ }
185
+ });
186
+ }, []);
187
+
188
+ useEffect(() => {
189
+ const { columns } = value;
190
+ let columnConfig = getConfigFromlocalstorage();
191
+ let showColumns = columnConfig.length ? columnConfig.map((item) => {
192
+ let inner = columns.filter(
193
+ (inneritem) =>
194
+ (inneritem.dataIndex &&
195
+ inneritem.dataIndex === item.dataIndex) ||
196
+ (inneritem.key && inneritem.key === item.key),
197
+ )[0];
198
+
199
+ return {
200
+ ...inner,
201
+ ...item,
202
+ };
203
+ }) : columns.filter(
204
+ (column) => column.notRegularCheckList || checkedList.indexOf(column.key || column.dataIndex) > -1,
205
+ )
206
+ showColumns.forEach((item, index) => {
207
+ item.width = item.width || getItemDefaultWidth(item);
208
+ item.onHeaderCell = (column) => ({
209
+ ...item,
210
+ width:
211
+ typeof column.width === 'number'
212
+ ? column.width
213
+ : parseInt(column.width.replace('px', '')),
214
+ onResize: handleResize(index),
215
+ });
216
+ });
217
+ setShowColumns([...showColumns]);
218
+ }, [value, checkedList]);
219
+
220
+ const watchWinResize = debounce(() => {
221
+ getTableHeight();
222
+ if (!checkFull()) {
223
+ // addTabsNavStyle(true);
224
+ // 全屏下按键esc后要执行的动作
225
+ // isFullScreen 为true 此时为全屏状态 false 为非全屏状态
226
+ if (!isFullScreen) {
227
+ // 按下esc键退出全屏
228
+ setIsFnllScreen(false);
229
+ } else {
230
+ setIsFnllScreen(false);
231
+ }
232
+ }
233
+ }, 10);
234
+
235
+ const setCommonRenderFn = (columns: any[]) => {
236
+ columns.forEach((column) => {
237
+ if (column.showDetailUserInfo) {
238
+ column.render = ({ text }: any) => userColumns({ name: text });
239
+ }
240
+ });
241
+ };
242
+
243
+ // 处理 table 基本参数
244
+ const setTableProps = () => {
245
+ let tableProps = value.tableProps || {};
246
+ tableProps = {
247
+ ...tableProps,
248
+ size: value.size || 'middle',
249
+ defaultPageSize: 20,
250
+ pageSize: 20,
251
+ initialPaging: {
252
+ pagination: pagination
253
+ ? false
254
+ : {
255
+ defaultPageSize: 20,
256
+ pageSize: 20,
257
+ showTotal: (total: any) => `共 ${total} 条`,
258
+ showQuickJumper: true,
259
+ hideOnSinglePage: value.hideOnSinglePage || false,
260
+ },
261
+ },
262
+ initialSelectedRowKeys: value.initialSelectedRowKeys || [],
263
+ expandable: value.expandable,
264
+ scroll: { x: props.overScrollX || 'max-content', y: height },
265
+ bordered: value.bordered || false,
266
+ sticky: true,
267
+ rowClassName: (record: object | null | undefined, index: number) =>
268
+ index % 2 === 0 ? 'table_base' : 'table_odd',
269
+ ...value.tableProps,
270
+ components: {
271
+ header: {
272
+ cell: ResizeableTitle,
273
+ },
274
+ },
275
+ };
276
+
277
+ // @ts-ignore
278
+ if (tableProps?.initialPaging?.pagination) {
279
+ // @ts-ignore
280
+ tableProps.initialPaging.pagination.showSizeChanger = true;
281
+ }
282
+ return tableProps;
283
+ };
284
+
285
+ const menu = <Menu style={{ padding: '15px' }}></Menu>;
286
+
287
+ const addTabsNavStyle = (isFullScreen: boolean) => {
288
+ let globalTabsNav = document
289
+ .getElementById('globalTabs')
290
+ ?.getElementsByClassName('ant-tabs-nav');
291
+ console.log(globalTabsNav);
292
+ if (globalTabsNav && globalTabsNav[0]) {
293
+ if (isFullScreen) {
294
+ globalTabsNav[0].classList.remove('global_tab_nav_style');
295
+ } else {
296
+ globalTabsNav[0].classList.add('global_tab_nav_style');
297
+ }
298
+ }
299
+ };
300
+
301
+ const ShowFullScreen = () => {
302
+ if (window.top != window) {
303
+ window.parent.postMessage(
304
+ {
305
+ type: 'screenChange',
306
+ id: 'distribution',
307
+ },
308
+ '*',
309
+ );
310
+ setIsFnllScreen(!isFullScreen);
311
+ } else {
312
+ const isFullScreen: any =
313
+ document.fullScreen ||
314
+ document.webkitIsFullScreen ||
315
+ document.mozFullScreen;
316
+ let contentEle: any = document.querySelector(`body`);
317
+ // addTabsNavStyle(isFullScreen);
318
+ if (contentEle && !isFullScreen) {
319
+ let fullScreenEle =
320
+ contentEle.requestFullscreen ||
321
+ contentEle.mozRequestFullScreen ||
322
+ contentEle.webkitRequestFullScreen ||
323
+ contentEle.msRequestFullscreen;
324
+ if (fullScreenEle) {
325
+ fullScreenEle.call(contentEle);
326
+ setIsFnllScreen(true);
327
+ // getTableHeight(true);
328
+ return;
329
+ }
330
+ }
331
+ if (document && isFullScreen) {
332
+ let exitFullScreen =
333
+ document.exitFullscreen ||
334
+ document.mozCancelFullScreen ||
335
+ document.webkitCancelFullScreen ||
336
+ document.msExitFullscreen;
337
+ if (exitFullScreen) {
338
+ exitFullScreen.call(document);
339
+ setIsFnllScreen(false);
340
+ // getTableHeight();
341
+ return;
342
+ }
343
+ }
344
+ }
345
+ };
346
+
347
+ const handleTimeValue = () => {
348
+ let actionsRender = value.actionsRender || [];
349
+ actionsRender = [
350
+ ...actionsRender,
351
+ {
352
+ type: 'text',
353
+ props: {
354
+ children: (
355
+ <>
356
+ <Tooltip title="列设置">
357
+ <span className="ant-dropdown-link">
358
+ <SortableTable
359
+ ref={sortTableRef}
360
+ setCheckedList={setCheckedList}
361
+ value={value}
362
+ setValue={setValue}
363
+ showColumn={showColumn}
364
+ checkedList={checkedList}
365
+ datasource={value?.columns || []}
366
+ />
367
+ </span>
368
+ </Tooltip>
369
+ </>
370
+ ),
371
+ },
372
+ },
373
+ {
374
+ type: 'text',
375
+ props: {
376
+ children: (
377
+ <a>
378
+ {isFullScreen ? (
379
+ <Tooltip title="取消全屏">
380
+ <img
381
+ onClick={() => {
382
+ ShowFullScreen();
383
+ }}
384
+ width={32}
385
+ src={scanning}
386
+ />
387
+ </Tooltip>
388
+ ) : (
389
+ <Tooltip title="全屏">
390
+ <img
391
+ onClick={() => {
392
+ ShowFullScreen();
393
+ }}
394
+ width={32}
395
+ src={quanping}
396
+ />
397
+ </Tooltip>
398
+ )}
399
+ </a>
400
+ ),
401
+ },
402
+ },
403
+ {
404
+ type: 'text',
405
+ props: {
406
+ children:
407
+ value?.exportConfig && authFn(value?.exportConfig?.code) ? (
408
+ <ExportIcon
409
+ request={{
410
+ url: `/oms-ops/excel/exportAsync/${value?.exportConfig?.type}`,
411
+ params: value?.exportConfig?.params || queryParams,
412
+ }}
413
+ tableRef={props.forwardedRef || refs}
414
+ />
415
+ ) : (
416
+ <span />
417
+ ),
418
+ },
419
+ },
420
+ ];
421
+ // 防止 多选框 过宽
422
+ if (value && value?.columns?.length > 0) {
423
+ if (value.rowSelection) {
424
+ value.rowSelection.columnWidth = 50;
425
+ }
426
+ value.columns.forEach((d: any) => {
427
+ // 处理要显示 时分秒的时间
428
+ if (d.timeRenderHour) {
429
+ d.render = ({ text }: any) =>
430
+ handleTooltipHours(text, d.timeRenderHour);
431
+ }
432
+ // 处理不显示 时分秒的时间
433
+ if (d.timeRender) {
434
+ d.render = ({ text }: any) => handleTooltip(text, d.timeRender);
435
+ }
436
+ // 处理文字太长
437
+ if (d.textOverflow) {
438
+ d.render = ({ text }: any) => handleTextOverflow(text);
439
+ }
440
+ if (d.images) {
441
+ d.render = ({ text }: any) => tableColumnsImage(text);
442
+ }
443
+ if (d.double) {
444
+ d.render = ({ record }: any) =>
445
+ handleTextDouble(record[d.textOne], record[d.textTwo]);
446
+ }
447
+ if (d.lineFeed) {
448
+ d.render = ({ text }: any) => handleTextLineFeed(text);
449
+ }
450
+
451
+ // 处理序号
452
+ if (d.indexNumber) {
453
+ d.render = ({ index }: any) => index + 1;
454
+ }
455
+ // 没有值默认显示 - -
456
+ if (!d.render) {
457
+ d.render = ({ text }: any) => text || '- -';
458
+ }
459
+ });
460
+ }
461
+ return {
462
+ ...value,
463
+ actionsRender,
464
+ };
465
+ };
466
+
467
+ const handleResize =
468
+ (index) =>
469
+ (e, { size }) => {
470
+ setShowColumns((columns: any) => {
471
+ let newColumns = [...columns];
472
+ newColumns[index] = {
473
+ ...newColumns[index],
474
+ width: size.width,
475
+ };
476
+ return [...newColumns];
477
+ });
478
+ };
479
+
480
+ const setVisibleColumn = (columnTitle: string) => {
481
+ sortTableRef?.current?.handleTableHeadHidden?.(columnTitle);
482
+ };
483
+
484
+ const config = {
485
+ visibleFieldsCount: 3,
486
+ tableWrapperStyle: {
487
+ padding: '10px',
488
+ background: '#f3f3f3',
489
+ },
490
+ setVisibleColumn: setVisibleColumn,
491
+ itemLayout: {
492
+ span: 8, // 栅格占位格数
493
+ labelCol: {
494
+ // label标签布局;可设置 span、offset
495
+ span: 8,
496
+ },
497
+ wrapperCol: {
498
+ // value布局, 方式同labelCol(horizontal状态下配置)
499
+ span: 16,
500
+ },
501
+ },
502
+ rowSelection: false, // 默认无多选
503
+ ...handleTimeValue(),
504
+ tableProps: setTableProps(),
505
+ columns: [...showColumn.filter((item) => !item.hidden)],
506
+ ref: props.forwardedRef || refs,
507
+ isFullScreen,
508
+ };
509
+
510
+ useEffect(() => {
511
+ if (!localStorage.getItem('isTabChange')) {
512
+ if (pagePath === pathname) {
513
+ // @ts-ignore
514
+ config.ref?.current?.tableRef?.current?.refreshTable();
515
+ }
516
+ } else {
517
+ setTimeout(() => {
518
+ // 处理页面刷新两面
519
+ localStorage.removeItem('isTabChange');
520
+ }, 0);
521
+ }
522
+ }, [pathname]);
523
+
524
+ const memoConfig = useMemo(
525
+ () => ({
526
+ ...config,
527
+ summary: props.summary,
528
+ statusMapping: props.statusMapping,
529
+ }),
530
+ [value, checkedList, showColumn, props.statusMapping],
531
+ );
532
+
533
+ return <MemoQueryTable {...memoConfig} />;
534
+ };