amis 1.8.0-beta.1 → 1.8.0-beta.5

package/src/renderers/Tabs.tsx

@@ -264,7 +264,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   // 初始化 tabs 数组，当从 source 获取数据源时
   @autobind
-  initTabArray(tabs: Array<TabSource>, source?: string, data?: any): [Array<TabSource>, boolean] {
+  initTabArray(
+    tabs: Array<TabSource>,
+    source?: string,
+    data?: any
+  ): [Array<TabSource>, boolean] {
     if (!tabs) {
       return [[], false];
     }
@@ -325,16 +329,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     let localTabs = this.state.localTabs;
 
     // 响应外部修改 tabs
-    const isTabsModified = isObjectShallowModified({
-      tabs: props.tabs,
-      source: resolveVariableAndFilter(props.source, props.data, '| raw')
-    }, {
-      tabs: preProps.tabs,
-      source: resolveVariableAndFilter(preProps.source, preProps.data, '| raw')
-    }, false);
+    const isTabsModified = isObjectShallowModified(
+      {
+        tabs: props.tabs,
+        source: resolveVariableAndFilter(props.source, props.data, '| raw')
+      },
+      {
+        tabs: preProps.tabs,
+        source: resolveVariableAndFilter(
+          preProps.source,
+          preProps.data,
+          '| raw'
+        )
+      },
+      false
+    );
 
     if (isTabsModified) {
-      const [newLocalTabs, isFromSource] = this.initTabArray(props.tabs, props.source, props.data);
+      const [newLocalTabs, isFromSource] = this.initTabArray(
+        props.tabs,
+        props.source,
+        props.data
+      );
 
       this.setState({
         localTabs: newLocalTabs,
@@ -343,7 +359,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       localTabs = newLocalTabs;
     }
 
-    if (props.location && preProps.location && props.location.hash !== preProps.location.hash) {
+    if (
+      props.location &&
+      preProps.location &&
+      props.location.hash !== preProps.location.hash
+    ) {
       const hash = props.location.hash.substring(1);
       if (!hash) {
         return;
@@ -464,7 +484,10 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       tab.hash ? tab.hash === key : index === key
     );
 
-    if (localTabs[tabIndex] && !isVisible(localTabs[tabIndex], this.props.data)) {
+    if (
+      localTabs[tabIndex] &&
+      !isVisible(localTabs[tabIndex], this.props.data)
+    ) {
       let len = localTabs.length;
       let i = tabIndex - 1 + len;
       let tries = len - 1;
@@ -491,11 +514,14 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       body: '新增tab 内容'
     } as TabSource);
 
-    this.setState({
-      localTabs: localTabs
-    }, () => {
-      this.switchTo(this.state.localTabs.length - 1);
-    });
+    this.setState(
+      {
+        localTabs: localTabs
+      },
+      () => {
+        this.switchTo(this.state.localTabs.length - 1);
+      }
+    );
   }
 
   @autobind
@@ -520,20 +546,23 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   @autobind
-  async handleDragChange(e: any){
+  async handleDragChange(e: any) {
     const activeTab = this.resolveTabByKey(this.activeKey);
     const originTabs: TabSource[] = this.state.localTabs.concat();
 
     originTabs.splice(e.newIndex, 0, originTabs.splice(e.oldIndex, 1)[0]);
 
-    this.setState({
-      localTabs: originTabs
-    }, () => {
-      if (activeTab) {
-        const newActiveTabIndex = originTabs.indexOf(activeTab);
-        this.switchTo(newActiveTabIndex);
+    this.setState(
+      {
+        localTabs: originTabs
+      },
+      () => {
+        if (activeTab) {
+          const newActiveTabIndex = originTabs.indexOf(activeTab);
+          this.switchTo(newActiveTabIndex);
+        }
       }
-    });
+    );
   }
 
   @autobind
@@ -571,9 +600,12 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   @autobind
   async handleChange(key: any, name: any) {
     const {dispatchEvent, data, onChange} = this.props;
-    const rendererEvent = await dispatchEvent('change', createObject(data, {
-      value: key,
-    }));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: key
+      })
+    );
     if (rendererEvent?.prevented) {
       return;
     }
@@ -772,4 +804,19 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 @Renderer({
   type: 'tabs'
 })
-export class TabsRenderer extends Tabs {}
+export class TabsRenderer extends Tabs {
+  static contextType = ScopedContext;
+
+  constructor(props: TabsProps, context: IScopedContext) {
+    super(props);
+
+    const scoped = context;
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount?.();
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+}

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,19 @@ 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', data)) && onInit && onInit(data);
+  }
+
   @autobind
   affixDetect() {
     if (
@@ -364,11 +378,15 @@ 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')) {
+        return
+      }
+
       this.setState({
         currentStep: index,
         completeStep: Math.max(this.state.completeStep, index - 1)
@@ -517,9 +535,9 @@ 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 +590,14 @@ 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 +627,17 @@ 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', final)) {
+      return;
+    }
+
+
     store.updateData(values);
   }
 
@@ -630,9 +664,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 +678,118 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       onFinished
     } = this.props;
 
+    if (await this.dispatchEvent('finished', 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', 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: json => this.dispatchEvent('submitFail', json)
+        })
+        .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 +801,8 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         store
           .saveRemote(action.api || step.api!, store.data, {
             onSuccess: () => {
+              this.dispatchEvent('stepSubmitSucc', store.data);
+
               if (
                 !isEffectiveApi(finnalAsyncApi, store.data) ||
                 store.data[finishedField || 'finished']
@@ -675,6 +817,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               );
             },
             onFailed: json => {
+              this.dispatchEvent('stepSubmitFail', json);
               if (json.status === 422 && json.errors && this.form) {
                 this.form.props.store.setFormItemErrors(json.errors);
               }
@@ -700,6 +843,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             );
           })
           .catch(reason => {
+            this.dispatchEvent('stepSubmitFail', reason);
             if (reason instanceof SkipOperation) {
               return;
             }
@@ -709,90 +853,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;

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);
@@ -263,7 +282,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 +301,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/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

@@ -102,7 +102,9 @@ export interface Action extends Button {
     | 'reset-and-submit'
     | 'clear'
     | 'clear-and-submit'
-    | 'toast';
+    | 'toast'
+    | 'goto-step'
+    | 'step-submit';
   api?: Api;
   asyncApi?: Api;
   payload?: any;