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

package/src/renderers/Table/index.tsx

@@ -5,9 +5,11 @@ 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';
+import {saveAs} from 'file-saver';
 import {
   anyChanged,
   getScrollParent,
@@ -16,7 +18,10 @@ import {
   autobind,
   isArrayChildrenModified,
   getVariable,
-  removeHTMLTag
+  removeHTMLTag,
+  eachTree,
+  isObject,
+  createObject
 } from '../../utils/helper';
 import {
   isPureVariable,
@@ -35,6 +40,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import {TableContent} from './TableContent';
 import {
   BaseSchema,
+  SchemaApi,
   SchemaClassName,
   SchemaObject,
   SchemaTokenizeableString,
@@ -49,6 +55,10 @@ import {TableBody} from './TableBody';
 import {TplSchema} from '../Tpl';
 import {MappingSchema} from '../Mapping';
 import {isAlive, getSnapshot} from 'mobx-state-tree';
+import ColumnToggler from './ColumnToggler';
+import {BadgeSchema} from '../../components/Badge';
+import offset from '../../utils/offset';
+import {getStyleNumber} from '../../utils/dom';
 
 /**
  * 表格列，不指定类型时默认为文本类型。
@@ -97,7 +107,7 @@ export type TableColumnObject = {
   /**
    * 是否可快速搜索
    */
-  searchable?: boolean;
+  searchable?: boolean | SchemaObject;
 
   /**
    * 配置是否默认展示
@@ -277,6 +287,16 @@ export interface TableSchema extends BaseSchema {
    * 行样式表表达式
    */
   rowClassNameExpr?: string;
+
+  /**
+   * 行角标
+   */
+  itemBadge?: BadgeSchema;
+
+  /**
+   * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+   */
+  autoGenerateFilter?: boolean;
 }
 
 export interface TableProps extends RendererProps {
@@ -344,8 +364,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 +424,9 @@ export default class Table extends React.Component<TableProps, object> {
     'popOverContainer',
     'headerToolbarClassName',
     'toolbarClassName',
-    'footerToolbarClassName'
+    'footerToolbarClassName',
+    'itemBadge',
+    'autoFillHeight'
   ];
   static defaultProps: Partial<TableProps> = {
     className: '',
@@ -470,6 +499,9 @@ 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);
+    this.updateAutoFillHeight = this.updateAutoFillHeight.bind(this);
 
     const {
       store,
@@ -580,6 +612,68 @@ export default class Table extends React.Component<TableProps, object> {
     this.affixDetect();
     parent.addEventListener('scroll', this.affixDetect);
     window.addEventListener('resize', this.affixDetect);
+    this.updateAutoFillHeight();
+    window.addEventListener('resize', this.updateAutoFillHeight);
+  }
+
+  /**
+   * 自动设置表格高度占满界面剩余区域
+   * 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
+   */
+  updateAutoFillHeight() {
+    const {autoFillHeight, footerToolbar, classPrefix: ns} = this.props;
+    if (!autoFillHeight) {
+      return;
+    }
+    const table = findDOMNode(this) as HTMLElement;
+    const tableContent = table.querySelector(
+      `.${ns}Table-content`
+    ) as HTMLElement;
+    const tableContentWrap = table.querySelector(
+      `.${ns}Table-contentWrap`
+    ) as HTMLElement;
+    const footToolbar = table.querySelector(
+      `.${ns}Table-footToolbar`
+    ) as HTMLElement;
+    if (!tableContent) {
+      return;
+    }
+
+    // 计算 table-content 在 dom 中的位置
+    const tableContentTop = offset(tableContent).top;
+    const viewportHeight = window.innerHeight;
+    // 有时候会拿不到 footToolbar？
+    const footToolbarHeight = footToolbar ? offset(footToolbar).height : 0;
+    // 有时候会拿不到 footToolbar，等一下在执行
+    if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
+      setTimeout(() => {
+        this.updateAutoFillHeight();
+      }, 100);
+      return;
+    }
+    const tableContentWrapMarginButtom = getStyleNumber(
+      tableContentWrap,
+      'margin-bottom'
+    );
+
+    // 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
+    let allParentPaddingButtom = 0;
+    let parentNode = tableContent.parentElement;
+    while (parentNode) {
+      const paddingButtom = getStyleNumber(parentNode, 'padding-bottom');
+      const borderBottom = getStyleNumber(parentNode, 'border-bottom-width');
+      allParentPaddingButtom =
+        allParentPaddingButtom + paddingButtom + borderBottom;
+      parentNode = parentNode.parentElement;
+    }
+
+    tableContent.style.height = `${
+      viewportHeight -
+      tableContentTop -
+      tableContentWrapMarginButtom -
+      footToolbarHeight -
+      allParentPaddingButtom
+    }px`;
   }
 
   componentDidUpdate(prevProps: TableProps) {
@@ -648,8 +742,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();
@@ -661,6 +759,7 @@ export default class Table extends React.Component<TableProps, object> {
     const parent = this.parentNode;
     parent && parent.removeEventListener('scroll', this.affixDetect);
     window.removeEventListener('resize', this.affixDetect);
+    window.removeEventListener('resize', this.updateAutoFillHeight);
     (this.updateTableInfoLazy as any).cancel();
     this.unSensor && this.unSensor();
 
@@ -682,8 +781,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();
   }
 
@@ -844,7 +949,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   affixDetect() {
-    if (!this.props.affixHeader || !this.table) {
+    if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
       return;
     }
 
@@ -1098,7 +1203,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 +1221,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 +1438,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 +1632,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 +1680,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 +1833,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 +1922,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 +2163,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 +2194,7 @@ export default class Table extends React.Component<TableProps, object> {
             </Checkbox>
           </li>
         ))}
-      </DropDownButton>
+      </ColumnToggler>
     );
   }
 
@@ -2004,7 +2228,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderExportExcel(toolbar: SchemaNode) {
+  renderExportExcel(toolbar: ExportExcelToolbar) {
     const {
       store,
       env,
@@ -2028,8 +2252,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 +2271,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 +2286,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 +2311,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 +2405,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,14 +2441,18 @@ 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) {
                     sheetRow.getCell(columIndex).value = removeHTMLTag(
-                      filter((column as TplSchema).tpl, row.data)
+                      filter(
+                        (column as TplSchema).tpl,
+                        createObject(data, row.data)
+                      )
                     );
                   } else {
                     sheetRow.getCell(columIndex).value = value;
@@ -2393,57 +2655,6 @@ export default class Table extends React.Component<TableProps, object> {
       : footerNode || toolbarNode || null;
   }
 
-  renderItemActions() {
-    const {itemActions, render, store, classnames: cx} = this.props;
-    const finalActions = Array.isArray(itemActions)
-      ? itemActions.filter(action => !action.hiddenOnHover)
-      : [];
-
-    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
-        }}
-      >
-        <div className={cx('Table-itemActions')}>
-          {finalActions.map((action, index) =>
-            render(
-              `itemAction/${index}`,
-              {
-                ...(action as any),
-                isMenuItem: true
-              },
-              {
-                key: index,
-                item: store.rows[rowIndex],
-                data: store.rows[rowIndex].locals,
-                rowIndex
-              }
-            )
-          )}
-        </div>
-      </div>
-    );
-  }
-
   renderTableContent() {
     const {
       classnames: cx,
@@ -2458,8 +2669,11 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRow,
       locale,
       affixRow,
+      tableContentClassName,
       translate,
-      itemAction
+      itemAction,
+      autoFillHeight,
+      itemActions
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2470,9 +2684,13 @@ export default class Table extends React.Component<TableProps, object> {
       <TableContent
         tableClassName={cx(
           store.combineNum > 0 ? 'Table-table--withCombine' : '',
+          {'Table-table--checkOnItemClick': checkOnItemClick},
           tableClassName
         )}
+        className={tableContentClassName}
+        itemActions={itemActions}
         itemAction={itemAction}
+        store={store}
         classnames={cx}
         columns={store.filteredColumns}
         columnsGroup={store.columnGroup}
@@ -2503,7 +2721,14 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   render() {
-    const {className, store, classnames: cx, affixColumns} = this.props;
+    const {
+      className,
+      store,
+      classnames: cx,
+      affixColumns,
+      autoFillHeight,
+      autoGenerateFilter
+    } = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
     const heading = this.renderHeading();
@@ -2518,9 +2743,11 @@ export default class Table extends React.Component<TableProps, object> {
     return (
       <div
         className={cx('Table', className, {
-          'Table--unsaved': !!store.modified || !!store.moved
+          'Table--unsaved': !!store.modified || !!store.moved,
+          'Table--autoFillHeight': autoFillHeight
         })}
       >
+        {autoGenerateFilter ? this.renderAutoFilterForm() : null}
         {header}
         {heading}
         <div
@@ -2554,7 +2781,6 @@ export default class Table extends React.Component<TableProps, object> {
               : null}
           </div>
           {this.renderTableContent()}
-          {~store.hoverIndex ? this.renderItemActions() : null}
         </div>
         {this.renderAffixHeader(tableClassName)}
         {footer}