diff --git a/components/apolloTable/component/base/_utils/getFormatter.tsx b/components/apolloTable/component/base/_utils/getFormatter.tsx index 0415a2b5aa2a64f96a0b20f028910f93644cace8..f031468c7898b3a64250b4bc6fa300a0813b9fec 100644 --- a/components/apolloTable/component/base/_utils/getFormatter.tsx +++ b/components/apolloTable/component/base/_utils/getFormatter.tsx @@ -16,6 +16,10 @@ export const GetFormatter = { const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; return obj.value; }, + TEXTLINK: (val) => { + const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; + return obj.value; + }, UPLOAD: (val) => { if (!Array.isArray(val)) return undefined; return val.map((item) => { diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx index c30752f1c8276e3eb72fc1001906f85aea8e48a3..9a6526ffa1288f301d1c74e36eef3a387d89fced 100644 --- a/components/apolloTable/component/base/_utils/setFormatter.tsx +++ b/components/apolloTable/component/base/_utils/setFormatter.tsx @@ -17,6 +17,12 @@ export const SetFormatter = { } return [{ value, text: value }]; }, + TEXTLINK: (value) => { + if (!value) { + return emptyModel; + } + return [{ value, text: value }]; + }, UPLOAD: (val) => { if (!val) return emptyModel; return val.map((item) => { diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx index c32c2dd8ddc02221d2b4f80c8a80c611b9e18696..7fb324a4d54d1f80b9c1b00aa061e4a2c6273935 100644 --- a/components/apolloTable/component/base/config.tsx +++ b/components/apolloTable/component/base/config.tsx @@ -39,6 +39,7 @@ import { ApolloTreeSelectDetail, ApolloUploadDetail, ApolloDateRangeDetail, + ApolloTextLinkDetail, } from './detail'; import CellContainer from './edit/container'; @@ -55,13 +56,22 @@ export const config: any = { detailComp: ApolloInputDetail, icon: 'iconziduan-danhangwenben', }, + // 2: { + // name: '超链接', + // editComp: ApolloLink, + // cellComp: CellContainer(ApolloLink), + // getFormatter: GetFormatter.LINK, + // setFormatter: SetFormatter.LINK, + // detailComp: ApolloLinkDetail, + // icon: 'iconziduan-chaolianjie', + // }, 2: { name: '超链接', - editComp: ApolloLink, - cellComp: CellContainer(ApolloLink), - getFormatter: GetFormatter.LINK, - setFormatter: SetFormatter.LINK, - detailComp: ApolloLinkDetail, + editComp: ApolloTextArea, + cellComp: CellContainer(ApolloTextArea), + getFormatter: GetFormatter.TEXTLINK, + setFormatter: SetFormatter.TEXTLINK, + detailComp: ApolloTextLinkDetail, icon: 'iconziduan-chaolianjie', }, 3: { diff --git a/components/apolloTable/component/base/detail/index.tsx b/components/apolloTable/component/base/detail/index.tsx index d57cdbd6d45bd4d4fbec4c5161a44faf5738fe6c..20a46c0bf012c761bac7146b247fe17c2816fbb1 100644 --- a/components/apolloTable/component/base/detail/index.tsx +++ b/components/apolloTable/component/base/detail/index.tsx @@ -15,6 +15,7 @@ import { ApolloTextAreaDetail } from './textarea'; import { ApolloTreeSelectDetail } from './tree-select'; import { ApolloUploadDetail } from './upload'; import { ApolloDateRangeDetail } from './dateRange'; +import { ApolloTextLinkDetail } from './text-link'; export { ApolloInputDetail, @@ -34,4 +35,5 @@ export { ApolloTreeSelectDetail, ApolloUploadDetail, ApolloDateRangeDetail, + ApolloTextLinkDetail, }; diff --git a/components/apolloTable/component/base/detail/text-link/index.less b/components/apolloTable/component/base/detail/text-link/index.less new file mode 100644 index 0000000000000000000000000000000000000000..798088498ee4ae1e63ed7056e1f495b4c311eaef --- /dev/null +++ b/components/apolloTable/component/base/detail/text-link/index.less @@ -0,0 +1,67 @@ +@import '../../../../common'; +.container { + position: relative; + display: flex; + width: 100%; + 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/text-link/index.tsx b/components/apolloTable/component/base/detail/text-link/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..9cf860655fc3aa9afecc1672ed3eb43566241f98 --- /dev/null +++ b/components/apolloTable/component/base/detail/text-link/index.tsx @@ -0,0 +1,95 @@ +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 ApolloTextLinkDetail = (props: any) => { + const { value, origin, formatter } = props; + const newValue = formatter ? formatter(value) : value; + if (!newValue) return null; + const arr = newValue.split(','); + 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 ( +
+
+
+ {arr.map((item, i) => { + return ( + + {item} + + ); + })} +
+
+ {dotVisible && ( + { + e.stopPropagation(); + }} + placement="left" + overlayClassName={s.popContainer} + content={ +
{ + e.stopPropagation(); + }} + > + {arr.map((item, i) => { + return ( + + {item} + + ); + })} +
+ } + > +
+ +
+ + )} +
+ ); +}; diff --git a/components/apolloTable/component/base/edit/number/index.tsx b/components/apolloTable/component/base/edit/number/index.tsx index 23191ecd98f33c3fa989c13f273442b02cbfcb79..d20909e9ab9d23e082277d4fad77fe8e62f1a39d 100644 --- a/components/apolloTable/component/base/edit/number/index.tsx +++ b/components/apolloTable/component/base/edit/number/index.tsx @@ -8,7 +8,7 @@ import { floatNumberReg, intNumberReg } from '../../../../utils/reg'; export const ApolloNumber = (props: ApolloNumberProps) => { const { onChange, columnConfig }: any = props; const { columnAttrObj = {} } = columnConfig; - const { precision, dataType } = columnAttrObj; + const { dataType } = columnAttrObj; const selfProps = antiAssign(props, ['columnConfig', 'onChange']); const changeValue = (newValue: any) => { if (dataType === 'INT') { @@ -30,7 +30,6 @@ export const ApolloNumber = (props: ApolloNumberProps) => { ); diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx index 4b3216f81900514a353fcd52813f647242b7e294..cb9714781fa3d0e43d69ab03e6c34335fd2dc884 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.tsx +++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Spin, Select } from 'antd'; import lodash from 'lodash'; +import { Consumer } from '../../../context'; import s from './index.less'; interface Props { @@ -206,17 +207,13 @@ class AssociationSearch extends React.Component { } }; - notFoundContent = () => { + notFoundContent = (locale) => { const { data, fetching, value } = this.state; if (fetching) { return ; } if (!data || data.length === 0) { - return ( - - Sorry, the data you queried does not exist or has been deleted. - - ); + return {locale.notFoundContent}; } return null; }; @@ -225,26 +222,32 @@ class AssociationSearch extends React.Component { const { data, fetching, value } = this.state; const { selfCom, autoFocus, onChange, ...rest } = this.props; return ( - + {data.map((d: any) => { + return ( + + {d.label} + + ); + })} + ); - })} - + }} + ); } } diff --git a/components/apolloTable/locale.ts b/components/apolloTable/locale.ts index 2d631f82f4dc16f0b846fe914a37017ba37a8c33..73dc15ea5d8e3c0a706b3d6cf53311d23b7297cc 100644 --- a/components/apolloTable/locale.ts +++ b/components/apolloTable/locale.ts @@ -22,6 +22,7 @@ export const defaultLocale: any = { alreadyInput: '已输入', linkText: '文本:', linkUrl: 'url:', + notFoundContent: '对不起,您查询的数据不存在或已被删除', }, en: { empty: 'It’s empty here.', @@ -46,5 +47,6 @@ export const defaultLocale: any = { alreadyInput: 'Entered', linkText: 'text:', linkUrl: 'url:', + notFoundContent: 'Sorry, the data you queried does not exist or has been deleted.', }, };