Răsfoiți Sursa

完成菜单管理,部门管理,机柜管理,流程模板,作业管理页面表格居中展示

wyn 3 luni în urmă
părinte
comite
cca2412168

+ 8 - 8
src/components/DepartmentManagement.tsx

@@ -241,8 +241,8 @@ export default function DepartmentManagement() {
       return (
         <React.Fragment key={node.id}>
           <TableRow className="hover:bg-gray-50">
-            <TableCell style={{ paddingLeft: `${level * 24 + 12}px` }} className="font-medium">
-              <div className="flex items-center gap-2">
+            <TableCell style={{ paddingLeft: `${level * 24 + 12}px` }} className="font-medium text-center">
+              <div className="flex items-center gap-2 justify-center">
                 {hasChildren ? (
                   <button
                     onClick={() => toggleNode(node.id)}
@@ -263,7 +263,7 @@ export default function DepartmentManagement() {
                 )}
               </div>
             </TableCell>
-            <TableCell className="text-sm text-gray-600">{getLeaderName((node as any).leaderUserId) || '-'}</TableCell>
+            <TableCell className="text-sm text-gray-600 text-center">{getLeaderName((node as any).leaderUserId) || '-'}</TableCell>
             <TableCell className="text-center">{(node as any).sort || 0}</TableCell>
             <TableCell className="text-center">
               {(() => {
@@ -282,10 +282,10 @@ export default function DepartmentManagement() {
                 );
               })()}
             </TableCell>
-            <TableCell className="text-sm text-gray-600">
+            <TableCell className="text-sm text-gray-600 text-center">
               {(node as any).createTime ? dateFormatter((node as any).createTime) : '-'}
             </TableCell>
-            <TableCell>
+            <TableCell className="text-center">
               <div className="flex items-center gap-2 justify-center">
                 <PermissionWrapper permission="system:dept:update">
                   <Button
@@ -457,11 +457,11 @@ export default function DepartmentManagement() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[250px]">{t('table.departmentName')}</TableHead>
-                <TableHead className="w-[150px]">{t('table.leader')}</TableHead>
+                <TableHead className="w-[250px] text-center">{t('table.departmentName')}</TableHead>
+                <TableHead className="w-[150px] text-center">{t('table.leader')}</TableHead>
                 <TableHead className="w-[80px] text-center">{t('table.sort')}</TableHead>
                 <TableHead className="w-[100px] text-center">{t('table.status')}</TableHead>
-                <TableHead className="w-[180px]">{t('table.createTime')}</TableHead>
+                <TableHead className="w-[180px] text-center">{t('table.createTime')}</TableHead>
                 <TableHead className="w-[220px] text-center">{t('table.operation')}</TableHead>
               </TableRow>
             </TableHeader>

+ 60 - 39
src/components/IsolationWork.tsx

@@ -3045,6 +3045,7 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
     {
       title: t('table.processDesignId'),
       width: '5%',
+      align: 'center',
       render: (_: any, __: WorkflowDesignVO, index: number) => 
         (processDesignPagination.pageNo - 1) * processDesignPagination.pageSize + index + 1,
     },
@@ -3052,11 +3053,13 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.name') || '名称',
       dataIndex: 'name',
       width: '15%',
+      align: 'center',
     },
     {
       title: t('table.nodeCount'),
       dataIndex: 'nodeCount',
       width: '10%',
+      align: 'center',
       render: (count: number) => count ?? 0,
     },
     {
@@ -3068,23 +3071,25 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
         const isChecked = status === 1;
         const isUpdating = processDesignStatusUpdating[record.id!] || false;
         return (
-          <AntdSwitch
-            checked={isChecked}
-            onChange={(checked) => {
-              if (!isUpdating) {
-                const newStatus = checked ? 1 : 0;
-                handleProcessDesignStatusChanged(record, newStatus);
-              }
-            }}
-            disabled={isUpdating}
-            loading={isUpdating}
-            style={{
-              ...(isChecked ? { 
-                backgroundColor: '#52c41a',
-              } : {})
-            }}
-            className={isChecked ? 'ant-switch-checked-green' : ''}
-          />
+          <div className="flex items-center justify-center">
+            <AntdSwitch
+              checked={isChecked}
+              onChange={(checked) => {
+                if (!isUpdating) {
+                  const newStatus = checked ? 1 : 0;
+                  handleProcessDesignStatusChanged(record, newStatus);
+                }
+              }}
+              disabled={isUpdating}
+              loading={isUpdating}
+              style={{
+                ...(isChecked ? { 
+                  backgroundColor: '#52c41a',
+                } : {})
+              }}
+              className={isChecked ? 'ant-switch-checked-green' : ''}
+            />
+          </div>
         );
       },
     },
@@ -3092,6 +3097,7 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.createTime'),
       dataIndex: 'createTime',
       width: '15%',
+      align: 'center',
       render: (time: string | Date | number) => {
         if (!time) return '-';
         let date: Date;
@@ -3116,6 +3122,7 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.updateTime'),
       dataIndex: 'updateTime',
       width: '15%',
+      align: 'center',
       render: (time: string | Date | number) => {
         if (!time) return '-';
         let date: Date;
@@ -3140,6 +3147,7 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.description'),
       dataIndex: 'description',
       width: '18%',
+      align: 'center',
       render: (desc: string) => {
         const text = desc || '-';
         const maxLength = 20;
@@ -3362,24 +3370,28 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.workOrderNo'),
       dataIndex: 'orderNo',
       width: '12%',
+      align: 'center',
       render: (orderNo: string, record: WorkJobVO) => orderNo || record.code || '-',
     },
     {
       title: t('table.workName'),
       dataIndex: 'name',
       width: '18%',
+      align: 'center',
       render: (name: string, record: WorkJobVO) => {
         if (!name || name === '-') return <span>{name || '-'}</span>;
         return (
-          <span
-            className="text-blue-600 cursor-pointer hover:text-blue-800 hover:underline"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleWorkJobView(record);
-            }}
-          >
-            {name}
-          </span>
+          <div className="flex items-center justify-center">
+            <span
+              className="text-blue-600 cursor-pointer hover:text-blue-800 hover:underline"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleWorkJobView(record);
+              }}
+            >
+              {name}
+            </span>
+          </div>
         );
       },
     },
