amis 1.3.5-beta.6 → 1.4.1-echarts-5.3.1

package/src/renderers/Service.tsx

@@ -7,7 +7,12 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
 import {observer} from 'mobx-react';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  buildApi,
+  isApiOutdated,
+  isEffectiveApi,
+  str2AsyncFunction
+} from '../utils/api';
 import {Spinner} from '../components';
 import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
 import {
@@ -40,6 +45,11 @@ export interface ServiceSchema extends BaseSchema {
    */
   ws?: string;
 
+  /**
+   * 通过调用外部函数来获取数据
+   */
+  dataProvider?: string | Function;
+
   /**
    * 内容区域
    */
@@ -111,6 +121,8 @@ export default class Service extends React.Component<ServiceProps> {
   // 主要是用于关闭 socket
   socket: any;
 
+  dataProviderUnsubscribe?: Function;
+
   static defaultProps: Partial<ServiceProps> = {
     messages: {
       fetchFailed: 'fetchFailed'
@@ -130,6 +142,8 @@ export default class Service extends React.Component<ServiceProps> {
     this.initInterval = this.initInterval.bind(this);
     this.afterDataFetch = this.afterDataFetch.bind(this);
     this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
+    this.runDataProvider = this.runDataProvider.bind(this);
+    this.dataProviderSetData = this.dataProviderSetData.bind(this);
   }
 
   componentDidMount() {
@@ -168,12 +182,21 @@ export default class Service extends React.Component<ServiceProps> {
       if (this.socket) {
         this.socket.close();
       }
-      this.socket = store.fetchWSData(props.ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(props.ws, store.data);
+    }
+
+    if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
+    }
+
+    if (props.dataProvider !== prevProps.dataProvider) {
+      this.runDataProvider();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
+    this.runDataProviderUnsubscribe();
     clearTimeout(this.timer);
     if (this.socket && this.socket.close) {
       this.socket.close();
@@ -189,6 +212,7 @@ export default class Service extends React.Component<ServiceProps> {
       ws,
       initFetch,
       initFetchOn,
+      dataProvider,
       store,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
@@ -212,8 +236,82 @@ export default class Service extends React.Component<ServiceProps> {
     }
 
     if (ws) {
-      this.socket = store.fetchWSData(ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(ws, store.data);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
+  }
+
+  // 使用外部函数获取数据
+  async runDataProvider() {
+    this.runDataProviderUnsubscribe();
+    const {dataProvider, store} = this.props;
+    let dataProviderFunc = dataProvider;
+
+    if (typeof dataProvider === 'string' && dataProvider) {
+      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+    }
+    if (typeof dataProviderFunc === 'function') {
+      const unsubscribe = await dataProviderFunc(
+        store.data,
+        this.dataProviderSetData
+      );
+      if (typeof unsubscribe === 'function') {
+        this.dataProviderUnsubscribe = unsubscribe;
+      }
+    }
+  }
+
+  // 运行销毁外部函数的方法
+  runDataProviderUnsubscribe() {
+    if (typeof this.dataProviderUnsubscribe === 'function') {
+      try {
+        this.dataProviderUnsubscribe();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+
+  // 外部函数回调更新数据
+  dataProviderSetData(data: any) {
+    if (!this.mounted) {
+      return;
+    }
+    const {store} = this.props;
+    store.updateData(data, undefined, false);
+    store.setHasRemoteData();
+  }
+
+  // 使用 websocket 获取使用，因为有异步所以放这里而不是 store 实现
+  fetchWSData(ws: string | Api, data: any) {
+    const {env, store} = this.props;
+    const wsApi = buildApi(ws, data);
+
+    env.wsFetcher(
+      wsApi,
+      (data: any) => {
+        let returndata = data;
+        if ('status' in data && 'data' in data) {
+          returndata = data.data;
+          if (data.status !== 0) {
+            store.updateMessage(data.msg, true);
+            env.notify('error', data.msg);
+            return;
+          }
+        }
+        store.updateData(returndata, undefined, false);
+        store.setHasRemoteData();
+        // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
+        this.afterDataFetch({ok: true, data: returndata});
+      },
+      (error: any) => {
+        store.updateMessage(error, true);
+        env.notify('error', error);
+      }
+    );
   }
 
   afterDataFetch(result: any) {

package/src/renderers/Steps.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {BaseSchema} from '../Schema';
+import {BaseSchema, SchemaCollection} from '../Schema';
 import Steps, {StepStatus} from '../components/Steps';
 import {
   RemoteOptionsProps,
@@ -14,12 +14,12 @@ export type StepSchema = {
   /**
    * 标题
    */
-  title: string;
+  title: string | SchemaCollection;
 
   /**
    * 子标题
    */
-  subTitle?: string;
+  subTitle?: string | SchemaCollection;
 
   /**
    * 图标
@@ -31,7 +31,7 @@ export type StepSchema = {
   /**
    * 描述
    */
-  description?: string;
+  description?: string | SchemaCollection;
 } & Omit<BaseSchema, 'type'>;
 
 export interface StepsSchema extends BaseSchema {
@@ -82,7 +82,8 @@ export function StepsCmpt(props: StepsProps) {
     mode,
     data,
     source,
-    config
+    config,
+    render
   } = props;
   
   const stepsRow =
@@ -90,7 +91,9 @@ export function StepsCmpt(props: StepsProps) {
     config ||
     steps ||
     [];
-
+  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'
+    ? filter(val, data)
+    : val && render('inner', val);
   const value = getPropValue(props) ?? 0;
   const resolveValue =
     typeof value === 'string' && isNaN(+value)
@@ -105,9 +108,9 @@ export function StepsCmpt(props: StepsProps) {
     return {
       ...step,
       status: stepStatus,
-      title: filter(step.title, data),
-      subTitle: filter(step.subTitle || step.value, data),
-      description: filter(step.description, data)
+      title: resolveRender(step.title),
+      subTitle: resolveRender(step.subTitle),
+      description: resolveRender(step.description)
     }
   });
 

package/src/renderers/Table/TableBody.tsx

@@ -24,7 +24,7 @@ export interface TableBodyProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,
@@ -45,6 +45,7 @@ export interface TableBodyProps extends LocaleProps {
   itemAction?: ActionSchema;
 }
 
+@observer
 export class TableBody extends React.Component<TableBodyProps> {
   renderRows(
     rows: Array<any>,
@@ -128,7 +129,7 @@ export class TableBody extends React.Component<TableBodyProps> {
             />
           );
         }
-      } else if (item.children.length) {
+      } else if (item.children.length && item.expanded) {
         // 嵌套表格
         doms.push(
           ...this.renderRows(item.children, columns, {

package/src/renderers/Table/TableContent.tsx

@@ -4,6 +4,7 @@ import {IColumn, IRow} from '../../store/table';
 import {SchemaNode, Action} from '../../types';
 import {TableBody} from './TableBody';
 import {LocaleProps} from '../../locale';
+import {observer} from 'mobx-react';
 import {ActionSchema} from '../Action';
 
 export interface TableContentProps extends LocaleProps {
@@ -31,7 +32,7 @@ export interface TableContentProps extends LocaleProps {
     item: IRow,
     props: any
   ) => React.ReactNode;
-  onCheck: (item: IRow) => void;
+  onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
   onQuickChange?: (
     item: IRow,
     values: object,
@@ -51,6 +52,7 @@ export interface TableContentProps extends LocaleProps {
   itemAction?: ActionSchema;
 }
 
+@observer
 export class TableContent extends React.Component<TableContentProps> {
   render() {
     const {

package/src/renderers/Table/index.tsx

@@ -35,6 +35,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
 import {
   BaseSchema,
+  SchemaApi,
   SchemaClassName,
   SchemaObject,
   SchemaTokenizeableString,
@@ -346,6 +347,12 @@ export interface TableProps extends RendererProps {
   reUseRow?: boolean;
 }
 
+type ExportExcelToolbar = SchemaNode & {
+  api?: SchemaApi;
+  columns?: string[];
+  filename?: string;
+};
+
 /**
  * 将 url 转成绝对地址
  */
@@ -682,8 +689,14 @@ export default class Table extends React.Component<TableProps, object> {
     onAction(e, action, ctx);
   }
 
-  handleCheck(item: IRow) {
-    item.toggle();
+  handleCheck(item: IRow, value: boolean, shift?: boolean) {
+    const {store} = this.props;
+    if (shift) {
+      store.toggleShift(item);
+    } else {
+      item.toggle();
+    }
+
     this.syncSelected();
   }
 
@@ -2004,7 +2017,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -2028,8 +2041,8 @@ export default class Table extends React.Component<TableProps, object> {
             let tmpStore;
             let filename = 'data';
             // 支持配置 api 远程获取
-            if (typeof toolbar === 'object' && (toolbar as Schema).api) {
-              const res = await env.fetcher((toolbar as Schema).api, data);
+            if (typeof toolbar === 'object' && toolbar.api) {
+              const res = await env.fetcher(toolbar.api, data);
               if (!res.data) {
                 env.notify('warning', __('placeholder.noData'));
                 return;
@@ -2047,8 +2060,8 @@ export default class Table extends React.Component<TableProps, object> {
               rows = store.rows;
             }
 
-            if (typeof toolbar === 'object' && (toolbar as Schema).filename) {
-              filename = filter((toolbar as Schema).filename, data, '| raw');
+            if (typeof toolbar === 'object' && toolbar.filename) {
+              filename = filter(toolbar.filename, data, '| raw');
             }
 
             if (rows.length === 0) {
@@ -2062,7 +2075,17 @@ export default class Table extends React.Component<TableProps, object> {
             });
             worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
 
-            const firstRowLabels = columns.map(column => {
+            const filteredColumns = toolbar.columns
+              ? columns.filter(column => {
+                  const filterColumnsNames = toolbar.columns!;
+                  if (filterColumnsNames.indexOf(column.name) !== -1) {
+                    return true;
+                  }
+                  return false;
+                })
+              : columns;
+
+            const firstRowLabels = filteredColumns.map(column => {
               return column.label;
             });
             const firstRow = worksheet.getRow(1);
@@ -2077,14 +2100,15 @@ export default class Table extends React.Component<TableProps, object> {
                 column: firstRowLabels.length
               }
             };
+            // 用于 mapping source 的情况
+            const remoteMappingCache: any = {};
             // 数据从第二行开始
             let rowIndex = 1;
             for (const row of rows) {
               rowIndex += 1;
               const sheetRow = worksheet.getRow(rowIndex);
               let columIndex = 0;
-              const cols = columns as any[]; // 为啥 ts 4.4 得这么做？
-              for (const column of cols) {
+              for (const column of filteredColumns) {
                 columIndex += 1;
                 const name = column.name!;
                 const value = getVariable(row.data, name);
@@ -2170,7 +2194,30 @@ export default class Table extends React.Component<TableProps, object> {
                   };
                 } else if (type === 'mapping') {
                   // 拷贝自 Mapping.tsx
-                  const map = (column as MappingSchema).map;
+                  let map = (column as MappingSchema).map;
+                  const source = (column as MappingSchema).source;
+                  if (source) {
+                    let sourceValue = source;
+                    if (isPureVariable(source)) {
+                      sourceValue = resolveVariableAndFilter(
+                        source as string,
+                        data,
+                        '| raw'
+                      );
+                    }
+
+                    const mapKey = JSON.stringify(source);
+                    if (mapKey in remoteMappingCache) {
+                      map = remoteMappingCache[mapKey];
+                    } else {
+                      const res = await env.fetcher(sourceValue, data);
+                      if (res.data) {
+                        remoteMappingCache[mapKey] = res.data;
+                        map = res.data;
+                      }
+                    }
+                  }
+
                   if (
                     typeof value !== 'undefined' &&
                     map &&
@@ -2183,9 +2230,10 @@ export default class Table extends React.Component<TableProps, object> {
                         : value === false && map['0']
                         ? map['0']
                         : map['*']); // 兼容平台旧用法：即 value 为 true 时映射 1 ，为 false 时映射 0
-                    sheetRow.getCell(columIndex).value = viewValue;
+                    sheetRow.getCell(columIndex).value =
+                      removeHTMLTag(viewValue);
                   } else {
-                    sheetRow.getCell(columIndex).value = value;
+                    sheetRow.getCell(columIndex).value = removeHTMLTag(value);
                   }
                 } else {
                   if ((column as TplSchema).tpl) {

package/src/store/crud.ts

@@ -482,6 +482,39 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
       self.reInitData(data);
     };
 
+    const exportAsCSV = async (
+      options: {loadDataOnce?: boolean; api?: Api; data?: any} = {}
+    ) => {
+      let items = options.loadDataOnce ? self.data.itemsRaw : self.data.items;
+
+      if (options.api) {
+        const env = getEnv(self);
+        const res = await env.fetcher(options.api, options.data);
+        if (!res.data) {
+          return;
+        }
+        if (Array.isArray(res.data)) {
+          items = res.data;
+        } else {
+          items = res.data.rows || res.data.items;
+        }
+      }
+
+      import('papaparse').then((papaparse: any) => {
+        const csvText = papaparse.unparse(items);
+        if (csvText) {
+          const blob = new Blob(
+            // 加上 BOM 这样 Excel 打开的时候就不会乱码
+            [new Uint8Array([0xef, 0xbb, 0xbf]), csvText],
+            {
+              type: 'text/plain;charset=utf-8'
+            }
+          );
+          saveAs(blob, 'data.csv');
+        }
+      });
+    };
+
     return {
       setPristineQuery,
       updateQuery,
@@ -495,44 +528,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
       setUnSelectedItems,
       setInnerModalOpened,
       initFromScope,
-      async exportAsCSV(options: {loadDataOnce?: boolean; api?: Api} = {}) {
-        let items = options.loadDataOnce ? self.data.itemsRaw : self.data.items;
-
-        if (!options.loadDataOnce && options.api) {
-          const json = await self.fetchData(
-            options.api,
-            {
-              ...self.query,
-              page: undefined,
-              perPage: undefined,
-              op: 'export-csv'
-            },
-            {
-              autoAppend: true
-            }
-          );
-          if (
-            json.ok &&
-            (Array.isArray(json.data.items) || Array.isArray(json.data.rows))
-          ) {
-            items = json.data.items || json.data.rows;
-          }
-        }
-
-        import('papaparse').then((papaparse: any) => {
-          const csvText = papaparse.unparse(items);
-          if (csvText) {
-            const blob = new Blob(
-              // 加上 BOM 这样 Excel 打开的时候就不会乱码
-              [new Uint8Array([0xef, 0xbb, 0xbf]), csvText],
-              {
-                type: 'text/plain;charset=utf-8'
-              }
-            );
-            saveAs(blob, 'data.csv');
-          }
-        });
-      }
+      exportAsCSV
     };
   });
 

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

@@ -140,24 +140,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;
     };
@@ -505,7 +487,6 @@ export const ServiceStore = iRendererStore
       markBusying,
       fetchInitData,
       fetchData,
-      fetchWSData,
       reInitData,
       updateMessage,
       clearMessage,

package/src/store/table.ts

@@ -984,11 +984,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 +1005,48 @@ 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 && 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 +1181,7 @@ export const TableStore = iRendererStore
       updateSelected,
       toggleAll,
       toggle,
+      toggleShift,
       toggleExpandAll,
       toggleExpanded,
       collapseAllAtDepth,

package/src/utils/api.ts

@@ -22,6 +22,8 @@ interface ApiCacheConfig extends ApiObject {
 
 const apiCaches: Array<ApiCacheConfig> = [];
 
+const isIE = !!(document as any).documentMode;
+
 export function normalizeApi(
   api: Api,
   defaultMethod: string = 'get'
@@ -293,6 +295,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);
   };
 }