@fe-free/core 1.4.9 → 1.4.10

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 1.4.10
+
+### Patch Changes
+
+- feat: crud batch_delete
+  - @fe-free/tool@1.4.10
+
 ## 1.4.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -35,7 +35,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.4.9"
+    "@fe-free/tool": "1.4.10"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -109,6 +109,34 @@ export const ReadDetail: Story = {
   },
 };
 
+export const BatchDelete: Story = {
+  render: () => {
+    return (
+      <CRUD
+        actions={['batch_delete']}
+        tableProps={{
+          columns: [
+            {
+              title: 'id',
+              dataIndex: 'id',
+              search: true,
+            },
+            {
+              title: '名字',
+              dataIndex: 'name',
+              search: true,
+            },
+          ],
+          request: fakeRequest,
+        }}
+        requestDeleteByRecords={async (records) => {
+          console.log(records);
+        }}
+      />
+    );
+  },
+};
+
 export const MoreCustom: Story = {
   render: () => {
     const columns = [
@@ -155,6 +183,7 @@ export const MoreCustom: Story = {
             return <div>自定义</div>;
           },
         }}
+        createButton={<Button type="primary">自定义新建文本</Button>}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
@@ -449,7 +478,13 @@ export const RowSelection: Story = {
         }}
         batchActions={[
           {
-            btnText: '批量删除',
+            btnText: '批量xxx',
+            onClick: async (_, { selectedRowKeys }) => {
+              console.log(selectedRowKeys);
+            },
+          },
+          {
+            btnText: '批量danger',
             danger: true,
             onClick: async (_, { selectedRowKeys }) => {
               console.log(selectedRowKeys);

package/src/crud/crud.tsx

@@ -32,7 +32,8 @@ function CRUDComponent<
     requestUpdateById,
     requestUpdateByValues,
     detailFormInstance,
-    batchActions,
+    requestDeleteByRecords,
+    batchActions: originBatchActions,
   } = props;
 
   useTips(props);
@@ -200,6 +201,23 @@ function CRUDComponent<
     [actions, createButton, detailProps, handleReload, tableProps],
   );
 
+  const batchActions = useMemo(() => {
+    const bas = [...(originBatchActions || [])];
+
+    if (actions.includes('batch_delete') && requestDeleteByRecords) {
+      const batchDeleteAction = {
+        btnText: '批量删除',
+        danger: true,
+        onClick: async (_, { selectedRows }) => {
+          await requestDeleteByRecords(selectedRows);
+        },
+      };
+      bas.push(batchDeleteAction);
+    }
+
+    return bas;
+  }, [actions, originBatchActions, requestDeleteByRecords]);
+
   const { rowSelection, tableAlertRender, tableAlertOptionRender } = useRowSelection<
     DataSource,
     Key

package/src/crud/types.tsx

@@ -8,13 +8,27 @@ import type { TableProps } from '../table';
  * read_detail 详情页查看
  * update 编辑
  * delete 删除
+ * batch_delete 批量删除
  */
-type CRUDAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+type CRUDAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete' | 'batch_delete';
 
 interface CRUDProps<DataSource = any, Key = string> {
   /** 操作类型 */
   actions: CRUDAction[];
 
+  // *** 表格相关 ***
+
+  /** 表格相关 */
+  tableProps: TableProps<DataSource>;
+  /** 表格操作列相关 */
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域，再其他操作之前 */
+    moreOperator?: (record: DataSource) => ReactNode;
+    /** 扩展操作区域，在其他操作之后 */
+    moreOperatorAfter?: (record: DataSource) => ReactNode;
+  };
+
   // *** 表单 ***
 
   /** 弹窗表单，action 为 read update 时需要传递 */
@@ -38,20 +52,7 @@ interface CRUDProps<DataSource = any, Key = string> {
     successText?: string | (() => string);
   };
 
-  // *** Read 表格 ***
-
-  /** 表格相关 */
-  tableProps: TableProps<DataSource>;
-  /** 表格操作列相关 */
-  operateColumnProps?: {
-    width?: number;
-    /** 扩展操作区域，再其他操作之前 */
-    moreOperator?: (record: DataSource) => ReactNode;
-    /** 扩展操作区域，在其他操作之后 */
-    moreOperatorAfter?: (record: DataSource) => ReactNode;
-  };
-
-  // *** Read 详情 ***
+  // *** Read 查看 ***
 
   /** 获取详情接口 */
   requestGetByRecord?: (record: DataSource) => Promise<DataSource>;
@@ -102,6 +103,11 @@ interface CRUDProps<DataSource = any, Key = string> {
     successText?: string | (() => string);
   };
 
+  // *** batch_delete 批量删除 ***
+
+  /** 批量删除接口 */
+  requestDeleteByRecords?: (records: DataSource[]) => Promise<void>;
+
   // *** 批量操作 ***
 
   /** 批量操作 */

package/src/crud/use_row_selection.tsx

@@ -36,6 +36,7 @@ function useRowSelection<DataSource, Key>({
               key={action.btnText}
               type="link"
               danger={action.danger}
+              className="!px-0"
               onClick={async (event) => {
                 if (action.danger) {
                   await new Promise((resolve) => {

package/src/crud/use_tips.tsx

@@ -37,6 +37,12 @@ function useTips<DataSource, Key>(props: CRUDProps<DataSource, Key>) {
         console.warn('actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord');
       }
     }
+
+    if (props.actions.includes('batch_delete')) {
+      if (!props.requestDeleteByRecords) {
+        console.warn('actions 包含 batch_delete 时，需要传递 requestDeleteByRecords');
+      }
+    }
   }, []);
 }