增加表单即时编辑的校验

components/apolloTable/editFormV3/index.tsx

@@ -15,25 +15,26 @@
  *  */
 import React, { Component } from 'react';
 import { Form, Button } from 'antd';
+import { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter';
+import { defaultLocale } from '@/submodule/components/apolloTable/locale';
+import _ from 'lodash';
 import styles from './index.less';
 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;
+        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) => {
@@ -90,7 +91,7 @@ class FormWrap extends Component {
     };
 
     renderEditForm = (item) => {
-        const { getFieldDecorator } = this.props.form;
+        const { getFieldDecorator, validateFieldsAndScroll } = this.props.form;
         const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props;
         const {
             columnType,
@@ -119,24 +120,28 @@ 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 });
+            validateFieldsAndScroll((err:any) => {
+                // 即时编辑时需要对表单必填等规则校验
+                if (!err) {
+                    let temp: any[] = [];
+                    value.map((item: any) => {
+                        temp.push({ text: item.text, value: item.value });
+                    });
+                    if (temp.length === 0) {
+                        temp = emptyModel;
+                    }
+                    if (!!item.requiredFlag && Array.isArray(newVal) && !newVal[0].value) {
+                        return;
+                    }
+                    if (_.isEqual(temp, newVal)) {
+                        return;
+                    }
+                    if (typeof onBlurFn === 'function') {
+                        onBlurFn(changedValue);
+                    }
+                }
             });
-            if (temp.length === 0) {
-                temp = emptyModel;
-            }
-            if (!!item.requiredFlag && Array.isArray(newVal) && !newVal[0].value) {
-                return
-            }
-            if (_.isEqual(temp, newVal)) {
-                return;
-            }
-            if (typeof onBlurFn === 'function') {
-                onBlurFn(changedValue)
-            }
-        }
+        };
         return (
             <FormItem key={columnName} label={this.renderLabel(item)}>
                 {getFieldDecorator(columnName, {
@@ -182,12 +187,14 @@ class FormWrap extends Component {
     };
 
     render() {
-        const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn } = this.props;
+        const {
+            loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn,
+        } = this.props;
 
         return (
             <Provider value={{ locale: this.getContext() }}>
                 <div className={styles.wrap}>
-                    <p className={styles.titleCls}>{name || '客户跟进'}</p>
+                    <p className={styles.titleCls}>{name}</p>
                     <div
                         id="gotop"
                         className={styles.formItemCls}
@@ -224,7 +231,7 @@ class FormWrap extends Component {
                                     ) : null}
                                     <Button onClick={this.handleCancel} className={styles.btnCls}>
                                         取消
-                                </Button>
+                                    </Button>
                                     <Button
                                         onClick={this.handleSubmit}
                                         type="primary"
@@ -233,7 +240,7 @@ class FormWrap extends Component {
                                         id="submitBtn" // 用于业务监听此dom节点
                                     >
                                         确定
-                                </Button>
+                                    </Button>
                                 </div>
                             </div>
                         )
@@ -245,26 +252,4 @@ class FormWrap extends Component {
     }
 }
 
-function mapPropsToFields(props) {
-    const returnObj = {};
-    const { data, renderEditForm, rowData } = props;
-    data.forEach((el) => {
-        // let detailConfig: any;
-        // if (typeof renderEditForm === 'function') {
-        //     detailConfig = renderEditForm({ cellData: el.value, rowData, columnConfig: el });
-        // } else {
-        //     detailConfig = config[String(el.columnType)] || config['1'];
-        // }
-        // const formatValue = getFormat(detailConfig, el, el.value);
-        // console.log('formatValue',formatValue)
-        returnObj[el.columnType] = Form.createFormField({
-            value: el.value,
-        });
-    });
-    return returnObj;
-}
-function onValuesChange(props: any, changedValues: any, allValues: any) {
-    if (props.changeValue) { }
-}
-
-export default Form.create({ name: 'form_view' })(FormWrap);
+export default Form.create({ name: 'editFormV3' })(FormWrap);