amis 1.4.1 → 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,
@@ -50,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';
 
 /**
  * 表格列，不指定类型时默认为文本类型。
@@ -98,7 +104,7 @@ export type TableColumnObject = {
   /**
    * 是否可快速搜索
    */
-  searchable?: boolean;
+  searchable?: boolean | SchemaObject;
 
   /**
    * 配置是否默认展示
@@ -278,6 +284,16 @@ export interface TableSchema extends BaseSchema {
    * 行样式表表达式
    */
   rowClassNameExpr?: string;
+
+  /**
+   * 行角标
+   */
+  itemBadge?: BadgeSchema;
+
+  /**
+   * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+   */
+  autoGenerateFilter?: boolean;
 }
 
 export interface TableProps extends RendererProps {
@@ -345,6 +361,7 @@ export interface TableProps extends RendererProps {
   popOverContainer?: any;
   canAccessSuperData?: boolean;
   reUseRow?: boolean;
+  itemBadge?: BadgeSchema;
 }
 
 type ExportExcelToolbar = SchemaNode & {
@@ -404,7 +421,8 @@ export default class Table extends React.Component<TableProps, object> {
     'popOverContainer',
     'headerToolbarClassName',
     'toolbarClassName',
-    'footerToolbarClassName'
+    'footerToolbarClassName',
+    'itemBadge'
   ];
   static defaultProps: Partial<TableProps> = {
     className: '',
@@ -477,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,
@@ -655,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();
@@ -1111,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) {
@@ -1129,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;
@@ -1346,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,
@@ -1435,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') {
@@ -1482,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}
@@ -1635,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) {
@@ -1723,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;
 
@@ -1958,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}
           >
@@ -1983,7 +2126,7 @@ export default class Table extends React.Component<TableProps, object> {
             </Checkbox>
           </li>
         ))}
-      </DropDownButton>
+      </ColumnToggler>
     );
   }
 
@@ -2450,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(
@@ -2481,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>
     );
   }
 
@@ -2551,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();
@@ -2569,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
@@ -2602,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/table.ts

@@ -45,6 +45,7 @@ export const Column = types
     checkdisable: false,
     isPrimary: false,
     searchable: types.maybe(types.frozen()),
+    enableSearch: true,
     sortable: false,
     filterable: types.optional(types.frozen(), undefined),
     fixed: '',
@@ -66,8 +67,13 @@ export const Column = types
 
       table.persistSaveToggledColumns();
     },
+
     setToggled(value: boolean) {
       self.toggled = value;
+    },
+
+    setEnableSearch(value: boolean) {
+      self.enableSearch = value;
     }
   }));
 
