Skip to content

Commit f014a29

Browse files
windbyteswindbytes
committed
refactor: enhance button accessibility and error handling in various components
- Updated button properties across multiple components to disable buttons based on permission checks, improving accessibility and user experience. - Simplified the UserDropdown component by removing the timeout before page reload on role switch success. - Enhanced error handling in the UserDropdown and TableActionButtons components to provide more informative error messages. - Streamlined the import and export functionality in TableActionButtons and other components to ensure consistent behavior and user feedback.
1 parent 93a92b4 commit f014a29

9 files changed

Lines changed: 232 additions & 188 deletions

File tree

‎src/layouts/Header/component/UserDropdown/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,10 @@ const UserDropdown: React.FC = () => {
9595
onSuccess: () => {
9696
// 清空当前标签页
9797
resetTabs();
98-
99-
setTimeout(() => {
100-
window.location.reload();
101-
}, 1000);
98+
window.location.reload();
10299
},
103100
onError: (error) => {
104-
console.error('角色切换失败:', error);
105-
message.error('角色切换失败');
101+
message.error(`角色切换失败: ${error.message}`);
106102
},
107103
});
108104

‎src/views/system/Dict/components/TableActionButtons.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -47,30 +47,34 @@ const TableActionButtons: React.FC<TableActionButtonsProps> = ({
4747
return (
4848
<div className="flex grow items-center justify-between">
4949
<Space size="middle">
50-
{canAdd && (
51-
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal('add')}>
52-
{t('common.operation.add')}
50+
<Button
51+
type="primary"
52+
icon={<PlusOutlined />}
53+
disabled={!canAdd}
54+
onClick={() => openModal('add')}
55+
>
56+
{t('common.operation.add')}
57+
</Button>
58+
<Upload accept=".csv,.xlsx,.xls" showUploadList={false} beforeUpload={handleFileUpload}>
59+
<Button icon={<FolderImport className="block!" />} disabled={!canImport}>
60+
导入
5361
</Button>
54-
)}
55-
{canImport && (
56-
<Upload accept=".csv,.xlsx,.xls" showUploadList={false} beforeUpload={handleFileUpload}>
57-
<Button icon={<FolderImport className="block!" />}>导入</Button>
58-
</Upload>
59-
)}
60-
{canExport && (
61-
<Dropdown menu={{ items: exportItems }} placement="bottom">
62-
<Button icon={<FolderExport className="block!" />}>
63-
导出
64-
{selectedRowKeys.length > 0 && <Badge count={selectedRowKeys.length} size="small" className="ml-1" />}
65-
</Button>
66-
</Dropdown>
67-
)}
68-
{canDelete && (
69-
<Button danger icon={<DeleteOutlined />} onClick={onBatchDelete} disabled={selectedRowKeys.length === 0}>
70-
批量删除
62+
</Upload>
63+
<Dropdown menu={{ items: exportItems }} placement="bottom" disabled={!canExport}>
64+
<Button icon={<FolderExport className="block!" />} disabled={!canExport}>
65+
导出
7166
{selectedRowKeys.length > 0 && <Badge count={selectedRowKeys.length} size="small" className="ml-1" />}
7267
</Button>
73-
)}
68+
</Dropdown>
69+
<Button
70+
danger
71+
icon={<DeleteOutlined />}
72+
onClick={onBatchDelete}
73+
disabled={selectedRowKeys.length === 0 || !canDelete}
74+
>
75+
批量删除
76+
{selectedRowKeys.length > 0 && <Badge count={selectedRowKeys.length} size="small" className="ml-1" />}
77+
</Button>
7478
</Space>
7579
</div>
7680
);

‎src/views/system/Menu/index.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -131,20 +131,21 @@ const Menu: React.FC = () => {
131131
rowKey="id"
132132
actionButtons={
133133
<div className="flex gap-2">
134-
{permissions.canAddMenu && (
135-
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal('add')}>
136-
新增菜单
137-
</Button>
138-
)}
139-
{permissions.canDeleteMenu && (
140-
<Button
141-
danger
142-
onClick={() => handleBatchDelete(selectedRowKeys)}
143-
disabled={selectedRowKeys.length === 0}
144-
>
145-
批量删除
146-
</Button>
147-
)}
134+
<Button
135+
type="primary"
136+
icon={<PlusOutlined />}
137+
disabled={!permissions.canAddMenu}
138+
onClick={() => openModal('add')}
139+
>
140+
新增菜单
141+
</Button>
142+
<Button
143+
danger
144+
onClick={() => handleBatchDelete(selectedRowKeys)}
145+
disabled={selectedRowKeys.length === 0 || !permissions.canDeleteMenu}
146+
>
147+
批量删除
148+
</Button>
148149
</div>
149150
}
150151
onRefresh={refetch}

‎src/views/system/Params/components/TableActionButtons.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -55,35 +55,46 @@ const TableActionButtons: React.FC<TableActionButtonsProps> = ({
5555
<div className="flex grow items-center justify-between">
5656
{/* 左侧主要操作按钮 */}
5757
<Space size="middle">
58-
{canAdd && (
59-
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal('add')}>
60-
新增
58+
<Button
59+
type="primary"
60+
icon={<PlusOutlined />}
61+
disabled={!canAdd}
62+
onClick={() => openModal('add')}
63+
>
64+
新增
65+
</Button>
66+
<Upload accept=".xlsx,.xls,.csv" showUploadList={false} beforeUpload={handleFileUpload}>
67+
<Button icon={<FolderImport className="block!" />} disabled={!canImport}>
68+
导入
6169
</Button>
62-
)}
63-
{canImport && (
64-
<Upload accept=".xlsx,.xls,.csv" showUploadList={false} beforeUpload={handleFileUpload}>
65-
<Button icon={<FolderImport className="block!" />}>导入</Button>
66-
</Upload>
67-
)}
70+
</Upload>
6871

69-
{canExport && (
70-
<Space.Compact>
71-
<Button disabled={selectedRows.length === 0} icon={<FolderExport className="block!" />}>
72-
导出
73-
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
74-
</Button>
75-
<Dropdown disabled={selectedRows.length === 0} menu={{ items: exportItems }} placement="bottom">
76-
<Button icon={<DownOutlined />} />
77-
</Dropdown>
78-
</Space.Compact>
79-
)}
80-
81-
{canDelete && (
82-
<Button icon={<DeleteOutlined />} onClick={handleBatchDelete} disabled={selectedRows.length === 0} danger>
83-
批量删除
72+
<Space.Compact>
73+
<Button
74+
disabled={selectedRows.length === 0 || !canExport}
75+
icon={<FolderExport className="block!" />}
76+
>
77+
导出
8478
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
8579
</Button>
86-
)}
80+
<Dropdown
81+
disabled={selectedRows.length === 0 || !canExport}
82+
menu={{ items: exportItems }}
83+
placement="bottom"
84+
>
85+
<Button icon={<DownOutlined />} />
86+
</Dropdown>
87+
</Space.Compact>
88+
89+
<Button
90+
icon={<DeleteOutlined />}
91+
onClick={handleBatchDelete}
92+
disabled={selectedRows.length === 0 || !canDelete}
93+
danger
94+
>
95+
批量删除
96+
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
97+
</Button>
8798
</Space>
8899
</div>
89100
);

‎src/views/system/Params/hooks/useParamTableColumn.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,16 +119,23 @@ export const useParamTableColumns = (props: UseParamTableColumnProps) => {
119119
fixed: 'end',
120120
render: (_: any, record: SysParam) => (
121121
<>
122-
{canEdit && (
123-
<Button size="small" type="link" onClick={() => onEdit(record)}>
124-
{t('common.operation.edit')}
125-
</Button>
126-
)}
127-
{canDelete && (
128-
<Button size="small" type="link" danger onClick={() => onDelete(record)}>
129-
{t('common.operation.delete')}
130-
</Button>
131-
)}
122+
<Button
123+
size="small"
124+
type="link"
125+
disabled={!canEdit}
126+
onClick={() => onEdit(record)}
127+
>
128+
{t('common.operation.edit')}
129+
</Button>
130+
<Button
131+
size="small"
132+
type="link"
133+
danger
134+
disabled={!canDelete}
135+
onClick={() => onDelete(record)}
136+
>
137+
{t('common.operation.delete')}
138+
</Button>
132139
</>
133140
),
134141
},

‎src/views/system/Permission/components/TableActionButtons.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -107,36 +107,44 @@ const TableActionButtons: React.FC<TableActionButtonsProps> = ({
107107
<div className="flex grow items-center justify-between">
108108
<Space size="middle">
109109
{/* 新增按钮 */}
110-
{canAdd && (
111-
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal('add')}>
112-
{t('common.operation.add')}
113-
</Button>
114-
)}
110+
<Button
111+
type="primary"
112+
icon={<PlusOutlined />}
113+
disabled={!canAdd}
114+
onClick={() => openModal('add')}
115+
>
116+
{t('common.operation.add')}
117+
</Button>
115118

116119
{/* 导入按钮 */}
117-
{canImport && (
118-
<Upload
119-
accept=".xlsx,.xls"
120-
showUploadList={false}
121-
action="/api/system/permission/import"
122-
onChange={handleImportChange}
123-
>
124-
<Button icon={<FolderImport className="block!" />}>{t('common.operation.import')}</Button>
125-
</Upload>
126-
)}
120+
<Upload
121+
accept=".xlsx,.xls"
122+
showUploadList={false}
123+
action="/api/system/permission/import"
124+
onChange={handleImportChange}
125+
>
126+
<Button icon={<FolderImport className="block!" />} disabled={!canImport}>
127+
{t('common.operation.import')}
128+
</Button>
129+
</Upload>
127130

128131
{/* 导出按钮 */}
129-
{canExport && (
130-
<Space.Compact>
131-
<Button disabled={selectedRows.length === 0} icon={<FolderExport className="block!" />}>
132-
{t('common.operation.export')}
133-
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
134-
</Button>
135-
<Dropdown disabled={selectedRows.length === 0} menu={{ items: exportItems }} placement="bottom">
136-
<Button icon={<DownOutlined />} />
137-
</Dropdown>
138-
</Space.Compact>
139-
)}
132+
<Space.Compact>
133+
<Button
134+
disabled={selectedRows.length === 0 || !canExport}
135+
icon={<FolderExport className="block!" />}
136+
>
137+
{t('common.operation.export')}
138+
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
139+
</Button>
140+
<Dropdown
141+
disabled={selectedRows.length === 0 || !canExport}
142+
menu={{ items: exportItems }}
143+
placement="bottom"
144+
>
145+
<Button icon={<DownOutlined />} />
146+
</Dropdown>
147+
</Space.Compact>
140148

141149
{/* 批量操作下拉菜单 */}
142150
<Space.Compact>

‎src/views/system/Role/components/TableActionButtons.tsx‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -74,56 +74,62 @@ const TableActionButtons: React.FC<TableActionButtonsProps> = ({
7474
<div className="flex grow items-center justify-between">
7575
{/* 左侧主要操作按钮 */}
7676
<Space size="middle">
77-
{canAddRole && (
78-
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal('add')}>
79-
{t('common.operation.add')}
77+
<Button
78+
type="primary"
79+
icon={<PlusOutlined />}
80+
disabled={!canAddRole}
81+
onClick={() => openModal('add')}
82+
>
83+
{t('common.operation.add')}
84+
</Button>
85+
<Upload
86+
accept=".xlsx,.xls"
87+
showUploadList={false}
88+
action="/api/role/import"
89+
onChange={(info) => {
90+
if (info.file.status === 'done') {
91+
message.success('导入成功');
92+
refetch();
93+
} else if (info.file.status === 'error') {
94+
modal.error({
95+
title: '导入失败',
96+
content: '角色数据导入失败，请检查文件格式或联系技术支持。',
97+
});
98+
}
99+
}}
100+
>
101+
<Button icon={<FolderImport className="block!" />} disabled={!canImportRole}>
102+
{t('common.operation.import')}
80103
</Button>
81-
)}
82-
{canImportRole && (
83-
<Upload
84-
accept=".xlsx,.xls"
85-
showUploadList={false}
86-
action="/api/role/import"
87-
onChange={(info) => {
88-
if (info.file.status === 'done') {
89-
message.success('导入成功');
90-
refetch();
91-
} else if (info.file.status === 'error') {
92-
modal.error({
93-
title: '导入失败',
94-
content: '角色数据导入失败，请检查文件格式或联系技术支持。',
95-
});
96-
}
97-
}}
98-
>
99-
<Button icon={<FolderImport className="block!" />}>{t('common.operation.import')}</Button>
100-
</Upload>
101-
)}
102-
103-
{canExportRole && (
104-
<Space.Compact>
105-
<Button disabled={selectedRows.length === 0} icon={<FolderExport className="block!" />}>
106-
{t('common.operation.export')}
107-
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
108-
</Button>
109-
<Dropdown disabled={selectedRows.length === 0} menu={{ items: exportItems }} placement="bottom">
110-
<Button icon={<DownOutlined />} />
111-
</Dropdown>
112-
</Space.Compact>
113-
)}
104+
</Upload>
114105

115-
{canDeleteRole && (
106+
<Space.Compact>
116107
<Button
117-
type="default"
118-
danger
119-
icon={<DeleteDismiss24Filled className="text-sm! block! text-(--ant-color-error)!" />}
120-
disabled={selectedRows.length === 0}
121-
onClick={handleBatchDelete}
108+
disabled={selectedRows.length === 0 || !canExportRole}
109+
icon={<FolderExport className="block!" />}
122110
>
123-
{t('common.operation.batchDelete')}
111+
{t('common.operation.export')}
124112
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
125113
</Button>
126-
)}
114+
<Dropdown
115+
disabled={selectedRows.length === 0 || !canExportRole}
116+
menu={{ items: exportItems }}
117+
placement="bottom"
118+
>
119+
<Button icon={<DownOutlined />} />
120+
</Dropdown>
121+
</Space.Compact>
122+
123+
<Button
124+
type="default"
125+
danger
126+
icon={<DeleteDismiss24Filled className="text-sm! block! text-(--ant-color-error)!" />}
127+
disabled={selectedRows.length === 0 || !canDeleteRole}
128+
onClick={handleBatchDelete}
129+
>
130+
{t('common.operation.batchDelete')}
131+
{selectedRows.length > 0 && <Badge count={selectedRows.length} size="small" className="ml-1" />}
132+
</Button>
127133
</Space>
128134
</div>
129135
);

0 commit comments

Comments
 (0)