admin_permissions_page.dart 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140
  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3. import 'package:go_router/go_router.dart';
  4. import 'package:flutter_riverpod/flutter_riverpod.dart';
  5. import '../../core/theme/app_colors.dart';
  6. import '../../core/theme/app_colors_extension.dart';
  7. import '../../core/i18n/app_localizations.dart';
  8. import '../shell/nav_bar_config.dart';
  9. /// 权限管理 - 页面3.2 【管理员专属】
  10. class AdminPermissionsPage extends ConsumerStatefulWidget {
  11. const AdminPermissionsPage({super.key});
  12. @override
  13. ConsumerState<AdminPermissionsPage> createState() =>
  14. _AdminPermissionsPageState();
  15. }
  16. class _AdminPermissionsPageState extends ConsumerState<AdminPermissionsPage> {
  17. final _searchCtrl = TextEditingController();
  18. Timer? _debounce;
  19. String _searchQuery = '';
  20. // 模拟当前登录用户(自保护用)
  21. static const _currentUserId = '0001';
  22. final _employees = <_Employee>[
  23. _Employee(
  24. name: '张三',
  25. avatarText: '张',
  26. employeeId: '0048',
  27. department: '销售部',
  28. roles: ['普通员工', '审批人'],
  29. isActive: true,
  30. ),
  31. _Employee(
  32. name: '王经理',
  33. avatarText: '王',
  34. employeeId: '0012',
  35. department: '销售部',
  36. roles: ['审批人', '系统管理员'],
  37. isActive: true,
  38. ),
  39. _Employee(
  40. name: '李会计',
  41. avatarText: '李',
  42. employeeId: '0025',
  43. department: '财务部',
  44. roles: ['财务人员'],
  45. isActive: true,
  46. ),
  47. _Employee(
  48. name: '赵管理员',
  49. avatarText: '赵',
  50. employeeId: '0001',
  51. department: '信息技术部',
  52. roles: ['系统管理员'],
  53. isActive: true,
  54. ),
  55. _Employee(
  56. name: '钱六',
  57. avatarText: '钱',
  58. employeeId: '0052',
  59. department: '财务部',
  60. roles: ['财务人员'],
  61. isActive: false,
  62. ),
  63. _Employee(
  64. name: '孙七',
  65. avatarText: '孙',
  66. employeeId: '0078',
  67. department: '行政部',
  68. roles: ['普通员工'],
  69. isActive: true,
  70. ),
  71. _Employee(
  72. name: '周八',
  73. avatarText: '周',
  74. employeeId: '0091',
  75. department: '技术部',
  76. roles: ['普通员工'],
  77. isActive: true,
  78. ),
  79. ];
  80. List<_Employee> get _filteredEmployees {
  81. if (_searchQuery.isEmpty) return _employees;
  82. final q = _searchQuery.toLowerCase();
  83. return _employees.where((e) {
  84. return e.name.toLowerCase().contains(q) ||
  85. e.employeeId.toLowerCase().contains(q);
  86. }).toList();
  87. }
  88. @override
  89. void initState() {
  90. super.initState();
  91. }
  92. @override
  93. void dispose() {
  94. _searchCtrl.dispose();
  95. _debounce?.cancel();
  96. super.dispose();
  97. }
  98. void _onSearchChanged(String value) {
  99. _debounce?.cancel();
  100. _debounce = Timer(const Duration(milliseconds: 300), () {
  101. if (mounted) {
  102. setState(() => _searchQuery = value);
  103. }
  104. });
  105. }
  106. @override
  107. Widget build(BuildContext context) {
  108. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  109. final l10n = AppLocalizations.of(context);
  110. ref
  111. .read(navBarConfigProvider.notifier)
  112. .update(
  113. NavBarConfig(
  114. title: l10n.get('permissionManagement'),
  115. showBack: true,
  116. onBack: () => context.pop(),
  117. ),
  118. );
  119. return Column(
  120. children: [
  121. _buildSearchBar(),
  122. Expanded(
  123. child: ListView.builder(
  124. padding: const EdgeInsets.all(16),
  125. itemCount: _filteredEmployees.length,
  126. itemBuilder: (_, i) => _buildEmpCard(_filteredEmployees[i]),
  127. ),
  128. ),
  129. ],
  130. );
  131. }
  132. // ── 搜索栏(300ms 防抖) ──
  133. Widget _buildSearchBar() {
  134. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  135. return Container(
  136. width: double.infinity,
  137. padding: const EdgeInsets.fromLTRB(16, 10, 16, 10),
  138. color: colors.bgCard,
  139. child: Container(
  140. padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
  141. decoration: BoxDecoration(
  142. color: colors.bgPage,
  143. borderRadius: BorderRadius.circular(18),
  144. border: Border.all(color: colors.border),
  145. ),
  146. child: Row(
  147. children: [
  148. Icon(Icons.search, size: 18, color: colors.textPlaceholder),
  149. const SizedBox(width: 6),
  150. Expanded(
  151. child: TextField(
  152. controller: _searchCtrl,
  153. onChanged: _onSearchChanged,
  154. decoration: InputDecoration(
  155. hintText: '输入姓名或工号进行检索...',
  156. hintStyle: TextStyle(
  157. fontSize: 14,
  158. color: colors.textPlaceholder,
  159. ),
  160. border: InputBorder.none,
  161. contentPadding: EdgeInsets.symmetric(vertical: 10),
  162. isDense: true,
  163. ),
  164. style: TextStyle(fontSize: 14, color: colors.textPrimary),
  165. ),
  166. ),
  167. if (_searchCtrl.text.isNotEmpty)
  168. GestureDetector(
  169. onTap: () {
  170. _searchCtrl.clear();
  171. _onSearchChanged('');
  172. setState(() => _searchQuery = '');
  173. },
  174. child: Icon(
  175. Icons.clear,
  176. size: 16,
  177. color: colors.textPlaceholder,
  178. ),
  179. ),
  180. ],
  181. ),
  182. ),
  183. );
  184. }
  185. // ── 员工卡片 ──
  186. Widget _buildEmpCard(_Employee emp) {
  187. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  188. return Padding(
  189. padding: const EdgeInsets.only(bottom: 12),
  190. child: GestureDetector(
  191. onTap: () => _openPermissionDrawer(emp),
  192. child: Container(
  193. padding: const EdgeInsets.all(12),
  194. decoration: BoxDecoration(
  195. color: emp.isActive ? colors.bgCard : const Color(0xFFF9F9F9),
  196. borderRadius: BorderRadius.circular(8),
  197. boxShadow: const [
  198. BoxShadow(
  199. color: Color(0x08000000),
  200. blurRadius: 4,
  201. offset: Offset(0, 1),
  202. ),
  203. ],
  204. ),
  205. child: Row(
  206. crossAxisAlignment: CrossAxisAlignment.start,
  207. children: [
  208. // 头像
  209. Container(
  210. width: 40,
  211. height: 40,
  212. decoration: BoxDecoration(
  213. color: colors.primary,
  214. borderRadius: BorderRadius.circular(20),
  215. ),
  216. child: Center(
  217. child: Text(
  218. emp.avatarText,
  219. style: const TextStyle(
  220. fontSize: 16,
  221. fontWeight: FontWeight.w600,
  222. color: Colors.white,
  223. ),
  224. ),
  225. ),
  226. ),
  227. const SizedBox(width: 10),
  228. // 信息区
  229. Expanded(
  230. child: Column(
  231. crossAxisAlignment: CrossAxisAlignment.start,
  232. children: [
  233. Row(
  234. children: [
  235. Text(
  236. emp.name,
  237. style: TextStyle(
  238. fontSize: 15,
  239. fontWeight: FontWeight.w600,
  240. color: colors.textPrimary,
  241. ),
  242. ),
  243. const SizedBox(width: 6),
  244. Text(
  245. '工号:${emp.employeeId}',
  246. style: TextStyle(
  247. fontSize: 12,
  248. color: colors.textPlaceholder,
  249. ),
  250. ),
  251. ],
  252. ),
  253. const SizedBox(height: 2),
  254. Text(
  255. emp.department,
  256. style: TextStyle(
  257. fontSize: 12,
  258. color: colors.textSecondary,
  259. ),
  260. ),
  261. ],
  262. ),
  263. ),
  264. // 角色标签区
  265. Column(
  266. crossAxisAlignment: CrossAxisAlignment.end,
  267. children: [
  268. ...emp.roles.map(
  269. (role) => Padding(
  270. padding: const EdgeInsets.only(bottom: 4),
  271. child: _buildRoleTag(role),
  272. ),
  273. ),
  274. if (!emp.isActive)
  275. Container(
  276. padding: const EdgeInsets.symmetric(
  277. horizontal: 6,
  278. vertical: 2,
  279. ),
  280. decoration: BoxDecoration(
  281. color: colors.dangerBg,
  282. borderRadius: BorderRadius.circular(3),
  283. ),
  284. child: Text(
  285. '已禁用',
  286. style: TextStyle(fontSize: 10, color: colors.danger),
  287. ),
  288. ),
  289. ],
  290. ),
  291. ],
  292. ),
  293. ),
  294. ),
  295. );
  296. }
  297. Widget _buildRoleTag(String role) {
  298. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  299. Color bgColor;
  300. Color textColor;
  301. switch (role) {
  302. case '审批人':
  303. bgColor = colors.warningBg;
  304. textColor = colors.warning;
  305. break;
  306. case '财务人员':
  307. bgColor = colors.successBg;
  308. textColor = colors.success;
  309. break;
  310. case '系统管理员':
  311. bgColor = colors.dangerBg;
  312. textColor = colors.danger;
  313. break;
  314. default:
  315. bgColor = colors.primaryLight;
  316. textColor = colors.primary;
  317. }
  318. return Container(
  319. padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
  320. decoration: BoxDecoration(
  321. color: bgColor,
  322. borderRadius: BorderRadius.circular(3),
  323. ),
  324. child: Text(role, style: TextStyle(fontSize: 10, color: textColor)),
  325. );
  326. }
  327. // ── 权限抽屉(右侧滑出) ──
  328. void _openPermissionDrawer(_Employee emp) {
  329. // 深拷贝当前权限状态
  330. final checked = <String, bool>{};
  331. for (final perm in _allPermissions) {
  332. checked[perm.id] = _getDefaultPerms(emp.roles).contains(perm.id);
  333. }
  334. showGeneralDialog(
  335. context: context,
  336. barrierDismissible: true,
  337. barrierLabel: '',
  338. barrierColor: Colors.black45,
  339. transitionDuration: const Duration(milliseconds: 300),
  340. pageBuilder: (ctx, anim1, anim2) {
  341. return _PermissionDrawer(
  342. employee: emp,
  343. checked: checked,
  344. currentUserId: _currentUserId,
  345. onSave: () {
  346. Navigator.of(ctx).pop();
  347. ScaffoldMessenger.of(context).showSnackBar(
  348. const SnackBar(
  349. content: Text('权限已更新'),
  350. duration: Duration(seconds: 2),
  351. ),
  352. );
  353. },
  354. onCancel: () => Navigator.of(ctx).pop(),
  355. );
  356. },
  357. transitionBuilder: (ctx, anim, secondaryAnim, child) {
  358. return SlideTransition(
  359. position: Tween<Offset>(
  360. begin: const Offset(1.0, 0.0),
  361. end: Offset.zero,
  362. ).animate(CurvedAnimation(parent: anim, curve: Curves.easeOutCubic)),
  363. child: child,
  364. );
  365. },
  366. );
  367. }
  368. }
  369. // ── 权限数据定义 ──
  370. class _PermModule {
  371. final String name;
  372. final List<_PermItem> items;
  373. const _PermModule({required this.name, required this.items});
  374. }
  375. class _PermItem {
  376. final String id;
  377. final String label;
  378. const _PermItem({required this.id, required this.label});
  379. }
  380. const _allPermissions = <_PermItem>[
  381. _PermItem(id: 'expense.apply', label: '发起报销'),
  382. _PermItem(id: 'expense.view_own', label: '查看本人报销'),
  383. _PermItem(id: 'expense.view_dept', label: '查看部门报销'),
  384. _PermItem(id: 'expense.view_all', label: '查看全公司报销'),
  385. _PermItem(id: 'expense.approve', label: '审批报销'),
  386. _PermItem(id: 'expense.mark_paid', label: '确认付款'),
  387. _PermItem(id: 'expense.export', label: '导出报销数据'),
  388. _PermItem(id: 'preapply.apply', label: '发起事前申请'),
  389. _PermItem(id: 'preapply.view_own', label: '查看本人申请'),
  390. _PermItem(id: 'preapply.view_dept', label: '查看部门申请'),
  391. _PermItem(id: 'preapply.approve', label: '审批事前申请'),
  392. _PermItem(id: 'overtime.apply', label: '发起加班'),
  393. _PermItem(id: 'overtime.view_own', label: '查看本人加班'),
  394. _PermItem(id: 'overtime.view_dept', label: '查看部门加班'),
  395. _PermItem(id: 'overtime.approve', label: '审批加班'),
  396. _PermItem(id: 'vehicle.apply', label: '发起用车'),
  397. _PermItem(id: 'vehicle.view_own', label: '查看本人用车'),
  398. _PermItem(id: 'vehicle.view_dept', label: '查看部门用车'),
  399. _PermItem(id: 'vehicle.approve', label: '审批用车'),
  400. _PermItem(id: 'outing.create', label: '创建外勤日志'),
  401. _PermItem(id: 'outing.view_own', label: '查看本人日志'),
  402. _PermItem(id: 'outing.view_dept', label: '查看部门日志'),
  403. _PermItem(id: 'outing.comment', label: '点评外勤日志'),
  404. _PermItem(id: 'announcement.view', label: '查看公告'),
  405. _PermItem(id: 'announcement.create', label: '发布公告'),
  406. _PermItem(id: 'report.view', label: '查看报表'),
  407. _PermItem(id: 'report.export', label: '导出报表'),
  408. _PermItem(id: 'admin.permissions', label: '管理权限'),
  409. ];
  410. // 按模块分组
  411. const _permModules = <_PermModule>[
  412. _PermModule(
  413. name: '报销管理',
  414. items: [
  415. _PermItem(id: 'expense.apply', label: '发起报销'),
  416. _PermItem(id: 'expense.view_own', label: '查看本人报销'),
  417. _PermItem(id: 'expense.view_dept', label: '查看部门报销'),
  418. _PermItem(id: 'expense.view_all', label: '查看全公司报销'),
  419. _PermItem(id: 'expense.approve', label: '审批报销'),
  420. _PermItem(id: 'expense.mark_paid', label: '确认付款'),
  421. _PermItem(id: 'expense.export', label: '导出报销数据'),
  422. ],
  423. ),
  424. _PermModule(
  425. name: '事前申请',
  426. items: [
  427. _PermItem(id: 'preapply.apply', label: '发起事前申请'),
  428. _PermItem(id: 'preapply.view_own', label: '查看本人申请'),
  429. _PermItem(id: 'preapply.view_dept', label: '查看部门申请'),
  430. _PermItem(id: 'preapply.approve', label: '审批事前申请'),
  431. ],
  432. ),
  433. _PermModule(
  434. name: '加班管理',
  435. items: [
  436. _PermItem(id: 'overtime.apply', label: '发起加班'),
  437. _PermItem(id: 'overtime.view_own', label: '查看本人加班'),
  438. _PermItem(id: 'overtime.view_dept', label: '查看部门加班'),
  439. _PermItem(id: 'overtime.approve', label: '审批加班'),
  440. ],
  441. ),
  442. _PermModule(
  443. name: '用车管理',
  444. items: [
  445. _PermItem(id: 'vehicle.apply', label: '发起用车'),
  446. _PermItem(id: 'vehicle.view_own', label: '查看本人用车'),
  447. _PermItem(id: 'vehicle.view_dept', label: '查看部门用车'),
  448. _PermItem(id: 'vehicle.approve', label: '审批用车'),
  449. ],
  450. ),
  451. _PermModule(
  452. name: '外勤管理',
  453. items: [
  454. _PermItem(id: 'outing.create', label: '创建外勤日志'),
  455. _PermItem(id: 'outing.view_own', label: '查看本人日志'),
  456. _PermItem(id: 'outing.view_dept', label: '查看部门日志'),
  457. _PermItem(id: 'outing.comment', label: '点评外勤日志'),
  458. ],
  459. ),
  460. _PermModule(
  461. name: '公告管理',
  462. items: [
  463. _PermItem(id: 'announcement.view', label: '查看公告'),
  464. _PermItem(id: 'announcement.create', label: '发布公告'),
  465. ],
  466. ),
  467. _PermModule(
  468. name: '报表管理',
  469. items: [
  470. _PermItem(id: 'report.view', label: '查看报表'),
  471. _PermItem(id: 'report.export', label: '导出报表'),
  472. ],
  473. ),
  474. _PermModule(
  475. name: '系统管理',
  476. items: [_PermItem(id: 'admin.permissions', label: '管理权限')],
  477. ),
  478. ];
  479. // 角色预设
  480. const _presets = <_RolePreset>[
  481. _RolePreset(
  482. name: '员工',
  483. permissions: [
  484. 'expense.apply',
  485. 'expense.view_own',
  486. 'preapply.apply',
  487. 'preapply.view_own',
  488. 'overtime.apply',
  489. 'overtime.view_own',
  490. 'vehicle.apply',
  491. 'vehicle.view_own',
  492. 'outing.create',
  493. 'outing.view_own',
  494. 'announcement.view',
  495. 'report.view',
  496. ],
  497. ),
  498. _RolePreset(
  499. name: '审批人',
  500. permissions: [
  501. 'expense.apply',
  502. 'expense.view_own',
  503. 'expense.view_dept',
  504. 'expense.approve',
  505. 'preapply.apply',
  506. 'preapply.view_own',
  507. 'preapply.view_dept',
  508. 'preapply.approve',
  509. 'overtime.apply',
  510. 'overtime.view_own',
  511. 'overtime.view_dept',
  512. 'overtime.approve',
  513. 'vehicle.apply',
  514. 'vehicle.view_own',
  515. 'vehicle.view_dept',
  516. 'vehicle.approve',
  517. 'outing.create',
  518. 'outing.view_own',
  519. 'outing.view_dept',
  520. 'outing.comment',
  521. 'announcement.view',
  522. 'report.view',
  523. ],
  524. ),
  525. _RolePreset(
  526. name: '财务人员',
  527. permissions: [
  528. 'expense.apply',
  529. 'expense.view_own',
  530. 'expense.view_all',
  531. 'expense.mark_paid',
  532. 'expense.export',
  533. 'preapply.apply',
  534. 'preapply.view_own',
  535. 'announcement.view',
  536. 'report.view',
  537. 'report.export',
  538. ],
  539. ),
  540. _RolePreset(
  541. name: '系统管理员',
  542. permissions: [
  543. 'expense.apply',
  544. 'expense.view_own',
  545. 'expense.view_dept',
  546. 'expense.view_all',
  547. 'expense.approve',
  548. 'expense.mark_paid',
  549. 'expense.export',
  550. 'preapply.apply',
  551. 'preapply.view_own',
  552. 'preapply.view_dept',
  553. 'preapply.approve',
  554. 'overtime.apply',
  555. 'overtime.view_own',
  556. 'overtime.view_dept',
  557. 'overtime.approve',
  558. 'vehicle.apply',
  559. 'vehicle.view_own',
  560. 'vehicle.view_dept',
  561. 'vehicle.approve',
  562. 'outing.create',
  563. 'outing.view_own',
  564. 'outing.view_dept',
  565. 'outing.comment',
  566. 'announcement.view',
  567. 'announcement.create',
  568. 'report.view',
  569. 'report.export',
  570. 'admin.permissions',
  571. ],
  572. ),
  573. ];
  574. Set<String> _getDefaultPerms(List<String> roles) {
  575. if (roles.contains('系统管理员')) return _presets[3].permissions.toSet();
  576. if (roles.contains('财务人员')) return _presets[2].permissions.toSet();
  577. if (roles.contains('审批人')) return _presets[1].permissions.toSet();
  578. return _presets[0].permissions.toSet();
  579. }
  580. class _RolePreset {
  581. final String name;
  582. final List<String> permissions;
  583. const _RolePreset({required this.name, required this.permissions});
  584. }
  585. // ── 员工数据模型 ──
  586. class _Employee {
  587. final String name;
  588. final String avatarText;
  589. final String employeeId;
  590. final String department;
  591. final List<String> roles;
  592. final bool isActive;
  593. const _Employee({
  594. required this.name,
  595. required this.avatarText,
  596. required this.employeeId,
  597. required this.department,
  598. required this.roles,
  599. this.isActive = true,
  600. });
  601. }
  602. // ── 权限抽屉组件 ──
  603. class _PermissionDrawer extends StatefulWidget {
  604. final _Employee employee;
  605. final Map<String, bool> checked;
  606. final String currentUserId;
  607. final VoidCallback onSave;
  608. final VoidCallback onCancel;
  609. const _PermissionDrawer({
  610. required this.employee,
  611. required this.checked,
  612. required this.currentUserId,
  613. required this.onSave,
  614. required this.onCancel,
  615. });
  616. @override
  617. State<_PermissionDrawer> createState() => _PermissionDrawerState();
  618. }
  619. class _PermissionDrawerState extends State<_PermissionDrawer> {
  620. late Map<String, bool> _checked;
  621. bool _showHistory = false;
  622. bool get _isSelfAdmin => widget.employee.employeeId == widget.currentUserId;
  623. // 模拟变更记录
  624. final _mockHistory = [
  625. _ChangeLog(
  626. time: '2026-06-04 14:32',
  627. operator: '赵管理员',
  628. summary: '添加了财务人员角色',
  629. ),
  630. _ChangeLog(
  631. time: '2026-06-03 09:15',
  632. operator: '赵管理员',
  633. summary: '添加了审批人权限(报销审批、加班审批)',
  634. ),
  635. _ChangeLog(time: '2026-05-28 16:40', operator: '王经理', summary: '修改为普通员工权限'),
  636. _ChangeLog(time: '2026-05-20 11:00', operator: '赵管理员', summary: '初始权限分配'),
  637. ];
  638. @override
  639. void initState() {
  640. super.initState();
  641. _checked = Map.from(widget.checked);
  642. }
  643. @override
  644. Widget build(BuildContext context) {
  645. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  646. final width = MediaQuery.of(context).size.width * 0.82;
  647. return Material(
  648. color: Colors.transparent,
  649. child: Align(
  650. alignment: Alignment.centerRight,
  651. child: Container(
  652. width: width,
  653. height: double.infinity,
  654. decoration: BoxDecoration(
  655. color: colors.bgPage,
  656. borderRadius: BorderRadius.only(
  657. topLeft: Radius.circular(12),
  658. bottomLeft: Radius.circular(12),
  659. ),
  660. ),
  661. child: Column(
  662. children: [
  663. // 标题栏
  664. _buildHeader(),
  665. // 可滚动内容
  666. Expanded(
  667. child: SingleChildScrollView(
  668. child: Column(
  669. crossAxisAlignment: CrossAxisAlignment.start,
  670. children: [
  671. _buildEmployeeInfo(),
  672. _buildQuickPresets(),
  673. _buildPermissionList(),
  674. _buildHistorySection(),
  675. const SizedBox(height: 24),
  676. ],
  677. ),
  678. ),
  679. ),
  680. // 底部保存按钮
  681. _buildSaveButton(),
  682. ],
  683. ),
  684. ),
  685. ),
  686. );
  687. }
  688. Widget _buildHeader() {
  689. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  690. final l10n = AppLocalizations.of(context);
  691. return Container(
  692. padding: const EdgeInsets.fromLTRB(16, 48, 8, 12),
  693. decoration: BoxDecoration(
  694. color: colors.bgCard,
  695. border: Border(bottom: BorderSide(color: colors.border)),
  696. ),
  697. child: Row(
  698. children: [
  699. Text(
  700. l10n.get('permissionEdit'),
  701. style: TextStyle(
  702. fontSize: 18,
  703. fontWeight: FontWeight.w600,
  704. color: colors.textPrimary,
  705. ),
  706. ),
  707. const Spacer(),
  708. IconButton(
  709. icon: Icon(Icons.close, size: 20, color: colors.textSecondary),
  710. onPressed: widget.onCancel,
  711. ),
  712. ],
  713. ),
  714. );
  715. }
  716. Widget _buildEmployeeInfo() {
  717. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  718. return Container(
  719. width: double.infinity,
  720. padding: const EdgeInsets.all(16),
  721. color: colors.bgCard,
  722. child: Row(
  723. children: [
  724. Container(
  725. width: 44,
  726. height: 44,
  727. decoration: BoxDecoration(
  728. color: colors.primary,
  729. borderRadius: BorderRadius.circular(22),
  730. ),
  731. child: Center(
  732. child: Text(
  733. widget.employee.avatarText,
  734. style: const TextStyle(
  735. fontSize: 18,
  736. fontWeight: FontWeight.w600,
  737. color: Colors.white,
  738. ),
  739. ),
  740. ),
  741. ),
  742. const SizedBox(width: 12),
  743. Expanded(
  744. child: Column(
  745. crossAxisAlignment: CrossAxisAlignment.start,
  746. children: [
  747. Text(
  748. widget.employee.name,
  749. style: TextStyle(
  750. fontSize: 16,
  751. fontWeight: FontWeight.w600,
  752. color: colors.textPrimary,
  753. ),
  754. ),
  755. const SizedBox(height: 2),
  756. Text(
  757. '${widget.employee.department} · 工号:${widget.employee.employeeId}',
  758. style: TextStyle(fontSize: 12, color: colors.textSecondary),
  759. ),
  760. ],
  761. ),
  762. ),
  763. ],
  764. ),
  765. );
  766. }
  767. // ── 快捷套餐 ──
  768. Widget _buildQuickPresets() {
  769. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  770. final l10n = AppLocalizations.of(context);
  771. return Container(
  772. width: double.infinity,
  773. padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
  774. color: colors.bgCard,
  775. child: Column(
  776. crossAxisAlignment: CrossAxisAlignment.start,
  777. children: [
  778. Text(
  779. l10n.get('quickPresets'),
  780. style: TextStyle(
  781. fontSize: 13,
  782. fontWeight: FontWeight.w600,
  783. color: colors.textSecondary,
  784. ),
  785. ),
  786. const SizedBox(height: 10),
  787. Wrap(
  788. spacing: 8,
  789. runSpacing: 8,
  790. children: _presets.map((preset) {
  791. return GestureDetector(
  792. onTap: () => _applyPreset(preset),
  793. child: Container(
  794. padding: const EdgeInsets.symmetric(
  795. horizontal: 12,
  796. vertical: 6,
  797. ),
  798. decoration: BoxDecoration(
  799. color: colors.primaryLight,
  800. borderRadius: BorderRadius.circular(16),
  801. border: Border.all(
  802. color: colors.primary.withValues(alpha: 0.3),
  803. ),
  804. ),
  805. child: Text(
  806. preset.name,
  807. style: TextStyle(
  808. fontSize: 13,
  809. color: colors.primary,
  810. fontWeight: FontWeight.w500,
  811. ),
  812. ),
  813. ),
  814. );
  815. }).toList(),
  816. ),
  817. ],
  818. ),
  819. );
  820. }
  821. void _applyPreset(_RolePreset preset) {
  822. if (_isSelfAdmin && preset.name != '系统管理员') {
  823. // 自保护:自己是admin不能取消自己的admin
  824. final hadAdmin = widget.checked.keys.any(
  825. (k) => k == 'admin.permissions' && widget.checked[k] == true,
  826. );
  827. if (hadAdmin && !preset.permissions.contains('admin.permissions')) {
  828. ScaffoldMessenger.of(context).showSnackBar(
  829. const SnackBar(
  830. content: Text('无法取消自己的管理员权限'),
  831. duration: Duration(seconds: 2),
  832. ),
  833. );
  834. return;
  835. }
  836. }
  837. setState(() {
  838. // 先全重置
  839. for (final k in _checked.keys) {
  840. _checked[k] = false;
  841. }
  842. // 再勾选预设
  843. for (final p in preset.permissions) {
  844. if (_checked.containsKey(p)) {
  845. _checked[p] = true;
  846. }
  847. }
  848. });
  849. }
  850. // ── 权限点列表 ──
  851. Widget _buildPermissionList() {
  852. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  853. final l10n = AppLocalizations.of(context);
  854. return Container(
  855. width: double.infinity,
  856. padding: const EdgeInsets.fromLTRB(16, 8, 16, 4),
  857. color: colors.bgCard,
  858. child: Column(
  859. crossAxisAlignment: CrossAxisAlignment.start,
  860. children: [
  861. Text(
  862. l10n.get('permissionItems'),
  863. style: TextStyle(
  864. fontSize: 13,
  865. fontWeight: FontWeight.w600,
  866. color: colors.textSecondary,
  867. ),
  868. ),
  869. const SizedBox(height: 8),
  870. ..._permModules.map((module) => _buildModuleGroup(module)),
  871. ],
  872. ),
  873. );
  874. }
  875. Widget _buildModuleGroup(_PermModule module) {
  876. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  877. return Padding(
  878. padding: const EdgeInsets.only(bottom: 12),
  879. child: Column(
  880. crossAxisAlignment: CrossAxisAlignment.start,
  881. children: [
  882. Text(
  883. module.name,
  884. style: TextStyle(
  885. fontSize: 13,
  886. fontWeight: FontWeight.w600,
  887. color: colors.textPrimary,
  888. ),
  889. ),
  890. const SizedBox(height: 4),
  891. ...module.items.map((perm) {
  892. final val = _checked[perm.id] ?? false;
  893. final isAdminPerm = perm.id == 'admin.permissions';
  894. final canToggle = !(_isSelfAdmin && isAdminPerm);
  895. return GestureDetector(
  896. onTap: canToggle
  897. ? () => setState(() => _checked[perm.id] = !val)
  898. : null,
  899. child: Container(
  900. padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 4),
  901. child: Row(
  902. children: [
  903. Icon(
  904. val ? Icons.check_box : Icons.check_box_outline_blank,
  905. size: 20,
  906. color: val
  907. ? canToggle
  908. ? colors.primary
  909. : colors.textPlaceholder
  910. : colors.textPlaceholder,
  911. ),
  912. const SizedBox(width: 8),
  913. Text(
  914. perm.label,
  915. style: TextStyle(
  916. fontSize: 13,
  917. color: canToggle
  918. ? colors.textPrimary
  919. : colors.textPlaceholder,
  920. ),
  921. ),
  922. if (!canToggle)
  923. Padding(
  924. padding: EdgeInsets.only(left: 6),
  925. child: Icon(
  926. Icons.lock_outline,
  927. size: 12,
  928. color: colors.textPlaceholder,
  929. ),
  930. ),
  931. ],
  932. ),
  933. ),
  934. );
  935. }),
  936. ],
  937. ),
  938. );
  939. }
  940. // ── 变更记录 ──
  941. Widget _buildHistorySection() {
  942. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  943. final l10n = AppLocalizations.of(context);
  944. return Container(
  945. width: double.infinity,
  946. margin: const EdgeInsets.symmetric(horizontal: 16),
  947. decoration: BoxDecoration(
  948. color: colors.bgCard,
  949. borderRadius: BorderRadius.circular(8),
  950. ),
  951. child: Column(
  952. children: [
  953. GestureDetector(
  954. onTap: () => setState(() => _showHistory = !_showHistory),
  955. child: Padding(
  956. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  957. child: Row(
  958. children: [
  959. Icon(Icons.history, size: 16, color: colors.textSecondary),
  960. const SizedBox(width: 6),
  961. Text(
  962. l10n.get('changeLog'),
  963. style: TextStyle(
  964. fontSize: 13,
  965. fontWeight: FontWeight.w600,
  966. color: colors.textSecondary,
  967. ),
  968. ),
  969. const Spacer(),
  970. Text(
  971. l10n.getString(
  972. 'recentItems',
  973. args: {'count': '${_mockHistory.length}'},
  974. ),
  975. style: TextStyle(
  976. fontSize: 11,
  977. color: colors.textPlaceholder,
  978. ),
  979. ),
  980. Icon(
  981. _showHistory
  982. ? Icons.keyboard_arrow_up
  983. : Icons.keyboard_arrow_down,
  984. size: 18,
  985. color: colors.textPlaceholder,
  986. ),
  987. ],
  988. ),
  989. ),
  990. ),
  991. if (_showHistory)
  992. ..._mockHistory.map((log) => _buildTimelineItem(log)),
  993. ],
  994. ),
  995. );
  996. }
  997. Widget _buildTimelineItem(_ChangeLog log) {
  998. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  999. return Container(
  1000. padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
  1001. child: Row(
  1002. crossAxisAlignment: CrossAxisAlignment.start,
  1003. children: [
  1004. Column(
  1005. children: [
  1006. Container(
  1007. width: 8,
  1008. height: 8,
  1009. decoration: BoxDecoration(
  1010. color: colors.primary,
  1011. shape: BoxShape.circle,
  1012. ),
  1013. ),
  1014. Container(width: 1, height: 40, color: colors.border),
  1015. ],
  1016. ),
  1017. const SizedBox(width: 10),
  1018. Expanded(
  1019. child: Column(
  1020. crossAxisAlignment: CrossAxisAlignment.start,
  1021. children: [
  1022. Text(
  1023. log.summary,
  1024. style: TextStyle(fontSize: 13, color: colors.textPrimary),
  1025. ),
  1026. const SizedBox(height: 2),
  1027. Text(
  1028. '${log.operator} · ${log.time}',
  1029. style: TextStyle(fontSize: 11, color: colors.textPlaceholder),
  1030. ),
  1031. ],
  1032. ),
  1033. ),
  1034. ],
  1035. ),
  1036. );
  1037. }
  1038. // ── 保存按钮 ──
  1039. Widget _buildSaveButton() {
  1040. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  1041. final l10n = AppLocalizations.of(context);
  1042. return Container(
  1043. width: double.infinity,
  1044. padding: const EdgeInsets.all(16),
  1045. decoration: BoxDecoration(
  1046. color: colors.bgCard,
  1047. boxShadow: const [
  1048. BoxShadow(
  1049. color: Color(0x15000000),
  1050. blurRadius: 8,
  1051. offset: Offset(0, -2),
  1052. ),
  1053. ],
  1054. ),
  1055. child: GestureDetector(
  1056. onTap: () {
  1057. if (_isSelfAdmin && !(_checked['admin.permissions'] ?? false)) {
  1058. ScaffoldMessenger.of(context).showSnackBar(
  1059. const SnackBar(
  1060. content: Text('无法取消自己的管理员权限'),
  1061. duration: Duration(seconds: 2),
  1062. ),
  1063. );
  1064. return;
  1065. }
  1066. widget.onSave();
  1067. },
  1068. child: Container(
  1069. width: double.infinity,
  1070. padding: const EdgeInsets.symmetric(vertical: 14),
  1071. decoration: BoxDecoration(
  1072. color: colors.primary,
  1073. borderRadius: BorderRadius.circular(22),
  1074. ),
  1075. child: Text(
  1076. l10n.get('confirmSave'),
  1077. textAlign: TextAlign.center,
  1078. style: const TextStyle(
  1079. fontSize: 16,
  1080. fontWeight: FontWeight.w600,
  1081. color: Colors.white,
  1082. ),
  1083. ),
  1084. ),
  1085. ),
  1086. );
  1087. }
  1088. }
  1089. class _ChangeLog {
  1090. final String time;
  1091. final String operator;
  1092. final String summary;
  1093. const _ChangeLog({
  1094. required this.time,
  1095. required this.operator,
  1096. required this.summary,
  1097. });
  1098. }