fix(network): fix networkPermission

src/components/ProTableCard/CardItems/networkCard.tsx

@@ -44,6 +44,7 @@ export default (props: NoticeCardProps) => {
   };
   return (
     <TableCard
+      detail={props.detail}
       actions={props.actions}
       status={props.state.value}
       statusText={props.state.text}
@@ -51,7 +52,7 @@ export default (props: NoticeCardProps) => {
         disabled: StatusColorEnum.error,
         enabled: StatusColorEnum.processing,
       }}
-      showMask={false}
+      // showMask={false}
     >
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>

src/pages/link/Type/index.tsx

@@ -5,6 +5,7 @@ import {
   CloseCircleOutlined,
   DeleteOutlined,
   EditOutlined,
+  EyeOutlined,
   PlayCircleOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
@@ -16,8 +17,9 @@ import { getButtonPermission, getMenuPathByParams, MENUS_CODE } from '@/utils/me
 import { history } from 'umi';
 import Service from '@/pages/link/service';
 import { Store } from 'jetlinks-store';
-import { ProTableCard } from '@/components';
+import { PermissionButton, ProTableCard } from '@/components';
 import NetworkCard from '@/components/ProTableCard/CardItems/networkCard';
+import usePermissions from '@/hooks/permission';
 
 export const service = new Service('network/config');
 
@@ -44,6 +46,7 @@ const Network = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
 
+  const { permission: networkPermission } = usePermissions('link/Type');
   const columns: ProColumns<NetworkItem>[] = [
     {
       dataIndex: 'name',
@@ -118,8 +121,9 @@ const Network = () => {
       valueType: 'option',
       width: 200,
       render: (text, record) => [
-        <Button
+        <PermissionButton
           type="link"
+          isPermission={networkPermission.update}
           style={{ padding: 0 }}
           // disabled={getButtonPermission('link/Type', ['view'])}
           key="edit"
@@ -131,21 +135,17 @@ const Network = () => {
           <Tooltip title="编辑">
             <EditOutlined />
           </Tooltip>
-        </Button>,
+        </PermissionButton>,
 
-        <Button
+        <PermissionButton
           type="link"
           style={{ padding: 0 }}
-          disabled={getButtonPermission('link/Type', ['action'])}
+          isPermission={networkPermission.action}
           key="changeState"
         >
           <Popconfirm
             title={`确认${record.state.value === 'enabled' ? '禁用' : '启用'}?`}
             onConfirm={async () => {
-              // await service.update({
-              //   id: record.id,
-              //   status: record.status ? 0 : 1,
-              // });
               const map = {
                 disabled: 'start',
                 enabled: 'shutdown',
@@ -164,39 +164,35 @@ const Network = () => {
               {record.state.value === 'enabled' ? <CloseCircleOutlined /> : <PlayCircleOutlined />}
             </Tooltip>
           </Popconfirm>
-        </Button>,
-        <Button
+        </PermissionButton>,
+        <PermissionButton
           type="link"
           style={{ padding: 0 }}
-          disabled={
-            record.state.value === 'enabled' || getButtonPermission('link/Type', ['delete'])
-          }
-        >
-          <Tooltip
-            key="delete"
-            title={
+          isPermission={networkPermission.delete}
+          disabled={record.state.value === 'enabled'}
+          tooltip={{
+            title:
               record.state.value === 'disabled'
                 ? intl.formatMessage({
                     id: 'pages.data.option.remove',
                     defaultMessage: '删除',
                   })
-                : '请先禁用该组件，再删除。'
-            }
+                : '请先禁用该组件，再删除。',
+          }}
+        >
+          <Popconfirm
+            title="确认删除?"
+            onConfirm={async () => {
+              const response: any = await service.remove(record.id);
+              if (response.status === 200) {
+                message.success('删除成功');
+                actionRef.current?.reload();
+              }
+            }}
           >
-            <Popconfirm
-              title="确认删除?"
-              onConfirm={async () => {
-                const response: any = await service.remove(record.id);
-                if (response.status === 200) {
-                  message.success('删除成功');
-                  actionRef.current?.reload();
-                }
-              }}
-            >
-              <DeleteOutlined />
-            </Popconfirm>
-          </Tooltip>
-        </Button>,
+            <DeleteOutlined />
+          </Popconfirm>
+        </PermissionButton>,
       ],
     },
   ];
@@ -240,8 +236,20 @@ const Network = () => {
         cardRender={(record) => (
           <NetworkCard
             {...record}
+            detail={
+              <div
+                style={{ fontSize: 18, padding: 8 }}
+                onClick={() => {
+                  Store.set('current-network-data', record);
+                  pageJump(record.id);
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
             actions={[
-              <Button
+              <PermissionButton
+                isPermission={networkPermission.update}
                 key="edit"
                 onClick={() => {
                   Store.set('current-network-data', record);
@@ -250,16 +258,13 @@ const Network = () => {
               >
                 <EditOutlined />
                 编辑
-              </Button>,
-              <Tooltip title={record.state.value === 'enabled' ? '禁用' : '启用'}>
-                <Popconfirm
-                  disabled={getButtonPermission('link/Type', ['action'])}
-                  title={`确认${record.state.value === 'enabled' ? '禁用' : '启用'}?`}
-                  onConfirm={async () => {
-                    // await service.update({
-                    //   id: record.id,
-                    //   status: record.status ? 0 : 1,
-                    // });
+              </PermissionButton>,
+              <PermissionButton
+                isPermission={networkPermission.action}
+                key="changeState"
+                popConfirm={{
+                  title: `确认${record.state.value === 'enabled' ? '禁用' : '启用'}?`,
+                  onConfirm: async () => {
                     const map = {
                       disabled: 'start',
                       enabled: 'shutdown',
@@ -272,39 +277,44 @@ const Network = () => {
                       }),
                     );
                     actionRef.current?.reload();
-                  }}
-                >
-                  <Button
-                    type="link"
-                    style={{ padding: 0 }}
-                    disabled={getButtonPermission('link/Type', ['action'])}
-                    key="changeState"
-                  >
-                    {record.state.value === 'enabled' ? (
-                      <CloseCircleOutlined />
-                    ) : (
-                      <PlayCircleOutlined />
-                    )}
-                    {record.state.value === 'enabled' ? '禁用' : '启用'}
-                  </Button>
-                </Popconfirm>
-              </Tooltip>,
-              <Popconfirm
-                key="delete"
-                title="确认删除?"
-                disabled={getButtonPermission('link/Type', ['delete'])}
-                onConfirm={async () => {
-                  const response: any = await service.remove(record.id);
-                  if (response.status === 200) {
-                    message.success('删除成功');
-                    actionRef.current?.reload();
-                  }
+                  },
                 }}
               >
-                <Button key="delete" disabled={getButtonPermission('link/Type', ['delete'])}>
+                {record.state.value === 'enabled' ? (
+                  <CloseCircleOutlined />
+                ) : (
+                  <PlayCircleOutlined />
+                )}
+                {record.state.value === 'enabled' ? '禁用' : '启用'}
+              </PermissionButton>,
+              <PermissionButton
+                type="link"
+                style={{ padding: 0 }}
+                isPermission={networkPermission.delete}
+                disabled={record.state.value === 'enabled'}
+                tooltip={{
+                  title:
+                    record.state.value === 'disabled'
+                      ? intl.formatMessage({
+                          id: 'pages.data.option.remove',
+                          defaultMessage: '删除',
+                        })
+                      : '请先禁用该组件，再删除。',
+                }}
+              >
+                <Popconfirm
+                  title="确认删除?"
+                  onConfirm={async () => {
+                    const response: any = await service.remove(record.id);
+                    if (response.status === 200) {
+                      message.success('删除成功');
+                      actionRef.current?.reload();
+                    }
+                  }}
+                >
                   <DeleteOutlined />
-                </Button>
-              </Popconfirm>,
+                </Popconfirm>
+              </PermissionButton>,
             ]}
           />
         )}