@fe-free/core 1.4.9 → 1.4.11

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 1.4.11
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.4.11
+
+## 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.11",
   "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.11"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -61,10 +61,9 @@ export const Normal: Story = {
         deleteProps={{
           nameIndex: 'name',
         }}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
             <ProFormText
-              {...formProps}
               name="name"
               label="名字"
               required
@@ -109,6 +108,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,14 +182,14 @@ export const MoreCustom: Story = {
             return <div>自定义</div>;
           },
         }}
+        createButton={<Button type="primary">自定义新建文本</Button>}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
         }}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
             <ProFormText
-              {...formProps}
               name="name"
               label="名字"
               required
@@ -206,17 +233,16 @@ const FormRefComponent = () => {
         request: fakeRequest,
       }}
       detailFormInstance={detailFormInstance}
-      detailForm={(formProps) => (
+      detailForm={() => (
         <>
           <ProFormText
-            {...formProps}
             name="name"
             label="名字"
             required
             rules={[{ required: true }]}
             initialValue={'default'}
           />
-          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
+          <ProFormSwitch name="status" label="开启" initialValue={false} />
         </>
       )}
       requestGetByRecord={fakeGetByRecord}
@@ -408,15 +434,9 @@ export const CustomText: Story = {
           successText: '编辑成功',
         }}
         requestDeleteByRecord={fakeDeleteByRecord}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
-            <ProFormText
-              {...formProps}
-              name="name"
-              label="名字"
-              required
-              rules={[{ required: true }]}
-            />
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
           </>
         )}
         requestGetByRecord={fakeGetByRecord}
@@ -449,7 +469,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

@@ -2,6 +2,7 @@ import type { ActionType } from '@ant-design/pro-components';
 import { Button, message, Space } from 'antd';
 import { isString } from 'lodash-es';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { Link } from 'react-router-dom';
 import type { TableProps } from '../table';
 import { Table } from '../table';
 import { OperateDelete } from './crud_delete';
@@ -32,7 +33,8 @@ function CRUDComponent<
     requestUpdateById,
     requestUpdateByValues,
     detailFormInstance,
-    batchActions,
+    requestDeleteByRecords,
+    batchActions: originBatchActions,
   } = props;
 
   useTips(props);
@@ -121,12 +123,9 @@ function CRUDComponent<
               />
             )}
             {actions.includes('read_detail') && (
-              <a
-                href={`${window.location.pathname}/detail/${record[detailIdIndex || 'id']}`}
-                target={readProps?.target}
-              >
+              <Link to={`./detail/${record[detailIdIndex || 'id']}`} target={readProps?.target}>
                 {readProps?.operateText || '查看'}
-              </a>
+              </Link>
             )}
             {actions.includes('update') && (
               <CRUDDetail
@@ -200,6 +199,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/crud_of_simple.stories.tsx

@@ -41,10 +41,9 @@ export const Normal: Story = {
         deleteProps={{
           nameIndex: 'name',
         }}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
             <ProFormText
-              {...formProps}
               name="name"
               label="名字"
               required
@@ -87,10 +86,9 @@ export const WithSearch: Story = {
         deleteProps={{
           nameIndex: 'name',
         }}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
             <ProFormText
-              {...formProps}
               name="name"
               label="名字"
               required

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');
+      }
+    }
   }, []);
 }