diff --git a/components/apolloTable/component/base/_utils/getFormatter.tsx b/components/apolloTable/component/base/_utils/getFormatter.tsx index 983888be6deb55902bc380b23da5b60372198669..f34dd2c7a21d5075bfa83ef38ac497f2f6ea0273 100644 --- a/components/apolloTable/component/base/_utils/getFormatter.tsx +++ b/components/apolloTable/component/base/_utils/getFormatter.tsx @@ -32,8 +32,8 @@ export const GetFormatter = { if (isMultiple) { return Array.isArray(val) ? val.map((item) => { - return item.value; - }) + return item.value; + }) : []; } const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; @@ -76,6 +76,14 @@ export const GetFormatter = { const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; return obj.value ? moment(obj.value) : undefined; }, + DATERANGE: (val) => { + if (Array.isArray(val)) { + return val.map((item) => { + return moment(item.value); + }); + } + return undefined; + }, LINK: (val) => { return Array.isArray(val) && val.length > 0 ? val : []; }, diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx index 50462fec17a41d0dbb1c8f83c83a36385793703c..30f5638152b908b838d0cda8ef05e97a78004754 100644 --- a/components/apolloTable/component/base/_utils/setFormatter.tsx +++ b/components/apolloTable/component/base/_utils/setFormatter.tsx @@ -81,7 +81,7 @@ export const SetFormatter = { return [{ value: val, text: val }]; }, PERCENTAGE: (val) => { - val = (`${val}`).replace('%', ''); + val = `${val}`.replace('%', ''); if (!isNumber(val)) return emptyModel; val = accDiv(val, 100); return SetFormatter.NUMBER(val); @@ -103,6 +103,16 @@ export const SetFormatter = { val = val.format ? val.format(setFormat) : val; return [{ value: val, text: val }]; }, + DATERANGE: (val, config) => { + if (Array.isArray(val)) { + let res: any[] = []; + val.map((item) => { + res = res.concat(SetFormatter.DATE(item, config)); + }); + return res; + } + return emptyModel; + }, LINK: (val) => { return Array.isArray(val) && val.length > 0 ? val : emptyModel; }, diff --git a/components/apolloTable/component/base/_utils/transferAttr.tsx b/components/apolloTable/component/base/_utils/transferAttr.tsx index 04f6e50476b26bcc35328fdd719e7155a72b1ab7..693050301aa0b3030f9c611309b6c0609e8eb0e6 100644 --- a/components/apolloTable/component/base/_utils/transferAttr.tsx +++ b/components/apolloTable/component/base/_utils/transferAttr.tsx @@ -28,6 +28,7 @@ export const transferAttr = (columnType, columnAttrObj) => { columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength; break; case '11': + case '20': columnAttrObj.format = columnAttrObj.format.replace(/y/g, 'Y').replace(/d/g, 'D'); columnAttrObj.showTime = /H|m|s/.test(columnAttrObj.format); break; diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx index 1483f33ae2281ec371e953c0eedfc6244cbf3ce5..c32c2dd8ddc02221d2b4f80c8a80c611b9e18696 100644 --- a/components/apolloTable/component/base/config.tsx +++ b/components/apolloTable/component/base/config.tsx @@ -19,6 +19,7 @@ import { ApolloTreeSelect, ApolloUpload, ApolloTextArea, + ApolloDateRange, } from './edit'; import { ApolloInputDetail, @@ -37,6 +38,7 @@ import { ApolloTextAreaDetail, ApolloTreeSelectDetail, ApolloUploadDetail, + ApolloDateRangeDetail, } from './detail'; import CellContainer from './edit/container'; @@ -225,4 +227,17 @@ export const config: any = { detailComp: ApolloCascaderDetail, icon: 'iconziduan-lianxiangdanxuan', }, + 20: { + name: '期间', + editComp: ApolloDateRange, + cellComp: CellContainer(ApolloDateRange), + componentAttr: { + format: formatStr, + showTime: true, + }, + getFormatter: GetFormatter.DATERANGE, + setFormatter: SetFormatter.DATERANGE, + detailComp: ApolloDateRangeDetail, + icon: 'iconziduan-riqi', + }, }; diff --git a/components/apolloTable/component/base/detail/dateRange/index.tsx b/components/apolloTable/component/base/detail/dateRange/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..94f013e9b4e29833ca446afce8f7bdf59c79ad30 --- /dev/null +++ b/components/apolloTable/component/base/detail/dateRange/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { formatStr } from '../../_utils/setFormatter'; +import s from '../input/index.less'; +import { DateProps } from '../detailInterface'; + +export const ApolloDateRangeDetail = (props: DateProps) => { + const { value, formatter, componentAttr } = props; + const formatValue = formatter ? formatter(value) : value; + if (!formatValue) return null; + + const { format = formatStr } = componentAttr || {}; + + let valueStr = ''; + if (typeof formatValue === 'string') { + valueStr = formatValue; + } else { + valueStr = formatValue.format ? formatValue.format(format) : formatValue; + } + return
{valueStr}
; +}; diff --git a/components/apolloTable/component/base/detail/index.tsx b/components/apolloTable/component/base/detail/index.tsx index 40ee6127124c2fc1ba095de22fd021622534750f..d57cdbd6d45bd4d4fbec4c5161a44faf5738fe6c 100644 --- a/components/apolloTable/component/base/detail/index.tsx +++ b/components/apolloTable/component/base/detail/index.tsx @@ -14,6 +14,7 @@ import { ApolloInputSearchDetail } from './text-select'; import { ApolloTextAreaDetail } from './textarea'; import { ApolloTreeSelectDetail } from './tree-select'; import { ApolloUploadDetail } from './upload'; +import { ApolloDateRangeDetail } from './dateRange'; export { ApolloInputDetail, @@ -32,4 +33,5 @@ export { ApolloTextAreaDetail, ApolloTreeSelectDetail, ApolloUploadDetail, + ApolloDateRangeDetail, }; diff --git a/components/apolloTable/component/base/detail/link/index.less b/components/apolloTable/component/base/detail/link/index.less index 59c3d5a2e683f6ee5e70fe80f67116810b591e0c..798088498ee4ae1e63ed7056e1f495b4c311eaef 100644 --- a/components/apolloTable/component/base/detail/link/index.less +++ b/components/apolloTable/component/base/detail/link/index.less @@ -1,6 +1,67 @@ -.text { +@import '../../../../common'; +.container { + position: relative; + display: flex; width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + height: 100%; + align-items: center; + .outContainer { + display: flex; + width: calc(100% - 30px); + overflow: hidden; + .innerContainer { + display: flex; + .item { + margin-right: 10px; + //background: #e9eef9; + border-radius: 12px; + &.multi { + border-radius: @borderRadius; + } + .itemBgTxt { + height: 24px; + padding: 5px 10px; + line-height: 1; + font-size: 14px; + color: @textGeneralColor; + } + &:last-child { + margin-right: 0; + } + } + } + } + .moreBtn { + width: 30px; + font-size: 12px; + cursor: pointer; + text-align: center; + .extend { + width: 14px; + border-radius: 50%; + } + } +} +.popContainer{ + width: 200px; + :global(.ant-popover-inner-content){ + padding: 0; + } + .popContent{ + padding: @paddingGen; + } +} +.popItem { + border-radius: @borderRadius; + margin-bottom: @marginSm; + background: #e9eef9; + padding: @paddingSmX; + display: flex; + .popItemBgTxt { + word-break: break-all; + height: 24px; + padding: 5px 10px; + line-height: 1; + font-size: 14px; + } } diff --git a/components/apolloTable/component/base/detail/link/index.tsx b/components/apolloTable/component/base/detail/link/index.tsx index 944c2dddee56038905c3bfe7e2fd9444a7a81339..72d69d7d287e82bbc80082b75d542b34439e3d7d 100644 --- a/components/apolloTable/component/base/detail/link/index.tsx +++ b/components/apolloTable/component/base/detail/link/index.tsx @@ -1,28 +1,94 @@ -import React from 'react'; -import styles from './index.less'; -import { LinkProps } from '../detailInterface'; +import React, { useState, useRef, useEffect } from 'react'; +import { Popover } from 'antd'; +import classNames from 'classnames'; +import s from './index.less'; +import extendIcon from '../../../../assets/extend.png'; -export const ApolloLinkDetail = (props: LinkProps) => { - const { value } = props; - if (!value) return null; - if (Array.isArray(value)) { - return ( -
- {value.map((item, i) => { - return ( -
+export const ApolloLinkDetail = (props: any) => { + const { value, origin } = props; + debugger + if (!Array.isArray(value) || value.length === 0) return null; + const [dotVisible, setDotVisible] = useState(false); + const outer = useRef(null); + const inner = useRef(null); + useEffect(() => { + const outerTarget: any = outer.current; + const innerTarget: any = inner.current; + if (outerTarget && innerTarget && origin !== 'detailForm') { + if (innerTarget.clientWidth > outerTarget.clientWidth) { + setDotVisible(true); + } else { + setDotVisible(false); + } + } + }, [value]); + + const outStyle: any = {}; + const innerStyle: any = {}; + const itemStyle: any = {}; + if (origin === 'detailForm') { + outStyle.width = 'auto'; + innerStyle.flexWrap = 'wrap'; + itemStyle.marginBottom = '5px'; + itemStyle.wordBreak = 'break-all'; + } + return ( +
+
+
+ {value.map((item, i) => { + return ( {item.text || item.value} -
- ); - })} + ); + })} +
- ); - } + {dotVisible && ( + { + e.stopPropagation(); + }} + placement="left" + overlayClassName={s.popContainer} + content={ +
{ + e.stopPropagation(); + }} + > + {value.map((item, i) => { + return ( + + {item.text || item.value} + + ); + })} +
+ } + > +
+ +
+ + )} +
+ ); }; diff --git a/components/apolloTable/component/base/edit/dateRange/index.tsx b/components/apolloTable/component/base/edit/dateRange/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..98ba53ea66e41e143112eb9b4e2ed9ad8f15ee84 --- /dev/null +++ b/components/apolloTable/component/base/edit/dateRange/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { DatePicker } from 'antd'; +import styles from './styles.less'; +import { antiAssign } from '../../../../utils/utils'; + +const { RangePicker } = DatePicker; +export const ApolloDateRange = (props: any) => { + const { onChange } = props; + const selfProps = antiAssign(props, ['onChange', 'columnConfig']); + const changeValue = (dates, dateStrings) => { + if (typeof onChange === 'function') { + onChange(dates, dateStrings); + } + }; + return ( + + ); +}; diff --git a/components/apolloTable/component/base/edit/dateRange/styles.less b/components/apolloTable/component/base/edit/dateRange/styles.less new file mode 100644 index 0000000000000000000000000000000000000000..ae296b7712fef7b6c32027136e9be3ac02925f0b --- /dev/null +++ b/components/apolloTable/component/base/edit/dateRange/styles.less @@ -0,0 +1,18 @@ +@import '../../../../media'; +.date { + width: 100%; + height: 100%; + border-radius: 0; + div { + height: 100%; + } + :global(.ant-calendar-picker-input.ant-input) { + height: 100%; + border-radius: 0; + } +} +.dropdownClassName { + .mediaMax(375px,{ + width:350px; + }); +} diff --git a/components/apolloTable/component/base/edit/index.ts b/components/apolloTable/component/base/edit/index.ts index 28367a9c3e4cd80ce69e0070b08d5f003b346d6c..a86e78c2212f53c8d81eb3fa9f751f008e88a458 100644 --- a/components/apolloTable/component/base/edit/index.ts +++ b/components/apolloTable/component/base/edit/index.ts @@ -14,6 +14,7 @@ import { ApolloInputSearch } from './text-select'; import { ApolloTextArea } from './textarea'; import { ApolloTreeSelect } from './tree-select'; import { ApolloUpload } from './upload'; +import { ApolloDateRange } from './dateRange'; export { ApolloInput, @@ -32,4 +33,5 @@ export { ApolloTreeSelect, ApolloUpload, ApolloTextArea, + ApolloDateRange, }; diff --git a/components/apolloTable/component/base/edit/link/index.tsx b/components/apolloTable/component/base/edit/link/index.tsx index c0287e05a6bcfad57956fbb19b7f2eb3507feeef..6a4a26641d7f927f45a2efda2a2d106fd4f73f32 100644 --- a/components/apolloTable/component/base/edit/link/index.tsx +++ b/components/apolloTable/component/base/edit/link/index.tsx @@ -6,8 +6,12 @@ import addIcon from '../../../../assets/addIcon.png'; import delIcon from '../../../../assets/delIcon.png'; import { Consumer } from '../../../context'; -export const ApolloLink = (props: ApolloLinkProps) => { - const { onChange, value } = props; +export const ApolloLink = (props: any) => { + const { onChange, value, isMultiple, maxLength, maxValue } = props; + let len = 1; + if (isMultiple) { + len = maxValue || 10; + } const changeText = (i, e) => { const newValue = (value && value.slice()) || []; newValue[i].text = e.target.value; @@ -50,6 +54,7 @@ export const ApolloLink = (props: ApolloLinkProps) => { className={styles.input} value={link.text} onChange={changeText.bind(null, i)} + maxLength={maxLength} />
@@ -58,6 +63,7 @@ export const ApolloLink = (props: ApolloLinkProps) => { className={styles.input} value={link.value} onChange={changeValue.bind(null, i)} + maxLength={maxLength} />
@@ -66,9 +72,11 @@ export const ApolloLink = (props: ApolloLinkProps) => {
); })} -
- -
+ {(!value || value.length < len) && ( +
+ +
+ )}
); }}