@fe-free/core 1.4.10 → 1.4.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 1.4.12
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.4.12
+
+## 1.4.11
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.4.11
+
 ## 1.4.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "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.10"
+    "@fe-free/tool": "1.4.12"
   },
   "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
@@ -187,11 +186,16 @@ export const MoreCustom: Story = {
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
         }}
-        detailForm={(formProps) => (
+        detailForm={() => (
           <>
             <ProFormText
-              {...formProps}
               name="name"
               label="名字"
               required
@@ -203,6 +207,14 @@ export const MoreCustom: Story = {
         requestGetByRecord={fakeGetByRecord}
         requestCreateByValues={fakeCreate}
         requestUpdateById={fakeUpdateById}
+        updateProps={{
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
+        }}
       />
     );
   },
@@ -235,17 +247,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}
@@ -437,15 +448,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}

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';
@@ -108,45 +109,76 @@ function CRUDComponent<
       fixed: 'right',
       width: operateColumnProps?.width || 120,
       render: function (_, record) {
-        return (
-          <Space>
-            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
-            {actions.includes('read') && (
-              <CRUDDetail
-                id={record[idField]}
-                record={record}
-                onSuccess={handleReload}
-                trigger={<a>{readProps?.operateText || '查看'}</a>}
-                action="read"
-                {...detailProps}
-              />
-            )}
-            {actions.includes('read_detail') && (
-              <a
-                href={`${window.location.pathname}/detail/${record[detailIdIndex || 'id']}`}
-                target={readProps?.target}
-              >
-                {readProps?.operateText || '查看'}
-              </a>
-            )}
-            {actions.includes('update') && (
+        const btns: React.ReactNode[] = [];
+
+        if (actions.includes('read')) {
+          btns.push(
+            <CRUDDetail
+              key="read"
+              id={record[idField]}
+              record={record}
+              onSuccess={handleReload}
+              trigger={<a>{readProps?.operateText || '查看'}</a>}
+              action="read"
+              {...detailProps}
+            />,
+          );
+        }
+
+        if (actions.includes('read_detail')) {
+          btns.push(
+            <Link
+              key="read_detail"
+              to={`./detail/${record[detailIdIndex || 'id']}`}
+              target={readProps?.target}
+            >
+              {readProps?.operateText || '查看'}
+            </Link>,
+          );
+        }
+
+        if (actions.includes('update')) {
+          const disabled = updateProps?.operateIsDisabled?.(record) || false;
+
+          if (disabled) {
+            btns.push(
+              <a key="update" disabled>
+                {updateProps?.operateText || '编辑'}
+              </a>,
+            );
+          } else {
+            btns.push(
               <CRUDDetail
+                key="update"
                 id={record[idField]}
                 record={record}
                 onSuccess={handleReload}
                 trigger={<a>{updateProps?.operateText || '编辑'}</a>}
                 action="update"
                 {...detailProps}
-              />
-            )}
-            {actions.includes('delete') && deleteProps && (
-              <OperateDelete
-                name={record[deleteProps.nameIndex]}
-                desc={deleteProps.desc}
-                operateText={deleteProps.operateText}
-                onDelete={getHandleDelete(record)}
-              />
-            )}
+              />,
+            );
+          }
+        }
+
+        if (actions.includes('delete') && deleteProps) {
+          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 (
+          <Space>
+            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
+            {btns}
             {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}
           </Space>
         );

package/src/crud/crud_delete.tsx

@@ -6,6 +6,7 @@ interface Params {
   desc?: string;
   operateText?: string;
   onDelete: () => Promise<any>;
+  disabled?: boolean;
 }
 
 function useDelete(params: Params) {
@@ -34,9 +35,13 @@ function useDelete(params: Params) {
 }
 
 function OperateDelete(props: Params) {
-  const { name, desc, onDelete, operateText } = props;
+  const { name, desc, onDelete, operateText, disabled } = props;
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
+  if (disabled) {
+    return <a disabled>{operateText || '删除'}</a>;
+  }
+
   return (
     <a style={{ color: 'red' }} onClick={doDelete}>
       {operateText || '删除'}

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

@@ -77,8 +77,10 @@ interface CRUDProps<DataSource = any, Key = string> {
   /** @deprecated 请使用 requestUpdateByValues 替代 */
   requestUpdateById?: (values: Partial<DataSource>) => Promise<false | void>;
   updateProps?: {
-    /** 文本 */
+    /** 文本“编辑” */
     operateText?: string;
+    /** ”编辑”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
     /** 保存按钮文本 */
     submitText?: string;
     /** 重置按钮文本 */
@@ -93,12 +95,15 @@ interface CRUDProps<DataSource = any, Key = string> {
   requestDeleteByRecord?: (record: DataSource) => Promise<void>;
   /** 删除相关 */
   deleteProps?: {
+    /** 文本“删除” */
+    operateText?: string;
+    /** “删除”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
     /** 显示名称索引 */
     nameIndex: keyof DataSource;
     /** 删除确认描述 */
     desc?: string;
-    /** 文本 */
-    operateText?: string;
+
     /** 成功文案 */
     successText?: string | (() => string);
   };