amis 1.9.1-beta.12 → 1.9.1-beta.13

package/src/renderers/Table-v2/HeadCellSearchDropdown.tsx

@@ -143,8 +143,8 @@ export class HeadCellSearchDropDown extends React.Component<
     return schema || 'error';
   }
 
-  handleAction(e: any, action: Action, ctx: object, confirm: Function) {
-    const {onAction} = this.props;
+  async handleAction(e: any, action: Action, ctx: object, confirm: Function) {
+    const {onAction, data, dispatchEvent, name} = this.props;
 
     if (action.actionType === 'cancel' || action.actionType === 'close') {
       confirm();
@@ -157,17 +157,14 @@ export class HeadCellSearchDropDown extends React.Component<
       return;
     }
 
-    onAction && onAction(e, action, ctx);
-  }
-
-  async handleReset() {
-    const {onSearch, data, name, store, dispatchEvent} = this.props;
     const values = {...data};
+    this.formItems.forEach(key => setVariable(values, key, undefined));
 
     const rendererEvent = await dispatchEvent(
       'columnSearch',
       createObject(data, {
-        ...values
+        searchName: name,
+        searchValue: values
       })
     );
 
@@ -175,6 +172,13 @@ export class HeadCellSearchDropDown extends React.Component<
       return;
     }
 
+    onAction && onAction(e, action, ctx);
+  }
+
+  async handleReset() {
+    const {onSearch, data, name, store} = this.props;
+    const values = {...data};
+
     this.formItems.forEach(key => setVariable(values, key, undefined));
 
     if (values.orderBy === name) {
@@ -200,7 +204,8 @@ export class HeadCellSearchDropDown extends React.Component<
     const rendererEvent = await dispatchEvent(
       'columnSearch',
       createObject(data, {
-        ...values
+        searchName: name,
+        searchValue: values
       })
     );
 

package/src/renderers/Table-v2/index.tsx

@@ -25,6 +25,7 @@ import {evalExpression, filter} from '../../utils/tpl';
 import {isEffectiveApi} from '../../utils/api';
 import Checkbox from '../../components/Checkbox';
 import {BadgeSchema} from '../../components/Badge';
+import {Icon} from '../../components/icons';
 import {TableStoreV2, ITableStore, IColumn, IRow} from '../../store/table-v2';
 
 import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
@@ -383,10 +384,8 @@ export default class TableRenderer extends React.Component<
 
     onSelect &&
       onSelect(
-        null,
-        false,
-        store.selectedRowKeys.map(item => item),
-        store.selectedRows.map(item => item.data)
+        store.selectedRows.map(item => item.data),
+        store.unSelectedRows.map(item => item.data)
       );
   }
 
@@ -431,11 +430,11 @@ export default class TableRenderer extends React.Component<
     // selectedRowKeysExpr比selectedRowKeys优先级高
     if (props.rowSelection && props.rowSelection.selectedRowKeysExpr) {
       rows.forEach((row: any, index: number) => {
-        const flag = filter(props.rowSelection.selectedRowKeysExpr, {
+        const flag = evalExpression(props.rowSelection.selectedRowKeysExpr, {
           record: row,
           rowIndex: index
         });
-        if (flag === 'true') {
+        if (flag) {
           selectedRowKeys.push(row[props?.rowSelection?.keyField || 'key']);
         }
       });
@@ -450,11 +449,11 @@ export default class TableRenderer extends React.Component<
     let expandedRowKeys: Array<string | number> = [];
     if (props.expandable && props.expandable.expandedRowKeysExpr) {
       rows.forEach((row: any, index: number) => {
-        const flag = filter(props.expandable.expandedRowKeysExpr, {
+        const flag = evalExpression(props.expandable.expandedRowKeysExpr, {
           record: row,
           rowIndex: index
         });
-        if (flag === 'true') {
+        if (flag) {
           expandedRowKeys.push(row[props?.expandable?.keyField || 'key']);
         }
       });
@@ -1019,19 +1018,16 @@ export default class TableRenderer extends React.Component<
 
   @autobind
   async handleSelected(
-    record: any,
-    value: boolean,
     selectedRows: Array<any>,
-    selectedRowKeys: Array<string | number>
+    selectedRowKeys: Array<string | number>,
+    unSelectedRows: Array<string | number>
   ) {
     const {dispatchEvent, data, rowSelection, onSelect, store} = this.props;
     const rendererEvent = await dispatchEvent(
-      'selected',
+      'selectedChange',
       createObject(data, {
-        record,
-        value,
-        selectedRows,
-        selectedRowKeys
+        selectedItems: selectedRows,
+        unSelectedItems: unSelectedRows
       })
     );
 
@@ -1040,24 +1036,17 @@ export default class TableRenderer extends React.Component<
     }
 
     store.updateSelected(selectedRowKeys, rowSelection.keyField);
-    onSelect && onSelect(record, value, selectedRows, selectedRowKeys);
+    onSelect && onSelect(selectedRows, unSelectedRows);
   }
 
   @autobind
-  async handleSelectedAll(
-    value: boolean,
-    selectedRowKeys: Array<string | number>,
-    selectedRows: Array<any>,
-    changeRows: Array<any>
-  ) {
-    const {dispatchEvent, data, rowSelection, onSelectAll, store} = this.props;
+  async handleSort(payload: SortProps) {
+    const {dispatchEvent, data, onSort} = this.props;
     const rendererEvent = await dispatchEvent(
-      'selectedAll',
+      'columnSort',
       createObject(data, {
-        value,
-        selectedRowKeys,
-        selectedRows,
-        changeRows
+        orderBy: payload.orderBy,
+        orderDir: payload.order
       })
     );
 
@@ -1065,64 +1054,88 @@ export default class TableRenderer extends React.Component<
       return rendererEvent?.prevented;
     }
 
-    store.updateSelected(selectedRowKeys, rowSelection.keyField);
-    onSelectAll &&
-      onSelectAll(value, selectedRowKeys, selectedRows, selectedRowKeys);
+    onSort && onSort(payload);
   }
 
   @autobind
-  async handleSort(payload: SortProps) {
-    const {dispatchEvent, data, onSort} = this.props;
+  async handleFilter(payload: {
+    filterName: string,
+    filterValue: string
+  }) {
+    const {dispatchEvent, data, onFilter} = this.props;
     const rendererEvent = await dispatchEvent(
-      'columnSort',
-      createObject(data, {
-        ...payload
-      })
+      'columnFilter',
+      createObject(data, payload)
     );
 
     if (rendererEvent?.prevented) {
       return rendererEvent?.prevented;
     }
 
-    onSort && onSort(payload);
+    onFilter && onFilter(payload);
   }
 
   @autobind
-  async handleFilter(payload: any) {
-    const {dispatchEvent, data, onFilter} = this.props;
+  async handleRowClick(event: React.ChangeEvent<any>, rowItem: any, rowIndex?: number) {
+    const {dispatchEvent, data, onRow} = this.props;
+
     const rendererEvent = await dispatchEvent(
-      'columnFilter',
-      createObject(data, {
-        payload
-      })
+      'rowClick',
+      createObject(data, {rowItem})
     );
 
     if (rendererEvent?.prevented) {
       return rendererEvent?.prevented;
     }
 
-    onFilter && onFilter(payload);
+    if (rowItem && onRow) {
+      onRow.onRowClick && onRow.onRowClick(event, rowItem, rowIndex);
+    }
+  }
+
+  @autobind
+  async handleOrderChange(oldIndex: number, newIndex: number, levels: Array<string>) {
+    const {store} = this.props;
+    const rowItem = store.getRowByIndex(oldIndex, levels);
+
+    store.exchange(oldIndex, newIndex, rowItem);
   }
 
   @autobind
-  async handleDragOver(dataSource: Array<any>) {
-    const {dispatchEvent, data, onDrag} = this.props;
+  async handleSaveOrder() {
+    const {store, onSaveOrder, data, dispatchEvent} = this.props;
+
+    const movedItems = store.movedRows.map(item => item.data);
+    const items = store.rows.map(item => item.getDataWithModifiedChilden());
+
     const rendererEvent = await dispatchEvent(
-      'dragOver',
-      createObject(data, {
-        dataSource
-      })
+      'orderChange',
+      createObject(data, {movedItems})
     );
 
     if (rendererEvent?.prevented) {
-      return rendererEvent?.prevented;
+      return;
+    }
+
+    if (!onSaveOrder || !store.movedRows.length) {
+      return;
     }
 
-    onDrag && onDrag(dataSource);
+    onSaveOrder(
+      movedItems,
+      items
+    );
+  }
+
+  @autobind
+  reset() {
+    const {store} = this.props;
+
+    store.reset();
   }
 
   doAction(action: Action, args: any, throwErrors: boolean): any {
-    const {store, rowSelection} = this.props;
+    const {store, rowSelection, data} = this.props;
 
     const actionType = action?.actionType as string;
     const keyField = rowSelection?.keyField;
@@ -1135,7 +1148,15 @@ export default class TableRenderer extends React.Component<
         store.updateSelected([], keyField);
         break;
       case 'select':
-        store.updateSelected(args?.selectedRowKeys, keyField);
+        const dataSource = store.getData(data);
+        const selected: Array<any> = [];
+        dataSource.items.forEach((item: any, rowIndex: number) => {
+          const flag = evalExpression(args?.selectedRowKeysExpr, {record: item, rowIndex});
+          if (flag) {
+            selected.push(item[keyField]);
+          }
+        });
+        store.updateSelected(selected, keyField);
         break;
       default:
         break;
@@ -1158,6 +1179,7 @@ export default class TableRenderer extends React.Component<
       placeholder,
       rowClassNameExpr,
       itemActions,
+      onRow,
       store,
       ...rest
     } = this.props;
@@ -1310,23 +1332,73 @@ export default class TableRenderer extends React.Component<
         loading={this.renderSchema('loading', loading)}
         placeholder={this.renderSchema('placeholder', placeholder)}
         onSelect={this.handleSelected}
-        onSelectAll={this.handleSelectedAll}
+        onSelectAll={this.handleSelected}
         onSort={this.handleSort}
         onFilter={this.handleFilter}
-        onDrag={this.handleDragOver}
+        onDrag={this.handleOrderChange}
         itemActions={itemActionsConfig}
+        onRow={{
+          ...onRow,
+          onRowClick: this.handleRowClick
+        }}
       ></Table>
     );
   }
 
+  renderHeading() {
+    let {
+      store,
+      classnames: cx,
+      headingClassName,
+      translate: __
+    } = this.props;
+
+    if (store.moved) {
+      return (
+        <div className={cx('Table-heading', headingClassName)} key="heading">
+          {
+            store.moved ? (
+              <span>
+                {__('Table.moved', {
+                  moved: store.moved
+                })}
+                <button
+                  type="button"
+                  className={cx('Button Button--xs Button--success m-l-sm')}
+                  onClick={this.handleSaveOrder}
+                >
+                  <Icon icon="check" className="icon m-r-xs" />
+                  {__('Form.submit')}
+                </button>
+                <button
+                  type="button"
+                  className={cx('Button Button--xs Button--danger m-l-sm')}
+                  onClick={this.reset}
+                >
+                  <Icon icon="close" className="icon m-r-xs" />
+                  {__('Table.discard')}
+                </button>
+              </span>
+            ) : null
+          }
+        </div>
+      );
+    }
+
+    return null;
+  }
+
   render() {
     const {classnames: cx} = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了
+    
+    const heading = this.renderHeading();
 
     return (
       <div className={cx('Table-render-wrapper')}>
         {this.renderActions('header')}
+        {heading}
         {this.renderTable()}
       </div>
     );

package/src/store/table-v2.ts

@@ -23,7 +23,8 @@ import {
   isObject,
   immutableExtends,
   isEmpty,
-  extendObject
+  extendObject,
+  findTree
 } from '../utils/helper';
 import {normalizeApiResponseData} from '../utils/api';
 import {Api, Payload, fetchOptions, ApiObject} from '../types';
@@ -71,6 +72,7 @@ export const Row = types
   .model('Row', {
     storeType: 'Row',
     id: types.identifier,
+    parentId: '',
     key: types.string,
     pristine: types.frozen({} as any), // 原始数据
     data: types.frozen({} as any),
@@ -100,6 +102,10 @@ export const Row = types
       );
     },
 
+    get moved() {
+      return self.index !== self.newIndex;
+    },
+
     get locals(): any {
       let children: Array<any> | null = null;
       if (self.children.length) {
@@ -120,6 +126,20 @@ export const Row = types
             }
           : self.data
       );
+    },
+
+    getDataWithModifiedChilden() {
+      let data = {
+        ...self.data
+      };
+
+      if (data.children && self.children) {
+        data.children = self.children.map(item =>
+          item.getDataWithModifiedChilden()
+        );
+      }
+
+      return data;
     }
   }))
   .actions(self => ({
@@ -161,6 +181,10 @@ export const Row = types
     change(values: object, savePristine?: boolean) {
       self.data = immutableExtends(self.data, values);
       savePristine && (self.pristine = self.data);
+    },
+    reset() {
+      self.newIndex = self.index;
+      self.data = self.pristine;
     }
   }));
 
@@ -250,10 +274,26 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
       });
     }
 
+    function getRowByIndex(rowIndex: number, levels?: Array<string>): IRow {
+      if (levels && levels.length > 0) {
+        const index = +(levels.shift() || 0);
+        return getRowByIndex(index, levels);
+      }
+      return self.rows[rowIndex];
+    }
+
     function isSelected(row: IRow): boolean {
       return !!~self.selectedRows.indexOf(row);
     }
 
+    function getMovedRows() {
+      return flattenTree(self.rows).filter((item: IRow) => item.moved);
+    }
+
+    function getMoved() {
+      return getMovedRows().length;
+    }
+
     return {
       get toggable() {
         return getToggable();
@@ -287,6 +327,10 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
         return self.expandedRowKeys.map(item => item);
       },
 
+      get unSelectedRows() {
+        return getUnSelectedRows();
+      },
+
       // 是否隐藏了某列
       hasColumnHidden() {
         return hasColumnHidden();
@@ -294,7 +338,21 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
 
       getData,
 
-      isSelected
+      getRowById(id: string) {
+        return findTree(self.rows, item => item.id === id);
+      },
+
+      isSelected,
+
+      getRowByIndex,
+
+      get moved() {
+        return getMoved();
+      },
+
+      get movedRows() {
+        return getMovedRows();
+      },
     };
   })
   .actions(self => {
@@ -333,6 +391,31 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
       }
     }
 
+    function exchange(fromIndex: number, toIndex: number, item?: IRow) {
+      item = item || self.rows[fromIndex];
+
+      if (item.parentId) {
+        const parent: IRow = self.getRowById(item.parentId) as any;
+        const offset = parent.children.indexOf(item) - fromIndex;
+        toIndex += offset;
+        fromIndex += offset;
+
+        const newRows = parent.children.concat();
+        newRows.splice(fromIndex, 1);
+        newRows.splice(toIndex, 0, item);
+        newRows.forEach((item, index) => (item.newIndex = index));
+        parent.children.replace(newRows);
+        return;
+      }
+
+      const newRows = self.rows.concat();
+      newRows.splice(fromIndex, 1);
+      newRows.splice(toIndex, 0, item);
+
+      newRows.forEach((item, index) => (item.newIndex = index));
+      self.rows.replace(newRows);
+    }
+
     function persistSaveToggledColumns() {
       const key =
         location.pathname +
@@ -600,6 +683,22 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
       }
     });
 