@@ -292,6 +298,10 @@ export const TableStore = iRendererStore
     keepItemSelectionOnPageChange: false
   })
   .views(self => {
+    function getColumnsExceptBuiltinTypes() {
+      return self.columns.filter(item => !/^__/.test(item.type));
+    }
+
     function getForms() {
       return self.formsRef.map(item => ({
         store: getStoreById(item.id) as IFormStore,
@@ -414,8 +424,8 @@ export const TableStore = iRendererStore
       return getMovedRows().length;
     }
 
-    function getHoverIndex(): number {
-      return self.rows.findIndex(item => item.isHover);
+    function getHovedRow(): IRow | undefined {
+      return flattenTree<IRow>(self.rows).find((item: IRow) => item.isHover);
     }
 
     function getUnSelectedRows() {
@@ -499,11 +509,46 @@ export const TableStore = iRendererStore
       });
     }
 
+    function getFirstToggledColumnIndex() {
+      const column = self.columns.find(
+        column => !/^__/.test(column.type) && column.toggled
+      );
+
+      return column == null ? null : column.index;
+    }
+
+    function getSearchableColumns() {
+      return self.columns.filter(
+        column => column.searchable && isObject(column.searchable)
+      );
+    }
+
+    function getActivedSearchableColumns() {
+      return self.columns.filter(
+        column =>
+          column.searchable &&
+          isObject(column.searchable) &&
+          column.enableSearch
+      );
+    }
+
     return {
+      get columnsData() {
+        return getColumnsExceptBuiltinTypes();
+      },
+
       get forms() {
         return getForms();
       },
 
+      get searchableColumns() {
+        return getSearchableColumns();
+      },
+
+      get activedSearchableColumns() {
+        return getSearchableColumns().filter(column => column.enableSearch);
+      },
+
       get filteredColumns() {
         return getFilteredColumns();
       },
@@ -583,8 +628,8 @@ export const TableStore = iRendererStore
         return getMovedRows();
       },
 
-      get hoverIndex() {
-        return getHoverIndex();
+      get hoverRow() {
+        return getHovedRow();
       },
 
       get disabledHeadCheckbox() {
@@ -598,6 +643,10 @@ export const TableStore = iRendererStore
         return maxLength === selectedLength;
       },
 
+      get firstToggledColumnIndex() {
+        return getFirstToggledColumnIndex();
+      },
+
       getData,
 
       get columnGroup() {
@@ -1031,8 +1080,10 @@ export const TableStore = iRendererStore
         if (idx === -1) {
           // 如果上一个是选中状态，则将之间的所有 check 都变成可选
           if (lastCheckedRow.checked) {
-            if (maxLength && self.selectedRows.length < maxLength) {
-              self.selectedRows.push(rowItem);
+            if (maxLength) {
+              if (self.selectedRows.length < maxLength) {
+                self.selectedRows.push(rowItem);
+              }
             } else {
               self.selectedRows.push(rowItem);
             }

package/src/utils/api.ts

@@ -82,7 +82,9 @@ export function buildApi(
     );
     api.url =
       tokenize(api.url.substring(0, idx + 1), data, '| url_encode') +
-      qsstringify((api.query = dataMapping(params, data))) +
+      qsstringify(
+        (api.query = dataMapping(params, data, undefined, api.convertKeyToPath))
+      ) +
       (~hashIdx ? api.url.substring(hashIdx) : '');
   } else {
     api.url = tokenize(api.url, data, '| url_encode');
@@ -93,7 +95,12 @@ export function buildApi(
   }
 
   if (api.data) {
-    api.body = api.data = dataMapping(api.data, data);
+    api.body = api.data = dataMapping(
+      api.data,
+      data,
+      undefined,
+      api.convertKeyToPath
+    );
   } else if (api.method === 'post' || api.method === 'put') {
     api.body = api.data = cloneObject(data);
   }
@@ -138,7 +145,7 @@ export function buildApi(
   }
 
   if (api.headers) {
-    api.headers = dataMapping(api.headers, data);
+    api.headers = dataMapping(api.headers, data, undefined, false);
   }
 
   if (api.requestAdaptor && typeof api.requestAdaptor === 'string') {
@@ -248,7 +255,9 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
               items: payload.data
             }
           : payload.data) || {}
-      )
+      ),
+      undefined,
+      api.convertKeyToPath
     );
   }
 

package/src/utils/handleAction.ts

@@ -0,0 +1,41 @@
+/**
+ * 后续好多地方可能都要支持 action，所以提取公共功能
+ */
+
+import {RendererProps} from '../factory';
+import {ActionSchema, AjaxActionSchema} from '../renderers/Action';
+import {normalizeApi, str2function} from './api';
+
+export default function handleAction(
+  e: React.MouseEvent<any>,
+  action: ActionSchema,
+  props: RendererProps,
+  data?: any
+) {
+  // https://reactjs.org/docs/legacy-event-pooling.html
+  e.persist();
+
+  const onAction = props.onAction;
+  let onClick: any = action.onClick;
+
+  if (typeof onClick === 'string') {
+    onClick = str2function(onClick, 'event', 'props');
+  }
+  const result: any = onClick && onClick(e, props);
+
+  if (e.isDefaultPrevented() || result === false || !onAction) {
+    return;
+  }
+
+  e.preventDefault();
+
+  // download 是一种 ajax 的简写
+  if (action.actionType === 'download') {
+    action.actionType = 'ajax';
+    const api = normalizeApi((action as AjaxActionSchema).api);
+    api.responseType = 'blob';
+    (action as AjaxActionSchema).api = api;
+  }
+
+  onAction(e, action, data || props.data);
+}

package/src/utils/helper.ts

@@ -181,7 +181,8 @@ export function getVariable(
 export function setVariable(
   data: {[propName: string]: any},
   key: string,
-  value: any
+  value: any,
+  convertKeyToPath?: boolean
 ) {
   data = data || {};
 
@@ -190,7 +191,7 @@ export function setVariable(
     return;
   }
 
-  const parts = keyToPath(key);
+  const parts = convertKeyToPath !== false ? keyToPath(key) : [key];
   const last = parts.pop() as string;
 
   while (parts.length) {
@@ -507,7 +508,6 @@ export function isDisabled(
   );
 }
 
-
 export function hasAbility(
   schema: any,
   ability: string,
@@ -1618,7 +1618,7 @@ export function detectPropValueChanged<
 
 // 去掉字符串中的 html 标签，不完全准确但效率比较高
 export function removeHTMLTag(str: string) {
-  return str.replace(/<\/?[^>]+(>|$)/g, '');
+  return typeof str === 'string' ? str.replace(/<\/?[^>]+(>|$)/g, '') : str;
 }
 
 /**