merge

components/apolloTable/component/base/edit/date/index.tsx

-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' ?
+        <DatePicker
+            className={styles.date}
+            // value={inputVal}
+            dropdownClassName={styles.dropdownClassName}
+            popupStyle={{ width: '350px' }}
+            {...selfProps}
+            onChange={changeValue}
+            onOpenChange={inputOnBlurFn}
+        /> :
         <DatePicker
             className={styles.date}
             dropdownClassName={styles.dropdownClassName}

components/apolloTable/component/base/edit/input/index.tsx

-import React from 'react';
+import React, { useState, useEffect } 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 } = 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 (
                     <div className={styles.container}>
-                        <Input
-                            className={styles.input}
-                            style={newStyle}
-                            {...selfProps}
-                            onChange={(e) => {
-                                changeValue(e.target.value);
-                            }}
-                        />
+                        {
+                            origin === 'editForm' ? <Input
+                                className={styles.input}
+                                style={newStyle}
+                                {...selfProps}
+                                value={inputVal}
+                                onBlur={inputOnBlurFn}
+                                onChange={(e) => {
+                                    changeValue(e.target.value);
+                                    setInputVal(e.target.value)
+                                }}
+                            /> : <Input
+                                    className={styles.input}
+                                    style={newStyle}
+                                    {...selfProps}
+                                    onChange={(e) => {
+                                        changeValue(e.target.value);
+                                    }}
+                                />
+                        }
+
                         {!!maxLength && (
                             <span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
                                 (value || '').length
-                            }/${maxLength}`}</span>
+                                }/${maxLength}`}</span>
                         )}
                     </div>
                 );

components/apolloTable/component/base/edit/number/index.tsx

-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 <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
+    const inputOnBlurFn = () => {
+        if (typeof onBlurFn === 'function') {
+            onBlurFn(props);
+        }
+    };
+    return origin === 'editForm' ?
+        <InputNumber value={inputVal} onBlur={inputOnBlurFn} className={styles.number} style={style} {...o} onChange={changeValue} />
+        : <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
 };

components/apolloTable/component/base/edit/onBlurFn.tsx

+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);
+    }
+};
+

components/apolloTable/component/base/edit/percentage/index.tsx

 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 (
         <ApolloNumber
             {...props}
@@ -18,6 +24,7 @@ export const ApolloPercentage = (props) => {
                 }
                 return '';
             }}
+            onBlur={inputOnBlurFn}
         />
     );
 };

components/apolloTable/component/base/edit/search/index.tsx

-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 (
-        <Search
-            className={s.search}
-            request={request}
-            fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
-            {...selfProps}
-            onChange={changeValue}
-            initDataType="onfocus"
-        />
+        origin === 'editForm' ?
+            <Search
+                className={s.search}
+                request={request}
+                fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
+                {...selfProps}
+                onChange={changeValue}
+                onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
+                initDataType="onfocus"
+            /> : <Search
+                className={s.search}
+                request={request}
+                fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
+                {...selfProps}
+                onChange={changeValue}
+                initDataType="onfocus"
+            />
     );
 };

components/apolloTable/component/base/edit/select/index.tsx

-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' ?
         <Select
             className={styles.select}
             {...selfProps}
             onChange={changeValue}
+            onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
+        >
+            {options.map((item) => {
+                return (
+                    <Select.Option key={item.id} value={item.id}>
+                        {item.name}
+                    </Select.Option>
+                );
+            })}
+        </Select> : <Select
+            className={styles.select}
+            {...selfProps}
+            onChange={changeValue}
         >
             {options.map((item) => {
                 return (

components/apolloTable/component/base/edit/text-select/index.tsx

-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 (
         <InputSearch
             className={s.select}
             request={request}
             fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
             {...selfProps}
+            onDropdownVisibleChange={singleBlurFn}
             onChange={changeValue}
             initDataType="onfocus"
         />

components/apolloTable/component/base/edit/textarea/index.tsx

 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 (
             <Consumer>
@@ -69,9 +76,14 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
                             <Input.TextArea
                                 className={styles.inputForm}
                                 {...selfProps}
-                                value={value}
-                                onChange={changeValue}
+                                value={inputVal}
+                                onBlur={inputOnBlurFn}
+                                onChange={(e) => {
+                                    changeValue(e)
+                                    setInputVal(e.target.value)
+                                }}
                             />
+
                             {!!maxLength && (
                                 <span className={styles.wordNumberForm}>
                                     {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}

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') {

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<Props, State> {
         }
     };
 
-    notFoundContent = (locale:any) => {
+    notFoundContent = (locale: any) => {
         const { fetching, loaded } = this.state;
         if (fetching) {
             return <Spin size="small" />;
@@ -230,7 +230,7 @@ class AssociationSearch extends React.Component<Props, State> {
         const { selfCom, autoFocus, onChange, ...rest } = this.props;
         return (
             <Consumer>
-                {({ locale }:any) => {
+                {({ locale }: any) => {
                     return (
                         <Select
                             filterOption={false}

components/apolloTable/component/base/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { transferAttr } from './_utils/transferAttr';
 import { BaseComponentProps, BaseComponentState } from '../interface';
 
-export const setFormat = (config:any, columnConfig: any, value: any, option?: any) => {
+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, {

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 (
             <FormItem key={columnName} label={this.renderLabel(item)}>
                 {getFieldDecorator(columnName, {
@@ -136,7 +155,9 @@ class FormWrap extends Component {
                         getPopupContainer={() => {
                             return this.wrapDom;
                         }}
-                    />,
+                        rowId={rowId}
+                        onBlurFn={onBlurFn1}
+                    />
                 )}
             </FormItem>
         );
@@ -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 (
             <Provider value={{ locale: this.getContext() }}>
@@ -187,27 +208,32 @@ class FormWrap extends Component {
                             })}
                         </Form>
                     </div>
-                    <div className={styles.buttonWrap} style={btnWrapStyle}>
-                        <div style={{ display: 'flex', justifyContent: 'center' }}>
-                            {isShowDelBtn ? (
-                                <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
-                                    {delLabel || '删除'}
+                    {
+                        hideOperateBtn ? null : (
+                            <div className={styles.buttonWrap} style={btnWrapStyle}>
+                                <div style={{ display: 'flex', justifyContent: 'center' }}>
+                                    {isShowDelBtn ? (
+                                        <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
+                                            {delLabel || '删除'}
+                                        </Button>
+                                    ) : null}
+                                    <Button onClick={this.handleCancel} className={styles.btnCls}>
+                                        取消
                                 </Button>
-                            ) : null}
-                            <Button onClick={this.handleCancel} className={styles.btnCls}>
-                                取消
-                            </Button>
-                            <Button
-                                onClick={this.handleSubmit}
-                                type="primary"
-                                className={styles.btnCls}
-                                loading={loading}
-                                id="submitBtn" // 用于业务监听此dom节点
-                            >
-                                确定
-                            </Button>
-                        </div>
-                    </div>
+                                    <Button
+                                        onClick={this.handleSubmit}
+                                        type="primary"
+                                        className={styles.btnCls}
+                                        loading={loading}
+                                        id="submitBtn" // 用于业务监听此dom节点
+                                    >
+                                        确定
+                                </Button>
+                                </div>
+                            </div>
+                        )
+                    }
+
                 </div>
             </Provider>
         );
@@ -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);