512 lines
14 KiB
Dart
512 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
|
||
import '../../../models/sys_menu.dart';
|
||
import '../../../services/api_client.dart';
|
||
import '../../../services/sys_service.dart';
|
||
|
||
/// 菜单管理页（树形展示）。
|
||
class MenuPage extends ConsumerStatefulWidget {
|
||
const MenuPage({super.key});
|
||
|
||
@override
|
||
ConsumerState<MenuPage> createState() => _MenuPageState();
|
||
}
|
||
|
||
class _MenuPageState extends ConsumerState<MenuPage> {
|
||
final SystemService _service = SystemService();
|
||
|
||
List<SysMenu> _items = [];
|
||
bool _loading = false;
|
||
String? _error;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_loadData();
|
||
}
|
||
|
||
Future<void> _loadData() async {
|
||
setState(() {
|
||
_loading = true;
|
||
_error = null;
|
||
});
|
||
try {
|
||
_items = await _service.getMenuList();
|
||
} on ApiException catch (e) {
|
||
_error = e.message;
|
||
} catch (e) {
|
||
_error = e.toString();
|
||
} finally {
|
||
if (mounted) setState(() => _loading = false);
|
||
}
|
||
}
|
||
|
||
Future<void> _refresh() async {
|
||
await _loadData();
|
||
}
|
||
|
||
/// 构建菜单树：parentId 为空或 "0" 的为根节点。
|
||
List<_MenuNode> _buildTree(List<SysMenu> menus) {
|
||
final nodeMap = <String, _MenuNode>{};
|
||
for (final menu in menus) {
|
||
nodeMap[menu.menuId] = _MenuNode(menu: menu);
|
||
}
|
||
|
||
final roots = <_MenuNode>[];
|
||
for (final menu in menus) {
|
||
final node = nodeMap[menu.menuId]!;
|
||
final parentId = menu.parentId.isEmpty || menu.parentId == '0'
|
||
? null
|
||
: menu.parentId;
|
||
if (parentId == null || !nodeMap.containsKey(parentId)) {
|
||
roots.add(node);
|
||
} else {
|
||
nodeMap[parentId]!.children.add(node);
|
||
}
|
||
}
|
||
|
||
// 排序
|
||
void sortNodes(List<_MenuNode> nodes) {
|
||
nodes.sort((a, b) => a.menu.orderNum.compareTo(b.menu.orderNum));
|
||
for (final node in nodes) {
|
||
sortNodes(node.children);
|
||
}
|
||
}
|
||
|
||
sortNodes(roots);
|
||
return roots;
|
||
}
|
||
|
||
Future<void> _showForm({SysMenu? menu}) async {
|
||
final result = await showModalBottomSheet<Map<String, dynamic>>(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
builder: (context) => _MenuForm(menu: menu, allMenus: _items),
|
||
);
|
||
|
||
if (result == null) return;
|
||
|
||
try {
|
||
await _service.saveMenu(result);
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('保存成功')),
|
||
);
|
||
_refresh();
|
||
}
|
||
} on ApiException catch (e) {
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text(e.message)),
|
||
);
|
||
}
|
||
} catch (e) {
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('保存失败：$e')),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
Future<void> _deleteMenu(SysMenu menu) async {
|
||
final confirmed = await showDialog<bool>(
|
||
context: context,
|
||
builder: (context) => AlertDialog(
|
||
title: const Text('确认删除'),
|
||
content: Text('确定要删除菜单「${menu.name}」吗？'),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context, false),
|
||
child: const Text('取消'),
|
||
),
|
||
FilledButton(
|
||
onPressed: () => Navigator.pop(context, true),
|
||
child: const Text('删除'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
|
||
if (confirmed != true) return;
|
||
|
||
try {
|
||
await _service.deleteMenu(menu.menuId);
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('删除成功')),
|
||
);
|
||
_refresh();
|
||
}
|
||
} on ApiException catch (e) {
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text(e.message)),
|
||
);
|
||
}
|
||
} catch (e) {
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('删除失败：$e')),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
String _typeLabel(int type) {
|
||
switch (type) {
|
||
case 0:
|
||
return '目录';
|
||
case 1:
|
||
return '菜单';
|
||
case 2:
|
||
return '按钮';
|
||
default:
|
||
return '未知';
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
appBar: AppBar(automaticallyImplyLeading: false, title: const Text('菜单管理')),
|
||
body: _buildBody(),
|
||
floatingActionButton: FloatingActionButton(
|
||
onPressed: () => _showForm(),
|
||
child: const Icon(Icons.add),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildBody() {
|
||
if (_loading) {
|
||
return const Center(child: CircularProgressIndicator());
|
||
}
|
||
|
||
if (_error != null) {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(_error!),
|
||
const SizedBox(height: 8),
|
||
FilledButton.tonal(
|
||
onPressed: _refresh,
|
||
child: const Text('重试'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
if (_items.isEmpty) {
|
||
return const Center(child: Text('暂无数据'));
|
||
}
|
||
|
||
final tree = _buildTree(_items);
|
||
|
||
return RefreshIndicator(
|
||
onRefresh: _refresh,
|
||
child: ListView.builder(
|
||
physics: const AlwaysScrollableScrollPhysics(),
|
||
itemCount: tree.length,
|
||
itemBuilder: (context, index) {
|
||
return _buildTreeNode(tree[index]);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildTreeNode(_MenuNode node) {
|
||
final menu = node.menu;
|
||
final hasChildren = node.children.isNotEmpty;
|
||
|
||
if (hasChildren) {
|
||
return Card(
|
||
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
|
||
child: ExpansionTile(
|
||
leading: Icon(_iconData(menu.icon)),
|
||
title: Text(menu.name),
|
||
subtitle: Text(
|
||
'${_typeLabel(menu.type)} | ${menu.url.isEmpty ? "无路由" : menu.url}',
|
||
),
|
||
trailing: PopupMenuButton<String>(
|
||
onSelected: (value) {
|
||
if (value == 'edit') {
|
||
_showForm(menu: menu);
|
||
} else if (value == 'delete') {
|
||
_deleteMenu(menu);
|
||
}
|
||
},
|
||
itemBuilder: (context) => [
|
||
const PopupMenuItem(value: 'edit', child: Text('编辑')),
|
||
const PopupMenuItem(value: 'delete', child: Text('删除')),
|
||
],
|
||
),
|
||
children: node.children.map((child) => _buildTreeNode(child)).toList(),
|
||
),
|
||
);
|
||
}
|
||
|
||
return Card(
|
||
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
|
||
child: ListTile(
|
||
leading: Icon(_iconData(menu.icon)),
|
||
title: Text(menu.name),
|
||
subtitle: Text(
|
||
'${_typeLabel(menu.type)} | ${menu.url.isEmpty ? "无路由" : menu.url}',
|
||
),
|
||
trailing: PopupMenuButton<String>(
|
||
onSelected: (value) {
|
||
if (value == 'edit') {
|
||
_showForm(menu: menu);
|
||
} else if (value == 'delete') {
|
||
_deleteMenu(menu);
|
||
}
|
||
},
|
||
itemBuilder: (context) => [
|
||
const PopupMenuItem(value: 'edit', child: Text('编辑')),
|
||
const PopupMenuItem(value: 'delete', child: Text('删除')),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
IconData _iconData(String icon) {
|
||
switch (icon) {
|
||
case 'home':
|
||
return Icons.home;
|
||
case 'settings':
|
||
return Icons.settings;
|
||
case 'person':
|
||
return Icons.person;
|
||
case 'people':
|
||
return Icons.people;
|
||
case 'menu':
|
||
return Icons.menu;
|
||
case 'list':
|
||
return Icons.list;
|
||
case 'dashboard':
|
||
return Icons.dashboard;
|
||
case 'devices':
|
||
return Icons.devices;
|
||
case 'notifications':
|
||
return Icons.notifications;
|
||
default:
|
||
return Icons.folder;
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 菜单树节点辅助类。
|
||
class _MenuNode {
|
||
_MenuNode({required this.menu});
|
||
|
||
final SysMenu menu;
|
||
final List<_MenuNode> children = [];
|
||
}
|
||
|
||
/// 菜单表单。
|
||
class _MenuForm extends StatefulWidget {
|
||
const _MenuForm({this.menu, this.allMenus = const []});
|
||
|
||
final SysMenu? menu;
|
||
final List<SysMenu> allMenus;
|
||
|
||
@override
|
||
State<_MenuForm> createState() => _MenuFormState();
|
||
}
|
||
|
||
class _MenuFormState extends State<_MenuForm> {
|
||
final _formKey = GlobalKey<FormState>();
|
||
late TextEditingController _nameCtrl;
|
||
late TextEditingController _urlCtrl;
|
||
late TextEditingController _iconCtrl;
|
||
late TextEditingController _orderNumCtrl;
|
||
late TextEditingController _permsCtrl;
|
||
late String _parentId;
|
||
late int _type;
|
||
late bool _show;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
final m = widget.menu;
|
||
_nameCtrl = TextEditingController(text: m?.name ?? '');
|
||
_urlCtrl = TextEditingController(text: m?.url ?? '');
|
||
_iconCtrl = TextEditingController(text: m?.icon ?? '');
|
||
_orderNumCtrl = TextEditingController(text: (m?.orderNum ?? 0).toString());
|
||
_permsCtrl = TextEditingController(text: m?.perms ?? '');
|
||
_parentId = m?.parentId ?? '0';
|
||
_type = m?.type ?? 0;
|
||
_show = (m?.show ?? 0) == 0;
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_nameCtrl.dispose();
|
||
_urlCtrl.dispose();
|
||
_iconCtrl.dispose();
|
||
_orderNumCtrl.dispose();
|
||
_permsCtrl.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
void _submit() {
|
||
if (!_formKey.currentState!.validate()) return;
|
||
final data = <String, dynamic>{
|
||
'name': _nameCtrl.text.trim(),
|
||
'parentId': _parentId,
|
||
'type': _type,
|
||
'url': _urlCtrl.text.trim(),
|
||
'icon': _iconCtrl.text.trim(),
|
||
'orderNum': int.tryParse(_orderNumCtrl.text.trim()) ?? 0,
|
||
'perms': _permsCtrl.text.trim(),
|
||
'show': _show ? 0 : 1,
|
||
};
|
||
if (widget.menu != null) {
|
||
data['menuId'] = widget.menu!.menuId;
|
||
}
|
||
Navigator.pop(context, data);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final isEdit = widget.menu != null;
|
||
return Padding(
|
||
padding: EdgeInsets.only(
|
||
bottom: MediaQuery.of(context).viewInsets.bottom,
|
||
),
|
||
child: SingleChildScrollView(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Form(
|
||
key: _formKey,
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
isEdit ? '编辑菜单' : '新增菜单',
|
||
style: Theme.of(context).textTheme.titleLarge,
|
||
),
|
||
const SizedBox(height: 16),
|
||
TextFormField(
|
||
controller: _nameCtrl,
|
||
decoration: const InputDecoration(
|
||
labelText: '菜单名称',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
validator: (v) =>
|
||
(v == null || v.trim().isEmpty) ? '请输入菜单名称' : null,
|
||
),
|
||
const SizedBox(height: 12),
|
||
DropdownButtonFormField<String>(
|
||
value: _parentId,
|
||
decoration: const InputDecoration(
|
||
labelText: '父级菜单',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
items: [
|
||
const DropdownMenuItem(value: '0', child: Text('一级菜单')),
|
||
...widget.allMenus.map((m) => DropdownMenuItem(
|
||
value: m.menuId,
|
||
child: Text(m.name),
|
||
)),
|
||
],
|
||
onChanged: (v) => setState(() => _parentId = v ?? '0'),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: RadioListTile<int>(
|
||
title: const Text('目录'),
|
||
value: 0,
|
||
groupValue: _type,
|
||
onChanged: (v) => setState(() => _type = v ?? 0),
|
||
contentPadding: EdgeInsets.zero,
|
||
),
|
||
),
|
||
Expanded(
|
||
child: RadioListTile<int>(
|
||
title: const Text('菜单'),
|
||
value: 1,
|
||
groupValue: _type,
|
||
onChanged: (v) => setState(() => _type = v ?? 1),
|
||
contentPadding: EdgeInsets.zero,
|
||
),
|
||
),
|
||
Expanded(
|
||
child: RadioListTile<int>(
|
||
title: const Text('按钮'),
|
||
value: 2,
|
||
groupValue: _type,
|
||
onChanged: (v) => setState(() => _type = v ?? 2),
|
||
contentPadding: EdgeInsets.zero,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 12),
|
||
TextFormField(
|
||
controller: _urlCtrl,
|
||
decoration: const InputDecoration(
|
||
labelText: '路由地址',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
TextFormField(
|
||
controller: _iconCtrl,
|
||
decoration: const InputDecoration(
|
||
labelText: '图标',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
TextFormField(
|
||
controller: _orderNumCtrl,
|
||
keyboardType: TextInputType.number,
|
||
decoration: const InputDecoration(
|
||
labelText: '排序号',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
TextFormField(
|
||
controller: _permsCtrl,
|
||
decoration: const InputDecoration(
|
||
labelText: '权限标识',
|
||
border: OutlineInputBorder(),
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
SwitchListTile(
|
||
title: const Text('是否显示'),
|
||
value: _show,
|
||
onChanged: (v) => setState(() => _show = v),
|
||
),
|
||
const SizedBox(height: 24),
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.end,
|
||
children: [
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context),
|
||
child: const Text('取消'),
|
||
),
|
||
const SizedBox(width: 8),
|
||
FilledButton(
|
||
onPressed: _submit,
|
||
child: const Text('保存'),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|