@@ -3387,16 +3399,19 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.workStatus'),
       dataIndex: 'status',
       width: '10%',
+      align: 'center',
       render: (status: string | number) => {
         const statusItem = jobStatusDictList.find(item => String(item.value) === String(status));
         const statusText = statusItem ? (statusItem.label || '') : String(status || '-');
         return (
-          <span 
-            className="inline-flex px-3 py-1 rounded-lg text-xs"
-            style={getWorkJobStatusStyle(status)}
-          >
-            {statusText}
-          </span>
+          <div className="flex items-center justify-center">
+            <span 
+              className="inline-flex px-3 py-1 rounded-lg text-xs"
+              style={getWorkJobStatusStyle(status)}
+            >
+              {statusText}
+            </span>
+          </div>
         );
       },
     },
@@ -3404,12 +3419,14 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.currentTask'),
       dataIndex: 'currentNodeName',
       width: '12%',
+      align: 'center',
       render: (currentNodeName: string, record: WorkJobVO) => currentNodeName || record.currentNode || '-',
     },
     {
       title: t('table.workContent'),
       dataIndex: 'description',
       width: '20%',
+      align: 'center',
       render: (description: string, record: WorkJobVO) => {
         const content = description || record.content || '-';
         if (content === '-') return content;
@@ -3429,12 +3446,14 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
       title: t('table.initiator'),
       dataIndex: 'initiatorName',
       width: '10%',
+      align: 'center',
       render: (initiatorName: string, record: WorkJobVO) => initiatorName || record.initiator || '-',
     },
     {
       title: t('table.initiationTime'),
       dataIndex: 'initiationTime',
       width: '16%',
+      align: 'center',
       render: (time: string | Date | number, record: WorkJobVO) => {
         const actualTime = time || record.initiateTime;
         if (!actualTime) return '-';
@@ -3467,18 +3486,20 @@ export default function IsolationWork({ subMenu }: IsolationWorkProps) {
         const urgencyText = urgencyItem ? (urgencyItem.label || '') : (urgencyValue ? String(urgencyValue) : '-');
         
         if (!urgencyValue || urgencyValue === null || urgencyValue === undefined || urgencyValue === '') {
-          return <span>-</span>;
+          return <div className="flex items-center justify-center"><span>-</span></div>;
         }
         
         const { icon, style } = getUrgencyLevelIconAndStyle(urgencyValue);
         
         return (
-          <span 
-            className="inline-flex items-center justify-center gap-1.5"
-          >
-            {icon}
-            <span style={style}>{urgencyText}</span>
-          </span>
+          <div className="flex items-center justify-center">
+            <span 
+              className="inline-flex items-center justify-center gap-1.5"
+            >
+              {icon}
+              <span style={style}>{urgencyText}</span>
+            </span>
+          </div>
         );
       },
     },

+ 34 - 18
src/components/MenuManagement.tsx

@@ -323,10 +323,11 @@ export default function MenuManagement() {
       dataIndex: 'name',
       key: 'name',
       width: 250,
+      align: 'center',
       render: (text: string, record: MenuNode) => {
         const IconComponent = getIconComponent(record.icon, record.name, record.id);
     return (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5 justify-center">
               <IconComponent className="w-4 h-4 text-gray-500" />
             <span>{text}</span>
             </div>
@@ -360,6 +361,7 @@ export default function MenuManagement() {
       dataIndex: 'permission',
       key: 'permission',
       width: 300,
+      align: 'center',
       ellipsis: true,
       render: (text: string, record: MenuNode) => {
         const permission = record.permission;
@@ -371,6 +373,7 @@ export default function MenuManagement() {
       dataIndex: 'component',
       key: 'component',
       width: 500,
+      align: 'center',
       ellipsis: true,
       render: (text: string, record: MenuNode) => {
         const component = record.component;
@@ -382,6 +385,7 @@ export default function MenuManagement() {
       dataIndex: 'componentName',
       key: 'componentName',
       width: 200,
+      align: 'center',
       ellipsis: true,
       render: (text: string) => text || '-',
     },
@@ -394,23 +398,25 @@ export default function MenuManagement() {
       render: (_: any, record: MenuNode) => {
         const isChecked = Number(record.status) === 0;
         return (
-          <AntdSwitch
-            checked={isChecked}
-            onChange={(checked) => {
-              if (!menuStatusUpdating[record.id!]) {
-                const newStatus = checked ? 0 : 1;
-                handleStatusChanged(record, newStatus);
-              }
-            }}
-            disabled={menuStatusUpdating[record.id!]}
-            loading={menuStatusUpdating[record.id!]}
-            style={{
-              ...(isChecked ? { 
-                backgroundColor: '#52c41a',
-              } : {})
-            }}
-            className={isChecked ? 'ant-switch-checked-green' : ''}
-          />
+          <div className="flex items-center justify-center">
+            <AntdSwitch
+              checked={isChecked}
+              onChange={(checked) => {
+                if (!menuStatusUpdating[record.id!]) {
+                  const newStatus = checked ? 0 : 1;
+                  handleStatusChanged(record, newStatus);
+                }
+              }}
+              disabled={menuStatusUpdating[record.id!]}
+              loading={menuStatusUpdating[record.id!]}
+              style={{
+                ...(isChecked ? { 
+                  backgroundColor: '#52c41a',
+                } : {})
+              }}
+              className={isChecked ? 'ant-switch-checked-green' : ''}
+            />
+          </div>
         );
       },
     },
@@ -493,6 +499,16 @@ export default function MenuManagement() {
         .ant-switch-checked-green.ant-switch-checked {
           background-color: #52c41a !important;
         }
+        /* 调整菜单管理表格中展开图标和内容之间的间距 */
+        .ant-table-tbody > tr > td:first-child {
+          padding-left: 8px !important;
+        }
+        .ant-table-row-expand-icon-cell {
+          padding-right: 4px !important;
+        }
+        .ant-table-row-expand-icon {
+          margin-right: 0 !important;
+        }
       `}</style>
       <div className="space-y-4">
         {/* 搜索栏 */}

+ 63 - 45
src/components/lockCabinet/HardwareLockCabinetManagement.tsx

@@ -237,12 +237,14 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'cabinetName',
               key: 'cabinetName',
               width: 150,
+              align: 'center',
             },
             {
               title: t('table.hardwareId'),
               dataIndex: 'hardwareId',
               key: 'hardwareId',
               width: 120,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -250,6 +252,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'serialNumber',
               key: 'serialNumber',
               width: 150,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -257,6 +260,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'workstationName',
               key: 'workstationName',
               width: 150,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -264,19 +268,22 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'cabinetPicture',
               key: 'cabinetPicture',
               width: 100,
+              align: 'center',
               render: (url: string) => {
                 if (!url) return '-';
                 return (
-                  <Image
-                    src={url}
-                    alt={t('table.image')}
-                    width={50}
-                    height={50}
-                    style={{ objectFit: 'cover', cursor: 'pointer' }}
-                    preview={{
-                      mask: t('common.view'),
-                    }}
-                  />
+                  <div className="flex items-center justify-center">
+                    <Image
+                      src={url}
+                      alt={t('table.image')}
+                      width={50}
+                      height={50}
+                      style={{ objectFit: 'cover', cursor: 'pointer' }}
+                      preview={{
+                        mask: t('common.view'),
+                      }}
+                    />
+                  </div>
                 );
               },
             },
@@ -285,19 +292,22 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'cabinetIcon',
               key: 'cabinetIcon',
               width: 100,
+              align: 'center',
               render: (url: string) => {
                 if (!url) return '-';
                 return (
-                  <Image
-                    src={url}
-                    alt={t('table.icon')}
-                    width={50}
-                    height={50}
-                    style={{ objectFit: 'cover', cursor: 'pointer' }}
-                    preview={{
-                      mask: t('common.view'),
-                    }}
-                  />
+                  <div className="flex items-center justify-center">
+                    <Image
+                      src={url}
+                      alt={t('table.icon')}
+                      width={50}
+                      height={50}
+                      style={{ objectFit: 'cover', cursor: 'pointer' }}
+                      preview={{
+                        mask: t('common.view'),
+                      }}
+                    />
+                  </div>
                 );
               },
             },
@@ -306,6 +316,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'isOnline',
               key: 'isOnline',
               width: 100,
+              align: 'center',
               render: (value: string) => getDictLabel(DICT_TYPE.ISONLINE_STATUS, value) || '-',
             },
             {
@@ -313,6 +324,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'status',
               key: 'status',
               width: 100,
+              align: 'center',
               render: (value: string) => {
                 if (value === null || value === undefined) return '-';
                 const statusText = getDictLabel(DICT_TYPE.CANBINET_STATUS, value) || '-';
@@ -320,11 +332,13 @@ export default function HardwareLockCabinetManagement() {
                 // 判断是否为正常状态(根据字典值或文本判断)
                 const isNormal = value === '1' || statusText.includes('正常');
                 return (
-                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                    isNormal ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
-                  }`}>
-                    {statusText}
-                  </span>
+                  <div className="flex items-center justify-center">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                      isNormal ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
+                    }`}>
+                      {statusText}
+                    </span>
+                  </div>
                 );
               },
             },
@@ -333,6 +347,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'remark',
               key: 'remark',
               width: 150,
+              align: 'center',
               render: (text: string) => {
                 const remarkText = text || '-';
                 const maxLength = 20;
@@ -351,6 +366,7 @@ export default function HardwareLockCabinetManagement() {
               dataIndex: 'createTime',
               key: 'createTime',
               width: 180,
+              align: 'center',
               render: (text) => text ? dateFormatter(text) : '-',
             },
             {
@@ -359,26 +375,28 @@ export default function HardwareLockCabinetManagement() {
               width: 80,
               align: 'center',
               render: (_: any, record: LockCabinetVO) => (
-                <Button 
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => lookDetail(record)}
-                  className="h-8 px-2 transition-colors hover:underline"
-                  style={{ color: '#000000' }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color = '#1677ff';
-                    e.currentTarget.style.textDecoration = 'underline';
-                    e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #1677ff');
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color = '#000000';
-                    e.currentTarget.style.textDecoration = 'none';
-                    e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #000000');
-                  }}
-                >
-                  <Eye className="w-4 h-4" style={{ color: '#000000' }} />
-                  <span className="ml-1">查看</span>
-                </Button>
+                <div className="flex items-center justify-center">
+                  <Button 
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => lookDetail(record)}
+                    className="h-8 px-2 transition-colors hover:underline"
+                    style={{ color: '#000000' }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.color = '#1677ff';
+                      e.currentTarget.style.textDecoration = 'underline';
+                      e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #1677ff');
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = '#000000';
+                      e.currentTarget.style.textDecoration = 'none';
+                      e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #000000');
+                    }}
+                  >
+                    <Eye className="w-4 h-4" style={{ color: '#000000' }} />
+                    <span className="ml-1">查看</span>
+                  </Button>
+                </div>
               ),
             },
           ]}

+ 54 - 36
src/components/lockCabinet/SystemLockCabinetManagement.tsx

@@ -307,12 +307,14 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'cabinetName',
               key: 'cabinetName',
               width: 150,
+              align: 'center',
             },
             {
               title: t('table.hardwareId'),
               dataIndex: 'hardwareId',
               key: 'hardwareId',
               width: 120,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -320,6 +322,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'serialNumber',
               key: 'serialNumber',
               width: 150,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -327,6 +330,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'workstationName',
               key: 'workstationName',
               width: 150,
+              align: 'center',
               render: (text) => text || '-',
             },
             {
@@ -334,19 +338,22 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'cabinetPicture',
               key: 'cabinetPicture',
               width: 100,
+              align: 'center',
               render: (url: string) => {
                 if (!url) return '-';
                 return (
-                  <Image
-                    src={url}
-                    alt={t('table.image')}
-                    width={50}
-                    height={50}
-                    style={{ objectFit: 'cover', cursor: 'pointer' }}
-                    preview={{
-                      mask: t('common.view'),
-                    }}
-                  />
+                  <div className="flex items-center justify-center">
+                    <Image
+                      src={url}
+                      alt={t('table.image')}
+                      width={50}
+                      height={50}
+                      style={{ objectFit: 'cover', cursor: 'pointer' }}
+                      preview={{
+                        mask: t('common.view'),
+                      }}
+                    />
+                  </div>
                 );
               },
             },
@@ -355,19 +362,22 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'cabinetIcon',
               key: 'cabinetIcon',
               width: 100,
+              align: 'center',
               render: (url: string) => {
                 if (!url) return '-';
                 return (
-                  <Image
-                    src={url}
-                    alt={t('table.icon')}
-                    width={50}
-                    height={50}
-                    style={{ objectFit: 'cover', cursor: 'pointer' }}
-                    preview={{
-                      mask: t('common.view'),
-                    }}
-                  />
+                  <div className="flex items-center justify-center">
+                    <Image
+                      src={url}
+                      alt={t('table.icon')}
+                      width={50}
+                      height={50}
+                      style={{ objectFit: 'cover', cursor: 'pointer' }}
+                      preview={{
+                        mask: t('common.view'),
+                      }}
+                    />
+                  </div>
                 );
               },
             },
@@ -376,6 +386,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'isOnline',
               key: 'isOnline',
               width: 100,
+              align: 'center',
               render: (value: string) => getDictLabel(DICT_TYPE.ISONLINE_STATUS, value) || '-',
             },
             {
@@ -383,6 +394,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'status',
               key: 'status',
               width: 100,
+              align: 'center',
               render: (value: string) => {
                 if (value === null || value === undefined) return '-';
                 const statusText = getDictLabel(DICT_TYPE.CANBINET_STATUS, value) || '-';
@@ -390,11 +402,13 @@ export default function SystemLockCabinetManagement() {
                 // 判断是否为正常状态(根据字典值或文本判断)
                 const isNormal = value === '1' || statusText.includes('正常');
                 return (
-                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                    isNormal ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
-                  }`}>
-                    {statusText}
-                  </span>
+                  <div className="flex items-center justify-center">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                      isNormal ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
+                    }`}>
+                      {statusText}
+                    </span>
+                  </div>
                 );
               },
             },
@@ -403,6 +417,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'remark',
               key: 'remark',
               width: 150,
+              align: 'center',
               render: (text: string) => {
                 const remarkText = text || '-';
                 const maxLength = 20;
@@ -421,6 +436,7 @@ export default function SystemLockCabinetManagement() {
               dataIndex: 'createTime',
               key: 'createTime',
               width: 180,
+              align: 'center',
               render: (text) => text ? dateFormatter(text) : '-',
             },
             {
@@ -429,17 +445,19 @@ export default function SystemLockCabinetManagement() {
               width: 80,
               align: 'center',
               render: (_: any, record: LockCabinetVO) => (
-                <PermissionWrapper permission="iscs:lock-cabinet:query">
-                  <Button 
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => lookDetail(record)}
-                    className="h-8 px-2"
-                  >
-                    <Eye className="w-4 h-4" />
-                    <span className="ml-1">{t('common.view')}</span>
-                  </Button>
-                </PermissionWrapper>
+                <div className="flex items-center justify-center">
+                  <PermissionWrapper permission="iscs:lock-cabinet:query">
+                    <Button 
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => lookDetail(record)}
+                      className="h-8 px-2"
+                    >
+                      <Eye className="w-4 h-4" />
+                      <span className="ml-1">{t('common.view')}</span>
+                    </Button>
+                  </PermissionWrapper>
+                </div>
               ),
             },
             {