@fe-free/core 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 1.3.2
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.3.2
+
+## 1.3.1
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.3.1
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

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

package/src/crud/crud.stories.tsx

@@ -109,8 +109,78 @@ export const ReadDetail: Story = {
   },
 };
 
+export const MoreCustom: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['create', 'read', 'delete', 'update']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          toolBarRender: () => {
+            return [<div key="custom1">自定义1</div>, <div key="custom2">自定义2</div>];
+          },
+        }}
+        operateColumnProps={{
+          // 自定义宽度
+          width: 300,
+          // 自定义操作列
+          moreOperator: () => {
+            return <div>自定义</div>;
+          },
+          // 自定义操作列之后
+          moreOperatorAfter: () => {
+            return <div>自定义</div>;
+          },
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestGetByRecord={fakeGetByRecord}
+        requestCreateByValues={fakeCreate}
+        requestUpdateById={fakeUpdateById}
+      />
+    );
+  },
+};
+
 // 表格表单和详情表单 ref
-const RefComponent = () => {
+const FormRefComponent = () => {
   const formRef = useRef<any>();
   const [detailFormInstance] = ProForm.useForm();
 
@@ -156,8 +226,8 @@ const RefComponent = () => {
   );
 };
 
-export const Ref: Story = {
-  render: () => <RefComponent />,
+export const FormRef: Story = {
+  render: () => <FormRefComponent />,
 };
 
 // 通过 ref 获取 actionRef
@@ -348,3 +418,37 @@ export const CustomText: Story = {
     );
   },
 };
+
+export const RowSelection: Story = {
+  render: () => {
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns: [
+            {
+              title: 'id',
+              dataIndex: 'id',
+              search: true,
+            },
+            {
+              title: '名字',
+              dataIndex: 'name',
+              search: true,
+            },
+          ],
+          request: fakeRequest,
+        }}
+        batchActions={[
+          {
+            btnText: '批量删除',
+            danger: true,
+            onClick: async (_, { selectedRowKeys }) => {
+              console.log(selectedRowKeys);
+            },
+          },
+        ]}
+      />
+    );
+  },
+};

package/src/crud/crud.tsx

@@ -1,91 +1,19 @@
-import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import type { ActionType } from '@ant-design/pro-components';
 import { Button, Space } from 'antd';
-import type { ReactNode } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import type { TableProps } from '../table';
 import { Table } from '../table';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
-
-/**
- * create 创建
- * read 查看
- * read_detail 详情页查看
- * update 编辑
- * delete 删除
- */
-type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
-
-interface CRUDProps {
-  actions: CrudAction[];
-
-  /** 新建按钮，默认新建 */
-  createButton?: ReactNode;
-
-  /** 表格相关 */
-  tableProps: TableProps;
-  operateColumnProps?: {
-    width?: number;
-    /** 扩展操作区域，再其他操作之前 */
-    moreOperator?: (record) => ReactNode;
-    /** 扩展操作区域，在其他操作之后 */
-    moreOperatorAfter?: (record) => ReactNode;
-  };
-  readProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 打开方式, action 为 read_detail 有效 */
-    target?: '_blank';
-  };
-
-  /** 删除接口 */
-  requestDeleteByRecord?: (record) => Promise<any>;
-  /** 删除相关 */
-  deleteProps?: {
-    /** 显示名称索引 */
-    nameIndex: string;
-    /** 删除确认描述 */
-    desc?: string;
-    /** 文本 */
-    operateText?: string;
-  };
-
-  /** 弹窗表单 */
-  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
-  /** detailForm 的 formRef */
-  detailFormInstance?: ProFormInstance;
-
-  /** 新增接口 */
-  requestCreateByValues?: (values) => Promise<any>;
-  createProps?: {
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 更新接口 */
-  requestUpdateByValues?: (values) => Promise<any>;
-  /** @deprecated 请使用 requestUpdateByValues 替代 */
-  requestUpdateById?: (values) => Promise<any>;
-  updateProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 获取详情接口 */
-  requestGetByRecord?: (record) => Promise<any>;
-
-  /** 跳转到详情的索引 ，默认 id */
-  detailIdIndex?: string;
-}
-
-interface CRUDMethods {
-  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
-}
-
-const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
+import type { CRUDMethods, CRUDProps } from './types';
+import { useRowSelection } from './use_row_selection';
+import { useTips } from './use_tips';
+
+function CRUDComponent<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(props: CRUDProps<DataSource, Key>, ref: React.ForwardedRef<CRUDMethods>) {
   const {
     actions,
     tableProps,
@@ -103,11 +31,14 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     requestUpdateById: originalRequestUpdateById,
     requestUpdateByValues: originalRequestUpdateByValues,
     detailFormInstance,
+    batchActions,
   } = props;
 
+  useTips(props);
+
   const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
 
-  const actionRef = useRef<ActionType>();
+  const actionRef = useRef<ActionType | undefined>(undefined);
 
   useImperativeHandle(ref, () => {
     return {
@@ -248,18 +179,35 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     [actions, createButton, detailProps, handleReload, tableProps],
   );
 
+  const { rowSelection, tableAlertRender, tableAlertOptionRender } = useRowSelection<
+    DataSource,
+    Key
+  >({
+    batchActions,
+    actionRef,
+  });
+
   return (
     <div className="crud-table">
-      <Table
+      <Table<DataSource>
         rowKey="id"
         {...tableProps}
         actionRef={actionRef}
         toolBarRender={toolBarRender}
         columns={newColumns}
+        rowSelection={rowSelection}
+        tableAlertRender={tableAlertRender}
+        tableAlertOptionRender={tableAlertOptionRender}
       />
     </div>
   );
-});
+}
+
+const CRUD = forwardRef(CRUDComponent) as <
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(
+  props: CRUDProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
+) => JSX.Element;
 
 export { CRUD };
