feat(merge): merge sc

fix: 添加权限控制

src/pages/link/AccessConfig/index.tsx

@@ -1,19 +1,21 @@
 import SearchComponent from '@/components/SearchComponent';
-import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { PageContainer } from '@ant-design/pro-layout';
 import type { ProColumns } from '@jetlinks/pro-table';
-import { Button, Card, Col, Empty, message, Pagination, Popconfirm, Row, Tooltip } from 'antd';
+import { Card, Col, Empty, message, Pagination, Row } from 'antd';
 import { useEffect, useState } from 'react';
 import { useHistory } from 'umi';
 import Service from './service';
 import { CheckCircleOutlined, DeleteOutlined, EditOutlined, StopOutlined } from '@ant-design/icons';
 import AccessConfigCard from '@/components/ProTableCard/CardItems/AccessConfig';
+import { PermissionButton } from '@/components';
 
 export const service = new Service('gateway/device');
 
 const AccessConfig = () => {
   const history = useHistory();
   const [param, setParam] = useState<any>({ pageSize: 10, terms: [] });
+  const { permission } = PermissionButton.usePermission('link/AccessConfig');
 
   const columns: ProColumns<any>[] = [
     {
@@ -79,15 +81,16 @@ const AccessConfig = () => {
           }}
         />
         <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-start' }}>
-          <Button
-            type="primary"
-            disabled={getButtonPermission('link/AccessConfig', ['add'])}
+          <PermissionButton
+            isPermission={permission.add}
             onClick={() => {
               history.push(`${getMenuPathByCode(MENUS_CODE['link/AccessConfig/Detail'])}`);
             }}
+            key="button"
+            type="primary"
           >
             新增
-          </Button>
+          </PermissionButton>
         </div>
         {dataSource?.data.length > 0 ? (
           <Row gutter={[16, 16]} style={{ marginTop: 10 }}>
@@ -96,9 +99,8 @@ const AccessConfig = () => {
                 <AccessConfigCard
                   {...item}
                   actions={[
-                    <Button
-                      key="edit"
-                      type="link"
+                    <PermissionButton
+                      isPermission={permission.update}
                       onClick={() => {
                         history.push(
                           `${getMenuPathByCode(MENUS_CODE['link/AccessConfig/Detail'])}?id=${
@@ -106,18 +108,19 @@ const AccessConfig = () => {
                           }`,
                         );
                       }}
+                      key="button"
+                      type="link"
                     >
                       <EditOutlined />
                       编辑
-                    </Button>,
-                    <Button
-                      key="warning"
-                      type="link"
-                      disabled={getButtonPermission('link/AccessConfig', ['action'])}
-                    >
-                      <Popconfirm
-                        title={`确认${item.state.value !== 'disabled' ? '禁用' : '启用'}`}
-                        onConfirm={() => {
+                    </PermissionButton>,
+                    <PermissionButton
+                      type={'link'}
+                      key={'state'}
+                      style={{ padding: 0 }}
+                      popConfirm={{
+                        title: `确认${item.state.value !== 'disabled' ? '禁用' : '启用'}`,
+                        onConfirm: () => {
                           if (item.state.value !== 'disabled') {
                             service.shutDown(item.id).then((resp) => {
                               if (resp.status === 200) {
@@ -133,49 +136,46 @@ const AccessConfig = () => {
                               }
                             });
                           }
-                        }}
-                      >
-                        {item.state.value !== 'disabled' ? (
-                          <span>
-                            <StopOutlined />
-                            禁用
-                          </span>
-                        ) : (
-                          <span>
-                            <CheckCircleOutlined />
-                            启用
-                          </span>
-                        )}
-                      </Popconfirm>
-                    </Button>,
-                    <Tooltip
+                        },
+                      }}
+                      isPermission={permission.action}
+                      tooltip={{
+                        title: item.state.value !== 'disabled' ? '禁用' : '启用',
+                      }}
+                    >
+                      {item.state.value !== 'disabled' ? (
+                        <span>
+                          <StopOutlined />
+                          禁用
+                        </span>
+                      ) : (
+                        <span>
+                          <CheckCircleOutlined />
+                          启用
+                        </span>
+                      )}
+                    </PermissionButton>,
+                    <PermissionButton
+                      isPermission={permission.delete}
+                      popConfirm={{
+                        title: '确认删除',
+                        onConfirm: () => {
+                          service.remove(item.id).then((resp: any) => {
+                            if (resp.status === 200) {
+                              message.success('操作成功！');
+                              handleSearch(param);
+                            } else {
+                              message.error(resp?.message || '操作失败');
+                            }
+                          });
+                        },
+                      }}
                       key="delete"
-                      title={
-                        getButtonPermission('link/AccessConfig', ['delete']) ? '没有权限' : '删除'
-                      }
+                      type="link"
                     >
-                      <Button
-                        type="link"
-                        disabled={getButtonPermission('link/AccessConfig', ['delete'])}
-                      >
-                        <Popconfirm
-                          title={'确认删除?'}
-                          onConfirm={() => {
-                            service.remove(item.id).then((resp: any) => {
-                              if (resp.status === 200) {
-                                message.success('操作成功！');
-                                handleSearch(param);
-                              } else {
-                                message.error(resp?.message || '操作失败');
-                              }
-                            });
-                          }}
-                        >
-                          <DeleteOutlined />
-                          删除
-                        </Popconfirm>
-                      </Button>
-                    </Tooltip>,
+                      <DeleteOutlined />
+                      删除
+                    </PermissionButton>,
                   ]}
                 />
               </Col>

src/pages/link/Protocol/index.tsx

@@ -2,8 +2,8 @@ import { PageContainer } from '@ant-design/pro-layout';
 import type { ProtocolItem } from '@/pages/link/Protocol/typings';
 import { useEffect, useRef } from 'react';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
-import { Badge, Button, message, Popconfirm, Tooltip } from 'antd';
-import { CheckCircleOutlined, DeleteOutlined, EditOutlined, StopOutlined } from '@ant-design/icons';
+import { Badge, Button, message } from 'antd';
+import { CheckCircleOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import BaseCrud from '@/components/BaseCrud';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import type { ISchema } from '@formily/json-schema';
@@ -14,11 +14,13 @@ import { Store } from 'jetlinks-store';
 import { useLocation } from 'umi';
 import SystemConst from '@/utils/const';
 import { getButtonPermission } from '@/utils/menu';
+import { PermissionButton } from '@/components';
 
 export const service = new Service('protocol');
 const Protocol = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
+  const { permission } = PermissionButton.usePermission('link/Protocol');
 
   const modifyState = async (id: string, type: 'deploy' | 'un-deploy') => {
     const resp = await service.modifyState(id, type);
@@ -71,101 +73,84 @@ const Protocol = () => {
       valueType: 'option',
       width: 200,
       render: (text, record) => [
-        <Button
-          type="link"
-          style={{ padding: 0 }}
-          disabled={getButtonPermission('link/Protocol', ['update'])}
+        <PermissionButton
+          isPermission={permission.update}
           key="edit"
           onClick={() => {
             CurdModel.update(record);
             CurdModel.model = 'edit';
           }}
-        >
-          <Tooltip
-            title={intl.formatMessage({
+          type={'link'}
+          style={{ padding: 0 }}
+          tooltip={{
+            title: intl.formatMessage({
               id: 'pages.data.option.edit',
               defaultMessage: '编辑',
-            })}
-          >
-            <EditOutlined />
-          </Tooltip>
-        </Button>,
+            }),
+          }}
+        >
+          <EditOutlined />
+        </PermissionButton>,
         record.state !== 1 && (
-          <Button
-            type="link"
-            style={{ padding: 0 }}
-            disabled={getButtonPermission('link/Protocol', ['action'])}
+          <PermissionButton
+            isPermission={permission.action}
             key="publish"
+            onClick={() => {
+              modifyState(record.id, 'deploy');
+            }}
+            type={'link'}
+            style={{ padding: 0 }}
+            tooltip={{
+              title: '发布',
+            }}
           >
-            <Popconfirm title="确认发布？" onConfirm={() => modifyState(record.id, 'deploy')}>
-              <Tooltip title="发布">
-                <CheckCircleOutlined />
-              </Tooltip>
-            </Popconfirm>
-          </Button>
+            <CheckCircleOutlined />
+          </PermissionButton>
         ),
         record.state === 1 && (
-          <Button
-            type="link"
+          <PermissionButton
+            isPermission={permission.action}
+            key="publish"
+            onClick={() => {
+              modifyState(record.id, 'un-deploy');
+            }}
+            type={'link'}
             style={{ padding: 0 }}
-            disabled={getButtonPermission('link/Protocol', ['action'])}
-            key="reload"
+            tooltip={{
+              title: '撤销',
+            }}
           >
-            <Popconfirm title="确认撤销？" onConfirm={() => modifyState(record.id, 'un-deploy')}>
-              <Tooltip title="撤销">
-                <StopOutlined />
-              </Tooltip>
-            </Popconfirm>
-          </Button>
+            <CheckCircleOutlined />
+          </PermissionButton>
         ),
-        <Tooltip
+        <PermissionButton
+          isPermission={permission.delete}
+          tooltip={{
+            title: record.state !== 1 ? '删除' : '请先禁用该协议，再删除',
+          }}
+          disabled={record.state === 1}
+          popConfirm={{
+            title: '确认删除',
+            onConfirm: async () => {
+              const resp: any = await service.remove(record.id);
+              if (resp.status === 200) {
+                message.success(
+                  intl.formatMessage({
+                    id: 'pages.data.option.success',
+                    defaultMessage: '操作成功!',
+                  }),
+                );
+                actionRef.current?.reload();
+              } else {
+                message.error(resp?.message || '操作失败');
+              }
+            },
+          }}
           key="delete"
-          title={
-            record.state !== 1
-              ? intl.formatMessage({
-                  id: 'pages.data.option.remove',
-                  defaultMessage: '删除',
-                })
-              : '请先禁用该协议，再删除。'
-          }
+          type="link"
         >
-          <Button
-            style={{ padding: 0 }}
-            key="delete"
-            type="link"
-            disabled={record.state === 1 || getButtonPermission('link/Protocol', ['delete'])}
-          >
-            <Popconfirm
-              title={intl.formatMessage({
-                id: 'pages.data.option.remove.tips',
-                defaultMessage: '确认删除？',
-              })}
-              onConfirm={async () => {
-                const resp: any = await service.remove(record.id);
-                if (resp.status === 200) {
-                  message.success(
-                    intl.formatMessage({
-                      id: 'pages.data.option.success',
-                      defaultMessage: '操作成功!',
-                    }),
-                  );
-                  actionRef.current?.reload();
-                } else {
-                  message.error(resp?.message || '操作失败');
-                }
-              }}
-            >
-              <Tooltip
-                title={intl.formatMessage({
-                  id: 'pages.data.option.remove',
-                  defaultMessage: '删除',
-                })}
-              >
-                <DeleteOutlined />
-              </Tooltip>
-            </Popconfirm>
-          </Button>
-        </Tooltip>,
+          <DeleteOutlined />
+        </PermissionButton>,
       ],
     },
   ];

src/pages/media/Cascade/index.tsx

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { useRef, useState } from 'react';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
-import { Badge, Button, message, Popconfirm, Tooltip } from 'antd';
+import { Badge, message } from 'antd';
 import {
   CheckCircleOutlined,
   DeleteOutlined,
@@ -14,9 +14,9 @@ import {
 import type { CascadeItem } from '@/pages/media/Cascade/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import SearchComponent from '@/components/SearchComponent';
-import { ProTableCard } from '@/components';
+import { PermissionButton, ProTableCard } from '@/components';
 import CascadeCard from '@/components/ProTableCard/CardItems/cascade';
-import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { useHistory } from 'umi';
 import Service from './service';
 import Publish from './Publish';
@@ -31,77 +31,68 @@ const Cascade = () => {
   const history = useHistory<Record<string, string>>();
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<CascadeItem>>();
+  const { permission } = PermissionButton.usePermission('media/Cascade');
 
   const tools = (record: CascadeItem) => [
-    <Button
-      type={'link'}
-      key={'edit'}
-      style={{ padding: 0 }}
-      disabled={getButtonPermission('media/Cascade', ['update', 'view'])}
+    <PermissionButton
+      isPermission={permission.update}
+      key="edit"
       onClick={() => {
         const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Save`]);
         history.push(url + `?id=${record.id}`);
       }}
-    >
-      <Tooltip
-        title={intl.formatMessage({
+      type={'link'}
+      style={{ padding: 0 }}
+      tooltip={{
+        title: intl.formatMessage({
           id: 'pages.data.option.edit',
           defaultMessage: '编辑',
-        })}
-        key={'edit'}
-      >
-        <EditOutlined />
-        编辑
-      </Tooltip>
-    </Button>,
-    <Button
-      type={'link'}
+        }),
+      }}
+    >
+      <EditOutlined />
+      编辑
+    </PermissionButton>,
+    <PermissionButton
+      isPermission={permission.channel}
       key={'channel'}
-      style={{ padding: 0 }}
-      disabled={getButtonPermission('media/Cascade', ['channel'])}
       onClick={() => {
         const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Channel`]);
         history.push(url + `?id=${record.id}`);
       }}
+      type={'link'}
+      style={{ padding: 0 }}
+      tooltip={{
+        title: '选择通道',
+      }}
     >
-      <Tooltip title={'选择通道'} key={'channel'}>
-        <LinkOutlined />
-        选择通道
-      </Tooltip>
-    </Button>,
-    <Tooltip
+      <LinkOutlined />
+      选择通道
+    </PermissionButton>,
+    <PermissionButton
+      isPermission={permission.push}
       key={'share'}
-      title={record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送'}
-    >
-      <Button
-        type={'link'}
-        key={'share'}
-        disabled={
-          getButtonPermission('media/Cascade', ['push']) || record.status.value === 'disabled'
-        }
-      >
-        <Popconfirm
-          title="确认推送！"
-          onConfirm={() => {
-            setCurrent(record);
-            setVisible(true);
-          }}
-        >
-          <ShareAltOutlined />
-          推送
-        </Popconfirm>
-      </Button>
-    </Tooltip>,
-    <Button
+      onClick={() => {
+        setCurrent(record);
+        setVisible(true);
+      }}
       type={'link'}
-      key={'operate'}
       style={{ padding: 0 }}
-      disabled={getButtonPermission('media/Cascade', ['action'])}
+      disabled={record.status.value === 'disabled'}
+      tooltip={{
+        title: record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送',
+      }}
     >
-      <Popconfirm
-        key={'able'}
-        title={record.status.value === 'disabled' ? '确认启用' : '确认禁用'}
-        onConfirm={async () => {
+      <ShareAltOutlined />
+      推送
+    </PermissionButton>,
+    <PermissionButton
+      type={'link'}
+      key={'action'}
+      style={{ padding: 0 }}
+      popConfirm={{
+        title: `确认${record.status.value === 'disabled' ? '禁用' : '启用'}`,
+        onConfirm: async () => {
           let resp: any = undefined;
           if (record.status.value === 'disabled') {
             resp = await service.enabled(record.id);
@@ -112,50 +103,43 @@ const Cascade = () => {
             message.success('操作成功！');
             actionRef.current?.reset?.();
           }
-        }}
-      >
-        <Tooltip title={record.status.value === 'disabled' ? '启用' : '禁用'}>
-          {record.status.value === 'disabled' ? (
-            <span>
-              <CheckCircleOutlined /> 启用
-            </span>
-          ) : (
-            <span>
-              {' '}
-              <StopOutlined />
-              禁用
-            </span>
-          )}
-        </Tooltip>
-      </Popconfirm>
-    </Button>,
-    <Button
-      type={'link'}
-      style={{ padding: 0 }}
-      key={'delete'}
-      disabled={getButtonPermission('media/Cascade', ['delete'])}
+        },
+      }}
+      isPermission={permission.action}
+      tooltip={{
+        title: record.status.value === 'disabled' ? '禁用' : '启用',
+      }}
     >
-      <Popconfirm
-        title={'确认删除'}
-        key={'delete'}
-        onConfirm={async () => {
+      {record.status.value === 'disabled' ? (
+        <span>
+          <StopOutlined />
+          禁用
+        </span>
+      ) : (
+        <span>
+          <CheckCircleOutlined />
+          启用
+        </span>
+      )}
+    </PermissionButton>,
+    <PermissionButton
+      isPermission={permission.delete}
+      popConfirm={{
+        title: '确认删除',
+        onConfirm: async () => {
           const resp: any = await service.remove(record.id);
           if (resp.status === 200) {
             message.success('操作成功！');
             actionRef.current?.reset?.();
           }
-        }}
-      >
-        <Tooltip
-          title={intl.formatMessage({
-            id: 'pages.data.option.remove',
-            defaultMessage: '删除',
-          })}
-        >
-          <DeleteOutlined />
-        </Tooltip>
-      </Popconfirm>
-    </Button>,
+        },
+      }}
+      key="delete"
+      type="link"
+    >
+      <DeleteOutlined />
+      删除
+    </PermissionButton>,
   ];
 
   const columns: ProColumns<CascadeItem>[] = [
@@ -236,112 +220,98 @@ const Cascade = () => {
       valueType: 'option',
       align: 'center',
       render: (text, record) => [
-        <Tooltip
-          key={'edit'}
-          title={intl.formatMessage({
-            id: 'pages.data.option.edit',
-            defaultMessage: '编辑',
-          })}
+        <PermissionButton
+          isPermission={permission.update}
+          key="edit"
+          onClick={() => {
+            const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Save`]);
+            history.push(url + `?id=${record.id}`);
+          }}
+          type={'link'}
+          style={{ padding: 0 }}
+          tooltip={{
+            title: intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            }),
+          }}
         >
-          <Button
-            type="link"
-            style={{ padding: 0 }}
-            disabled={getButtonPermission('media/Cascade', ['view', 'update'])}
-            onClick={() => {
-              const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Save`]);
-              history.push(url + `?id=${record.id}`);
-            }}
-          >
-            <EditOutlined />
-          </Button>
-        </Tooltip>,
-        <Tooltip title={'选择通道'} key={'channel'}>
-          <Button
-            type="link"
-            style={{ padding: 0 }}
-            onClick={() => {
-              const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Channel`]);
-              history.push(url + `?id=${record.id}`);
-            }}
-          >
-            <LinkOutlined />
-          </Button>
-        </Tooltip>,
-        <Tooltip
-          title={record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送'}
+          <EditOutlined />
+        </PermissionButton>,
+        <PermissionButton
+          isPermission={permission.channel}
+          key={'channel'}
+          onClick={() => {
+            const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Channel`]);
+            history.push(url + `?id=${record.id}`);
+          }}
+          type={'link'}
+          style={{ padding: 0 }}
+          tooltip={{
+            title: '选择通道',
+          }}
+        >
+          <LinkOutlined />
+        </PermissionButton>,
+        <PermissionButton
+          isPermission={permission.push}
           key={'share'}
+          onClick={() => {
+            setCurrent(record);
+            setVisible(true);
+          }}
+          type={'link'}
+          style={{ padding: 0 }}
+          disabled={record.status.value === 'disabled'}
+          tooltip={{
+            title: record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送',
+          }}
         >
-          <Button
-            type="link"
-            style={{ padding: 0 }}
-            disabled={
-              getButtonPermission('media/Cascade', ['push']) || record.status.value === 'disabled'
-            }
-          >
-            <Popconfirm
-              onConfirm={() => {
-                setVisible(true);
-                setCurrent(record);
-              }}
-              title={'确认推送'}
-            >
-              <ShareAltOutlined />
-            </Popconfirm>
-          </Button>
-        </Tooltip>,
-        <Tooltip title={record.status.value === 'disabled' ? '启用' : '禁用'} key={'operate'}>
-          <Button
-            type="link"
-            style={{ padding: 0 }}
-            disabled={getButtonPermission('media/Cascade', ['action'])}
-          >
-            <Popconfirm
-              key={'able'}
-              title={record.status.value === 'disabled' ? '确认启用' : '确认禁用'}
-              onConfirm={async () => {
-                let resp: any = undefined;
-                if (record.status.value === 'disabled') {
-                  resp = await service.enabled(record.id);
-                } else {
-                  resp = await service.disabled(record.id);
-                }
-                if (resp?.status === 200) {
-                  message.success('操作成功！');
-                  actionRef.current?.reset?.();
-                }
-              }}
-            >
-              {record.status.value === 'disabled' ? <CheckCircleOutlined /> : <StopOutlined />}
-            </Popconfirm>
-          </Button>
-        </Tooltip>,
-        <Tooltip
-          key={'delete'}
-          title={intl.formatMessage({
-            id: 'pages.data.option.remove',
-            defaultMessage: '删除',
-          })}
+          <ShareAltOutlined />
+        </PermissionButton>,
+        <PermissionButton
+          type={'link'}
+          key={'action'}
+          style={{ padding: 0 }}
+          popConfirm={{
+            title: `确认${record.status.value !== 'disabled' ? '禁用' : '启用'}`,
+            onConfirm: async () => {
+              let resp: any = undefined;
+              if (record.status.value === 'disabled') {
+                resp = await service.enabled(record.id);
+              } else {
+                resp = await service.disabled(record.id);
+              }
+              if (resp?.status === 200) {
+                message.success('操作成功！');
+                actionRef.current?.reset?.();
+              }
+            },
+          }}
+          isPermission={permission.action}
+          tooltip={{
+            title: record.status.value !== 'disabled' ? '禁用' : '启用',
+          }}
         >
-          <Popconfirm
-            title={'确认删除'}
-            key={'delete'}
-            onConfirm={async () => {
+          {record.status.value !== 'disabled' ? <StopOutlined /> : <CheckCircleOutlined />}
+        </PermissionButton>,
+        <PermissionButton
+          isPermission={permission.delete}
+          popConfirm={{
+            title: '确认删除',
+            onConfirm: async () => {
               const resp: any = await service.remove(record.id);
               if (resp.status === 200) {
                 message.success('操作成功！');
                 actionRef.current?.reset?.();
               }
-            }}
-          >
-            <Button
-              type="link"
-              style={{ padding: 0 }}
-              disabled={getButtonPermission('media/Cascade', ['delete'])}
-            >
-              <DeleteOutlined />
-            </Button>
-          </Popconfirm>
-        </Tooltip>,
+            },
+          }}
+          key="delete"
+          type="link"
+        >
+          <DeleteOutlined />
+        </PermissionButton>,
       ],
     },
   ];
@@ -379,22 +349,24 @@ const Cascade = () => {
         search={false}
         pagination={{ pageSize: 10 }}
         headerTitle={[
-          <Button
+          <PermissionButton
+            isPermission={permission.add}
+            key="add"
             onClick={() => {
               const url = getMenuPathByCode(MENUS_CODE[`media/Cascade/Save`]);
               history.push(url);
             }}
-            disabled={getButtonPermission('media/Cascade', ['add'])}
-            style={{ marginRight: 12 }}
-            key="button"
             icon={<PlusOutlined />}
             type="primary"
+            tooltip={{
+              title: intl.formatMessage({
+                id: 'pages.data.option.add',
+                defaultMessage: '新增',
+              }),
+            }}
           >
-            {intl.formatMessage({
-              id: 'pages.data.option.add',
-              defaultMessage: '新增',
-            })}
-          </Button>,
+            新增
+          </PermissionButton>,
         ]}
         gridColumn={2}
         cardRender={(record) => <CascadeCard {...record} actions={tools(record)} />}

src/pages/media/Stream/index.tsx

@@ -2,7 +2,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import type { StreamItem } from '@/pages/media/Stream/typings';
 import SearchComponent from '@/components/SearchComponent';
 import type { ProColumns } from '@jetlinks/pro-table';
-import { Button, Card, Col, Empty, message, Pagination, Popconfirm, Row, Space } from 'antd';
+import { Button, Card, Col, Empty, message, Pagination, Row, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import Service from '@/pages/media/Stream/service';
 import { getButtonPermission, getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
@@ -100,10 +100,8 @@ const Stream = () => {
                         <div className={styles.title}>{item?.name}</div>
                         <div className={styles.actions}>
                           <Space>
-                            <Button
-                              type="link"
-                              style={{ padding: 0 }}
-                              disabled={getButtonPermission('media/Stream', ['update'])}
+                            <PermissionButton
+                              isPermission={permission.update}
                               className={styles.action}
                               onClick={() => {
                                 history.push(
@@ -114,32 +112,33 @@ const Stream = () => {
                                 );
                                 StreamModel.current = { ...item };
                               }}
+                              key="button"
+                              type="link"
                             >
                               <EditOutlined style={{ color: '#000000' }} />
                               <span>编辑</span>
-                            </Button>
-                            <Button
-                              type="link"
-                              style={{ padding: 0 }}
-                              disabled={getButtonPermission('media/Stream', ['delete'])}
-                            >
-                              <Popconfirm
-                                title={'确认删除？'}
-                                onConfirm={() => {
+                            </PermissionButton>
+                            <PermissionButton
+                              isPermission={permission.delete}
+                              popConfirm={{
+                                title: '确认删除',
+                                onConfirm: () => {
                                   service.remove(item.id).then((resp: any) => {
                                     if (resp.status === 200) {
                                       message.success('操作成功！');
                                       handleSearch({ pageSize: 10, terms: [] });
                                     }
                                   });
-                                }}
-                              >
-                                <span className={styles.action}>
-                                  <DeleteOutlined style={{ color: '#E50012' }} />
-                                  <span>删除</span>
-                                </span>
-                              </Popconfirm>
-                            </Button>
+                                },
+                              }}
+                              key="delete"
+                              type="link"
+                            >
+                              <span className={styles.action}>
+                                <DeleteOutlined style={{ color: '#E50012' }} />
+                                <span>删除</span>
+                              </span>
+                            </PermissionButton>
                           </Space>
                         </div>
                       </div>

src/pages/rule-engine/Instance/index.tsx

@@ -11,15 +11,14 @@ import {
   PlusOutlined,
   StopOutlined,
 } from '@ant-design/icons';
-import { Button, message, Popconfirm, Tooltip } from 'antd';
+import { Button, message, Tooltip } from 'antd';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import SearchComponent from '@/components/SearchComponent';
-import { BadgeStatus, ProTableCard } from '@/components';
+import { BadgeStatus, PermissionButton, ProTableCard } from '@/components';
 import RuleInstanceCard from '@/components/ProTableCard/CardItems/ruleInstance';
 import Save from '@/pages/rule-engine/Instance/Save';
 import SystemConst from '@/utils/const';
 import { StatusColorEnum } from '@/components/BadgeStatus';
-import { getButtonPermission } from '@/utils/menu';
 
 export const service = new Service('rule-engine/instance');
 
@@ -29,60 +28,35 @@ const Instance = () => {
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<InstanceItem>>({});
   const [searchParams, setSearchParams] = useState<any>({});
+  const { permission } = PermissionButton.usePermission('rule-engine/Instance');
 
   const tools = (record: InstanceItem) => [
-    <Button
-      key={'edit'}
-      type={'link'}
-      style={{ padding: 0 }}
+    <PermissionButton
+      isPermission={permission.update}
+      key="warning"
       onClick={() => {
         setCurrent(record);
         setVisible(true);
       }}
-      disabled={getButtonPermission('rule-engine/Instance', ['update'])}
-    >
-      <Tooltip
-        title={intl.formatMessage({
+      type={'link'}
+      style={{ padding: 0 }}
+      tooltip={{
+        title: intl.formatMessage({
           id: 'pages.data.option.edit',
           defaultMessage: '编辑',
-        })}
-        key={'edit'}
-      >
-        <EditOutlined />
-        编辑
-      </Tooltip>
-    </Button>,
-    // <Button key={'view'}
-    //   disabled={getButtonPermission('rule-engine/Instance', ['view'])}
-    //   type={'link'}
-    //   style={{ padding: 0 }}
-    //   onClick={() => {
-    //     window.open(`/${SystemConst.API_BASE}/rule-editor/index.html#flow/${record.id}`);
-    //   }}
-    // >
-    //   <Tooltip
-    //     title={intl.formatMessage({
-    //       id: 'pages.data.option.detail',
-    //       defaultMessage: '查看',
-    //     })}
-    //     key={'detail'}
-    //   >
-    //     <EyeOutlined />
-    //   </Tooltip>
-    // </Button>,
-    <Button
-      key={'operate'}
-      disabled={getButtonPermission('rule-engine/Instance', ['action'])}
+        }),
+      }}
+    >
+      <EditOutlined />
+      编辑
+    </PermissionButton>,
+    <PermissionButton
       type={'link'}
+      key={'state'}
       style={{ padding: 0 }}
-    >
-      <Popconfirm
-        key={'state'}
-        title={intl.formatMessage({
-          id: `pages.data.option.${record.state.value !== 'disable' ? 'disabled' : 'enabled'}.tips`,
-          defaultMessage: '确认禁用？',
-        })}
-        onConfirm={async () => {
+      popConfirm={{
+        title: `确认${record.state.value !== 'disable' ? '禁用' : '启用'}`,
+        onConfirm: async () => {
           if (record.state.value !== 'disable') {
             await service.stopRule(record.id);
           } else {
@@ -95,69 +69,50 @@ const Instance = () => {
             }),
           );
           actionRef.current?.reload();
-        }}
-      >
-        <Tooltip
-          title={intl.formatMessage({
-            id: `pages.data.option.${record.state.value !== 'disable' ? 'disabled' : 'enabled'}`,
-            defaultMessage: record.state.value !== 'disable' ? '禁用' : '启用',
-          })}
-        >
-          {record.state.value !== 'disable' ? (
-            <span>
-              <StopOutlined />
-              禁用
-            </span>
-          ) : (
-            <span>
-              <CheckCircleOutlined />
-              启用
-            </span>
-          )}
-        </Tooltip>
-      </Popconfirm>
-    </Button>,
-    <Tooltip
-      key={'delete'}
-      title={
-        record.state.value !== 'disable'
-          ? '已启用不能删除'
-          : intl.formatMessage({
-              id: 'pages.data.option.remove',
-              defaultMessage: '删除',
-            })
-      }
+        },
+      }}
+      isPermission={permission.action}
+      tooltip={{
+        title: record.state.value !== 'disable' ? '禁用' : '启用',
+      }}
     >
-      <Button
-        type={'link'}
-        style={{ padding: 0 }}
-        disabled={
-          getButtonPermission('rule-engine/Instance', ['delete']) ||
-          record.state.value !== 'disable'
-        }
-      >
-        <Popconfirm
-          title={record.state.value === 'disable' ? '确认删除' : '未停止不能删除'}
-          key={'delete'}
-          onConfirm={async () => {
-            if (record.state.value === 'disable') {
-              await service.remove(record.id);
-              message.success(
-                intl.formatMessage({
-                  id: 'pages.data.option.success',
-                  defaultMessage: '操作成功!',
-                }),
-              );
-              actionRef.current?.reload();
-            } else {
-              message.error('未停止不能删除');
-            }
-          }}
-        >
-          <DeleteOutlined />
-        </Popconfirm>
-      </Button>
-    </Tooltip>,
+      {record.state.value !== 'disable' ? (
+        <span>
+          <StopOutlined />
+          禁用
+        </span>
+      ) : (
+        <span>
+          <CheckCircleOutlined />
+          启用
+        </span>
+      )}
+    </PermissionButton>,
+    <PermissionButton
+      isPermission={permission.delete}
+      popConfirm={{
+        title: '确认删除',
+        onConfirm: async () => {
+          if (record.state.value === 'disable') {
+            await service.remove(record.id);
+            message.success(
+              intl.formatMessage({
+                id: 'pages.data.option.success',
+                defaultMessage: '操作成功!',
+              }),
+            );
+            actionRef.current?.reload();
+          } else {
+            message.error('未停止不能删除');
+          }
+        },
+      }}
+      key="delete"
+      type="link"
+    >
+      <DeleteOutlined />
+      删除
+    </PermissionButton>,
   ];
 
   const columns: ProColumns<InstanceItem>[] = [
@@ -208,25 +163,24 @@ const Instance = () => {
       align: 'center',
       width: 200,
       render: (text, record) => [
-        <Button
-          type="link"
-          style={{ padding: 0 }}
-          disabled={getButtonPermission('rule-engine/Instance', ['update'])}
-          key={'edit'}
+        <PermissionButton
+          isPermission={permission.update}
+          key="warning"
           onClick={() => {
             setCurrent(record);
             setVisible(true);
           }}
-        >
-          <Tooltip
-            title={intl.formatMessage({
+          type={'link'}
+          style={{ padding: 0 }}
+          tooltip={{
+            title: intl.formatMessage({
               id: 'pages.data.option.edit',
               defaultMessage: '编辑',
-            })}
-          >
-            <EditOutlined />
-          </Tooltip>
-        </Button>,
+            }),
+          }}
+        >
+          <EditOutlined />
+        </PermissionButton>,
         <Button
           type="link"
           style={{ padding: 0 }}
@@ -244,21 +198,13 @@ const Instance = () => {
             <EyeOutlined />
           </Tooltip>
         </Button>,
-        <Button
+        <PermissionButton
           type={'link'}
+          key={'state'}
           style={{ padding: 0 }}
-          key={'operate'}
-          disabled={getButtonPermission('rule-engine/Instance', ['action'])}
-        >
-          <Popconfirm
-            key={'state'}
-            title={intl.formatMessage({
-              id: `pages.data.option.${
-                record.state.value !== 'disable' ? 'disabled' : 'enabled'
-              }.tips`,
-              defaultMessage: '确认禁用？',
-            })}
-            onConfirm={async () => {
+          popConfirm={{
+            title: `确认${record.state.value !== 'disable' ? '禁用' : '启用'}`,
+            onConfirm: async () => {
               if (record.state.value !== 'disable') {
                 await service.stopRule(record.id);
               } else {
@@ -271,61 +217,40 @@ const Instance = () => {
                 }),
               );
               actionRef.current?.reload();
-            }}
-          >
-            <Tooltip
-              title={intl.formatMessage({
-                id: `pages.data.option.${
-                  record.state.value !== 'disable' ? 'disabled' : 'enabled'
-                }`,
-                defaultMessage: record.state.value !== 'disable' ? '禁用' : '正常',
-              })}
-            >
-              {record.state.value !== 'disable' ? <StopOutlined /> : <CheckCircleOutlined />}
-            </Tooltip>
-          </Popconfirm>
-        </Button>,
-        <Tooltip
-          key={'delete'}
-          title={
-            record.state.value !== 'disable'
-              ? '已启用不能删除'
-              : intl.formatMessage({
-                  id: 'pages.data.option.remove',
-                  defaultMessage: '删除',
-                })
-          }
+            },
+          }}
+          isPermission={permission.action}
+          tooltip={{
+            title: record.state.value !== 'disable' ? '禁用' : '启用',
+          }}
         >
-          <Button
-            disabled={
-              getButtonPermission('rule-engine/Instance', ['delete']) ||
-              record.state.value !== 'disable'
-            }
-            type={'link'}
-            style={{ padding: 0 }}
-          >
-            <Popconfirm
-              title={record.state.value === 'disable' ? '确认删除' : '未禁用不能删除'}
-              key={'delete'}
-              onConfirm={async () => {
-                if (record.state.value === 'disable') {
-                  await service.remove(record.id);
-                  message.success(
-                    intl.formatMessage({
-                      id: 'pages.data.option.success',
-                      defaultMessage: '操作成功!',
-                    }),
-                  );
-                  actionRef.current?.reload();
-                } else {
-                  message.error('未禁用不能删除');
-                }
-              }}
-            >
-              <DeleteOutlined />
-            </Popconfirm>
-          </Button>
-        </Tooltip>,
+          {record.state.value !== 'disable' ? <StopOutlined /> : <CheckCircleOutlined />}
+        </PermissionButton>,
+        <PermissionButton
+          isPermission={permission.delete}
+          style={{ padding: 0 }}
+          popConfirm={{
+            title: '确认删除',
+            onConfirm: async () => {
+              if (record.state.value === 'disable') {
+                await service.remove(record.id);
+                message.success(
+                  intl.formatMessage({
+                    id: 'pages.data.option.success',
+                    defaultMessage: '操作成功!',
+                  }),
+                );
+                actionRef.current?.reload();
+              } else {
+                message.error('未停止不能删除');
+              }
+            },
+          }}
+          key="button"
+          type="link"
+        >
+          <DeleteOutlined />
+        </PermissionButton>,
       ],
     },
   ];
@@ -361,22 +286,24 @@ const Instance = () => {
         search={false}
         pagination={{ pageSize: 10 }}
         headerTitle={[
-          <Button
+          <PermissionButton
+            isPermission={permission.add}
+            key="add"
             onClick={() => {
               setVisible(true);
               setCurrent({});
             }}
-            disabled={getButtonPermission('rule-engine/Instance', ['add'])}
-            style={{ marginRight: 12 }}
-            key="button"
             icon={<PlusOutlined />}
             type="primary"
+            tooltip={{
+              title: intl.formatMessage({
+                id: 'pages.data.option.add',
+                defaultMessage: '新增',
+              }),
+            }}
           >
-            {intl.formatMessage({
-              id: 'pages.data.option.add',
-              defaultMessage: '新增',
-            })}
-          </Button>,
+            新增
+          </PermissionButton>,
         ]}
         cardRender={(record) => (
           <RuleInstanceCard

src/utils/menu/router.ts

@@ -119,8 +119,9 @@ export enum BUTTON_PERMISSION_ENUM {
   'bind-user' = 'bind-user',
   'active' = 'active',
   'sync' = 'sync',
+  'channel' = 'channel',
   'debug' = 'debug',
-  'log' = 'log',
+  'log' = 'log'
 }
 
 // 调试按钮、通知记录、批量导出、批量导入、选择通道、推送、分配资产、绑定用户对应的ID是啥