amis 1.3.5-beta.7 → 1.4.2-beta.11

package/src/renderers/Tabs.tsx

@@ -374,7 +374,15 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   @autobind
   handleSelect(key: any) {
-    const {env, onSelect} = this.props;
+    const {env, onSelect, id} = this.props;
+
+    env.tracker?.({
+      eventType: 'tabChange',
+      eventData: {
+        id,
+        key
+      }
+    });
 
     // 是 hash，需要更新到地址栏
     if (typeof key === 'string' && env) {

package/src/renderers/WebComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaCollection} from '../Schema';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import mapValues from 'lodash/mapValues';
 
 /**
@@ -43,7 +43,7 @@ export default class WebComponent extends React.Component<RendererProps> {
 
     const propsValues = mapValues(props, s => {
       if (typeof s === 'string') {
-        return resolveVariable(s, data) || s;
+        return resolveVariableAndFilter(s, data, '| raw') || s;
       } else {
         return s;
       }

package/src/store/crud.ts

@@ -21,6 +21,7 @@ import {
 import {Api, Payload, fetchOptions, Action, ApiObject} from '../types';
 import pick from 'lodash/pick';
 import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {normalizeApiResponseData} from '../utils/api';
 
 class ServerError extends Error {
   type = 'ServerError';
@@ -228,13 +229,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           }
 
           self.updatedAt = Date.now();
-          let result = json.data;
-
-          if (Array.isArray(result)) {
-            result = {
-              items: result
-            };
-          }
+          let result = normalizeApiResponseData(json.data);
 
           const {
             total,
@@ -384,7 +379,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
 
         if (!isEmpty(json.data) || json.ok) {
           self.updateData(
-            json.data,
+            normalizeApiResponseData(json.data),
             {
               __saved: Date.now()
             },

package/src/store/form.ts

@@ -29,6 +29,7 @@ import isEqual from 'lodash/isEqual';
 import flatten from 'lodash/flatten';
 import {getStoreById, removeStore} from './manager';
 import {filter} from '../utils/tpl';
+import {normalizeApiResponseData} from '../utils/api';
 
 export const FormStore = ServiceStore.named('FormStore')
   .props({
@@ -305,7 +306,7 @@ export const FormStore = ServiceStore.named('FormStore')
           self.updatedAt = Date.now();
 
           setValues(
-            json.data,
+            normalizeApiResponseData(json.data),
             json.ok
               ? {
                   __saved: Date.now()
@@ -587,14 +588,9 @@ export const FormStore = ServiceStore.named('FormStore')
       self.persistData = value;
     }
 
-    const setLocalPersistData = debounce(
-      () => localStorage.setItem(self.persistKey, JSON.stringify(self.data)),
-      250,
-      {
-        trailing: true,
-        leading: false
-      }
-    );
+    const setLocalPersistData = () => {
+      localStorage.setItem(self.persistKey, JSON.stringify(self.data));
+    };
 
     function getLocalPersistData() {
       let data = localStorage.getItem(self.persistKey);
@@ -638,7 +634,6 @@ export const FormStore = ServiceStore.named('FormStore')
       clearRestError,
       beforeDestroy() {
         syncOptions.cancel();
-        setLocalPersistData.cancel();
       }
     };
   });

package/src/store/modal.ts

@@ -24,6 +24,10 @@ export const ModalStore = ServiceStore.named('ModalStore')
       setFormData(obj: any) {
         self.form = obj;
       },
+      reset() {
+        self.form = {};
+        self.reInitData({}, true);
+      },
 
       setResizeCoord(value: number) {
         self.resizeCoord = value;

package/src/store/service.ts

@@ -3,6 +3,7 @@ import {iRendererStore} from './iRenderer';
 import {Api, ApiObject, Payload, fetchOptions} from '../types';
 import {extendObject, isEmpty, isObject} from '../utils/helper';
 import {ServerError} from '../utils/errors';
+import {normalizeApiResponseData} from '../utils/api';
 
 export const ServiceStore = iRendererStore
   .named('ServiceStore')
@@ -96,7 +97,7 @@ export const ServiceStore = iRendererStore
           let replace = !!(api as ApiObject).replaceData;
           let data = {
             ...(replace ? {} : self.data),
-            ...json.data
+            ...normalizeApiResponseData(json.data)
           };
           reInitData(data, replace);
           self.hasRemoteData = true;
@@ -140,24 +141,6 @@ export const ServiceStore = iRendererStore
       }
     });
 
-    const fetchWSData = (ws: string, afterDataFetch: (data: any) => any) => {
-      const env = getEnv(self);
-
-      env.wsFetcher(
-        ws,
-        (data: any) => {
-          self.updateData(data, undefined, false);
-          setHasRemoteData();
-          // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
-          afterDataFetch({ok: true, data: data});
-        },
-        (error: any) => {
-          updateMessage(error, true);
-          env.notify('error', error);
-        }
-      );
-    };
-
     const setHasRemoteData = () => {
       self.hasRemoteData = true;
     };
@@ -194,7 +177,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -282,7 +265,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -424,7 +407,7 @@ export const ServiceStore = iRendererStore
               : {
                   type: 'wrapper',
                   wrap: false,
-                  ...json.data
+                  ...normalizeApiResponseData(json.data)
                 };
             self.schemaKey = '' + Date.now();
             isObject(json.data.data) &&
@@ -505,7 +488,6 @@ export const ServiceStore = iRendererStore
       markBusying,
       fetchInitData,
       fetchData,
-      fetchWSData,
       reInitData,
       updateMessage,
       clearMessage,

package/src/store/table.ts

@@ -45,6 +45,7 @@ export const Column = types
     checkdisable: false,
     isPrimary: false,
     searchable: types.maybe(types.frozen()),
+    enableSearch: true,
     sortable: false,
     filterable: types.optional(types.frozen(), undefined),
     fixed: '',
@@ -66,8 +67,13 @@ export const Column = types
 
       table.persistSaveToggledColumns();
     },
+
     setToggled(value: boolean) {
       self.toggled = value;
+    },
+
+    setEnableSearch(value: boolean) {
+      self.enableSearch = value;
     }
   }));
 
@@ -292,6 +298,10 @@ export const TableStore = iRendererStore
     keepItemSelectionOnPageChange: false
   })
   .views(self => {
+    function getColumnsExceptBuiltinTypes() {
+      return self.columns.filter(item => !/^__/.test(item.type));
+    }
+
     function getForms() {
       return self.formsRef.map(item => ({
         store: getStoreById(item.id) as IFormStore,
@@ -414,8 +424,8 @@ export const TableStore = iRendererStore
       return getMovedRows().length;
     }
 
-    function getHoverIndex(): number {
-      return self.rows.findIndex(item => item.isHover);
+    function getHovedRow(): IRow | undefined {
+      return flattenTree<IRow>(self.rows).find((item: IRow) => item.isHover);
     }
 
     function getUnSelectedRows() {
@@ -499,11 +509,46 @@ export const TableStore = iRendererStore
       });
     }
 
+    function getFirstToggledColumnIndex() {
+      const column = self.columns.find(
+        column => !/^__/.test(column.type) && column.toggled
+      );
+
+      return column == null ? null : column.index;
+    }
+
+    function getSearchableColumns() {
+      return self.columns.filter(
+        column => column.searchable && isObject(column.searchable)
+      );
+    }
+
+    function getActivedSearchableColumns() {
+      return self.columns.filter(
+        column =>
+          column.searchable &&
+          isObject(column.searchable) &&
+          column.enableSearch
+      );
+    }
+
     return {
+      get columnsData() {
+        return getColumnsExceptBuiltinTypes();
+      },
+
       get forms() {
         return getForms();
       },
 
+      get searchableColumns() {
+        return getSearchableColumns();
+      },
+
+      get activedSearchableColumns() {
+        return getSearchableColumns().filter(column => column.enableSearch);
+      },
+
       get filteredColumns() {
         return getFilteredColumns();
       },
@@ -583,8 +628,8 @@ export const TableStore = iRendererStore
         return getMovedRows();
       },
 
-      get hoverIndex() {
-        return getHoverIndex();
+      get hoverRow() {
+        return getHovedRow();
       },
 
       get disabledHeadCheckbox() {
@@ -598,6 +643,10 @@ export const TableStore = iRendererStore
         return maxLength === selectedLength;
       },
 
+      get firstToggledColumnIndex() {
+        return getFirstToggledColumnIndex();
+      },
+
       getData,
 
       get columnGroup() {
@@ -984,11 +1033,16 @@ export const TableStore = iRendererStore
       }
     }
 
+    // 记录最近一次点击的多选框，主要用于 shift 多选时判断上一个选的是什么
+    let lastCheckedRow: any = null;
+
     function toggle(row: IRow) {
       if (!row.checkable) {
         return;
       }
 
+      lastCheckedRow = row;
+
       const idx = self.selectedRows.indexOf(row);
 
       if (self.multiple) {
@@ -1000,6 +1054,50 @@ export const TableStore = iRendererStore
       }
     }
 
+    // 按住 shift 的时候点击选项
+    function toggleShift(row: IRow) {
+      // 如果是同一个或非 multiple 模式下就和不用 shift 一样
+      if (!lastCheckedRow || row === lastCheckedRow || !self.multiple) {
+        toggle(row);
+        return;
+      }
+
+      const maxLength = self.maxKeepItemSelectionLength;
+      const checkableRows = self.checkableRows;
+      const lastCheckedRowIndex = checkableRows.findIndex(
+        row => row === lastCheckedRow
+      );
+      const rowIndex = checkableRows.findIndex(rowItem => row === rowItem);
+      const minIndex =
+        lastCheckedRowIndex > rowIndex ? rowIndex : lastCheckedRowIndex;
+      const maxIndex =
+        lastCheckedRowIndex > rowIndex ? lastCheckedRowIndex : rowIndex;
+
+      const rows = checkableRows.slice(minIndex, maxIndex);
+      rows.push(row); // 将当前行也加入进行判断
+      for (const rowItem of rows) {
+        const idx = self.selectedRows.indexOf(rowItem);
+        if (idx === -1) {
+          // 如果上一个是选中状态，则将之间的所有 check 都变成可选
+          if (lastCheckedRow.checked) {
+            if (maxLength) {
+              if (self.selectedRows.length < maxLength) {
+                self.selectedRows.push(rowItem);
+              }
+            } else {
+              self.selectedRows.push(rowItem);
+            }
+          }
+        } else {
+          if (!lastCheckedRow.checked) {
+            self.selectedRows.splice(idx, 1);
+          }
+        }
+      }
+
+      lastCheckedRow = row;
+    }
+
     function updateCheckDisable() {
       if (!self.data) {
         return;
@@ -1134,6 +1232,7 @@ export const TableStore = iRendererStore
       updateSelected,
       toggleAll,
       toggle,
+      toggleShift,
       toggleExpandAll,
       toggleExpanded,
       collapseAllAtDepth,

package/src/types.ts

@@ -1,3 +1,4 @@
+import type {ActionSchema} from './renderers/Action';
 import {SchemaApiObject} from './Schema';
 
 export interface ApiObject extends SchemaApiObject {
@@ -157,3 +158,59 @@ export interface JSONSchema {
 // export type ExtractProps<
 //   TComponentOrTProps
 // > = TComponentOrTProps extends React.ComponentType<infer P> ? P : never;
+
+/**
+ * 事件跟踪的定义
+ */
+export interface EventTrack {
+  /**
+   * 事件类型，目前有以下几种
+   *
+   * api: 所有 fetcher 前调用
+   * url: 打开外部链接，组件有可能是 action 也有可能是 link
+   * link: 打开内部链接
+   * dialog: action 的弹框
+   * drawer: action 的抽出式弹框
+   * copy: action 里的复制
+   * reload: action 里的 reload
+   * email: action 里的 email
+   * prev: action 里的 prev
+   * next: action 里的 next
+   * cancel: action 里的 cancel
+   * close: action 里的 close
+   * submit: 有可能是 action 里的 submit，也有可能是表单提交
+   * confirm: action 里的 confirm
+   * add: action 里的 add
+   * reset: action 里的 reset
+   * reset-and-submit: action 里的 reset-and-submit
+   * formItemChange: 表单项内容变化
+   * formError: 表单验证失败
+   * formSubmit: 表单成功提交，在表单验证成功之后才会触发，这个可能会和 api 重合
+   * tabChange: tab 切换
+   * netError: api 报错
+   */
+  eventType:
+    | 'api'
+    | 'url'
+    | 'link'
+    | 'dialog'
+    | 'drawer'
+    | 'copy'
+    | 'reload'
+    | 'email'
+    | 'prev'
+    | 'next'
+    | 'cancel'
+    | 'close'
+    | 'submit'
+    | 'confirm'
+    | 'reset'
+    | 'reset-and-submit'
+    | 'formItemChange'
+    | 'tabChange';
+
+  /**
+   * 事件数据
+   */
+  eventData: ActionSchema | Api;
+}

package/src/utils/api.ts

@@ -1,4 +1,5 @@
-import {Api, ApiObject, fetcherResult, Payload} from '../types';
+import omit from 'lodash/omit';
+import {Api, ApiObject, EventTrack, fetcherResult, Payload} from '../types';
 import {fetcherConfig} from '../factory';
 import {tokenize, dataMapping} from './tpl-builtin';
 import {evalExpression} from './tpl';
@@ -12,6 +13,7 @@ import {
   createObject,
   qsparse
 } from './helper';
+import isPlainObject from 'lodash/isPlainObject';
 
 const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head):/i;
 
