@fe-free/core 3.0.36 → 3.0.38

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 3.0.38
+
+### Patch Changes
+
+- feat: some
+  - @fe-free/icons@3.0.38
+  - @fe-free/tool@3.0.38
+
+## 3.0.37
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/icons@3.0.37
+  - @fe-free/tool@3.0.37
+
 ## 3.0.36
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.36",
+  "version": "3.0.38",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -46,8 +46,8 @@
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
     "react": "^19.2.0",
-    "@fe-free/icons": "3.0.36",
-    "@fe-free/tool": "3.0.36"
+    "@fe-free/tool": "3.0.38",
+    "@fe-free/icons": "3.0.38"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/crud/crud.tsx

@@ -1,16 +1,13 @@
 import type { ActionType } from '@ant-design/pro-components';
-import { EditOutlined, EyeOutlined } from '@fe-free/icons';
-import { Button, message, Tooltip } from 'antd';
+import { Button } from 'antd';
 import classNames from 'classnames';
-import { isString } from 'lodash-es';
 import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
-import type { TableProps } from './table';
 import { getTableScroll, Table } from './table';
 import type { CRUDProps } from './types';
+import { useNoColumn } from './use_no_column';
+import { useOperate } from './use_operate';
 import { useRowSelection } from './use_row_selection';
 import { useTips } from './use_tips';
 
@@ -21,11 +18,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
     actions,
     tableProps,
     createButton,
-    operateColumnProps,
     readProps,
-    requestDeleteByRecord,
-    deleteProps,
-    detailIdIndex,
     detailForm,
     requestGetByRecord,
     createProps,
@@ -73,195 +66,18 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
     ],
   );
 
-  const getHandleDelete = useCallback(
-    (record) => {
-      return () => {
-        if (requestDeleteByRecord) {
-          let content = '删除成功';
-          if (deleteProps?.successText) {
-            content = isString(deleteProps.successText)
-              ? deleteProps.successText
-              : deleteProps.successText();
-          }
-          return requestDeleteByRecord(record).then(() => {
-            message.open({
-              type: 'success',
-              content,
-            });
-            actionRef.current?.reload();
-          });
-        }
-
-        throw new Error('没有传 requestDeleteByRecord');
-      };
-    },
-    [deleteProps, requestDeleteByRecord],
-  );
-
   const handleReload = useCallback(() => {
     actionRef.current?.reload();
   }, []);
 
