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/onBlurFn.tsx b/components/apolloTable/component/base/edit/onBlurFn.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c9153580aaa80bb5bb191e429dc05f382902e5d5 --- /dev/null +++ b/components/apolloTable/component/base/edit/onBlurFn.tsx @@ -0,0 +1,20 @@ +import { setFormat } from '../index'; +import { config } from '../config'; + +export const onBlurFn = (props: any) => { + const { columnConfig, rowId, onBlurFn, value } = props; + const { type } = columnConfig + const extraData: any[] = [] + if (typeof onBlurFn === 'function') { + const newVal = setFormat(config[type], columnConfig, value) + extraData.push({ + columnCode: columnConfig.columnName, + cellValueList: newVal, + }); + onBlurFn({ + rowId, + value: extraData, + }, newVal); + } +}; + 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, { diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx index f0f96db1fef6dee3b7298d756084e1885c9ded89..6de90564fc5eceb00e2f6ee5ae1fe2618b8cc621 100644 --- a/components/apolloTable/editFormV3/index.tsx +++ b/components/apolloTable/editFormV3/index.tsx @@ -8,6 +8,10 @@ * 监听表单值发生变化是的回掉:onValuesChange:Function * * 样式:propClass:object + * + * 增加字段:hideOperateBtn,有该字段,隐藏表单底部操作按钮 + * + * 失去焦点:onBlurFn * */ import React, { Component } from 'react'; import { Form, Button } from 'antd'; @@ -16,18 +20,20 @@ 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 { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter'; import { defaultLocale } from '@/submodule/components/apolloTable/locale'; import _ from 'lodash'; const FormItem = Form.Item; class FormWrap extends Component { - wrapDom:any; + wrapDom: any; handleSubmit = (e) => { e.preventDefault(); e.stopPropagation(); const { rowId, form, handleSubmit, data, rowData, detailType } = this.props; form.validateFieldsAndScroll((err, values) => { + console.log(data, 8888) if (!err) { const newValues: any[] = []; _.keys(values).map((key) => { @@ -85,7 +91,7 @@ class FormWrap extends Component { renderEditForm = (item) => { const { getFieldDecorator } = this.props.form; - const { rowData, rowId, getInstanceDetail } = this.props; + const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props; const { columnType, columnName, @@ -112,7 +118,20 @@ class FormWrap extends Component { }; const transferColumn = transferAttr(columnType, newProps); const disabled = readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag); + const onBlurFn1 = (changedValue: any, newVal: any) => { + let temp: any[] = []; + value.map((item: any) => { + temp.push({ text: item.text, value: item.value }); + }); + if (temp.length === 0) { + temp = emptyModel; + } + if (_.isEqual(temp, newVal)) { + return; + } + onBlurFn(changedValue) + } return ( {getFieldDecorator(columnName, { @@ -136,7 +155,9 @@ class FormWrap extends Component { getPopupContainer={() => { return this.wrapDom; }} - />, + rowId={rowId} + onBlurFn={onBlurFn1} + /> )} ); @@ -156,7 +177,7 @@ class FormWrap extends Component { }; render() { - const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel } = this.props; + const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn } = this.props; return ( @@ -187,27 +208,32 @@ class FormWrap extends Component { })} -
-
- {isShowDelBtn ? ( - + ) : null} + - ) : null} - - -
-
+ + + + ) + } +
); @@ -232,11 +258,8 @@ function mapPropsToFields(props) { }); return returnObj; } - -function onValuesChange(props, changedValues, allValues) { - if (props.changeValue) { - props.changeValue(changedValues, allValues); - } +function onValuesChange(props: any, changedValues: any, allValues: any) { + if (props.changeValue) { } } export default Form.create({ name: 'form_view' })(FormWrap);