-export type { CRUDMethods, CRUDProps };

package/src/crud/crud_delete.tsx

@@ -11,15 +11,20 @@ interface Params {
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
 
-  const doDelete = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
+  const doDelete = useCallback(async () => {
+    await new Promise((resolve) => {
+      Modal.confirm({
+        title: `确认删除 “${name}” 吗？`,
+        content: desc || '删除后不可恢复，请谨慎操作',
+        okText: '确定',
+        cancelText: '取消',
+        onOk: () => {
+          resolve(onDelete());
+        },
+        onCancel: () => {
+          resolve(undefined);
+        },
+      });
     });
   }, [name, desc, onDelete]);
 
@@ -30,20 +35,10 @@ function useDelete(params: Params) {
 
 function OperateDelete(props: Params) {
   const { name, desc, onDelete, operateText } = props;
-  const handleClick = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
-    });
-  }, [name, desc, onDelete]);
+  const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
   return (
-    <a style={{ color: 'red' }} onClick={handleClick}>
+    <a style={{ color: 'red' }} onClick={doDelete}>
       {operateText || '删除'}
     </a>
   );

package/src/crud/index.tsx

@@ -1,5 +1,5 @@
 export { CRUD } from './crud';
-export type { CRUDProps, CRUDMethods } from './crud';
+export { OperateDelete, useDelete } from './crud_delete';
 export { CRUDDetail } from './crud_detail';
 export type { CRUDDetailProps } from './crud_detail';
-export { useDelete, OperateDelete } from './crud_delete';
+export type { CRUDMethods, CRUDProps } from './types';

package/src/crud/types.tsx

@@ -0,0 +1,110 @@
+import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import type { ReactNode } from 'react';
+import type { TableProps } from '../table';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+interface CRUDProps<DataSource = any, Key = string> {
+  actions: CrudAction[];
+
+  // *** 表单 ***
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  // *** Create 新建 ***
+
+  /** 新增接口 */
+  requestCreateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  /** 新建按钮，默认新建 */
+  createButton?: ReactNode;
+  /** create 更多设置 */
+  createProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  // *** Read 表格 ***
+
+  /** 表格相关 */
+  tableProps: TableProps<DataSource>;
+  /** 表格操作列相关 */
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域，再其他操作之前 */
+    moreOperator?: (record: DataSource) => ReactNode;
+    /** 扩展操作区域，在其他操作之后 */
+    moreOperatorAfter?: (record: DataSource) => ReactNode;
+  };
+
+  // *** Read 详情 ***
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record: DataSource) => Promise<any>;
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+  /** read 更多设置 */
+  readProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 打开方式, action 为 read_detail 有效 */
+    target?: '_blank';
+  };
+
+  // *** Update 更新 ***
+
+  /** 更新接口 */
+  requestUpdateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  /** @deprecated 请使用 requestUpdateByValues 替代 */
+  requestUpdateById?: (values: Partial<DataSource>) => Promise<any>;
+  updateProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  // *** Delete 删除 ***
+
+  /** 删除接口 */
+  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: keyof DataSource;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  // *** 批量操作 ***
+
+  /** 批量操作 */
+  batchActions?: {
+    /** 按钮文本 */
+    btnText: string;
+    /** 红色，且有确认框 */
+    danger?: boolean;
+    /** 批量操作接口 */
+    onClick: (
+      event: React.MouseEvent<HTMLElement>,
+      options: { selectedRowKeys: Key[]; selectedRows: DataSource[] },
+    ) => Promise<any>;
+  }[];
+}
+
+interface CRUDMethods {
+  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
+}
+
+export type { CRUDMethods, CRUDProps };

