amis 1.3.5-beta.6 → 1.4.2-beta.1

package/src/renderers/Table/index.tsx

@@ -5,6 +5,7 @@ import {SchemaNode, Action, Schema} from '../../types';
 import forEach from 'lodash/forEach';
 import {filter} from '../../utils/tpl';
 import DropDownButton from '../DropDownButton';
+import './ColumnToggler';
 import Checkbox from '../../components/Checkbox';
 import Button from '../../components/Button';
 import {TableStore, ITableStore, IColumn, IRow} from '../../store/table';
@@ -16,7 +17,9 @@ import {
   autobind,
   isArrayChildrenModified,
   getVariable,
-  removeHTMLTag
+  removeHTMLTag,
+  eachTree,
+  isObject
 } from '../../utils/helper';
 import {
   isPureVariable,
@@ -35,6 +38,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
 import {
   BaseSchema,
+  SchemaApi,
   SchemaClassName,
   SchemaObject,
   SchemaTokenizeableString,
@@ -49,6 +53,9 @@ import {TableBody} from './TableBody';
 import {TplSchema} from '../Tpl';
 import {MappingSchema} from '../Mapping';
 import {isAlive, getSnapshot} from 'mobx-state-tree';
+import ItemActionsWrapper from './ItemActionsWrapper';
+import ColumnToggler from './ColumnToggler';
+import {BadgeSchema} from '../../components/Badge';
 
 /**
  * 表格列，不指定类型时默认为文本类型。
@@ -97,7 +104,7 @@ export type TableColumnObject = {
   /**
    * 是否可快速搜索
    */
-  searchable?: boolean;
+  searchable?: boolean | SchemaObject;
 
   /**
    * 配置是否默认展示
@@ -277,6 +284,16 @@ export interface TableSchema extends BaseSchema {
    * 行样式表表达式
    */
   rowClassNameExpr?: string;
+
+  /**
+   * 行角标
+   */
+  itemBadge?: BadgeSchema;
+
+  /**
+   * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+   */
+  autoGenerateFilter?: boolean;
 }
 
 export interface TableProps extends RendererProps {
@@ -344,8 +361,15 @@ export interface TableProps extends RendererProps {
   popOverContainer?: any;
   canAccessSuperData?: boolean;
   reUseRow?: boolean;
+  itemBadge?: BadgeSchema;
 }
 
+type ExportExcelToolbar = SchemaNode & {
+  api?: SchemaApi;
+  columns?: string[];
+  filename?: string;
+};
+
 /**
  * 将 url 转成绝对地址
  */
@@ -397,7 +421,8 @@ export default class Table extends React.Component<TableProps, object> {
     'popOverContainer',
     'headerToolbarClassName',
     'toolbarClassName',
-    'footerToolbarClassName'
+    'footerToolbarClassName',
+    'itemBadge'
   ];
   static defaultProps: Partial<TableProps> = {
     className: '',
@@ -470,6 +495,8 @@ export default class Table extends React.Component<TableProps, object> {
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.subFormRef = this.subFormRef.bind(this);
+    this.handleColumnToggle = this.handleColumnToggle.bind(this);
+    this.renderAutoFilterForm = this.renderAutoFilterForm.bind(this);
 
     const {
       store,
@@ -648,8 +675,12 @@ export default class Table extends React.Component<TableProps, object> {
     ) {
       Table.syncRows(store, props, prevProps) && this.syncSelected();
     } else if (isArrayChildrenModified(prevProps.selected!, props.selected!)) {
+      const prevSelectedRows = store.selectedRows
+        .map(item => item.id)
+        .join(',');
       store.updateSelected(props.selected || [], props.valueField);
-      this.syncSelected();
+      const selectedRows = store.selectedRows.map(item => item.id).join(',');
+      prevSelectedRows !== selectedRows && this.syncSelected();
     }
 
     this.updateTableInfoLazy();
@@ -682,8 +713,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();
   }
 
@@ -1098,7 +1135,7 @@ export default class Table extends React.Component<TableProps, object> {
 
   handleMouseMove(e: React.MouseEvent<any>) {
     const tr: HTMLElement = (e.target as HTMLElement).closest(
-      'tr[data-index]'
+      'tr[data-id]'
     ) as HTMLElement;
 
     if (!tr) {
@@ -1116,20 +1153,20 @@ export default class Table extends React.Component<TableProps, object> {
       return;
     }
 
-    const index = parseInt(tr.getAttribute('data-index') as string, 10);
+    const id = tr.getAttribute('data-id') as string;
+    const row = store.hoverRow;
 
-    if (store.hoverIndex === index) {
+    if (row?.id === id) {
       return;
     }
-    store.rows.forEach((item, key) => item.setIsHover(index === key));
+    eachTree<IRow>(store.rows, (item: IRow) => item.setIsHover(item.id === id));
   }
 
   handleMouseLeave() {
     const store = this.props.store;
+    const row = store.hoverRow;
 
-    if (~store.hoverIndex) {
-      store.rows[store.hoverIndex].setIsHover(false);
-    }
+    row?.setIsHover(false);
   }
 
   draggingTr: HTMLTableRowElement;
@@ -1333,6 +1370,111 @@ export default class Table extends React.Component<TableProps, object> {
     document.removeEventListener('mouseup', this.handleColResizeMouseUp);
   }
 
+  handleColumnToggle(columns: Array<IColumn>) {
+    const {store} = this.props;
+
+    store.update({columns});
+  }
+
+  renderAutoFilterForm(): React.ReactNode {
+    const {
+      render,
+      store,
+      onSearchableFromReset,
+      onSearchableFromSubmit,
+      onSearchableFromInit,
+      classnames: cx,
+      translate: __
+    } = this.props;
+    const searchableColumns = store.searchableColumns;
+    const activedSearchableColumns = store.activedSearchableColumns;
+
+    if (!searchableColumns.length) {
+      return null;
+    }
+
+    const groupedSearchableColumns: Array<Record<string, any>> = [
+      {body: [], md: 4},
+      {body: [], md: 4},
+      {body: [], md: 4}
+    ];
+
+    activedSearchableColumns.forEach((column, index) => {
+      groupedSearchableColumns[index % 3].body.push({
+        ...column.searchable,
+        name: column.searchable?.name ?? column.name,
+        label: column.searchable?.label ?? column.label,
+        mode: 'horizontal'
+      });
+    });
+
+    return render(
+      'searchable-form',
+      {
+        type: 'form',
+        api: null,
+        title: '',
+        mode: 'normal',
+        submitText: __('search'),
+        body: [
+          {
+            type: 'grid',
+            columns: groupedSearchableColumns
+          }
+        ],
+        actions: [
+          {
+            type: 'dropdown-button',
+            label: __('Table.searchFields'),
+            className: cx('Table-searchableForm-dropdown', 'mr-2'),
+            level: 'link',
+            trigger: 'click',
+            size: 'sm',
+            align: 'right',
+            buttons: searchableColumns.map(column => {
+              return {
+                type: 'checkbox',
+                className: cx('Table-searchableForm-checkbox'),
+                name: `__search_${column.searchable?.name ?? column.name}`,
+                option: column.searchable?.label ?? column.label,
+                value: column.enableSearch,
+                badge: {
+                  offset: [-10, 5],
+                  visibleOn: `${
+                    column.toggable && !column.toggled && column.enableSearch
+                  }`
+                },
+                onChange: (value: boolean) => {
+                  column.setEnableSearch(value);
+                }
+              };
+            })
+          },
+          {
+            type: 'submit',
+            label: __('search'),
+            level: 'primary',
+            className: 'w-18'
+          },
+          {
+            type: 'reset',
+            label: __('reset'),
+            className: 'w-18'
+          }
+        ]
+      },
+      {
+        key: 'searchable-form',
+        panelClassName: cx('Table-searchableForm'),
+        actionsClassName: cx('Table-searchableForm-footer'),
+        onReset: onSearchableFromReset,
+        onSubmit: onSearchableFromSubmit,
+        onInit: onSearchableFromInit,
+        formStore: undefined
+      }
+    );
+  }
+
   renderHeading() {
     let {
       title,
@@ -1422,7 +1564,8 @@ export default class Table extends React.Component<TableProps, object> {
       render,
       classPrefix: ns,
       resizable,
-      classnames: cx
+      classnames: cx,
+      autoGenerateFilter
     } = this.props;
 
     if (column.type === '__checkme') {
@@ -1469,7 +1612,7 @@ export default class Table extends React.Component<TableProps, object> {
 
     let affix = null;
 
-    if (column.searchable && column.name) {
+    if (column.searchable && column.name && !autoGenerateFilter) {
       affix = (
         <HeadCellSearchDropDown
           {...this.props}
@@ -1622,7 +1765,8 @@ export default class Table extends React.Component<TableProps, object> {
       classnames: cx,
       checkOnItemClick,
       popOverContainer,
-      canAccessSuperData
+      canAccessSuperData,
+      itemBadge
     } = this.props;
 
     if (column.name && item.rowSpans[column.name] === 0) {
@@ -1710,7 +1854,13 @@ export default class Table extends React.Component<TableProps, object> {
       quickEditFormRef: this.subFormRef,
       prefix,
       onImageEnlarge: this.handleImageEnlarge,
-      canAccessSuperData
+      canAccessSuperData,
+      row: item,
+      itemBadge,
+      showBadge:
+        !props.isHead &&
+        itemBadge &&
+        store.firstToggledColumnIndex === props.colIndex
     };
     delete subProps.label;
 
@@ -1945,23 +2095,29 @@ export default class Table extends React.Component<TableProps, object> {
     }
 
     return (
-      <DropDownButton
+      <ColumnToggler
         {...rest}
-        tooltip={__('Table.columnsVisibility')}
+        {...(isObject(config) ? config : {})}
+        tooltip={config?.tooltip || __('Table.columnsVisibility')}
         tooltipContainer={
           env && env.getModalContainer ? env.getModalContainer : undefined
         }
-        align={config ? config.align : 'left'}
+        align={config?.align ?? 'left'}
         isActived={store.hasColumnHidden()}
         classnames={cx}
         classPrefix={ns}
         key="columns-toggable"
-        size="sm"
-        label={<Icon icon="columns" className="icon m-r-none" />}
+        size={config?.size || 'sm'}
+        label={
+          config?.label || <Icon icon="columns" className="icon m-r-none" />
+        }
+        draggable={config?.draggable}
+        columns={store.columnsData}
+        onColumnToggle={this.handleColumnToggle}
       >
         {store.toggableColumns.map(column => (
           <li
-            className={cx('DropDown-menuItem')}
+            className={cx('ColumnToggler-menuItem')}
             key={column.index}
             onClick={column.toggleToggle}
           >
@@ -1970,7 +2126,7 @@ export default class Table extends React.Component<TableProps, object> {
             </Checkbox>
           </li>
         ))}
-      </DropDownButton>
+      </ColumnToggler>
     );
   }
 
@@ -2004,7 +2160,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -2028,8 +2184,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 +2203,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 +2218,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 +2243,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 +2337,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 +2373,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) {
@@ -2402,27 +2593,9 @@ export default class Table extends React.Component<TableProps, object> {
     if (!finalActions.length) {
       return null;
     }
-    const rowIndex = store.hoverIndex;
-    const heights = this.heights;
-    let height = 40;
-    let top = 0;
-
-    if (heights && heights[rowIndex]) {
-      height = heights[rowIndex];
-      top += heights.header;
-      for (let i = rowIndex - 1; i >= 0; i--) {
-        top += heights[i];
-      }
-    }
 
     return (
-      <div
-        className={cx('Table-itemActions-wrap')}
-        style={{
-          top,
-          height
-        }}
-      >
+      <ItemActionsWrapper store={store} classnames={cx}>
         <div className={cx('Table-itemActions')}>
           {finalActions.map((action, index) =>
             render(
@@ -2433,14 +2606,14 @@ export default class Table extends React.Component<TableProps, object> {
               },
               {
                 key: index,
-                item: store.rows[rowIndex],
-                data: store.rows[rowIndex].locals,
-                rowIndex
+                item: store.hoverRow,
+                data: store.hoverRow!.locals,
+                rowIndex: store.hoverRow!.index
               }
             )
           )}
         </div>
-      </div>
+      </ItemActionsWrapper>
     );
   }
 
@@ -2503,7 +2676,13 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   render() {
-    const {className, store, classnames: cx, affixColumns} = this.props;
+    const {
+      className,
+      store,
+      classnames: cx,
+      affixColumns,
+      autoGenerateFilter
+    } = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
     const heading = this.renderHeading();
@@ -2521,6 +2700,7 @@ export default class Table extends React.Component<TableProps, object> {
           'Table--unsaved': !!store.modified || !!store.moved
         })}
       >
+        {autoGenerateFilter ? this.renderAutoFilterForm() : null}
         {header}
         {heading}
         <div
@@ -2554,7 +2734,7 @@ export default class Table extends React.Component<TableProps, object> {
               : null}
           </div>
           {this.renderTableContent()}
-          {~store.hoverIndex ? this.renderItemActions() : null}
+          {store.hoverRow ? this.renderItemActions() : null}
         </div>
         {this.renderAffixHeader(tableClassName)}
         {footer}

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,