From 0cabe76049b7ae7b7343c1d6f905891a090a52a5 Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Tue, 7 Jul 2020 19:34:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9textlink=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/apolloTable/component/Cell.tsx | 3 + .../apolloTable/component/base/config.tsx | 8 +- .../base/detail/text-link/index.less | 51 ++++++--- .../component/base/detail/text-link/index.tsx | 98 +++++++++------- .../apolloTable/component/base/edit/index.ts | 2 + .../component/base/edit/text-link/index.tsx | 108 ++++++++++++++++++ .../component/base/edit/text-link/styles.less | 26 +++++ 7 files changed, 235 insertions(+), 61 deletions(-) create mode 100644 components/apolloTable/component/base/edit/text-link/index.tsx create mode 100644 components/apolloTable/component/base/edit/text-link/styles.less diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index ef9c81b..8c756de 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -269,6 +269,9 @@ const Cell = (props: CellProps) => { componentAttr={transferColumn} formatter={detailConfig.getFormatter} cellRenderProps={cellRenderProps} + changeEdit={()=>{ + setStatus('edit'); + }} /> )} diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx index 0e22413..317e9df 100644 --- a/components/apolloTable/component/base/config.tsx +++ b/components/apolloTable/component/base/config.tsx @@ -21,6 +21,7 @@ import { ApolloTextArea, ApolloDateRange, ApolloRegion, + ApolloTextLink, } from './edit'; import { ApolloInputDetail, @@ -69,10 +70,13 @@ export const config: any = { // }, 2: { name: '超链接', - editComp: ApolloTextArea, - cellComp: CellContainer(ApolloTextArea), + editComp: ApolloTextLink, + cellComp: ApolloTextLink, getFormatter: GetFormatter.TEXTLINK, setFormatter: SetFormatter.TEXTLINK, + componentAttr: { + autoSize: { minRows: 3 }, + }, detailComp: ApolloTextLinkDetail, icon: 'iconziduan-chaolianjie', }, diff --git a/components/apolloTable/component/base/detail/text-link/index.less b/components/apolloTable/component/base/detail/text-link/index.less index 8f2143f..7d97f26 100644 --- a/components/apolloTable/component/base/detail/text-link/index.less +++ b/components/apolloTable/component/base/detail/text-link/index.less @@ -11,22 +11,29 @@ 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; + .content { + 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; + } } } } @@ -36,18 +43,24 @@ font-size: 12px; cursor: pointer; text-align: center; + display: none; .extend { width: 14px; border-radius: 50%; } } + &:hover{ + .moreBtn{ + display: block; + } + } } -.popContainer{ +.popContainer { width: 200px; - :global(.ant-popover-inner-content){ + :global(.ant-popover-inner-content) { padding: 0; } - .popContent{ + .popContent { padding: @paddingGen; } } diff --git a/components/apolloTable/component/base/detail/text-link/index.tsx b/components/apolloTable/component/base/detail/text-link/index.tsx index 9997740..3c8b8d4 100644 --- a/components/apolloTable/component/base/detail/text-link/index.tsx +++ b/components/apolloTable/component/base/detail/text-link/index.tsx @@ -5,7 +5,7 @@ import s from './index.less'; import IconFont from '@/submodule/components/IconFont'; export const ApolloTextLinkDetail = (props: any) => { - const { value, origin, formatter } = props; + const { value, origin, formatter, changeEdit } = props; const newValue = formatter ? formatter(value) : value; if (!newValue) return null; // 以逗号分隔 @@ -38,59 +38,77 @@ export const ApolloTextLinkDetail = (props: any) => {
- {arr.map((item, i) => { - return ( - - {item} - - ); - })} -
-
- {dotVisible && ( - { - e.stopPropagation(); - }} - placement="left" - overlayClassName={s.popContainer} - content={ -
{ - e.stopPropagation(); - }} + {dotVisible ? ( + { + e.stopPropagation(); + e.nativeEvent.stopImmediatePropagation(); + }}> + {arr.map((item, i) => { + return ( + +
{item}
+ + ); + })} +
+ } > +
+ {arr.map((item, i) => { + return ( + + {item} + + ); + })} +
+ + ) : ( +
{arr.map((item, i) => { return ( -
{item}
+ {item} ); })}
- } - > -
- -
- - )} + )} +
+ +
{ + changeEdit(); + }} + > + +
); }; diff --git a/components/apolloTable/component/base/edit/index.ts b/components/apolloTable/component/base/edit/index.ts index f25cedc..2819a1e 100644 --- a/components/apolloTable/component/base/edit/index.ts +++ b/components/apolloTable/component/base/edit/index.ts @@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select'; import { ApolloUpload } from './upload'; import { ApolloDateRange } from './dateRange'; import ApolloRegion from './region'; +import { ApolloTextLink } from './text-link'; export { ApolloInput, @@ -36,4 +37,5 @@ export { ApolloTextArea, ApolloDateRange, ApolloRegion, + ApolloTextLink, }; diff --git a/components/apolloTable/component/base/edit/text-link/index.tsx b/components/apolloTable/component/base/edit/text-link/index.tsx new file mode 100644 index 0000000..fef9244 --- /dev/null +++ b/components/apolloTable/component/base/edit/text-link/index.tsx @@ -0,0 +1,108 @@ +import React, { useEffect, useState } from 'react'; +import { Input, Modal } from 'antd'; +import styles from './styles.less'; +import { antiAssign } from '../../../../utils/utils'; +import { ApolloTextAreaProps } from '../editInterface'; +import { Consumer } from '../../../context'; + +export const ApolloTextLink = (props: ApolloTextAreaProps) => { + const { maxLength, onChange, value, cutLength, getDetail, rowData, onEmitChange, columnConfig, origin } = props; + const { columnChsName } = columnConfig; + const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']); + const [curValue, setCurValue] = useState(value); + const [visible, setVisible] = useState(false); + useEffect(() => { + if (origin !== 'editForm') { + setCurValue(value); + getMore(); + } + }, [value]); + // useEffect(() => { + // if (value && value.length === cutLength) { + // getMore(); + // } + // }, []); + + const changeValue = (e) => { + if (typeof onChange === 'function') { + onChange(e.target.value); + } + }; + + const changeCurValue = (e) => { + if (typeof onChange === 'function') { + setCurValue(e.target.value); + } + }; + + const hide = () => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); + } + setVisible(false); + } + + const confirmChange = () => { + if (typeof onEmitChange === 'function') { + onEmitChange(curValue); + } + setVisible(false); + } + + const getMore = async () => { + setVisible(true); + }; + + if (origin === 'editForm') { + return ( + + {({ locale }) => { + return ( +
+ + {!!maxLength && ( + + {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} + + )} +
+ ); + }} + + ) + } + + return ( + + {({ locale }) => { + return ( +
+ + + + {!!maxLength && ( + + {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} + + )} + +
+ ); + }} + + ); +}; diff --git a/components/apolloTable/component/base/edit/text-link/styles.less b/components/apolloTable/component/base/edit/text-link/styles.less new file mode 100644 index 0000000..6ce15f3 --- /dev/null +++ b/components/apolloTable/component/base/edit/text-link/styles.less @@ -0,0 +1,26 @@ +.container { + position: relative; + top: 0; + left: 0; + .inputForm{ + padding-bottom: 18px; + } + .wordNumberForm { + position: absolute; + right: 20px; + bottom: 2px; + color: #e1e1e1; + font-size: 12px; + } +} +.input { + padding-bottom: 18px; + max-height: 500px !important; +} +.wordNumber { + position: absolute; + right: 35px; + bottom: 80px; + color: #e1e1e1; + font-size: 12px; +} \ No newline at end of file -- 2.21.0