amis 1.8.0-beta.1 → 1.8.0-beta.13

package/src/renderers/Wizard.tsx

@@ -253,7 +253,8 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
           }
         })
         .then(value => {
-          onInit && onInit(store.data);
+          this.handleInitEvent(store.data);
+
           const state = {
             currentStep:
               typeof this.props.startStep === 'string'
@@ -291,7 +292,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               ? parseInt(tokenize(this.props.startStep, this.props.data))
               : 1
         },
-        () => onInit && onInit(store.data)
+        () => this.handleInitEvent(store.data)
       );
     }
 
@@ -336,6 +337,24 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     this.unSensor && this.unSensor();
   }
 
+  async dispatchEvent(action: string, value?: object) {
+    const {dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      action,
+      createObject(data, value ? value : {})
+    );
+
+    return rendererEvent?.prevented ?? false;
+  }
+
+  async handleInitEvent(data: any) {
+    const {onInit} = this.props;
+    (await this.dispatchEvent('inited', {formData: data})) &&
+      onInit &&
+      onInit(data);
+  }
+
   @autobind
   affixDetect() {
     if (
@@ -364,11 +383,20 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     affixed ? affixDom.classList.add('in') : affixDom.classList.remove('in');
   }
 
-  gotoStep(index: number) {
+  async gotoStep(index: number) {
     const steps = this.props.steps || [];
     index = Math.max(Math.min(steps.length, index), 1);
 
     if (index != this.state.currentStep) {
+      if (
+        await this.dispatchEvent('stepChange', {
+          step: index,
+          formData: this.props.store.data
+        })
+      ) {
+        return;
+      }
+
       this.setState({
         currentStep: index,
         completeStep: Math.max(this.state.completeStep, index - 1)
@@ -517,9 +545,13 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const {onAction, store, env} = this.props;
+    const {onAction, store, env, steps} = this.props;
 
-    if (action.actionType === 'next' || action.type === 'submit') {
+    if (
+      action.actionType === 'next' ||
+      action.type === 'submit' ||
+      action.actionType === 'step-submit'
+    ) {
       this.form.doAction(
         {
           ...action,
@@ -572,6 +604,18 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         });
     } else if (action.actionType === 'reload') {
       action.target && this.reloadTarget(action.target, data);
+    } else if (action.actionType === 'goto-step') {
+      const targetStep = (data as any).step;
+
+      if (
+        targetStep !== undefined &&
+        targetStep <= steps.length &&
+        targetStep >= 0
+      ) {
+        this.gotoStep((data as any).step);
+      }
+    } else if (action.actionType === 'submit') {
+      this.finalSubmit();
     } else if (onAction) {
       onAction(e, action, data, throwErrors, delegate || this.context);
     }
@@ -601,9 +645,16 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   }
 
   @autobind
-  handleChange(values: object) {
+  async handleChange(values: object) {
     const {store} = this.props;
 
+    const previous = store.data;
+    const final = {...previous, ...values};
+
+    if (await this.dispatchEvent('change', {formData: final})) {
+      return;
+    }
+
     store.updateData(values);
   }
 
@@ -630,9 +681,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     store.updateData(reseted);
   }
 
-  // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
-  @autobind
-  handleSubmit(values: object, action: Action) {
+  async finalSubmit(values: object = {}, action: Action = {type: 'submit'}) {
     const {
       store,
       steps,
@@ -646,10 +695,112 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       onFinished
     } = this.props;
 
+    if (await this.dispatchEvent('finished', {formData: store.data})) {
+      return;
+    }
+
     const step = steps[this.state.currentStep - 1];
     store.updateData(values);
 
+    // 最后一步
+    if (target) {
+      this.submitToTarget(target, store.data);
+      this.setState({completeStep: steps.length});
+    } else if (action.api || step.api || api) {
+      let finnalAsyncApi = action.asyncApi || step.asyncApi || asyncApi;
+
+      isEffectiveApi(finnalAsyncApi, store.data) &&
+        store.updateData({
+          [finishedField || 'finished']: false
+        });
+
+      const formStore = this.form
+        ? (this.form.props.store as IFormStore)
+        : store;
+      store.markSaving(true);
+
+      formStore
+        .saveRemote(action.api || step.api || api!, store.data, {
+          onSuccess: () => {
+            this.dispatchEvent('submitSucc', {formData: store.data});
+
+            if (
+              !isEffectiveApi(finnalAsyncApi, store.data) ||
+              store.data[finishedField || 'finished']
+            ) {
+              return;
+            }
+
+            return until(
+              () => store.checkRemote(finnalAsyncApi as Api, store.data),
+              (ret: any) => ret && ret[finishedField || 'finished'],
+              cancel => (this.asyncCancel = cancel)
+            );
+          },
+          onFailed: error => this.dispatchEvent('submitFail', {error})
+        })
+        .then(async value => {
+          const feedback = action.feedback;
+          if (feedback && isVisible(feedback, value)) {
+            const confirmed = await this.openFeedback(feedback, value);
+
+            // 如果 feedback 配置了，取消就跳过原有逻辑。
+            if (feedback.skipRestOnCancel && !confirmed) {
+              throw new SkipOperation();
+            } else if (feedback.skipRestOnConfirm && confirmed) {
+              throw new SkipOperation();
+            }
+          }
+
+          this.setState({completeStep: steps.length});
+          store.updateData({
+            ...store.data,
+            ...value
+          });
+          store.markSaving(false);
+
+          if (value && typeof value.step === 'number') {
+            this.gotoStep(value.step);
+          } else if (onFinished && onFinished(value, action) === false) {
+            // 如果是 false 后面的操作就不执行
+            return value;
+          }
+
+          const finalRedirect =
+            (action.redirect || step.redirect || redirect) &&
+            filter(action.redirect || step.redirect || redirect, store.data);
+
+          if (finalRedirect) {
+            env.jumpTo(finalRedirect, action);
+          } else if (action.reload || step.reload || reload) {
+            this.reloadTarget(
+              action.reload || step.reload || reload!,
+              store.data
+            );
+          }
+
+          return value;
+        })
+        .catch(error => {
+          this.dispatchEvent('submitFail', {error});
+          store.markSaving(false);
+          console.error(error);
+        });
+    } else {
+      onFinished && onFinished(store.data, action);
+      this.setState({completeStep: steps.length});
+    }
+  }
+
+  // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
+  @autobind
+  async handleSubmit(values: object, action: Action) {
+    const {store, steps, finishedField} = this.props;
+
     if (this.state.currentStep < steps.length) {
+      const step = steps[this.state.currentStep - 1];
+      store.updateData(values);
+
       let finnalAsyncApi = action.asyncApi || step.asyncApi;
 
       isEffectiveApi(finnalAsyncApi, store.data) &&
@@ -661,6 +812,8 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         store
           .saveRemote(action.api || step.api!, store.data, {
             onSuccess: () => {
+              this.dispatchEvent('stepSubmitSucc', {formData: store.data});
+
               if (
                 !isEffectiveApi(finnalAsyncApi, store.data) ||
                 store.data[finishedField || 'finished']
@@ -675,6 +828,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               );
             },
             onFailed: json => {
+              this.dispatchEvent('stepSubmitFail', {error: json});
               if (json.status === 422 && json.errors && this.form) {
                 this.form.props.store.setFormItemErrors(json.errors);
               }
@@ -700,6 +854,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             );
           })
           .catch(reason => {
+            this.dispatchEvent('stepSubmitFail', {error: reason});
             if (reason instanceof SkipOperation) {
               return;
             }
@@ -709,90 +864,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         this.gotoStep(this.state.currentStep + 1);
       }
     } else {
-      // 最后一步
-      if (target) {
-        this.submitToTarget(target, store.data);
-        this.setState({completeStep: steps.length});
-      } else if (action.api || step.api || api) {
-        let finnalAsyncApi = action.asyncApi || step.asyncApi || asyncApi;
-
-        isEffectiveApi(finnalAsyncApi, store.data) &&
-          store.updateData({
-            [finishedField || 'finished']: false
-          });
-
-        const formStore = this.form
-          ? (this.form.props.store as IFormStore)
-          : store;
-        store.markSaving(true);
-
-        formStore
-          .saveRemote(action.api || step.api || api!, store.data, {
-            onSuccess: () => {
-              if (
-                !isEffectiveApi(finnalAsyncApi, store.data) ||
-                store.data[finishedField || 'finished']
-              ) {
-                return;
-              }
-
-              return until(
-                () => store.checkRemote(finnalAsyncApi as Api, store.data),
-                (ret: any) => ret && ret[finishedField || 'finished'],
-                cancel => (this.asyncCancel = cancel)
-              );
-            }
-          })
-          .then(async value => {
-            const feedback = action.feedback;
-            if (feedback && isVisible(feedback, value)) {
-              const confirmed = await this.openFeedback(feedback, value);
-
-              // 如果 feedback 配置了，取消就跳过原有逻辑。
-              if (feedback.skipRestOnCancel && !confirmed) {
-                throw new SkipOperation();
-              } else if (feedback.skipRestOnConfirm && confirmed) {
-                throw new SkipOperation();
-              }
-            }
-
-            this.setState({completeStep: steps.length});
-            store.updateData({
-              ...store.data,
-              ...value
-            });
-            store.markSaving(false);
-
-            if (value && typeof value.step === 'number') {
-              this.gotoStep(value.step);
-            } else if (onFinished && onFinished(value, action) === false) {
-              // 如果是 false 后面的操作就不执行
-              return value;
-            }
-
-            const finalRedirect =
-              (action.redirect || step.redirect || redirect) &&
-              filter(action.redirect || step.redirect || redirect, store.data);
-
-            if (finalRedirect) {
-              env.jumpTo(finalRedirect, action);
-            } else if (action.reload || step.reload || reload) {
-              this.reloadTarget(
-                action.reload || step.reload || reload!,
-                store.data
-              );
-            }
-
-            return value;
-          })
-          .catch(e => {
-            store.markSaving(false);
-            console.error(e);
-          });
-      } else {
-        onFinished && onFinished(store.data, action);
-        this.setState({completeStep: steps.length});
-      }
+      this.finalSubmit(values, action);
     }
 
     return false;
@@ -1145,4 +1217,8 @@ export class WizardRenderer extends Wizard {
       scoped.reload(store.action.reload, store.data);
     }
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

package/src/store/crud.ts

@@ -16,12 +16,14 @@ import {
   isObjectShallowModified,
   sortArray,
   isEmpty,
-  qsstringify
+  qsstringify,
+  getVariable
 } from '../utils/helper';
 import {Api, Payload, fetchOptions, Action, ApiObject} from '../types';
 import pick from 'lodash/pick';
 import {resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {normalizeApiResponseData} from '../utils/api';
+import {matchSorter} from 'match-sorter';
 
 class ServerError extends Error {
   type = 'ServerError';
@@ -139,6 +141,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         source?: string; // 支持自定义属于映射，默认不配置，读取 rows 或者 items
         loadDataMode?: boolean;
         syncResponse2Query?: boolean;
+        columns?: Array<any>;
       }
     ) => Promise<any> = flow(function* getInitData(
       api: Api,
@@ -150,6 +153,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         source?: string; // 支持自定义属于映射，默认不配置，读取 rows 或者 items
         loadDataMode?: boolean;
         syncResponse2Query?: boolean;
+        columns?: Array<any>;
       } = {}
     ) {
       try {
@@ -165,6 +169,21 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
               )
             : self.items.concat();
 
+          if (Array.isArray(options.columns)) {
+            options.columns.forEach((column: any) => {
+              let value: any;
+              if (
+                column.searchable &&
+                column.name &&
+                (value = getVariable(self.query, column.name))
+              ) {
+                items = matchSorter(items, value, {
+                  keys: [column.name]
+                });
+              }
+            });
+          }
+
           if (self.query.orderBy) {
             const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
             items = sortArray(items, self.query.orderBy, dir);
@@ -253,6 +272,16 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
             items = result.items || result.rows;
           }
 
+          // 如果不按照 items 格式返回，就拿第一个数组当成 items
+          if (!Array.isArray(items)) {
+            for (const key of Object.keys(result)) {
+              if (result.hasOwnProperty(key) && Array.isArray(result[key])) {
+                items = result[key];
+                break;
+              }
+            }
+          }
+
           if (!Array.isArray(items)) {
             throw new Error(self.__('CRUD.invalidArray'));
           } else {
@@ -263,7 +292,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           }
 
           // 点击加载更多数据
-          let rowsData = [];
+          let rowsData: Array<any> = [];
           if (options.loadDataMode && Array.isArray(self.data.items)) {
             rowsData = self.data.items.concat(items);
           } else {
@@ -282,16 +311,32 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           if (options.loadDataOnce) {
             // 记录原始集合，后续可能基于原始数据做排序查找。
             data.itemsRaw = oItems || oRows;
+            let filteredItems = rowsData.concat();
+
+            if (Array.isArray(options.columns)) {
+              options.columns.forEach((column: any) => {
+                let value: any;
+                if (
+                  column.searchable &&
+                  column.name &&
+                  (value = getVariable(self.query, column.name))
+                ) {
+                  filteredItems = matchSorter(filteredItems, value, {
+                    keys: [column.name]
+                  });
+                }
+              });
+            }
 
             if (self.query.orderBy) {
               const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
-              rowsData = sortArray(rowsData, self.query.orderBy, dir);
+              filteredItems = sortArray(filteredItems, self.query.orderBy, dir);
             }
-            data.items = rowsData.slice(
+            data.items = filteredItems.slice(
               (self.page - 1) * self.perPage,
               self.page * self.perPage
             );
-            data.count = data.total = rowsData.length;
+            data.count = data.total = filteredItems.length;
           }
 
           if (Array.isArray(columns)) {

package/src/store/form.ts

@@ -327,6 +327,9 @@ export const FormStore = ServiceStore.named('FormStore')
 
         if (!json.ok) {
           // 验证错误
+          if (options && options.onFailed) {
+            options.onFailed(json);
+          }
           if (json.status === 422 && json.errors) {
             setFormItemErrors(json.errors);
 
@@ -452,11 +455,13 @@ export const FormStore = ServiceStore.named('FormStore')
     const submit: (
       fn?: (values: object) => Promise<any>,
       hooks?: Array<() => Promise<any>>,
-      failedMessage?: string
+      failedMessage?: string,
+      validateErrCb?: () => void
     ) => Promise<any> = flow(function* submit(
       fn: any,
       hooks?: Array<() => Promise<any>>,
-      failedMessage?: string
+      failedMessage?: string,
+      validateErrCb?: () => void
     ) {
       self.submited = true;
       self.submiting = true;
@@ -476,7 +481,7 @@ export const FormStore = ServiceStore.named('FormStore')
           const env = getEnv(self);
 
           msg && env.notify('error', msg);
-
+          validateErrCb && validateErrCb();
           throw new Error(msg);
         }
 

package/src/store/formItem.ts

@@ -723,8 +723,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       // 插入新的子节点，用于之后BaseSelection.resolveSelected查找
       if (Array.isArray(topOption.children)) {
         const children = topOption.children.concat();
-
-        flattenTree(topOption.leftOptions).forEach(item => {
+        flattenTree(newLeftOptions).forEach(item => {
           if (!findTree(topOption.children, node => node.ref === item.value)) {
             children.push({ref: item.value, defer: true});
           }

package/src/store/index.ts

@@ -44,6 +44,10 @@ export const RendererStore = types
   .model('RendererStore', {
     storeType: 'RendererStore'
   })
+  .props({
+    visibleState: types.optional(types.frozen(), {}),
+    disableState: types.optional(types.frozen(), {})
+  })
   .views(self => ({
     get fetcher() {
       return getEnv(self).fetcher;
@@ -91,6 +95,22 @@ export const RendererStore = types
     removeStore(store: IStoreNode) {
       // store.dispose();
       removeStore(store);
+    },
+
+    setVisible(id: string, value: boolean) {
+      const state = {
+        ...self.visibleState,
+        [id]: value
+      };
+      self.visibleState = state;
+    },
+
+    setDisable(id: string, value: boolean) {
+      const state = {
+        ...self.disableState,
+        [id]: value
+      };
+      self.disableState = state;
     }
   }));
 

package/src/store/table.ts

@@ -899,7 +899,7 @@ export const TableStore = iRendererStore
           : {
               item
             };
-        const id = item.id ?? guid();
+        const id = item.__id ?? guid();
 
         return {
           // id: String(item && (item as any)[self.primaryField] || `${pindex}-${depth}-${key}`),
@@ -941,7 +941,7 @@ export const TableStore = iRendererStore
 
       let arr: Array<SRow> = rows.map((item, index) => {
         let id = String(
-          getEntryId ? getEntryId(item, index) : item.id ?? guid()
+          getEntryId ? getEntryId(item, index) : item.__id ?? guid()
         );
         return {
           // id: getEntryId ? getEntryId(item, key) : String(item && (item as any)[self.primaryField] || `${key}-1-${key}`),

package/src/types.ts

@@ -6,6 +6,8 @@ export interface ApiObject extends SchemaApiObject {
     withCredentials?: boolean;
     cancelExecutor?: (cancel: Function) => void;
   };
+  graphql?: string;
+  operationName?: string;
   body?: PlainObject;
   query?: PlainObject;
   adaptor?: (payload: object, response: fetcherResult, api: ApiObject) => any;
@@ -99,10 +101,15 @@ export interface Action extends Button {
     | 'next'
     | 'prev'
     | 'reset'
+    | 'validate'
     | 'reset-and-submit'
     | 'clear'
     | 'clear-and-submit'
-    | 'toast';
+    | 'toast'
+    | 'goto-step'
+    | 'expand'
+    | 'collapse'
+    | 'step-submit';
   api?: Api;
   asyncApi?: Api;
   payload?: any;