Merge pull request #772 from 2betop/master

form 下的 service 数据同步方式修改

src/factory.tsx

@@ -751,12 +751,17 @@ export function HocStoreFactory(renderer: {
         const store = this.store;
 
         if (renderer.extendsData === false) {
-          (props.defaultData !== nextProps.defaultData ||
+          if (
+            props.defaultData !== nextProps.defaultData ||
             isObjectShallowModified(props.data, nextProps.data) ||
+            //
+            // 特殊处理 CRUD。
             // CRUD 中 toolbar 里面的 data 是空对象，但是 __super 会不一样
-            (nextProps.data &&
+            (nextProps.store?.storeType === 'CRUDStore' &&
+              nextProps.data &&
               props.data &&
-              nextProps.data.__super !== props.data.__super)) &&
+              nextProps.data.__super !== props.data.__super)
+          ) {
             store.initData(
               extendObject(nextProps.data, {
                 ...(store.hasRemoteData ? store.data : null), // todo 只保留 remote 数据
@@ -764,6 +769,7 @@ export function HocStoreFactory(renderer: {
                 ...this.formatData(nextProps.data)
               })
             );
+          }
         } else if (isObjectShallowModified(props.data, nextProps.data)) {
           if (nextProps.store && nextProps.store.data === nextProps.data) {
             store.initData(

src/renderers/Form/Control.tsx

@@ -141,13 +141,6 @@ export default class FormControl extends React.PureComponent<
       addHook
     } = this.props;
 
-    if (name && form !== store) {
-      const value = getVariable(store.data, name);
-      if (typeof value !== 'undefined' && value !== this.getValue()) {
-        this.handleChange(value, false, true);
-      }
-    }
-
     // 提交前先把之前的 lazyEmit 执行一下。
     this.hook3 = () => {
       this.lazyEmitChange.flush();
@@ -252,30 +245,6 @@ export default class FormControl extends React.PureComponent<
     }
   }
 
-  componentDidUpdate(prevProps: ControlProps) {
-    const {
-      store,
-      formStore: form,
-      data,
-      control: {name}
-    } = this.props;
-
-    if (!name) {
-      return;
-    }
-
-    // form 里面部分塞 service 的用法
-    let value: any;
-    if (
-      form !== store &&
-      data !== prevProps.data &&
-      (value = getVariable(data as any, name)) !==
-        getVariable(prevProps.data, name)
-    ) {
-      this.handleChange(value, false, true);
-    }
-  }
-
   componentWillUnmount() {
     this.hook && this.props.removeHook(this.hook);
     this.hook2 && this.props.removeHook(this.hook2);
@@ -445,7 +414,11 @@ export default class FormControl extends React.PureComponent<
 
     if (!isObject(values)) {
       return;
-    } else if (!this.model || ~['service'].indexOf(type)) {
+    } else if (
+      !this.model ||
+      // todo 以后想办法不要強耦合类型。
+      ~['service', 'group', 'hbox', 'panel', 'grid'].indexOf(type)
+    ) {
       onBulkChange && onBulkChange(values);
       return;
     }

src/renderers/Form/Service.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Renderer, RendererProps} from '../../factory';
 import BasicService, {ServiceProps} from '../Service';
-import {Schema} from '../../types';
+import {Schema, Payload} from '../../types';
 import Scoped, {ScopedContext, IScopedContext} from '../../Scoped';
 import {observer} from 'mobx-react';
 import {ServiceStore, IServiceStore} from '../../store/service';
+import {IFormStore} from '../../store/form';
 
 @Renderer({
   test: /(^|\/)form\/(.*)\/service$/,
@@ -52,6 +53,52 @@ export class ServiceRenderer extends BasicService {
     super.componentWillUnmount();
   }
 
+  afterDataFetch(payload: Payload) {
+    const formStore: IFormStore = this.props.formStore;
+    const onChange = this.props.onChange;
+
+    if (
+      formStore &&
+      formStore === this.props.store.parentStore &&
+      this.isFormMode()
+    ) {
+      const keys = Object.keys(payload.data);
+
+      if (keys.length) {
+        formStore.setValues(payload.data);
+        onChange(keys[0], payload.data[keys[0]]);
+      }
+    }
+
+    return super.afterDataFetch(payload);
+  }
+
+  isFormMode() {
+    const {
+      store,
+      body: schema,
+      controls,
+      tabs,
+      feildSet,
+      renderFormItems,
+      classnames: cx
+    } = this.props;
+
+    const finnalSchema = store.schema ||
+      schema || {
+        controls,
+        tabs,
+        feildSet
+      };
+
+    return (
+      finnalSchema &&
+      !finnalSchema.type &&
+      (finnalSchema.controls || finnalSchema.tabs || finnalSchema.feildSet) &&
+      renderFormItems
+    );
+  }
+
   renderBody(): JSX.Element {
     const {
       render,
@@ -62,22 +109,17 @@ export class ServiceRenderer extends BasicService {
       feildSet,
       renderFormItems,
       formMode,
-      $path,
       classnames: cx
     } = this.props;
 
-    const finnalSchema = store.schema ||
-      schema || {
-        controls,
-        tabs,
-        feildSet
-      };
-    if (
-      finnalSchema &&
-      !finnalSchema.type &&
-      (finnalSchema.controls || finnalSchema.tabs || finnalSchema.feildSet) &&
-      renderFormItems
-    ) {
+    if (this.isFormMode()) {
+      const finnalSchema = store.schema ||
+        schema || {
+          controls,
+          tabs,
+          feildSet
+        };
+
       return (
         <div
           key={store.schemaKey || 'forms'}

src/renderers/Service.tsx

@@ -47,6 +47,7 @@ export default class Service extends React.Component<ServiceProps> {
     this.reload = this.reload.bind(this);
     this.silentReload = this.silentReload.bind(this);
     this.initInterval = this.initInterval.bind(this);
+    this.afterDataFetch = this.afterDataFetch.bind(this);
   }
 
   componentDidMount() {
@@ -68,7 +69,7 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: fetchSuccess,
           errorMessage: fetchFailed
         })
-        .then(this.initInterval);
+        .then(this.afterDataFetch);
 
     isApiOutdated(
       prevProps.schemaApi,
@@ -114,13 +115,19 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: fetchSuccess,
           errorMessage: fetchFailed
         })
-        .then(this.initInterval);
+        .then(this.afterDataFetch);
     }
   }
 
+  afterDataFetch(data: any) {
+    this.initInterval(data);
+  }
+
   initInterval(value: any) {
     const {interval, silentPolling, stopAutoRefreshWhen, data} = this.props;
 
+    clearTimeout(this.timer);
+
     interval &&
       this.mounted &&
       (!stopAutoRefreshWhen || !evalExpression(stopAutoRefreshWhen, data)) &&
@@ -164,7 +171,7 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: fetchSuccess,
           errorMessage: fetchFailed
         })
-        .then(this.initInterval);
+        .then(this.afterDataFetch);
     }
   }
 
@@ -222,7 +229,9 @@ export default class Service extends React.Component<ServiceProps> {
           successMessage: __(action.messages && action.messages.success),
           errorMessage: __(action.messages && action.messages.failed)
         })
-        .then(async () => {
+        .then(async (payload: any) => {
+          this.afterDataFetch(payload);
+
           if (action.feedback && isVisible(action.feedback, store.data)) {
             await this.openFeedback(action.feedback, store.data);
           }