amis 1.3.5-beta.3 → 1.4.1

package/src/renderers/Table/index.tsx

@@ -35,6 +35,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
 import {
   BaseSchema,
+  SchemaApi,
   SchemaClassName,
   SchemaObject,
   SchemaTokenizeableString,
@@ -109,6 +110,26 @@ export type TableColumnObject = {
    */
   width?: number | string;
 
+  /**
+   * 列对齐方式
+   */
+  align?: 'left' | 'right' | 'center' | 'justify';
+
+  /**
+   * 列样式表
+   */
+  className?: string;
+
+  /**
+   * 单元格样式表达式
+   */
+  classNameExpr?: string;
+
+  /**
+   * 列头样式表
+   */
+  labelClassName?: string;
+
   /**
    * todo
    */
@@ -252,6 +273,11 @@ export interface TableSchema extends BaseSchema {
    * 是否可调整列宽
    */
   resizable?: boolean;
+
+  /**
+   * 行样式表表达式
+   */
+  rowClassNameExpr?: string;
 }
 
 export interface TableProps extends RendererProps {
@@ -321,6 +347,12 @@ export interface TableProps extends RendererProps {
   reUseRow?: boolean;
 }
 
+type ExportExcelToolbar = SchemaNode & {
+  api?: SchemaApi;
+  columns?: string[];
+  filename?: string;
+};
+
 /**
  * 将 url 转成绝对地址
  */
@@ -359,6 +391,7 @@ export default class Table extends React.Component<TableProps, object> {
     'itemDraggableOn',
     'checkOnItemClick',
     'hideCheckToggler',
+    'itemAction',
     'itemActions',
     'combineNum',
     'combineFromIndex',
@@ -656,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();
   }
 
@@ -1531,6 +1570,11 @@ export default class Table extends React.Component<TableProps, object> {
       props.style.width = column.pristine.width;
     }
 
+    if (column.pristine.align) {
+      props.style = props.style || {};
+      props.style.textAlign = column.pristine.align;
+    }
+
     const resizeLine = (
       <div
         className={cx('Table-content-colDragLine')}
@@ -1542,18 +1586,20 @@ export default class Table extends React.Component<TableProps, object> {
     return (
       <th
         {...props}
-        className={cx(
-          props ? (props as any).className : '',
-          column.pristine.className,
-          {
-            'TableCell--sortable': column.sortable,
-            'TableCell--searchable': column.searchable,
-            'TableCell--filterable': column.filterable,
-            'Table-operationCell': column.type === 'operation'
-          }
-        )}
+        className={cx(props ? (props as any).className : '', {
+          'TableCell--sortable': column.sortable,
+          'TableCell--searchable': column.searchable,
+          'TableCell--filterable': column.filterable,
+          'Table-operationCell': column.type === 'operation'
+        })}
       >
-        <div className={cx(`${ns}TableCell--title`)}>
+        <div
+          className={cx(
+            `${ns}TableCell--title`,
+            column.pristine.className,
+            column.pristine.labelClassName
+          )}
+        >
           {column.label ? render('tpl', column.label) : null}
 
           {column.remark
@@ -1782,7 +1828,8 @@ export default class Table extends React.Component<TableProps, object> {
       checkOnItemClick,
       buildItemProps,
       rowClassNameExpr,
-      rowClassName
+      rowClassName,
+      itemAction
     } = this.props;
     const hideHeader = store.filteredColumns.every(column => !column.label);
     const columnsGroup = store.columnGroup;
@@ -1843,6 +1890,7 @@ export default class Table extends React.Component<TableProps, object> {
               store.combineNum > 0 ? 'Table-table--withCombine' : '',
               tableClassName
             )}
+            itemAction={itemAction}
             classnames={cx}
             render={render}
             renderCell={this.renderCell}
@@ -1969,7 +2017,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -1993,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;
@@ -2012,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) {
@@ -2027,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);
@@ -2042,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);
@@ -2075,7 +2134,7 @@ export default class Table extends React.Component<TableProps, object> {
                 }
 
                 const type = (column as BaseSchema).type || 'plain';
-                if (type === 'image') {
+                if (type === 'image' && value) {
                   try {
                     const imageData = await toDataURL(value);
                     const imageDimensions = await getImageDimensions(imageData);
@@ -2135,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 &&
@@ -2148,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) {
@@ -2423,7 +2506,8 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRow,
       locale,
       affixRow,
-      translate
+      translate,
+      itemAction
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2436,6 +2520,7 @@ export default class Table extends React.Component<TableProps, object> {
           store.combineNum > 0 ? 'Table-table--withCombine' : '',
           tableClassName
         )}
+        itemAction={itemAction}
         classnames={cx}
         columns={store.filteredColumns}
         columnsGroup={store.columnGroup}

package/src/schemaExtend.ts

@@ -0,0 +1,66 @@
+/**
+ * 扩展 Schema，目前用于实现 input-kv
+ */
+import {Schema} from './types';
+import {addSchemaFilter} from './factory';
+import {isObject} from './utils/helper';
+
+// input-kv 实际上是 combo 的一种扩展
+addSchemaFilter(function (schema: Schema, renderer, props?: any) {
+  if (schema && schema.type === 'input-kv') {
+    return {
+      ...schema,
+      multiple: true,
+      pipeIn: (value: any) => {
+        if (!isObject(value)) {
+          return [];
+        }
+        const arr: Array<any> = [];
+        Object.keys(value).forEach(key => {
+          const valueType = typeof value[key];
+          arr.push({
+            key: key || '',
+            value:
+              valueType === 'string' ||
+              valueType === 'number' ||
+              valueType === 'boolean'
+                ? value[key]
+                : JSON.stringify(value[key])
+          });
+        });
+        return arr;
+      },
+      pipeOut: (value: any) => {
+        if (!Array.isArray(value)) {
+          return value;
+        }
+        const obj: any = {};
+        value.forEach((item: any) => {
+          const key: string = item.key || '';
+          let value: any = item.value;
+          try {
+            value = JSON.parse(value);
+          } catch (e) {}
+          obj[key] = value;
+        });
+        return obj;
+      },
+      items: [
+        {
+          placeholder: schema.keyPlaceholder ?? 'Key',
+          type: 'input-text',
+          unique: true,
+          name: 'key',
+          required: true
+        },
+        {
+          placeholder: schema.valuePlaceholder ?? 'Value',
+          type: schema.valueType || 'input-text',
+          name: 'value'
+        }
+      ]
+    };
+  }
+
+  return schema;
+});

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/formItem.ts

@@ -285,13 +285,17 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         isRequired: self.required
       };
 
-      // if (typeof minLength === 'number') {
-      //   rules.minLength = minLength;
-      // }
+      // todo 这个弄个配置由渲染器自己来决定
+      // 暂时先这样
+      if (~['input-text', 'textarea'].indexOf(self.type)) {
+        if (typeof minLength === 'number') {
+          rules.minLength = minLength;
+        }
 
-      // if (typeof maxLength === 'number') {
-      //   rules.maxLength = maxLength;
-      // }
+        if (typeof maxLength === 'number') {
+          rules.maxLength = maxLength;
+        }
+      }
 
       if (isObjectShallowModified(rules, self.rules)) {
         self.rules = rules;

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);
   };
 }

package/src/utils/attachmentAdpator.ts

@@ -0,0 +1,90 @@
+/**
+ * 处理接口返回附件的情况，好几个地方用
+ * @param response
+ * @param __
+ * @returns
+ */
+
+export default function attachmentAdpator(response: any, __: Function) {
+  if (response && response.headers && response.headers['content-disposition']) {
+    const disposition = response.headers['content-disposition'];
+    let filename = '';
+
+    if (disposition && disposition.indexOf('attachment') !== -1) {
+      // disposition 有可能是 attachment; filename="??.xlsx"; filename*=UTF-8''%E4%B8%AD%E6%96%87.xlsx
+      // 这种情况下最后一个才是正确的文件名
+      let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)$/;
+
+      let matches = disposition.match(filenameRegex);
+      if (matches && matches.length) {
+        filename = matches[1].replace(`UTF-8''`, '').replace(/['"]/g, '');
+      }
+
+      // 很可能是中文被 url-encode 了
+      if (filename && filename.replace(/[^%]/g, '').length > 2) {
+        filename = decodeURIComponent(filename);
+      }
+
+      let type = response.headers['content-type'];
+      let blob =
+        response.data.toString() === '[object Blob]'
+          ? response.data
+          : new Blob([response.data], {type: type});
+      if (typeof (window.navigator as any).msSaveBlob !== 'undefined') {
+        // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
+        (window.navigator as any).msSaveBlob(blob, filename);
+      } else {
+        let URL = window.URL || (window as any).webkitURL;
+        let downloadUrl = URL.createObjectURL(blob);
+        if (filename) {
+          // use HTML5 a[download] attribute to specify filename
+          let a = document.createElement('a');
+          // safari doesn't support this yet
+          if (typeof a.download === 'undefined') {
+            (window as any).location = downloadUrl;
+          } else {
+            a.href = downloadUrl;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+          }
+        } else {
+          (window as any).location = downloadUrl;
+        }
+        setTimeout(function () {
+          URL.revokeObjectURL(downloadUrl);
+        }, 100); // cleanup
+      }
+
+      return {
+        ...response,
+        data: {
+          status: 0,
+          msg: __('Embed.downloading')
+        }
+      };
+    }
+  } else if (response.data.toString() === '[object Blob]') {
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.addEventListener('loadend', e => {
+        const text = reader.result as string;
+
+        try {
+          resolve({
+            ...response,
+            data: {
+              ...JSON.parse(text)
+            }
+          });
+        } catch (e) {
+          reject(e);
+        }
+      });
+
+      reader.readAsText(response.data);
+    });
+  }
+
+  return response;
+}