@fe-free/core 1.3.1 → 1.3.2

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.3.1",
+  "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.1"
+    "@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

package/src/crud/crud.tsx

@@ -8,6 +8,7 @@ import { CRUDDetail } from './crud_detail';
 import './style.scss';
 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,
@@ -33,9 +34,11 @@ function CRUDComponent<
     batchActions,
   } = props;
 
+  useTips(props);
+
   const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
 
-  const actionRef = useRef<ActionType>();
+  const actionRef = useRef<ActionType | undefined>(undefined);
 
   useImperativeHandle(ref, () => {
     return {
@@ -181,11 +184,12 @@ function CRUDComponent<
     Key
   >({
     batchActions,
+    actionRef,
   });
 
   return (
     <div className="crud-table">
-      <Table
+      <Table<DataSource>
         rowKey="id"
         {...tableProps}
         actionRef={actionRef}

package/src/crud/types.tsx

@@ -11,17 +11,33 @@ import type { TableProps } from '../table';
  */
 type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
 
-interface CRUDProps<
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
-> {
+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;
     /** 扩展操作区域，再其他操作之前 */
@@ -29,6 +45,14 @@ interface CRUDProps<
     /** 扩展操作区域，在其他操作之后 */
     moreOperatorAfter?: (record: DataSource) => ReactNode;
   };
+
+  // *** Read 详情 ***
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record: DataSource) => Promise<any>;
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+  /** read 更多设置 */
   readProps?: {
     /** 文本 */
     operateText?: string;
@@ -36,29 +60,7 @@ interface CRUDProps<
     target?: '_blank';
   };
 
-  /** 删除接口 */
-  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
-  /** 删除相关 */
-  deleteProps?: {
-    /** 显示名称索引 */
-    nameIndex: keyof DataSource;
-    /** 删除确认描述 */
-    desc?: string;
-    /** 文本 */
-    operateText?: string;
-  };
-
-  /** 弹窗表单 */
-  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
-  /** detailForm 的 formRef */
-  detailFormInstance?: ProFormInstance;
-
-  /** 新增接口 */
-  requestCreateByValues?: (values: Partial<DataSource>) => Promise<any>;
-  createProps?: {
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
+  // *** Update 更新 ***
 
   /** 更新接口 */
   requestUpdateByValues?: (values: Partial<DataSource>) => Promise<any>;
@@ -71,11 +73,21 @@ interface CRUDProps<
     successText?: string | (() => string);
   };
 
-  /** 获取详情接口 */
-  requestGetByRecord?: (record: DataSource) => Promise<any>;
+  // *** Delete 删除 ***
 
-  /** 跳转到详情的索引 ，默认 id */
-  detailIdIndex?: string;
+  /** 删除接口 */
+  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: keyof DataSource;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  // *** 批量操作 ***
 
   /** 批量操作 */
   batchActions?: {

package/src/crud/use_row_selection.tsx

@@ -1,12 +1,17 @@
+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 extends Record<string, any> = any,
-  Key extends string | number = string,
->({ batchActions }: { batchActions?: CRUDProps<DataSource, Key>['batchActions'] }) {
+function useRowSelection<DataSource, Key>({
+  batchActions,
+  actionRef,
+}: {
+  batchActions?: CRUDProps<DataSource, Key>['batchActions'];
+  actionRef?: MutableRefObject<ActionType | undefined>;
+}) {
   const rowSelection = useMemo(() => ({}), []);
 
   const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
@@ -55,6 +60,8 @@ function useRowSelection<
                     selectedRows,
                   });
                 }
+
+                actionRef?.current?.reload();
               }}
             >
               {action.btnText}
@@ -63,7 +70,7 @@ function useRowSelection<
         </div>
       );
     },
-    [batchActions],
+    [actionRef, batchActions],
   );
 
   if (!batchActions || batchActions.length === 0) {

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 };