Merge pull request #11369 from F-jianchao/feat-cards

feat: crud的卡片风格支持行点击，选择表格项，行排序事件
baidu · Dec 17, 2024 · 63502ec · 63502ec
2 parents 4fb2323 + 842a8c1
commit 63502ec
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx
@@ -993,6 +993,7 @@ export class ActionRenderer extends React.Component<ActionRendererProps> {
     let confirmText: string = '';
     // 有些组件虽然要求这里忽略二次确认，但是如果配了事件动作还是需要在这里等待二次确认提交才可以
     if (
+      this.props.showConfirmBox !== false && // 外部判断是否开启二次确认弹窗的验证,勿删
       (!ignoreConfirm || hasOnEvent) &&
       action.confirmText &&
       env.confirm &&

diff --git a/packages/amis/src/renderers/Card.tsx b/packages/amis/src/renderers/Card.tsx
@@ -303,6 +303,7 @@ export class CardRenderer extends React.Component<CardProps> {
       itemAction,
       onAction,
       onCheck,
+      onClick,
       selectable,
       checkOnItemClick
     } = this.props;
@@ -326,6 +327,7 @@ export class CardRenderer extends React.Component<CardProps> {
     }
 
     selectable && checkOnItemClick && onCheck?.(item);
+    onClick && onClick(item);
   }
 
   handleAction(e: React.UIEvent<any>, action: ActionObject, ctx: object) {

diff --git a/packages/amis/src/renderers/Cards.tsx b/packages/amis/src/renderers/Cards.tsx
@@ -236,6 +236,7 @@ export default class Cards extends React.Component<GridProps, object> {
 
     this.handleAction = this.handleAction.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
+    this.handleClick = this.handleClick.bind(this);
     this.handleCheckAll = this.handleCheckAll.bind(this);
     this.handleQuickChange = this.handleQuickChange.bind(this);
     this.handleSave = this.handleSave.bind(this);
@@ -367,6 +368,32 @@ export default class Cards extends React.Component<GridProps, object> {
   handleCheck(item: IItem) {
     item.toggle();
     this.syncSelected();
+
+    const {store, dispatchEvent} = this.props;
+    const selectItems = store.selectedItems.map(row => row.data);
+    const unSelectItems = store.unSelectedItems.map(row => row.data);
+
+    dispatchEvent(
+      //增删改查卡片模式选择表格项
+      'selectedChange',
+      createObject(store.data, {
+        selectedItems: selectItems,
+        unSelectedItems: unSelectItems,
+        item: item.data
+      })
+    );
+  }
+
+  handleClick(item: IItem) {
+    const {dispatchEvent, data} = this.props;
+    return dispatchEvent(
+      //增删改查卡片模式单击卡片
+      'rowClick',
+      createObject(data, {
+        item: item.data,
+        index: item.index
+      })
+    );
   }
 
   handleCheckAll() {
@@ -475,9 +502,17 @@ export default class Cards extends React.Component<GridProps, object> {
     );
   }
 
-  handleSaveOrder() {
-    const {store, onSaveOrder} = this.props;
+  async handleSaveOrder() {
+    const {store, onSaveOrder, data, dispatchEvent} = this.props;
+    const movedItems = store.movedItems.map(item => item.data);
 
+    const rendererEvent = await dispatchEvent(
+      'orderChange',
+      createObject(data, {movedItems})
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
     if (!onSaveOrder || !store.movedItems.length) {
       return;
     }
@@ -909,6 +944,7 @@ export default class Cards extends React.Component<GridProps, object> {
       data: item.locals,
       onAction: this.handleAction,
       onCheck: this.handleCheck,
+      onClick: this.handleClick,
       onQuickChange: store.dragging ? null : this.handleQuickChange
     };