@@ -22,6 +24,8 @@ interface ApiCacheConfig extends ApiObject {
 
 const apiCaches: Array<ApiCacheConfig> = [];
 
+const isIE = !!(document as any).documentMode;
+
 export function normalizeApi(
   api: Api,
   defaultMethod: string = 'get'
@@ -59,6 +63,23 @@ export function buildApi(
   };
   api.method = (api.method || (options as any).method || 'get').toLowerCase();
 
+  if (api.headers) {
+    api.headers = dataMapping(api.headers, data, undefined, false);
+  }
+
+  if (api.requestAdaptor && typeof api.requestAdaptor === 'string') {
+    api.requestAdaptor = str2function(api.requestAdaptor, 'api') as any;
+  }
+
+  if (api.adaptor && typeof api.adaptor === 'string') {
+    api.adaptor = str2function(
+      api.adaptor,
+      'payload',
+      'response',
+      'api'
+    ) as any;
+  }
+
   if (!data) {
     return api;
   } else if (
@@ -80,7 +101,9 @@ export function buildApi(
     );
     api.url =
       tokenize(api.url.substring(0, idx + 1), data, '| url_encode') +
-      qsstringify((api.query = dataMapping(params, data))) +
+      qsstringify(
+        (api.query = dataMapping(params, data, undefined, api.convertKeyToPath))
+      ) +
       (~hashIdx ? api.url.substring(hashIdx) : '');
   } else {
     api.url = tokenize(api.url, data, '| url_encode');
@@ -91,7 +114,12 @@ export function buildApi(
   }
 
   if (api.data) {
-    api.body = api.data = dataMapping(api.data, data);
+    api.body = api.data = dataMapping(
+      api.data,
+      data,
+      undefined,
+      api.convertKeyToPath
+    );
   } else if (api.method === 'post' || api.method === 'put') {
     api.body = api.data = cloneObject(data);
   }
@@ -135,23 +163,6 @@ export function buildApi(
     }
   }
 
-  if (api.headers) {
-    api.headers = dataMapping(api.headers, data);
-  }
-
-  if (api.requestAdaptor && typeof api.requestAdaptor === 'string') {
-    api.requestAdaptor = str2function(api.requestAdaptor, 'api') as any;
-  }
-
-  if (api.adaptor && typeof api.adaptor === 'string') {
-    api.adaptor = str2function(
-      api.adaptor,
-      'payload',
-      'response',
-      'api'
-    ) as any;
-  }
-
   return api;
 }
 
@@ -188,7 +199,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   let hasStatusField = true;
 
   if (!data) {
-    throw new Error('Response is empty!');
+    throw new Error('Response is empty');
   }
 
   // 兼容几种常见写法
@@ -246,7 +257,9 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
               items: payload.data
             }
           : payload.data) || {}