package/src/crud/use_row_selection.tsx

@@ -0,0 +1,91 @@
+import type { ActionType } from '@ant-design/pro-components';
+import { Modal } from 'antd';
+import type { MutableRefObject } from 'react';
+import { useCallback, useMemo } from 'react';
+import { LoadingButton } from '../button';
+import type { CRUDProps } from './types';
+
+function useRowSelection<DataSource, Key>({
+  batchActions,
+  actionRef,
+}: {
+  batchActions?: CRUDProps<DataSource, Key>['batchActions'];
+  actionRef?: MutableRefObject<ActionType | undefined>;
+}) {
+  const rowSelection = useMemo(() => ({}), []);
+
+  const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
+    return (
+      <div>
+        <span>
+          已选 {selectedRowKeys.length} 项
+          <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+            取消选择
+          </a>
+        </span>
+      </div>
+    );
+  }, []);
+
+  const tableAlertOptionRender = useCallback(
+    ({ selectedRowKeys, selectedRows }) => {
+      return (
+        <div className="flex gap-2 items-center">
+          {batchActions?.map((action) => (
+            <LoadingButton
+              key={action.btnText}
+              type="link"
+              danger={action.danger}
+              onClick={async (event) => {
+                if (action.danger) {
+                  await new Promise((resolve) => {
+                    Modal.confirm({
+                      title: `确定要执行 ${action.btnText} 吗？`,
+                      onOk: () => {
+                        resolve(
+                          action.onClick(event, {
+                            selectedRowKeys,
+                            selectedRows,
+                          }),
+                        );
+                      },
+                      onCancel: () => {
+                        resolve(undefined);
+                      },
+                    });
+                  });
+                } else {
+                  await action.onClick(event, {
+                    selectedRowKeys,
+                    selectedRows,
+                  });
+                }
+
+                actionRef?.current?.reload();
+              }}
+            >
+              {action.btnText}
+            </LoadingButton>
+          ))}
+        </div>
+      );
+    },
+    [actionRef, batchActions],
+  );
+
+  if (!batchActions || batchActions.length === 0) {
+    return {
+      rowSelection: undefined,
+      tableAlertRender: undefined,
+      tableAlertOptionRender: undefined,
+    };
+  }
+
+  return {
+    rowSelection,
+    tableAlertRender,
+    tableAlertOptionRender,
+  };
+}
+
+export { useRowSelection };

package/src/crud/use_tips.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import type { CRUDProps } from './types';
+
+function useTips<DataSource, Key>(props: CRUDProps<DataSource, Key>) {
+  useEffect(() => {
+    if (props.actions.includes('create')) {
+      if (!props.requestCreateByValues) {
+        console.warn('actions 包含 create 时，需要传递 requestCreateByValues');
+      }
+    }
+
+    if (props.actions.includes('read')) {
+      if (!props.requestGetByRecord) {
+        console.warn('actions 包含 read 时，需要传递 requestGetByRecord');
+      }
+    }
+
+    if (props.actions.includes('update')) {
+      if (!props.requestGetByRecord || !props.requestUpdateByValues) {
+        console.warn(
+          'actions 包含 update 时，需要传递 requestGetByRecord 和 requestUpdateByValues',
+        );
+      }
+    }
+
+    if (props.actions.includes('delete')) {
+      if (!props.deleteProps?.nameIndex || !props.requestDeleteByRecord) {
+        console.warn('actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord');
+      }
+    }
+  }, []);
+}
+
+export { useTips };

package/src/table/index.tsx

@@ -1,5 +1,5 @@
+import type { ParamsType, ProTableProps } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import type { ProTableProps, ParamsType } from '@ant-design/pro-components';
 import { useMemo } from 'react';
 
 interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
@@ -10,7 +10,7 @@ interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
 
 function Table<
   DataSource extends Record<string, any> = any,
-  Params extends ParamsType = ParamsType
+  Params extends ParamsType = ParamsType,
 >(props: TableProps<DataSource, Params>) {
   const { columns, rowKey = 'id', search, ...rest } = props;
 
@@ -48,7 +48,7 @@ function Table<
       scroll={getTableScroll(newColumns)}
       search={
         hasSearch && {
-          layout: 'vertical',
+          labelWidth: 'auto',
           defaultCollapsed: false,
           ...search,
         }