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' ? + {options.map((item) => { + return ( + + {item.name} + + ); + })} + : {options.map((item) => { return ( diff --git a/components/apolloTable/component/base/edit/text-select/index.tsx b/components/apolloTable/component/base/edit/text-select/index.tsx index 4cd551cef8f0e3937fa2627178f5d5af6756fc79..067115a8a03a0330f55bbbc6adb3e5c1635455d2 100644 --- a/components/apolloTable/component/base/edit/text-select/index.tsx +++ b/components/apolloTable/component/base/edit/text-select/index.tsx @@ -1,25 +1,32 @@ -import React from 'react'; +import React, { useRef } 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 selfProps = antiAssign(props, ['columnConfig', 'onChange', 'request']); - - const changeValue = (value) => { + const isOpen = useRef(); + const changeValue = (value: any) => { if (typeof onChange === 'function') { + if (typeof onBlurFn === 'function' && !isOpen.current) { + onBlurFn({ ...props, value }); + } onChange(value, value); } }; - + const singleBlurFn = (e: boolean) => { + isOpen.current = e; + }; return ( diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx index 80bfb9049ec33c930a8dd219ff52dfc1e1173f6f..b1d2b5f8dd8cc2e496791bfe3485dcaf7ad97ea4 100644 --- a/components/apolloTable/component/base/edit/textarea/index.tsx +++ b/components/apolloTable/component/base/edit/textarea/index.tsx @@ -1,12 +1,13 @@ 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 ApolloTextArea = (props: ApolloTextAreaProps) => { - const { maxLength, onChange, value, cutLength, getDetail, rowData, onEmitChange, columnConfig, origin } = props; + const { maxLength, onChange, value, 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); @@ -22,14 +23,21 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { // getMore(); // } // }, []); - - const changeValue = (e) => { + const [inputVal, setInputVal] = useState(value) + useEffect(() => { + setInputVal(value); + }, [value]); + const changeValue = (e: any) => { if (typeof onChange === 'function') { onChange(e.target.value); } }; - - const changeCurValue = (e) => { + const inputOnBlurFn = () => { + if (typeof onBlurFn === 'function') { + onBlurFn(props); + } + }; + const changeCurValue = (e: any) => { if (typeof onChange === 'function') { setCurValue(e.target.value); } @@ -59,7 +67,6 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { } } }; - if (origin === 'editForm') { return ( @@ -69,9 +76,14 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => { { + changeValue(e) + setInputVal(e.target.value) + }} /> + {!!maxLength && ( {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`} diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx index 5eaa53359955a42fab84c75697ff59ac6c31cac5..0d2b600ca2ce7e64636521ef9169abf719d34684 100644 --- a/components/apolloTable/component/base/edit/upload/index.tsx +++ b/components/apolloTable/component/base/edit/upload/index.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { ApolloUploadProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; import s from './index.less'; +import { onBlurFn } from '../onBlurFn'; import Upload from '../../extra/upload'; import addIcon from '../../../../assets/addIcon.png'; @@ -53,6 +54,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => { onChange(value); } toggleUploadDialog(false); + onBlurFn({ ...props, value }) }; const onCancel = () => { if (typeof onEmitChange === 'function') { diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx index 4603451636acddaf010646be2a29007a9407d5c8..d32d190c01aa82e7b6437c6b5db9928014bfb1d8 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.tsx +++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx @@ -20,9 +20,9 @@ interface Props { } enum Loaded { - Init='init', - Has='has', - Empty='empty', + Init = 'init', + Has = 'has', + Empty = 'empty', } interface State { @@ -214,7 +214,7 @@ class AssociationSearch extends React.Component { } }; - notFoundContent = (locale:any) => { + notFoundContent = (locale: any) => { const { fetching, loaded } = this.state; if (fetching) { return ; @@ -230,7 +230,7 @@ class AssociationSearch extends React.Component { const { selfCom, autoFocus, onChange, ...rest } = this.props; return ( - {({ locale }:any) => { + {({ locale }: any) => { return ( { +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 ? ( - - {delLabel || '删除'} + { + hideOperateBtn ? null : ( + + + {isShowDelBtn ? ( + + {delLabel || '删除'} + + ) : 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);