-      )
+      ),
+      undefined,
+      api.convertKeyToPath
     );
   }
 
@@ -254,7 +267,8 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
 }
 
 export function wrapFetcher(
-  fn: (config: fetcherConfig) => Promise<fetcherResult>
+  fn: (config: fetcherConfig) => Promise<fetcherResult>,
+  tracker?: (eventTrack: EventTrack, data: any) => void
 ): (api: Api, data: object, options?: object) => Promise<Payload | void> {
   return function (api, data, options) {
     api = buildApi(api, data, options) as ApiObject;
@@ -284,6 +298,11 @@ export function wrapFetcher(
       api.headers['Content-Type'] = 'application/json';
     }
 
+    tracker?.(
+      {eventType: 'api', eventData: omit(api, ['config', 'data', 'body'])},
+      api.data
+    );
+
     if (typeof api.cache === 'number' && api.cache > 0) {
       const apiCache = getApiCache(api);
       return wrapAdaptor(
@@ -293,6 +312,15 @@ export function wrapFetcher(
         api
       );
     }
+    // IE 下 get 请求会被缓存，所以自动加个时间戳
+    if (isIE && api && api.method?.toLocaleLowerCase() === 'get') {
+      const timeStamp = `_t=${Date.now()}`;
+      if (api.url.indexOf('?') === -1) {
+        api.url = api.url + `?${timeStamp}`;
+      } else {
+        api.url = api.url + `&${timeStamp}`;
+      }
+    }
     return wrapAdaptor(fn(api), api);
   };
 }
@@ -449,4 +477,16 @@ export function clearApiCache() {
   apiCaches.splice(0, apiCaches.length);
 }
 
+export function normalizeApiResponseData(data: any) {
+  if (typeof data === 'undefined') {
+    data = {};
+  } else if (!isPlainObject(data)) {
+    data = {
+      [Array.isArray(data) ? 'items' : 'result']: data
+    };
+  }
+
+  return data;
+}
+
 // window.apiCaches = apiCaches;