-  const newColumns = useMemo(() => {
-    const idField = tableProps.rowKey || 'id';
-
-    const operateColumn = {
-      title: '操作',
-      fixed: 'right',
-      align: 'center',
-      width: operateColumnProps?.width || 120,
-      render: function (_, record) {
-        const btns: React.ReactNode[] = [];
-
-        if (actions.includes('read')) {
-          const hidden = readProps?.operateIsHidden?.(record) || false;
-          if (!hidden) {
-            const disabled = readProps?.operateIsDisabled?.(record) || false;
-            if (disabled) {
-              btns.push(
-                <Tooltip title={readProps?.operateText || '查看'}>
-                  <span key="read" className="cursor-not-allowed text-lg text-03">
-                    {readProps?.operateText || <EyeOutlined />}
-                  </span>
-                </Tooltip>,
-              );
-            } else {
-              btns.push(
-                <CRUDDetail
-                  key="read"
-                  id={record[idField]}
-                  record={record}
-                  onSuccess={handleReload}
-                  trigger={
-                    <Tooltip title={readProps?.operateText || '查看'}>
-                      <a className="text-lg">{readProps?.operateText || <EyeOutlined />}</a>
-                    </Tooltip>
-                  }
-                  action="read"
-                  {...detailProps}
-                />,
-              );
-            }
-          }
-        }
-
-        if (actions.includes('read_detail')) {
-          const hidden = readProps?.operateIsHidden?.(record) || false;
-          if (!hidden) {
-            const disabled = readProps?.operateIsDisabled?.(record) || false;
-            if (disabled) {
-              btns.push(
-                <Tooltip title={readProps?.operateText || '查看'}>
-                  <span key="read" className="cursor-not-allowed text-lg text-03">
-                    {readProps?.operateText || <EyeOutlined />}
-                  </span>
-                </Tooltip>,
-              );
-            } else {
-              btns.push(
-                <Tooltip title={readProps?.operateText || '查看'}>
-                  <Link
-                    key="read_detail"
-                    to={`./detail/${record[detailIdIndex || 'id']}`}
-                    target={readProps?.target}
-                    className="text-lg"
-                  >
-                    {readProps?.operateText || <EyeOutlined />}
-                  </Link>
-                </Tooltip>,
-              );
-            }
-          }
-        }
-
-        if (actions.includes('update')) {
-          const hidden = updateProps?.operateIsHidden?.(record) || false;
-          if (!hidden) {
-            const disabled = updateProps?.operateIsDisabled?.(record) || false;
-
-            if (disabled) {
-              btns.push(
-                <Tooltip title={updateProps?.operateText || '编辑'}>
-                  <span key="update" className="cursor-not-allowed text-lg text-03">
-                    {updateProps?.operateText || <EditOutlined />}
-                  </span>
-                </Tooltip>,
-              );
-            } else {
-              btns.push(
-                <CRUDDetail
-                  key="update"
-                  id={record[idField]}
-                  record={record}
-                  onSuccess={handleReload}
-                  trigger={
-                    <Tooltip title={updateProps?.operateText || '编辑'}>
-                      <a className="text-lg">{updateProps?.operateText || <EditOutlined />}</a>
-                    </Tooltip>
-                  }
-                  action="update"
-                  {...detailProps}
-                />,
-              );
-            }
-          }
-        }
-
-        if (actions.includes('delete') && deleteProps) {
-          const hidden = deleteProps?.operateIsHidden?.(record) || false;
-          if (!hidden) {
-            const disabled = deleteProps?.operateIsDisabled?.(record) || false;
-            btns.push(
-              <OperateDelete
-                key="delete"
-                name={record[deleteProps.nameIndex]}
-                desc={deleteProps.desc}
-                operateText={deleteProps.operateText}
-                disabled={disabled}
-                onDelete={getHandleDelete(record)}
-              />,
-            );
-          }
-        }
-
-        return (
-          <div className="fec-crud-operate-column flex justify-center gap-4">
-            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
-            {btns}
-            {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}
-          </div>
-        );
-      },
-    };
-
-    if (
-      actions.includes('read') ||
-      actions.includes('read_detail') ||
-      actions.includes('update') ||
-      actions.includes('delete') ||
-      operateColumnProps?.moreOperator ||
-      operateColumnProps?.moreOperatorAfter
-    ) {
-      return [
-        ...(tableProps.columns || tableProps.columns || []),
-        operateColumn,
-      ] as TableProps['columns'];
-    }
+  const { columns: operateColumns } = useOperate(props, detailProps, actionRef);
+  const { columns: noColumnColumns, request: noRequest } = useNoColumn({
+    request: tableProps.request,
+    columns: operateColumns,
+  });
 
-    return tableProps.columns as TableProps['columns'];
-  }, [
-    tableProps.rowKey,
-    tableProps.columns,
-    operateColumnProps,
-    actions,
-    deleteProps,
-    readProps,
-    handleReload,
-    detailProps,
-    detailIdIndex,
-    updateProps,
-    getHandleDelete,
-  ]);
+  const newColumns = noColumnColumns;
+  const newRequest = noRequest;
 
   const toolBarRender = useCallback(
     (...args) =>
@@ -312,14 +128,14 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
       return {
         ...tableProps,
         scroll: {
-          ...getTableScroll(tableProps.columns),
+          ...getTableScroll(newColumns),
           y: '100%',
         },
       };
     }
 
     return tableProps;
