编辑form增加onblur方法

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,6 +20,7 @@ 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';
 
@@ -27,6 +32,7 @@ class FormWrap extends Component {
         e.stopPropagation();
         const { rowId, form, handleSubmit, data, rowData } = this.props;
         form.validateFieldsAndScroll((err, values) => {
+            console.log(data, 8888)
             if (!err) {
                 const newValues: any[] = [];
                 _.keys(values).map((key) => {
@@ -82,7 +88,7 @@ class FormWrap extends Component {
 
     renderEditForm = (item) => {
         const { getFieldDecorator } = this.props.form;
-        const { rowData } = this.props;
+        const { rowData, onBlurFn, rowId } = this.props;
         const {
             columnType,
             columnName,
@@ -108,7 +114,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, {
@@ -121,8 +140,10 @@ class FormWrap extends Component {
                         {...transferColumn}
                         columnConfig={item}
                         disabled={disabled}
+                        rowId={rowId}
                         origin="editForm"
                         form={this.props.form}
+                        onBlurFn={onBlurFn1}
                     />,
                 )}
             </FormItem>
@@ -143,7 +164,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() }}>
@@ -174,27 +195,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>
         );
@@ -219,11 +245,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);