diff --git a/components/apolloTable/component/base/edit/date/index.tsx b/components/apolloTable/component/base/edit/date/index.tsx index 37d3ee0a53e6533e6c23163f49fe5c6df4ad572f..774c0699007fd4985fb8f0699cf608d262158c29 100644 --- a/components/apolloTable/component/base/edit/date/index.tsx +++ b/components/apolloTable/component/base/edit/date/index.tsx @@ -1,17 +1,34 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { DatePicker } from 'antd'; -import styles from './styles.less'; +import { onBlurFn } from '../onBlurFn'; import { antiAssign } from '../../../../utils/utils'; +import styles from './styles.less'; export const ApolloDate = (props: any) => { - const { onChange } = props; + const { origin, onChange } = props; const selfProps = antiAssign(props, ['onChange', 'columnConfig']); + const isOpen = useRef(); const changeValue = (date, dateString) => { if (typeof onChange === 'function') { + if (typeof onBlurFn === 'function' && !isOpen.current) { + onBlurFn({ ...props, value: date }); + } onChange(date, dateString); } }; - return ( + const inputOnBlurFn = (e: boolean) => { + isOpen.current = e; + }; + return (origin === 'editForm' ? + : { - const { maxLength, onChange, value, style } = props; + const { maxLength, onChange, value, style, origin } = props; const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'style', 'onEmitChange']); + const [inputVal, setInputVal] = useState(value) + useEffect(() => { + setInputVal(value); + }, [value]); const changeValue = (value: any) => { if (typeof onChange === 'function') { onChange(value); } }; - + const inputOnBlurFn = () => { + if (typeof onBlurFn === 'function') { + onBlurFn(props); + } + }; const newStyle: any = { ...style, }; @@ -33,18 +42,31 @@ export const ApolloInput = (props: ApolloInputProps) => { {({ locale }) => { return (
- { - changeValue(e.target.value); - }} - /> + { + origin === 'editForm' ? { + changeValue(e.target.value); + setInputVal(e.target.value) + }} + /> : { + changeValue(e.target.value); + }} + /> + } + {!!maxLength && ( {`${locale.alreadyInput} ${ (value || '').length - }/${maxLength}`} + }/${maxLength}`} )}
); diff --git a/components/apolloTable/component/base/edit/number/index.tsx b/components/apolloTable/component/base/edit/number/index.tsx index 72de75a2e90a0177aa8dd9f0ddae9f584ce1e911..bba36b2335f0c5b88aee39e03c85470f9729465e 100644 --- a/components/apolloTable/component/base/edit/number/index.tsx +++ b/components/apolloTable/component/base/edit/number/index.tsx @@ -1,15 +1,21 @@ -import React from 'react'; +import React, { useState, useEffect } 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 }: any = props; + const { onChange, origin, value }: any = props; const selfProps = antiAssign(props, ['columnConfig', 'onChange']); + const [inputVal, setInputVal] = useState(value) + useEffect(() => { + setInputVal(value); + }, [value]); const changeValue = (newValue: any) => { if (typeof onChange === 'function') { onChange(newValue); + setInputVal(inputVal); } }; const { onEmitChange, ...o } = selfProps; @@ -17,5 +23,12 @@ export const ApolloNumber = (props: ApolloNumberProps) => { if (origin === 'editForm') { style.height = '32px'; } - return ; + const inputOnBlurFn = () => { + if (typeof onBlurFn === 'function') { + onBlurFn(props); + } + }; + return origin === 'editForm' ? + + : ; }; diff --git a/components/apolloTable/component/base/edit/percentage/index.tsx b/components/apolloTable/component/base/edit/percentage/index.tsx index 492339a51a4f290e0ec0a2182fc0ef571774998f..f1647e689098d704bc31d97892878c947f0f84e0 100644 --- a/components/apolloTable/component/base/edit/percentage/index.tsx +++ b/components/apolloTable/component/base/edit/percentage/index.tsx @@ -1,8 +1,14 @@ import React from 'react'; +import { onBlurFn } from '../onBlurFn'; import { ApolloNumber } from '../number'; import { isNumber } from '../../../../utils/utils'; -export const ApolloPercentage = (props) => { +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/search/index.tsx b/components/apolloTable/component/base/edit/search/index.tsx index 4f76228fc25866f12b821746aae3e2de09142b90..2dc9bcad0c5833a25c3c020d1aee63e63e19748a 100644 --- a/components/apolloTable/component/base/edit/search/index.tsx +++ b/components/apolloTable/component/base/edit/search/index.tsx @@ -1,34 +1,57 @@ -import React from 'react'; +import React, { 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 } = props; + const { onChange, maxCount, isMultiple, request, origin } = props; const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'request', 'maxCount']); - const changeValue = (value) => { + const isOpen = useRef(); + if (isMultiple) { + selfProps.mode = 'multiple'; + } + const changeValue = (value: any) => { if (isMultiple && maxCount && maxCount < value.length) { message.warn(`最多选择${maxCount}个`); return; } if (typeof onChange === 'function') { + if (typeof onBlurFn === 'function' && !isOpen.current) { + onBlurFn({ ...props, value }); + } onChange(value, value); } }; - if (isMultiple) { - selfProps.mode = 'multiple'; - } + const singleBlurFn = (e: boolean) => { + isOpen.current = e; + }; + const multipleBlurFn = (e: boolean) => { + isOpen.current = e; + if (typeof onBlurFn === 'function' && !e) { + onBlurFn(props); + } + }; return ( - + origin === 'editForm' ? + : ); }; diff --git a/components/apolloTable/component/base/edit/select/index.tsx b/components/apolloTable/component/base/edit/select/index.tsx index 5312c432d61b18b966eb8c5d551bda00ec4d3065..beb1064c1fc2a8361b9b147e99c3d010c56d3985 100644 --- a/components/apolloTable/component/base/edit/select/index.tsx +++ b/components/apolloTable/component/base/edit/select/index.tsx @@ -1,26 +1,53 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { Select } from 'antd'; +import { onBlurFn } from '../onBlurFn'; import { ApolloSelectProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; import styles from './styles.less'; export const ApolloSelect = (props: ApolloSelectProps) => { - const { options = [], onChange, isMultiple } = props; + const { options = [], onChange, isMultiple, origin } = props; const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options']); + const isOpen = useRef(); + + if (isMultiple) { + selfProps.mode = 'multiple'; + } const changeValue = (value: any, option: any) => { if (typeof onChange === 'function') { + if (typeof onBlurFn === 'function' && !isOpen.current) { + onBlurFn({ ...props, value }); + } onChange(value, option); } }; - - if (isMultiple) { - selfProps.mode = 'multiple'; - } - return ( + const singleBlurFn = (e: boolean) => { + isOpen.current = e; + }; + const multipleBlurFn = (e: boolean) => { + isOpen.current = e; + if (typeof onBlurFn === 'function' && !e) { + onBlurFn(props); + } + }; + return (origin === 'editForm' ? : { +export const setFormat = (config: any, columnConfig: any, value: any, option?: any) => { const { columnAttrObj, columnType } = columnConfig || {}; const transferColumn = transferAttr(columnType, { ...(config.componentAttr || {}), @@ -13,7 +13,7 @@ export const setFormat = (config:any, columnConfig: any, value: any, option?: an return value; }; -export const getFormat = (config:any, columnConfig: any, value: any) => { +export const getFormat = (config: any, columnConfig: any, value: any) => { const { columnAttrObj, columnType } = columnConfig || {}; if (!value || !Array.isArray(value) || value.length <= 0) return undefined; const transferColumn = transferAttr(columnType, {