+    function reset() {
+      self.rows.forEach(item => item.reset());
+      let rows = self.rows.concat();
+      eachTree(rows, item => {
+        if (item.children) {
+          let rows = item.children.concat().sort((a, b) => a.index - b.index);
+          rows.forEach(item => item.reset());
+          item.children.replace(rows);
+        }
+      });
+      rows.forEach(item => item.reset());
+      rows = rows.sort((a, b) => a.index - b.index);
+      self.rows.replace(rows);
+      self.dragging = false;
+    }
+
     return {
       update,
       persistSaveToggledColumns,
@@ -609,6 +708,8 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
       updateSelected,
       updateSelectedAll,
       updateExpanded,
+      exchange,
+      reset,
 
       // events
       afterCreate() {
@@ -631,11 +732,7 @@ export const TableStoreV2 = ServiceStore.named('TableStoreV2')
           }
         }, 200);
       },
-      saveRemote,
-
-      getRowByIndex(rowIndex: number) {
-        return self.rows[rowIndex];
-      }
+      saveRemote
     };
   });
 

package/src/types.ts

@@ -113,7 +113,8 @@ export interface Action extends Button {
     | 'collapse'
     | 'step-submit'
     | 'selectAll'
-    | 'changeTabKey';
+    | 'changeTabKey'
+    | 'click';
   api?: Api;
   asyncApi?: Api;
   payload?: any;