amis 1.3.4 → 1.4.0

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();
   }
 
@@ -1316,12 +1355,16 @@ export default class Table extends React.Component<TableProps, object> {
       classnames: cx,
       saveImmediately,
       headingClassName,
+      quickSaveApi,
       translate: __
     } = this.props;
 
     if (
       title ||
-      (!saveImmediately && store.modified && !hideQuickSaveBtn) ||
+      (quickSaveApi &&
+        !saveImmediately &&
+        store.modified &&
+        !hideQuickSaveBtn) ||
       store.moved
     ) {
       return (
@@ -1527,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')}
@@ -1538,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
@@ -1778,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;
@@ -1839,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}
@@ -1965,7 +2017,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -1989,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;
@@ -2008,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) {
@@ -2023,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);
@@ -2038,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);
@@ -2071,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);
@@ -2131,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 &&
@@ -2144,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) {
@@ -2419,7 +2506,8 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRow,
       locale,
       affixRow,
-      translate
+      translate,
+      itemAction
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2432,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);
   };
 }