From 63f649ae5e6e326172093e029cb30dd244680696 Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Thu, 10 Sep 2020 11:11:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9F=BA=E7=A1=80=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/apolloTable/component/Cell.tsx | 1 + .../component/base/_utils/getFormatter.tsx | 13 +- .../component/base/_utils/setFormatter.tsx | 3 - .../apolloTable/component/base/config.tsx | 34 ++-- .../component/base/detail/index.tsx | 2 - .../base/detail/multiple-search/index.tsx | 3 - .../component/base/edit/date/index.tsx | 43 +++-- .../component/base/edit/dateRange/index.tsx | 48 +++--- .../component/base/edit/dateRange/styles.less | 2 +- .../component/base/edit/editInterface.tsx | 1 + .../apolloTable/component/base/edit/index.ts | 2 - .../component/base/edit/input/index.tsx | 65 +++----- .../base/edit/multiple-search/index.tsx | 3 - .../component/base/edit/number/index.tsx | 43 +++-- .../component/base/edit/number/styles.less | 2 +- .../component/base/edit/percentage/index.tsx | 7 - .../component/base/edit/rate/index.tsx | 20 +-- .../component/base/edit/search/index.less | 1 - .../component/base/edit/search/index.tsx | 46 +++--- .../edit/select/{styles.less => index.less} | 0 .../component/base/edit/select/index.tsx | 69 ++++---- .../component/base/edit/text-link/index.tsx | 153 ------------------ .../component/base/edit/text-link/styles.less | 29 ---- .../component/base/edit/text-select/index.tsx | 34 ++-- .../component/base/edit/textarea/index.tsx | 78 ++++++--- .../component/base/edit/upload/index.tsx | 20 +-- .../base/extra/associationSearch/index.tsx | 64 ++++---- components/apolloTable/editFormV3/index.tsx | 86 ++++++---- 28 files changed, 365 insertions(+), 507 deletions(-) delete mode 100644 components/apolloTable/component/base/detail/multiple-search/index.tsx delete mode 100644 components/apolloTable/component/base/edit/multiple-search/index.tsx rename components/apolloTable/component/base/edit/select/{styles.less => index.less} (100%) delete 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 d23aa9c..0181afd 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -379,6 +379,7 @@ const Cell = (props: CellProps) => { }} maxPopHeight={maxPopHeight} autoFocus={true} + origin="table" /> ); diff --git a/components/apolloTable/component/base/_utils/getFormatter.tsx b/components/apolloTable/component/base/_utils/getFormatter.tsx index 084bdc0..edee6cc 100644 --- a/components/apolloTable/component/base/_utils/getFormatter.tsx +++ b/components/apolloTable/component/base/_utils/getFormatter.tsx @@ -21,7 +21,9 @@ export const GetFormatter = { if (!newValue) { return undefined; } - return { value: newValue[0].value, label: newValue[0].text }; + return newValue.map((item) => { + return { value: item.value, label: item.text }; + }); }, TEXTAREA: (val) => { const newValue = initValue(val); @@ -134,15 +136,6 @@ export const GetFormatter = { LINK: (val) => { return Array.isArray(val) && val.length > 0 ? val : []; }, - MULTIPLE_SEARCH: (val) => { - const newValue = initValue(val); - if (!newValue) { - return undefined; - } - return newValue.map((item) => { - return { value: item.value, label: item.text }; - }); - }, TREE_SELECT: (val) => { const newValue = initValue(val); if (!newValue) { diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx index bf48c90..39827f0 100644 --- a/components/apolloTable/component/base/_utils/setFormatter.tsx +++ b/components/apolloTable/component/base/_utils/setFormatter.tsx @@ -76,9 +76,6 @@ export const SetFormatter = { }; }); }, - MULTIPLE_SEARCH: (val) => { - return SetFormatter.SEARCH(val); - }, RATE: (val) => { if (!isNumber(val)) return emptyModel; return [{ value: val, text: val }]; diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx index 768326a..4b69b52 100644 --- a/components/apolloTable/component/base/config.tsx +++ b/components/apolloTable/component/base/config.tsx @@ -8,7 +8,6 @@ import { ApolloCheck, ApolloDate, ApolloLink, - ApolloMultipleSearch, ApolloMultipleSelect, ApolloNumber, ApolloPercentage, @@ -29,7 +28,6 @@ import { ApolloCheckBoxDetail, ApolloDateDetail, ApolloLinkDetail, - ApolloMultipleSearchDetail, ApolloMultipleSelectDetail, ApolloNumberDetail, ApolloPercentageDetail, @@ -50,7 +48,7 @@ export const config: any = { 1: { name: '单行文本', editComp: ApolloInput, - cellComp: CellContainer(ApolloInput), + cellComp: ApolloInput, setFormatter: SetFormatter.INPUT, getFormatter: GetFormatter.INPUT, componentAttr: { @@ -104,7 +102,7 @@ export const config: any = { 5: { name: '复选', editComp: ApolloCheck, - cellComp: CellContainer(ApolloCheck), + cellComp: ApolloCheck, getFormatter: GetFormatter.CHECKBOX, setFormatter: SetFormatter.CHECKBOX, componentAttr: {}, @@ -114,7 +112,7 @@ export const config: any = { 6: { name: '下拉单选', editComp: ApolloSelect, - cellComp: CellContainer(ApolloSelect), + cellComp: ApolloSelect, componentAttr: { labelInValue: true, allowClear: true, @@ -127,7 +125,7 @@ export const config: any = { 7: { name: '下拉多选', editComp: ApolloMultipleSelect, - cellComp: CellContainer(ApolloMultipleSelect), + cellComp: ApolloMultipleSelect, componentAttr: { labelInValue: true, mode: 'multiple', @@ -140,7 +138,7 @@ export const config: any = { 8: { name: '评级', editComp: ApolloRate, - cellComp: CellContainer(ApolloRate), + cellComp: ApolloRate, componentAttr: { allowClear: true, }, @@ -152,7 +150,7 @@ export const config: any = { 9: { name: '数字输入', editComp: ApolloNumber, - cellComp: CellContainer(ApolloNumber), + cellComp: ApolloNumber, componentAttr: { precision: 2, }, @@ -164,7 +162,7 @@ export const config: any = { 10: { name: '百分比', editComp: ApolloPercentage, - cellComp: CellContainer(ApolloPercentage), + cellComp: ApolloPercentage, setFormatter: SetFormatter.PERCENTAGE, getFormatter: GetFormatter.PERCENTAGE, componentAttr: { @@ -176,7 +174,7 @@ export const config: any = { 11: { name: '日期', editComp: ApolloDate, - cellComp: CellContainer(ApolloDate), + cellComp: ApolloDate, componentAttr: { format: formatStr, showTime: true, @@ -196,15 +194,15 @@ export const config: any = { icon: 'iconziduan-yinyong', }, 13: { - name: '模糊搜索多选', - editComp: ApolloMultipleSearch, - cellComp: CellContainer(ApolloMultipleSearch), - getFormatter: GetFormatter.MULTIPLE_SEARCH, - setFormatter: SetFormatter.MULTIPLE_SEARCH, + name: '模糊搜索', + editComp: ApolloSearch, + cellComp: ApolloSearch, + getFormatter: GetFormatter.SEARCH, + setFormatter: SetFormatter.SEARCH, componentAttr: { allowClear: true, }, - detailComp: ApolloMultipleSearchDetail, + detailComp: ApolloSearchDetail, icon: 'iconziduan-lianxiangduoxuan', }, 14: { @@ -222,7 +220,7 @@ export const config: any = { 15: { name: '文本选择', editComp: ApolloInputSearch, - cellComp: CellContainer(ApolloInputSearch), + cellComp: ApolloInputSearch, getFormatter: GetFormatter.TEXT_SELECT, setFormatter: SetFormatter.TEXT_SELECT, componentAttr: { @@ -246,7 +244,7 @@ export const config: any = { 20: { name: '期间', editComp: ApolloDateRange, - cellComp: CellContainer(ApolloDateRange), + cellComp: ApolloDateRange, componentAttr: { format: formatStr, showTime: true, diff --git a/components/apolloTable/component/base/detail/index.tsx b/components/apolloTable/component/base/detail/index.tsx index b8283db..9a20d54 100644 --- a/components/apolloTable/component/base/detail/index.tsx +++ b/components/apolloTable/component/base/detail/index.tsx @@ -3,7 +3,6 @@ import { ApolloCascaderDetail } from './cascader'; import { ApolloCheckBoxDetail } from './checkbox'; import { ApolloDateDetail } from './date'; import { ApolloLinkDetail } from './link'; -import { ApolloMultipleSearchDetail } from './multiple-search'; import { ApolloMultipleSelectDetail } from './multiple-select'; import { ApolloNumberDetail } from './number'; import { ApolloPercentageDetail } from './percentage'; @@ -24,7 +23,6 @@ export { ApolloCheckBoxDetail, ApolloDateDetail, ApolloLinkDetail, - ApolloMultipleSearchDetail, ApolloMultipleSelectDetail, ApolloNumberDetail, ApolloPercentageDetail, diff --git a/components/apolloTable/component/base/detail/multiple-search/index.tsx b/components/apolloTable/component/base/detail/multiple-search/index.tsx deleted file mode 100644 index 2a9b745..0000000 --- a/components/apolloTable/component/base/detail/multiple-search/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ApolloSearchDetail } from '../search'; - -export const ApolloMultipleSearchDetail = ApolloSearchDetail; diff --git a/components/apolloTable/component/base/edit/date/index.tsx b/components/apolloTable/component/base/edit/date/index.tsx index e36dbee..89972cc 100644 --- a/components/apolloTable/component/base/edit/date/index.tsx +++ b/components/apolloTable/component/base/edit/date/index.tsx @@ -1,11 +1,10 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { DatePicker } from 'antd'; -import { onBlurFn } from '../onBlurFn'; import { antiAssign } from '../../../../utils/utils'; import styles from './styles.less'; export const ApolloDate = (props: any) => { - const { origin, onChange, showTime } = props; + const { onChange, showTime, onEmitChange, value } = props; const selfProps = antiAssign(props, [ 'onChange', 'columnConfig', @@ -13,49 +12,43 @@ export const ApolloDate = (props: any) => { 'rowData', 'cellRenderProps', 'maxPopHeight', + 'onEmitChange', 'getPopupContainer', 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const isOpen = useRef(); - const changeValue = (date, dateString) => { + const isOpen: any = useRef(); + const [curValue, setCurValue] = useState(value); + const changeValue = (date: any, dateString: string) => { + setCurValue(date); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function' && !isOpen.current) { - onBlurFn({ ...props, value: date }); - } onChange(date, dateString); } + if (typeof onEmitChange === 'function' && !isOpen.current) { + onEmitChange(date); + } }; - const dateOnBlurFn = (e: boolean) => { - isOpen.current = e; + const dateOnBlurFn = (open: boolean) => { + isOpen.current = open; }; - const timeOnBlurFn = (e: boolean) => { - isOpen.current = e; - if (typeof onBlurFn === 'function' && !e) { - onBlurFn(props); + const timeOnBlurFn = (open: boolean) => { + isOpen.current = open; + if (typeof onEmitChange === 'function' && !open) { + onEmitChange(curValue); } }; - return origin === 'editForm' ? ( + return ( - ) : ( - ); }; diff --git a/components/apolloTable/component/base/edit/dateRange/index.tsx b/components/apolloTable/component/base/edit/dateRange/index.tsx index dbf08a4..ab8315d 100644 --- a/components/apolloTable/component/base/edit/dateRange/index.tsx +++ b/components/apolloTable/component/base/edit/dateRange/index.tsx @@ -1,65 +1,59 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { DatePicker } from 'antd'; -import { onBlurFn } from '../onBlurFn'; import { antiAssign } from '../../../../utils/utils'; import styles from './styles.less'; const { RangePicker } = DatePicker; export const ApolloDateRange = (props: any) => { - const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, origin } = props; + const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, value, onEmitChange } = props; const selfProps = antiAssign(props, [ 'onChange', 'columnConfig', + 'onEmitChange', 'beginDatePlaceholder', 'endDatePlaceholder', 'tableId', 'rowData', + 'value', 'cellRenderProps', 'maxPopHeight', 'getPopupContainer', 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const isOpen = useRef(); - const changeValue = (date, dateString) => { + selfProps.showTime=true; + const isOpen: any = useRef(); + const [curValue, setCurValue] = useState(value); + const changeValue = (date: any, dateString: string) => { + setCurValue(date); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function' && !isOpen.current) { - onBlurFn({ ...props, value: date }); - } onChange(date, dateString); } + if (typeof onEmitChange === 'function' && !isOpen.current) { + onEmitChange(date); + } }; - const dateOnBlurFn = (e: boolean) => { - isOpen.current = e; + const dateOnBlurFn = (open: boolean) => { + isOpen.current = open; }; - const timeOnBlurFn = (e: boolean) => { - isOpen.current = e; - if (typeof onBlurFn === 'function' && !e) { - onBlurFn(props); + const timeOnBlurFn = (open: boolean) => { + isOpen.current = open; + if (typeof onEmitChange === 'function' && !open) { + onEmitChange(curValue); } }; - return origin === 'editForm' ? ( - - ) : ( + return ( ); }; diff --git a/components/apolloTable/component/base/edit/dateRange/styles.less b/components/apolloTable/component/base/edit/dateRange/styles.less index ae296b7..151c2bf 100644 --- a/components/apolloTable/component/base/edit/dateRange/styles.less +++ b/components/apolloTable/component/base/edit/dateRange/styles.less @@ -1,6 +1,6 @@ @import '../../../../media'; .date { - width: 100%; + width: 100% !important; height: 100%; border-radius: 0; div { diff --git a/components/apolloTable/component/base/edit/editInterface.tsx b/components/apolloTable/component/base/edit/editInterface.tsx index ef73180..d27f233 100644 --- a/components/apolloTable/component/base/edit/editInterface.tsx +++ b/components/apolloTable/component/base/edit/editInterface.tsx @@ -36,6 +36,7 @@ export interface ApolloSearchProps extends SelectProps, CommonProps { request: Function; isMultiple?: boolean; maxCount?: number; + maxPopHeight?: number; } export interface ApolloInputSearchProps extends SelectProps, CommonProps { type: string; diff --git a/components/apolloTable/component/base/edit/index.ts b/components/apolloTable/component/base/edit/index.ts index 2819a1e..bf533ac 100644 --- a/components/apolloTable/component/base/edit/index.ts +++ b/components/apolloTable/component/base/edit/index.ts @@ -3,7 +3,6 @@ import { ApolloCascader } from './cascader'; import { ApolloCheck } from './checkbox'; import { ApolloDate } from './date'; import { ApolloLink } from './link'; -import { ApolloMultipleSearch } from './multiple-search'; import { ApolloMultipleSelect } from './multiple-select'; import { ApolloNumber } from './number'; import { ApolloPercentage } from './percentage'; @@ -24,7 +23,6 @@ export { ApolloCheck, ApolloDate, ApolloLink, - ApolloMultipleSearch, ApolloMultipleSelect, ApolloNumber, ApolloPercentage, diff --git a/components/apolloTable/component/base/edit/input/index.tsx b/components/apolloTable/component/base/edit/input/index.tsx index 2a4e8f6..09e50d5 100644 --- a/components/apolloTable/component/base/edit/input/index.tsx +++ b/components/apolloTable/component/base/edit/input/index.tsx @@ -1,13 +1,12 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { Input } from 'antd'; import styles from './styles.less'; -import { onBlurFn } from '../onBlurFn'; import { antiAssign } from '../../../../utils/utils'; import { ApolloInputProps } from '../editInterface'; import { Consumer } from '../../../context'; export const ApolloInput = (props: ApolloInputProps) => { - const { maxLength, onChange, value, style, origin } = props; + const { maxLength, onChange, onEmitChange, value, style, origin } = props; const selfProps = antiAssign(props, [ 'columnConfig', 'onChange', @@ -22,22 +21,19 @@ export const ApolloInput = (props: ApolloInputProps) => { 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const [inputVal, setInputVal] = useState(value); - useEffect(() => { - setInputVal(value); - }, [value]); + const [curValue, setCurValue] = useState(value); const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { onChange(value); } }; - const inputOnBlurFn = () => { - if (typeof onBlurFn === 'function') { - onBlurFn(props); + const onBlur = (value: any) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); } }; const newStyle: any = { @@ -45,13 +41,15 @@ export const ApolloInput = (props: ApolloInputProps) => { }; const wordNumStyle: any = {}; if (maxLength) { + // 表单中样式 newStyle.paddingRight = '110px'; - if (style && style.minHeight) { - newStyle.minHeight = Number(style.minHeight) + 10; + if (origin === 'table' && style && style.minHeight) { + // 表格中样式 + newStyle.minHeight = Number(style.minHeight) + 20; newStyle.paddingRight = '11px'; - newStyle.paddingBottom = '28px'; + newStyle.paddingBottom = '18px'; wordNumStyle.bottom = '4px'; - wordNumStyle.marginTop = '0'; + wordNumStyle.top = 'auto'; } } return ( @@ -59,32 +57,21 @@ export const ApolloInput = (props: ApolloInputProps) => { {({ locale }) => { return (
- {origin === 'editForm' ? ( - { - changeValue(e.target.value); - setInputVal(e.target.value); - }} - /> - ) : ( - { - changeValue(e.target.value); - }} - /> - )} - + { + onBlur(e.target.value); + }} + onChange={(e: any) => { + changeValue(e.target.value); + }} + /> {!!maxLength && ( - {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} + {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`} )}
diff --git a/components/apolloTable/component/base/edit/multiple-search/index.tsx b/components/apolloTable/component/base/edit/multiple-search/index.tsx deleted file mode 100644 index 1b1e040..0000000 --- a/components/apolloTable/component/base/edit/multiple-search/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ApolloSearch } from '../search'; - -export const ApolloMultipleSearch = ApolloSearch; diff --git a/components/apolloTable/component/base/edit/number/index.tsx b/components/apolloTable/component/base/edit/number/index.tsx index 9bdccb3..e79dfa2 100644 --- a/components/apolloTable/component/base/edit/number/index.tsx +++ b/components/apolloTable/component/base/edit/number/index.tsx @@ -1,15 +1,16 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { InputNumber } from 'antd'; import styles from './styles.less'; -import { onBlurFn } from '../onBlurFn'; import { ApolloNumberProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; export const ApolloNumber = (props: ApolloNumberProps) => { - const { onChange, origin, value }: any = props; + const { onChange, origin, value, onEmitChange }: any = props; const selfProps = antiAssign(props, [ 'columnConfig', + 'onEmitChange', 'onChange', + 'value', 'tableId', 'rowData', 'cellRenderProps', @@ -19,40 +20,36 @@ export const ApolloNumber = (props: ApolloNumberProps) => { 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const [inputVal, setInputVal] = useState(value); - useEffect(() => { - setInputVal(value); - }, [value]); - const changeValue = (newValue: any) => { + const [curValue, setCurValue] = useState(value); + const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { - onChange(newValue); - setInputVal(inputVal); + onChange(value); + } + }; + const onBlur = (value: any) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); } }; - const { onEmitChange, ...o } = selfProps; const style: any = {}; if (origin === 'editForm') { style.height = '32px'; } - const inputOnBlurFn = () => { - if (typeof onBlurFn === 'function') { - onBlurFn(props); - } - }; - return origin === 'editForm' ? ( + + return ( { + onBlur(e.target.value); + }} className={styles.number} style={style} - {...o} + {...selfProps} onChange={changeValue} /> - ) : ( - ); }; diff --git a/components/apolloTable/component/base/edit/number/styles.less b/components/apolloTable/component/base/edit/number/styles.less index 31d8a29..53a5233 100644 --- a/components/apolloTable/component/base/edit/number/styles.less +++ b/components/apolloTable/component/base/edit/number/styles.less @@ -1,5 +1,5 @@ .number { - width: 100%; + width: 100% !important; height: 100%; :global(.ant-input-number-input-wrap){ height: 100%; diff --git a/components/apolloTable/component/base/edit/percentage/index.tsx b/components/apolloTable/component/base/edit/percentage/index.tsx index f1647e6..6e01fd6 100644 --- a/components/apolloTable/component/base/edit/percentage/index.tsx +++ b/components/apolloTable/component/base/edit/percentage/index.tsx @@ -1,14 +1,8 @@ import React from 'react'; -import { onBlurFn } from '../onBlurFn'; import { ApolloNumber } from '../number'; import { isNumber } from '../../../../utils/utils'; export const ApolloPercentage = (props: any) => { - const inputOnBlurFn = () => { - if (typeof onBlurFn === 'function') { - onBlurFn(props); - } - }; return ( { } return ''; }} - onBlur={inputOnBlurFn} /> ); }; diff --git a/components/apolloTable/component/base/edit/rate/index.tsx b/components/apolloTable/component/base/edit/rate/index.tsx index f70ec90..060e9f9 100644 --- a/components/apolloTable/component/base/edit/rate/index.tsx +++ b/components/apolloTable/component/base/edit/rate/index.tsx @@ -1,15 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Icon, Rate } from 'antd'; import { antiAssign } from '../../../../utils/utils'; import s from './index.less'; import { ApolloRateProps } from '../editInterface'; -import { onBlurFn } from '../onBlurFn'; export const ApolloRate = (props: ApolloRateProps) => { - const { onChange, columnConfig } = props; + const { onChange, columnConfig, onEmitChange, value } = props; const selfProps = antiAssign(props, [ 'columnConfig', + 'onEmitChange', 'onChange', + 'value', 'tableId', 'rowData', 'cellRenderProps', @@ -19,18 +20,18 @@ export const ApolloRate = (props: ApolloRateProps) => { 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - - const changeValue = (value) => { + const [curValue, setCurValue] = useState(value); + const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function') { - onBlurFn({ ...props, value }); - } onChange(value); } + if (typeof onEmitChange === 'function') { + onEmitChange(value); + } }; if (columnConfig.requiredFlag) { selfProps.allowClear = false; @@ -41,6 +42,7 @@ export const ApolloRate = (props: ApolloRateProps) => { {...selfProps} character={} onChange={changeValue} + value={curValue} /> ); }; diff --git a/components/apolloTable/component/base/edit/search/index.less b/components/apolloTable/component/base/edit/search/index.less index 0f1ae4e..b40eda7 100644 --- a/components/apolloTable/component/base/edit/search/index.less +++ b/components/apolloTable/component/base/edit/search/index.less @@ -1,6 +1,5 @@ .search { width: 100%; - //height: 100%; display: flex; :global(.ant-select-selection) { width: 100%; diff --git a/components/apolloTable/component/base/edit/search/index.tsx b/components/apolloTable/component/base/edit/search/index.tsx index c9ae0a2..52dcf69 100644 --- a/components/apolloTable/component/base/edit/search/index.tsx +++ b/components/apolloTable/component/base/edit/search/index.tsx @@ -1,18 +1,19 @@ -import React, { useRef } from 'react'; +import React, { useState, useRef } from 'react'; import { message } from 'antd'; import Search from '../../extra/associationSearch'; import { ApolloSearchProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; -import { onBlurFn } from '../onBlurFn'; import s from './index.less'; export const ApolloSearch = (props: ApolloSearchProps) => { - const { onChange, maxCount, isMultiple, request, maxPopHeight } = props; + const { onChange, maxCount, isMultiple, request, maxPopHeight, onEmitChange, value, origin } = props; const selfProps = antiAssign(props, [ 'columnConfig', + 'onEmitChange', 'onChange', 'isMultiple', 'options', + 'value', 'request', 'maxCount', 'request', @@ -23,36 +24,39 @@ export const ApolloSearch = (props: ApolloSearchProps) => { 'maxPopHeight', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const isOpen: any = useRef(); if (isMultiple) { selfProps.mode = 'multiple'; } + const [curValue, setCurValue] = useState(value); + const isOpen: any = useRef(); const changeValue = (value: any) => { if (isMultiple && maxCount && maxCount < value.length) { message.warn(`最多选择${maxCount}个`); return; } + setCurValue(value); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function' && !isOpen.current) { - onBlurFn({ ...props, value }); - } onChange(value, value); } + // 表格中的单选，选择后直接触发更新 + if (origin === 'table' && selfProps.mode !== 'multiple') { + onBlur(value); + } + if (selfProps.mode === 'multiple' && !isOpen.current) { + onBlur(value); + } }; - - const singleBlurFn = (e: boolean) => { - isOpen.current = e; - }; - const multipleBlurFn = (e: boolean) => { - isOpen.current = e; - if (typeof onBlurFn === 'function' && !e) { - onBlurFn(props); + const onBlur = (value: any) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value, value); } }; + const onDropdownVisibleChange = (open: boolean) => { + isOpen.current = open; + }; const extra: any = {}; // 表格中限制下拉类组件弹框高度 @@ -62,17 +66,23 @@ export const ApolloSearch = (props: ApolloSearchProps) => { maxHeight: maxPopHeight, }; } - + if (origin === 'table') { + extra.defaultOpen = true; + } + if (selfProps.mode === 'multiple') { + extra.onDropdownVisibleChange = onDropdownVisibleChange; + } return ( ); }; diff --git a/components/apolloTable/component/base/edit/select/styles.less b/components/apolloTable/component/base/edit/select/index.less similarity index 100% rename from components/apolloTable/component/base/edit/select/styles.less rename to components/apolloTable/component/base/edit/select/index.less diff --git a/components/apolloTable/component/base/edit/select/index.tsx b/components/apolloTable/component/base/edit/select/index.tsx index 0a30213..b7548fc 100644 --- a/components/apolloTable/component/base/edit/select/index.tsx +++ b/components/apolloTable/component/base/edit/select/index.tsx @@ -1,69 +1,74 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { Select } from 'antd'; -import { onBlurFn } from '../onBlurFn'; import { ApolloSelectProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; -import styles from './styles.less'; -import s from "@/submodule/components/apolloTable/component/base/edit/search/index.less"; +import s from './index.less'; export const ApolloSelect = (props: ApolloSelectProps) => { - const { options = [], onChange, isMultiple, maxPopHeight } = props; + const { options = [], onChange, isMultiple, maxPopHeight, onEmitChange, value, origin } = props; const selfProps = antiAssign(props, [ + 'tableId', + 'rowId', + 'rowData', 'columnConfig', + 'onEmitChange', + 'value', 'onChange', + 'events', 'isMultiple', 'options', + 'disableOptions', 'maxPopHeight', 'request', - 'tableId', - 'rowData', + 'form', 'cellRenderProps', 'getCalendarContainer', - 'disableOptions', - 'rowId', - 'onBlurFn', 'getInstanceDetail', ]); selfProps.disabled = !!props.disabled; - const isOpen: any = useRef(); if (isMultiple) { selfProps.mode = 'multiple'; } - const changeValue = (value: any, option: any) => { + const [curValue, setCurValue] = useState(value); + const isOpen: any = useRef(); + const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function' && !isOpen.current) { - onBlurFn({ ...props, value }); - } - onChange(value, option); + onChange(value, value); + } + // 表格中的单选，选择后直接触发更新 + if (origin === 'table' && selfProps.mode !== 'multiple') { + onBlur(value); + } + if (selfProps.mode === 'multiple' && !isOpen.current) { + onBlur(value); } }; - const singleBlurFn = (e: boolean) => { - isOpen.current = e; - }; - const multipleBlurFn = (e: boolean) => { - isOpen.current = e; - if (typeof onBlurFn === 'function' && !e) { - onBlurFn(props); + const onBlur = (value: any) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value, value); } }; + const onDropdownVisibleChange = (open: boolean) => { + isOpen.current = open; + }; const extra: any = {}; if (maxPopHeight) { - extra.dropdownClassName = s.searchDropdown; + extra.dropdownClassName = s.selectDropdown; extra.dropdownStyle = { maxHeight: maxPopHeight, }; } - + if (origin === 'table') { + extra.defaultOpen = true; + } + if (selfProps.mode === 'multiple') { + extra.onDropdownVisibleChange = onDropdownVisibleChange; + } return ( - {options.map((item) => { return ( diff --git a/components/apolloTable/component/base/edit/text-link/index.tsx b/components/apolloTable/component/base/edit/text-link/index.tsx index 610b2ab..6676d00 100644 --- a/components/apolloTable/component/base/edit/text-link/index.tsx +++ b/components/apolloTable/component/base/edit/text-link/index.tsx @@ -1,156 +1,3 @@ import { ApolloTextArea } from '../textarea'; export const ApolloTextLink = ApolloTextArea; - -// import React, { useEffect, useState } from 'react'; -// import { Input, Modal } from 'antd'; -// import styles from './styles.less'; -// import { onBlurFn } from '../onBlurFn'; -// import { antiAssign } from '../../../../utils/utils'; -// import { ApolloTextAreaProps } from '../editInterface'; -// import { Consumer } from '../../../context'; -// -// export const ApolloTextLink = (props: ApolloTextAreaProps) => { -// const { maxLength, onChange, value, onEmitChange, columnConfig, origin, tableId } = props; -// const { columnChsName } = columnConfig; -// const selfProps = antiAssign(props, [ -// 'columnConfig', -// 'onChange', -// 'value', -// 'cutLength', -// 'getDetail', -// 'rowData', -// 'onEmitChange', -// 'isMultiple', -// 'origin', -// 'tableId', -// 'cellRenderProps', -// 'maxPopHeight', -// 'getPopupContainer', -// 'getCalendarContainer', -// 'disableOptions', -// 'rowId', -// 'onBlurFn', -// 'getInstanceDetail', -// ]); -// selfProps.disabled = !!props.disabled; -// const [curValue, setCurValue] = useState(value); -// const [visible, setVisible] = useState(false); -// useEffect(() => { -// if (origin !== 'editForm') { -// getMore(); -// } -// }, []); -// const [inputVal, setInputVal] = useState(value); -// useEffect(() => { -// setInputVal(value); -// }, [value]); -// // useEffect(() => { -// // if (value && value.length === cutLength) { -// // getMore(); -// // } -// // }, []); -// const inputOnBlurFn = () => { -// if (typeof onBlurFn === 'function') { -// onBlurFn(props); -// } -// }; -// const changeValue = (e) => { -// if (typeof onChange === 'function') { -// onChange(e.target.value); -// } -// }; -// -// const changeCurValue = (e) => { -// if (typeof onChange === 'function') { -// setCurValue(e.target.value); -// } -// }; -// -// const clearEdit = () => { -// // 清除所有dom的编辑状态 -// const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`); -// if (doms) { -// doms.forEach((item) => { -// item.setAttribute('data-editing-cell', '0'); -// }); -// } -// }; -// -// const hide = () => { -// if (typeof onEmitChange === 'function') { -// onEmitChange(value); -// } -// clearEdit(); -// setVisible(false); -// }; -// -// const confirmChange = () => { -// if (typeof onEmitChange === 'function') { -// onEmitChange(curValue); -// } -// clearEdit(); -// setVisible(false); -// }; -// -// const getMore = async () => { -// setVisible(true); -// }; -// -// if (origin === 'editForm') { -// return ( -// -// {({ locale }) => { -// return ( -//
-// { -// changeValue(e); -// setInputVal(e.target.value); -// }} -// /> -// {!!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 deleted file mode 100644 index 6c848f5..0000000 --- a/components/apolloTable/component/base/edit/text-link/styles.less +++ /dev/null @@ -1,29 +0,0 @@ -.container { - position: relative; - top: 0; - left: 0; - .inputForm{ - padding-bottom: 18px; - } - .wordNumberForm { - position: absolute; - right: 20px; - bottom: 2px; - color: #e1e1e1; - font-size: 12px; - } - .cellInput{ - user-select: none; - } -} -.input { - padding-bottom: 18px; - max-height: 500px !important; -} -.wordNumber { - position: absolute; - right: 35px; - bottom: 80px; - color: #e1e1e1; - font-size: 12px; -} diff --git a/components/apolloTable/component/base/edit/text-select/index.tsx b/components/apolloTable/component/base/edit/text-select/index.tsx index 951fbd4..b15e41d 100644 --- a/components/apolloTable/component/base/edit/text-select/index.tsx +++ b/components/apolloTable/component/base/edit/text-select/index.tsx @@ -1,31 +1,45 @@ -import React, { useRef } from 'react'; +import React, { useState } from 'react'; import InputSearch from '../../extra/dataEntry/textSelect'; import { ApolloInputSearchProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; -import { onBlurFn } from '../onBlurFn'; import s from './index.less'; export const ApolloInputSearch = (props: ApolloInputSearchProps) => { - const { onChange, request } = props; + const { onChange, request, onEmitChange, origin, value } = props; const selfProps = antiAssign(props, [ 'columnConfig', + 'onEmitChange', + 'value', 'onChange', 'request', 'tableId', + 'rowId', + 'rowData', 'cellRenderProps', 'getCalendarContainer', + 'events', + 'isMultiple', + 'options', + 'disableOptions', + 'maxPopHeight', + 'form', + 'getInstanceDetail', ]); - const isOpen = useRef(); + const [curValue, setCurValue] = useState(value); const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { - if (typeof onBlurFn === 'function' && !isOpen.current) { - onBlurFn({ ...props, value }); - } onChange(value, value); } + // 表格中的单选，选择后直接触发更新 + if (origin === 'table' && selfProps.mode !== 'multiple') { + onBlur(value); + } }; - const singleBlurFn = (e: boolean) => { - isOpen.current = e; + const onBlur = (value: any) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value, value); + } }; return ( { request={request} fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }} {...selfProps} - onDropdownVisibleChange={singleBlurFn} onChange={changeValue} initDataType="onfocus" + value={curValue} /> ); }; diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx index e0b618f..bc3e7e7 100644 --- a/components/apolloTable/component/base/edit/textarea/index.tsx +++ b/components/apolloTable/component/base/edit/textarea/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState, useRef } from 'react'; import { Input } from 'antd'; import styles from './styles.less'; -import { onBlurFn } from '../onBlurFn'; import { antiAssign } from '../../../../utils/utils'; import { ApolloTextAreaProps } from '../editInterface'; import { Consumer } from '../../../context'; @@ -36,8 +35,8 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { 'origin', 'disableOptions', 'rowId', - 'onBlurFn', 'getInstanceDetail', + 'isMultiple', ]); selfProps.disabled = !!props.disabled; const [curValue, setCurValue] = useState(value); @@ -61,25 +60,15 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { } }; - const changeValue = (e: any) => { + const changeValue = (value: any) => { + setCurValue(value); if (typeof onChange === 'function') { - onChange(e.target.value); + onChange(value); } }; - const inputOnBlurFn = () => { - if (origin === 'editForm') { - if (typeof onBlurFn === 'function') { - onBlurFn(props); - } - } else { - if (typeof onEmitChange === 'function') { - onEmitChange(curValue); - } - } - }; - const changeCurValue = (e: any) => { - if (typeof onChange === 'function') { - setCurValue(e.target.innerText); + const onBlur = () => { + if (typeof onEmitChange === 'function') { + onEmitChange(curValue); } }; @@ -93,8 +82,10 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { { + changeValue(e.target.value); + }} /> {!!maxLength && ( @@ -120,6 +111,45 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { style.bottom = 0; style.top = 'auto'; } + delete selfProps.autoSize; + + let lock = true; + // 中文输入法问题 + const onCompositionStart = () => { + lock = false; + }; + const onCompositionEnd = (e: any) => { + lock = true; + changeDivValue(e); + }; + const changeDivValue = (e: any) => { + if (lock) { + let text = e.target.innerText; + if (text.length > maxLength) { + text = text.substr(0, maxLength); + e.target.innerText = text; + placeCaretAtEnd(divInput.current); + } + changeValue(text); + } + }; + // 粘贴div(contenteditable = "true")富文本转为纯文本 + const onPaste = (e: any) => { + e.stopPropagation(); + e.preventDefault(); + let text = ''; + const event = e.originalEvent || e; + if (event.clipboardData && event.clipboardData.getData) { + text = event.clipboardData.getData('text/plain'); + } else if (window.clipboardData && window.clipboardData.getData) { + text = window.clipboardData.getData('Text'); + } + if (document.queryCommandSupported('insertText')) { + document.execCommand('insertText', false, text); + } else { + document.execCommand('paste', false, text); + } + }; return ( @@ -131,8 +161,12 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { contentEditable={!selfProps.disabled} className={styles.divInput} {...selfProps} - onBlur={inputOnBlurFn} - onInput={changeCurValue} + onBlur={onBlur} + onCompositionStart={onCompositionStart} + onCompositionEnd={onCompositionEnd} + onPaste={onPaste} + onInput={changeDivValue} + suppressContentEditableWarning > {value} diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx index fb0e394..cbe612d 100644 --- a/components/apolloTable/component/base/edit/upload/index.tsx +++ b/components/apolloTable/component/base/edit/upload/index.tsx @@ -45,7 +45,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => { if (typeof onChange === 'function') { onChange(value); } - onBlurFn({ ...props, value }); + // onBlurFn({ ...props, value }); } }; const [visible, setVisible] = useState(false); @@ -55,15 +55,15 @@ export const ApolloUpload = (props: ApolloUploadProps) => { setVisible(flag); }; // 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听 - useEffect(() => { - document.addEventListener('click', onBlur, false); - if (origin !== 'editForm') { - toggleUploadDialog(true); - } - return () => { - document.removeEventListener('click', onBlur, false); - }; - }, []); + // useEffect(() => { + // document.addEventListener('click', onBlur, false); + // if (origin !== 'editForm') { + // toggleUploadDialog(true); + // } + // return () => { + // document.removeEventListener('click', onBlur, false); + // }; + // }, []); const clearEdit = () => { // 清除所有dom的编辑状态 diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx index d32d190..6f4bb94 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.tsx +++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx @@ -120,14 +120,6 @@ class AssociationSearch extends React.Component { } }; - onBlur = () => { - const { onBlur } = this.props; - this.setState({ searchStr: '', canFocus: true }); - if (typeof onBlur === 'function') { - onBlur(); - } - }; - formaterData = (data: any) => { const { fieldNames } = this.state; if (fieldNames) { @@ -184,34 +176,44 @@ class AssociationSearch extends React.Component { } }; - handleChange = (item: any) => { + handleChange = (value: any) => { const { onChange } = this.props; - const { data } = this.state; if (onChange) { - if (Array.isArray(item)) { - const itemData = item.map((temp: any) => { - return { - ...temp, - value: temp.key, - ...(data.find((ls: any) => { - return ls.value === temp.key; - }) || {}), - }; - }); - onChange(itemData); - } else if (item) { - onChange({ - ...item, - value: item.key, + onChange(this.formatValue(value)); + } + }; + + onBlur = (value: any) => { + const { onBlur } = this.props; + this.setState({ searchStr: '', canFocus: true }); + if (typeof onBlur === 'function') { + onBlur(this.formatValue(value)); + } + }; + + formatValue = (value: any) => { + const { data } = this.state; + if (Array.isArray(value)) { + return value.map((temp: any) => { + return { + ...temp, + value: temp.key, ...(data.find((ls: any) => { - return ls.value === item.key; + return ls.value === temp.key; }) || {}), - }); - } else { - // 集成清空操作 - onChange(item); - } + }; + }); + } else if (value) { + return { + ...value, + value: value.key, + ...(data.find((ls: any) => { + return ls.value === value.key; + }) || {}), + }; } + // 集成清空操作 + return value; }; notFoundContent = (locale: any) => { diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx index 5513a9d..efb2302 100644 --- a/components/apolloTable/editFormV3/index.tsx +++ b/components/apolloTable/editFormV3/index.tsx @@ -14,15 +14,16 @@ * 失去焦点：onBlurFn * */ import React, { Component } from 'react'; -import { Form, Button } from 'antd'; -import { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter'; -import { defaultLocale } from '@/submodule/components/apolloTable/locale'; +import { Form, Button, message } from 'antd'; import _ from 'lodash'; -import styles from './index.less'; +import { emptyModel } from '../component/base/_utils/setFormatter'; +import { defaultLocale } from '../locale'; import { config } from '../component/base/config'; import { transferAttr } from '../component/base/_utils/transferAttr'; import { getFormat, setFormat } from '../component/base'; import { Provider } from '../component/context'; +import FormHelper from '../utils/formHelper'; +import s from './index.less'; const FormItem = Form.Item; @@ -82,9 +83,9 @@ class FormWrap extends Component { renderLabel = (item) => { // const { icon } = config[item.columnType]; return ( - - {/* icon &&
{icon}
*/} - {item.columnChsName} + + {/* icon &&
{icon}
*/} + {item.columnChsName} ); }; @@ -108,7 +109,7 @@ class FormWrap extends Component { renderEditForm = (item) => { const { getFieldDecorator } = this.props.form; - const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props; + const { rowData, rowId, getInstanceDetail, onEmitChange } = this.props; const { columnType, columnName, @@ -121,6 +122,7 @@ class FormWrap extends Component { validateTrigger = 'onChange', dynamicCellConfigDTO, cellRenderProps, + requiredFlag, } = item; let detailConfig: any; if (typeof renderEditForm === 'function') { @@ -135,22 +137,47 @@ class FormWrap extends Component { }; const transferColumn = transferAttr(columnType, newProps); const disabled = readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag); - const onBlurFn1 = (changedValue: any, newVal: any) => { - if (typeof onBlurFn === 'function') { - let temp: any[] = []; + const emitChange = (changedValue: any, optionValue: any) => { + let temp: any[] = []; + value && value.map((item: any) => { temp.push({ text: item.text, value: item.value }); }); - if (temp.length === 0) { - temp = emptyModel; - } - if (!!item.requiredFlag && Array.isArray(newVal) && !newVal[0].value) { + if (temp.length === 0) { + temp = emptyModel; + } + if (_.isEqual(temp, changedValue)) { + return; + } + changeValue(changedValue, optionValue); + }; + const changeValue = async (changedValue: any, optionValue: any) => { + // 校验必填项 + if (requiredFlag) { + if (!changedValue || changedValue.length === 0) { + message.error('该字段为必填项'); return; } - if (_.isEqual(temp, newVal)) { - return; + if (changedValue.length === 1) { + const data = changedValue[0]; + if (!data.value && !data.text && data.value !== 0) { + message.error('该字段为必填项'); + return; + } } - onBlurFn(changedValue); + } + const extraData = FormHelper.changeTableData({ + item, + changedKey: columnName, + changedValue, + originValue: optionValue, + }); + extraData.push({ + columnCode: columnName, + cellValueList: changedValue, + }); + if (typeof onEmitChange === 'function') { + onEmitChange(extraData); } }; return ( @@ -170,7 +197,10 @@ class FormWrap extends Component { columnConfig={item} disabled={disabled} rowId={rowId} - onBlurFn={onBlurFn1} + onEmitChange={(changedValue: any, optionValue: any) => { + const value = setFormat(detailConfig, item, changedValue, optionValue); + emitChange(value, optionValue); + }} rowData={{ id: rowId, rowData }} cellRenderProps={cellRenderProps} origin="editForm" @@ -206,13 +236,13 @@ class FormWrap extends Component { return ( -
-
-
{name}
+
+
+
{name}
{ this.wrapDom = r; }} @@ -222,7 +252,7 @@ class FormWrap extends Component { return (
1 && i % colsNum === 0 ? '-50px' : 0, @@ -235,21 +265,21 @@ class FormWrap extends Component { })}
-
+
{isShowDelBtn && ( - )} {!hideOperateBtn && (
-