-  }, [tableProps, fullPage]);
+  }, [fullPage, tableProps, newColumns]);
 
   return (
     <div
@@ -337,6 +153,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
         actionRef={actionRef}
         toolBarRender={toolBarRender}
         columns={newColumns}
+        request={newRequest}
         rowSelection={rowSelection}
         tableAlertRender={tableAlertRender}
         tableAlertOptionRender={tableAlertOptionRender}

package/src/crud/crud_delete.tsx

@@ -1,5 +1,5 @@
 import { DeleteOutlined } from '@fe-free/icons';
-import { Modal, Tooltip } from 'antd';
+import { App, Tooltip } from 'antd';
 import { useCallback } from 'react';
 
 interface Params {
@@ -12,10 +12,11 @@ interface Params {
 
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
+  const { modal } = App.useApp();
 
   const doDelete = useCallback(async () => {
     await new Promise((resolve) => {
-      Modal.confirm({
+      modal.confirm({
         title: `确认删除 “${name}” 吗？`,
         content: desc || '删除后不可恢复，请谨慎操作',
         okText: '确定',
@@ -28,7 +29,7 @@ function useDelete(params: Params) {
         },
       });
     });
-  }, [name, desc, onDelete]);
+  }, [modal, name, desc, onDelete]);
 
   return {
     doDelete,

package/src/crud/crud_detail.tsx

@@ -1,5 +1,5 @@
 import { DrawerForm, ProForm } from '@ant-design/pro-components';
-import { message, Spin } from 'antd';
+import { App, Spin } from 'antd';
 import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
@@ -54,6 +54,7 @@ function CRUDDetail(props: CRUDDetailProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(id ? true : false);
   const [form] = ProForm.useForm(detailFormInstance);
+  const { message } = App.useApp();
 
   const handleFinish = useCallback(
     async (values) => {

package/src/crud/demo/data.tsx

@@ -58,7 +58,10 @@ let fakeData = makeData(21);
 async function fakeRequest(params) {
   console.log('fakeRequest', params);
 
-  let data = fakeData;
+  let data = fakeData.slice(
+    (params.current - 1) * params.pageSize,
+    params.current * params.pageSize,
+  );
   Object.keys(params).forEach((field) => {
     if (params[field] !== undefined && params[field] !== '') {
       data = data.filter((item) => {
@@ -75,7 +78,7 @@ async function fakeRequest(params) {
       resolve({
         data,
         success: true,
-        total: data.length,
+        total: fakeData.length,
       });
     }, 1000);
   }) as Promise<any>;

package/src/crud/use_no_column.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from 'react';
+import { CustomValueTypeEnum } from '../value_type_map';
+
+function useNoColumn({ request, columns }) {
+  const refCurrent = useRef<number>(1);
+  const refPageSize = useRef<number>(20);
+
+  const newRequest = useCallback(
+    async (params) => {
+      const { current, pageSize } = params;
+
+      const res = await request(params);
+
+      // after request, 才更新，数据才准确
+      refCurrent.current = current;
+      refPageSize.current = pageSize;
+
+      return res;
+    },
+    [request],
+  );
+
+  const newColumns = useCallback(() => {
+    return columns?.map((column) => {
+      if (column.valueType === CustomValueTypeEnum.CustomSerialNumber) {
+        return {
+          render: (_, __, index) => {
+            return (refCurrent.current - 1) * refPageSize.current + index + 1;
+          },
+          ...column,
+        };
+      }
+      return column;
+    });
+  }, [columns]);
+
+  return {
+    columns: newColumns(),
+    request: newRequest,
+  };
+}
+
+export { useNoColumn };

package/src/crud/use_operate.tsx

@@ -0,0 +1,248 @@
+import { EditOutlined, EyeOutlined } from '@fe-free/icons';
+import { message, Tooltip } from 'antd';
+import { isString } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { OperateDelete } from './crud_delete';
+import { CRUDDetail } from './crud_detail';
+import type { TableProps } from './table';
+
+function useOperate(props, detailProps, actionRef) {
+  const {
+    actions,
+    tableProps,
+    operateColumnProps,
+    readProps,
+    updateProps,
+    deleteProps,
+    detailIdIndex,
+    requestDeleteByRecord,
+  } = props;
+
+  const idField = tableProps.rowKey || 'id';
+
+  const getHandleDelete = useCallback(
+    (record) => {
+      return () => {
+        if (requestDeleteByRecord) {
+          let content = '删除成功';
+          if (deleteProps?.successText) {
+            content = isString(deleteProps.successText)
+              ? deleteProps.successText
+              : deleteProps.successText();
+          }
+          return requestDeleteByRecord(record).then(() => {
+            message.open({
+              type: 'success',
+              content,
+            });
+            actionRef.current?.reload();
+          });
+        }
+
+        throw new Error('没有传 requestDeleteByRecord');
+      };
+    },
+    [actionRef, deleteProps, requestDeleteByRecord],
+  );
+
+  const handleReload = useCallback(() => {
+    actionRef.current?.reload();
+  }, [actionRef]);
+
+  const readOperate = useCallback(
+    (record) => {
+      const hidden = readProps?.operateIsHidden?.(record) || false;
+
+      if (!hidden) {
+        const disabled = readProps?.operateIsDisabled?.(record) || false;
+        if (disabled) {
+          return (
+            <Tooltip title={readProps?.operateText || '查看'}>
+              <span key="read" className="cursor-not-allowed text-lg text-03">
+                {readProps?.operateText || <EyeOutlined />}
+              </span>
+            </Tooltip>
+          );
+        } else {
+          return (
+            <CRUDDetail
+              key="read"
+              id={record[idField]}
+              record={record}
+              onSuccess={handleReload}
+              trigger={
+                <Tooltip title={readProps?.operateText || '查看'}>
+                  <a className="text-lg">{readProps?.operateText || <EyeOutlined />}</a>
+                </Tooltip>
+              }
+              action="read"
+              {...detailProps}
+            />
+          );
+        }
+      }
+      return null;
+    },
+    [detailProps, handleReload, idField, readProps],
+  );
+
+  const readDetailOperate = useCallback(
+    (record) => {
+      const hidden = readProps?.operateIsHidden?.(record) || false;
+      if (!hidden) {
+        const disabled = readProps?.operateIsDisabled?.(record) || false;
+        if (disabled) {
+          return (
+            <Tooltip title={readProps?.operateText || '查看'}>
+              <span key="read" className="cursor-not-allowed text-lg text-03">
+                {readProps?.operateText || <EyeOutlined />}
+              </span>
+            </Tooltip>
+          );
+        } else {
+          return (
+            <Tooltip title={readProps?.operateText || '查看'}>
+              <Link
+                key="read_detail"
+                to={`./detail/${record[detailIdIndex || 'id']}`}
+                target={readProps?.target}
+                className="text-lg"
+              >
+                {readProps?.operateText || <EyeOutlined />}
+              </Link>
+            </Tooltip>
+          );
+        }
+      }
+      return null;
+    },
+    [detailIdIndex, readProps],
+  );
+
+  const updateOperate = useCallback(
+    (record) => {
+      const hidden = updateProps?.operateIsHidden?.(record) || false;
+      if (!hidden) {
+        const disabled = updateProps?.operateIsDisabled?.(record) || false;
+
+        if (disabled) {
+          return (
+            <Tooltip title={updateProps?.operateText || '编辑'}>
+              <span key="update" className="cursor-not-allowed text-lg text-03">
+                {updateProps?.operateText || <EditOutlined />}
+              </span>
+            </Tooltip>
+          );
+        } else {
+          return (
+            <CRUDDetail
+              key="update"
+              id={record[idField]}
+              record={record}
+              onSuccess={handleReload}
+              trigger={
+                <Tooltip title={updateProps?.operateText || '编辑'}>
+                  <a className="text-lg">{updateProps?.operateText || <EditOutlined />}</a>
+                </Tooltip>
+              }
+              action="update"
+              {...detailProps}
+            />
+          );
+        }
+      }
+
+      return null;
+    },
+    [detailProps, handleReload, idField, updateProps],
+  );
+
+  const deleteOperate = useCallback(
+    (record) => {
+      const hidden = deleteProps?.operateIsHidden?.(record) || false;
+      if (!hidden) {
+        const disabled = deleteProps?.operateIsDisabled?.(record) || false;
+        return (
+          <OperateDelete
+            key="delete"
+            name={record[deleteProps.nameIndex]}
+            desc={deleteProps.desc}
+            operateText={deleteProps.operateText}
+            disabled={disabled}
+            onDelete={getHandleDelete(record)}
+          />
+        );
+      }
+      return null;
+    },
+    [deleteProps, getHandleDelete],
+  );
+
+  const newColumns = useMemo(() => {
+    const operateColumn = {
+      title: '操作',
+      fixed: 'right',
+      align: 'center',
+      width: operateColumnProps?.width || 120,
+      render: function (_, record) {
+        const btns: React.ReactNode[] = [];
+
+        if (actions.includes('read')) {
+          btns.push(readOperate(record));
+        }
+
+        if (actions.includes('read_detail')) {
+          btns.push(readDetailOperate(record));
+        }
+
+        if (actions.includes('update')) {
+          btns.push(updateOperate(record));
+        }
+
+        if (actions.includes('delete') && deleteProps) {
+          btns.push(deleteOperate(record));
+        }
+
+        return (
+          <div className="fec-crud-operate-column flex justify-center gap-4">
+            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
+            {btns}
+            {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}
+          </div>
+        );
+      },
+    };
+
+    if (
+      actions.includes('read') ||
+      actions.includes('read_detail') ||
+      actions.includes('update') ||
+      actions.includes('delete') ||
+      operateColumnProps?.moreOperator ||
+      operateColumnProps?.moreOperatorAfter
+    ) {
+      return [
+        ...(tableProps.columns || tableProps.columns || []),
+        operateColumn,
+      ] as TableProps['columns'];
+    }
+
+    return tableProps.columns as TableProps['columns'];
+  }, [
+    operateColumnProps,
+    actions,
+    tableProps.columns,
+    deleteProps,
+    readOperate,
+    readDetailOperate,
+    updateOperate,
+    deleteOperate,
+  ]);
+
+  return {
+    columns: newColumns,
+  };
+}
+
+export { useOperate };

package/src/crud/use_row_selection.tsx

@@ -1,5 +1,5 @@
 import type { ActionType } from '@ant-design/pro-components';
-import { Modal } from 'antd';
+import { App } from 'antd';
 import type { MutableRefObject } from 'react';
 import { useCallback, useMemo } from 'react';
 import { LoadingButton } from '../button';
@@ -14,6 +14,8 @@ function useRowSelection<DataSource, Key>({
   batchActions?: CRUDProps<DataSource, Key>['batchActions'];
   actionRef?: MutableRefObject<ActionType | undefined>;
 }) {
+  const { modal } = App.useApp();
+
   const rowSelection = useMemo(
     () => ({
       ...originRowSelection,
@@ -48,7 +50,7 @@ function useRowSelection<DataSource, Key>({
               onClick={async (event) => {
                 if (action.danger) {
                   await new Promise((resolve) => {
-                    Modal.confirm({
+                    modal.confirm({
                       title: `确定要执行 ${action.btnText} 吗？`,
                       onOk: () => {
                         resolve(
@@ -79,7 +81,7 @@ function useRowSelection<DataSource, Key>({
         </div>
       );
     },
-    [actionRef, batchActions],
+    [actionRef, batchActions, modal],
   );
 
   if (!batchActions || batchActions.length === 0) {

package/src/global/error.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { message } from 'antd';
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { AxiosError } from 'axios';

package/src/upload/index.tsx

@@ -1,6 +1,6 @@
 import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@fe-free/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
-import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
+import { Upload as AntdUpload, App, Avatar, Button } from 'antd';
 import type { UploadChangeParam } from 'antd/es/upload';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
@@ -26,6 +26,7 @@ interface UploadProps extends UploadBaseProps {
 function useUpload(
   props: ImageUploadProps & { onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void },
 ) {
+  const { message } = App.useApp();
   const { value, onChange, multiple, maxCount, onChangeOriginal } = props;
   // 转换成 Upload 格式。
   const defaultFileList = useMemo(() => {