summary-cell.tsx
3.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import * as formulajs from '@formulajs/formulajs';
import moment from 'moment';
import _ from 'lodash';
import { DATE_KEYS } from '../util';
const { Option } = Select;
interface SummaryCellProps {
options: any[];
property: any;
item: string;
padding: number;
summaryData: any;
}
// const FIELD_LENGTH = 170;
const SummaryCell: React.FC<SummaryCellProps> = (props) => {
const { options, property, item, summaryData } = props;
const [selectFx, setSelectFx] = useState<string | number>('');
const [resultObj, setResultObj] = useState<any>({});
// const getCellWidth = (schema: any, PADDING: number) => {
// return (schema.width ? parseInt(schema.width) : FIELD_LENGTH - PADDING) + "px"
// }
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleFixed = (val: any, _summary: any[]) => {
if (property?.items?.properties[item]?.type === 'number') {
const precision =
property?.items?.properties[item]?.props?.precision || 0;
return Number(val).toFixed(precision);
} else {
return Number(val);
}
// const pre = _summary?.[0]?.toString().split('.')?.length > 1 ? 2 : 0;
// if (typeof val === 'number' || typeof val === 'string') {
// return Number(val).toFixed(precision?precision:pre)
// } else {
// return ''
// }
};
useEffect(() => {
const _obj: any = {};
// eslint-disable-next-line @typescript-eslint/no-shadow
options.forEach((item: { value: string }) => {
let _summary = _.cloneDeep(summaryData[item.value] || []);
_summary = _summary.filter((it: any) => it !== undefined);
const [key, fx] = item.value.split('/');
let isDateTime: boolean = false;
// eslint-disable-next-line @typescript-eslint/no-shadow
DATE_KEYS.forEach((item) => {
if (key.indexOf(item) === 0) {
isDateTime = true;
}
});
// const isDateTime = key.indexOf('date_') === 0 || key.indexOf('qxDatetime_') === 0 || key.indexOf('created_at_') === 0 || key.indexOf('updated_at_') === 0; // 日期时间转为毫秒数，考虑是复制出来的组件
if (isDateTime && ['MAX', 'MIN'].includes(fx)) {
_summary = summaryData[item.value].filter((it: any) => it); // 比较日期的最大最小时，过滤掉空值
_summary.forEach((it: any, index: number) => {
if (it) {
_summary[index] = moment(it);
}
});
// @ts-ignore
_obj[item.value] = summaryData[item.value]
? moment[fx.toLowerCase()](_summary)?._i
: ' ';
} else {
_obj[item.value] = summaryData[item.value]
? handleFixed(formulajs[fx](_summary), _summary)
: ' ';
}
});
setResultObj(_obj);
setSelectFx(options[0]?.value);
}, [summaryData, options]);
return (
<span
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
color: '#7E818A',
}}
>
{options?.length > 1 ? (
<Select
bordered={false}
dropdownClassName={'qx-summary_options'}
defaultValue={options[0]?.value}
onChange={(val) => setSelectFx(val)}
value={selectFx}
>
{
// eslint-disable-next-line @typescript-eslint/no-shadow
options.map((item) => (
<Option value={item.value}>{item.label}</Option>
))
}
</Select>
) : (
<span className={'qx-summary_name'}>{options[0]?.label}</span>
)}
<span className={'qx-summary-result'} title={resultObj[selectFx]}>
{resultObj[selectFx]}
</span>
</span>
);
};
export default SummaryCell;