vehicle_detail_page.dart 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
  1. import 'package:flutter/material.dart';
  2. import 'package:go_router/go_router.dart';
  3. import 'package:flutter_riverpod/flutter_riverpod.dart';
  4. import 'package:tdesign_flutter/tdesign_flutter.dart';
  5. import '../../core/theme/app_colors.dart';
  6. import '../shell/nav_bar_config.dart';
  7. import '../../core/utils/date_utils.dart' as du;
  8. import '../../shared/widgets/status_banner.dart';
  9. import '../../shared/widgets/approval_timeline.dart';
  10. import '../../shared/models/approval_status.dart';
  11. import 'vehicle_model.dart';
  12. import '../../core/i18n/app_localizations.dart';
  13. import 'vehicle_list_controller.dart';
  14. class VehicleDetailPage extends ConsumerStatefulWidget {
  15. final String id;
  16. const VehicleDetailPage({super.key, required this.id});
  17. @override
  18. ConsumerState<VehicleDetailPage> createState() => _VehicleDetailPageState();
  19. }
  20. class _VehicleDetailPageState extends ConsumerState<VehicleDetailPage> {
  21. // Return registration fields
  22. final _startOdometerCtrl = TextEditingController();
  23. final _endOdometerCtrl = TextEditingController();
  24. final _actualCostCtrl = TextEditingController();
  25. final _costRemarkCtrl = TextEditingController();
  26. DateTime? _actualReturnTime;
  27. bool _isSubmittingReturn = false;
  28. String _purposeLabel(String key) {
  29. switch (key) {
  30. case 'reception': return '客户接待';
  31. case 'business': return '商务出行';
  32. case 'official': return '公务';
  33. default: return key;
  34. }
  35. }
  36. @override
  37. void dispose() {
  38. _startOdometerCtrl.dispose();
  39. _endOdometerCtrl.dispose();
  40. _actualCostCtrl.dispose();
  41. _costRemarkCtrl.dispose();
  42. super.dispose();
  43. }
  44. @override
  45. Widget build(BuildContext context) {
  46. final vehicle = mockVehicles.firstWhere(
  47. (e) => e.id == widget.id,
  48. orElse: () => mockVehicles.first,
  49. );
  50. final l10n = AppLocalizations.of(context);
  51. ref
  52. .read(navBarConfigProvider.notifier)
  53. .update(
  54. NavBarConfig(
  55. title: l10n.get('vehicleDetail'),
  56. showBack: true,
  57. onBack: () => context.pop(),
  58. ),
  59. );
  60. final (icon, color, statusText) = _statusProps(vehicle.status);
  61. return Column(
  62. children: [
  63. Expanded(
  64. child: SingleChildScrollView(
  65. padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
  66. child: Column(
  67. crossAxisAlignment: CrossAxisAlignment.start,
  68. children: [
  69. StatusBanner(
  70. icon: icon,
  71. statusText: statusText,
  72. subText: _statusSubText(vehicle),
  73. color: color,
  74. ),
  75. const SizedBox(height: 8),
  76. Text(
  77. '提交时间:${du.DateUtils.formatDateTime(vehicle.createTime)}',
  78. style: const TextStyle(
  79. fontSize: AppFontSizes.caption,
  80. color: AppColors.textSecondary,
  81. ),
  82. ),
  83. const SizedBox(height: 16),
  84. _buildInfoSection(vehicle),
  85. const SizedBox(height: 16),
  86. _buildMapSection(vehicle),
  87. const SizedBox(height: 16),
  88. // Return registration (only for approved)
  89. if (vehicle.status == 'approved')
  90. _buildReturnRegistration(vehicle),
  91. const SizedBox(height: 16),
  92. _buildApprovalTimeline(vehicle),
  93. ],
  94. ),
  95. ),
  96. ),
  97. _buildActionBar(context, vehicle),
  98. ],
  99. );
  100. }
  101. Widget _buildInfoSection(VehicleModel vehicle) {
  102. return Container(
  103. padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
  104. decoration: BoxDecoration(
  105. color: AppColors.bgCard,
  106. borderRadius: BorderRadius.circular(8),
  107. ),
  108. child: Column(
  109. children: [
  110. _infoRow('申请人', vehicle.applicantName),
  111. _infoRow('所属部门', vehicle.deptName),
  112. _infoRow('车牌号', vehicle.vehicleId.isNotEmpty ? vehicle.vehicleId : '未指定'),
  113. _infoRow('用车目的', _purposeLabel(vehicle.purpose)),
  114. _infoRow('始发地', vehicle.origin.isNotEmpty ? vehicle.origin : '未填写'),
  115. _infoRow('目的地', vehicle.destination.isNotEmpty ? vehicle.destination : '未填写'),
  116. _infoRow(
  117. '出车时间',
  118. du.DateUtils.formatDateTime(vehicle.startTime),
  119. ),
  120. _infoRow(
  121. '还车时间',
  122. du.DateUtils.formatDateTime(vehicle.endTime),
  123. ),
  124. _infoRow('同行人数', '${vehicle.passengerCount}人'),
  125. ],
  126. ),
  127. );
  128. }
  129. Widget _infoRow(String label, String value) {
  130. return Container(
  131. height: 44,
  132. padding: const EdgeInsets.symmetric(vertical: 0),
  133. child: Row(
  134. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  135. children: [
  136. Text(
  137. label,
  138. style: const TextStyle(
  139. fontSize: AppFontSizes.body,
  140. color: AppColors.textSecondary,
  141. ),
  142. ),
  143. Flexible(
  144. child: Text(
  145. value,
  146. style: const TextStyle(
  147. fontSize: AppFontSizes.body,
  148. color: AppColors.textPrimary,
  149. ),
  150. textAlign: TextAlign.right,
  151. overflow: TextOverflow.ellipsis,
  152. ),
  153. ),
  154. ],
  155. ),
  156. );
  157. }
  158. Widget _buildMapSection(VehicleModel vehicle) {
  159. return Container(
  160. padding: const EdgeInsets.all(16),
  161. decoration: BoxDecoration(
  162. color: AppColors.bgCard,
  163. borderRadius: BorderRadius.circular(8),
  164. ),
  165. child: Column(
  166. crossAxisAlignment: CrossAxisAlignment.start,
  167. children: [
  168. const Text(
  169. '行程路线',
  170. style: TextStyle(
  171. fontSize: AppFontSizes.subtitle,
  172. fontWeight: FontWeight.w600,
  173. color: AppColors.textPrimary,
  174. ),
  175. ),
  176. const SizedBox(height: 8),
  177. Container(
  178. height: 160,
  179. width: double.infinity,
  180. decoration: BoxDecoration(
  181. color: const Color(0xFFE8F4FD),
  182. borderRadius: BorderRadius.circular(8),
  183. ),
  184. child: Stack(
  185. children: [
  186. Center(
  187. child: Column(
  188. mainAxisAlignment: MainAxisAlignment.center,
  189. children: [
  190. Row(
  191. mainAxisAlignment: MainAxisAlignment.center,
  192. children: [
  193. const Icon(Icons.location_on, color: AppColors.success, size: 20),
  194. const SizedBox(width: 4),
  195. Text(
  196. vehicle.origin.isNotEmpty ? vehicle.origin : '始发地',
  197. style: const TextStyle(fontSize: 13, color: AppColors.textPrimary),
  198. ),
  199. ],
  200. ),
  201. const Padding(
  202. padding: EdgeInsets.symmetric(vertical: 4),
  203. child: Icon(Icons.arrow_downward, color: AppColors.primary, size: 18),
  204. ),
  205. Row(
  206. mainAxisAlignment: MainAxisAlignment.center,
  207. children: [
  208. const Icon(Icons.location_on, color: AppColors.danger, size: 20),
  209. const SizedBox(width: 4),
  210. Text(
  211. vehicle.destination.isNotEmpty ? vehicle.destination : '目的地',
  212. style: const TextStyle(fontSize: 13, color: AppColors.textPrimary),
  213. ),
  214. ],
  215. ),
  216. ],
  217. ),
  218. ),
  219. Positioned(
  220. bottom: 8,
  221. right: 8,
  222. child: GestureDetector(
  223. onTap: () {
  224. TDToast.showText('导航即将开放', context: context);
  225. },
  226. child: Container(
  227. padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
  228. decoration: BoxDecoration(
  229. color: AppColors.primary,
  230. borderRadius: BorderRadius.circular(12),
  231. ),
  232. child: const Row(
  233. mainAxisSize: MainAxisSize.min,
  234. children: [
  235. Icon(Icons.navigation, size: 14, color: Colors.white),
  236. SizedBox(width: 4),
  237. Text(
  238. '导航',
  239. style: TextStyle(fontSize: 12, color: Colors.white),
  240. ),
  241. ],
  242. ),
  243. ),
  244. ),
  245. ),
  246. ],
  247. ),
  248. ),
  249. ],
  250. ),
  251. );
  252. }
  253. Widget _buildReturnRegistration(VehicleModel vehicle) {
  254. final isEndOdometerValid = _endOdometerCtrl.text.isNotEmpty &&
  255. (double.tryParse(_endOdometerCtrl.text) ?? 0) >=
  256. (double.tryParse(_startOdometerCtrl.text) ?? 0);
  257. return Container(
  258. padding: const EdgeInsets.all(16),
  259. decoration: BoxDecoration(
  260. color: AppColors.bgCard,
  261. borderRadius: BorderRadius.circular(8),
  262. border: Border.all(color: AppColors.primary.withValues(alpha: 0.3)),
  263. ),
  264. child: Column(
  265. crossAxisAlignment: CrossAxisAlignment.start,
  266. children: [
  267. Row(
  268. children: [
  269. const Icon(Icons.drive_eta, size: 20, color: AppColors.primary),
  270. const SizedBox(width: 8),
  271. const Text(
  272. '还车登记',
  273. style: TextStyle(
  274. fontSize: AppFontSizes.subtitle,
  275. fontWeight: FontWeight.w600,
  276. color: AppColors.textPrimary,
  277. ),
  278. ),
  279. ],
  280. ),
  281. const SizedBox(height: 16),
  282. // 实还时间
  283. GestureDetector(
  284. onTap: () => _pickReturnDateTime(vehicle),
  285. child: Container(
  286. height: 44,
  287. padding: const EdgeInsets.symmetric(horizontal: 0),
  288. child: Row(
  289. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  290. children: [
  291. const Text('实还时间', style: TextStyle(fontSize: 14, color: AppColors.textSecondary)),
  292. Text(
  293. _actualReturnTime != null
  294. ? du.DateUtils.formatDateTime(_actualReturnTime!)
  295. : '请选择',
  296. style: TextStyle(
  297. fontSize: 14,
  298. color: _actualReturnTime != null ? AppColors.textPrimary : AppColors.textPlaceholder,
  299. ),
  300. ),
  301. ],
  302. ),
  303. ),
  304. ),
  305. if (_actualReturnTime != null)
  306. Padding(
  307. padding: const EdgeInsets.only(bottom: 8),
  308. child: Text(
  309. _actualReturnTime!.isBefore(vehicle.endTime)
  310. ? '提示:提前还车'
  311. : _actualReturnTime!.isAfter(vehicle.endTime)
  312. ? '警告:已超出原计划还车时间'
  313. : '',
  314. style: TextStyle(
  315. fontSize: AppFontSizes.caption,
  316. color: _actualReturnTime!.isAfter(vehicle.endTime)
  317. ? AppColors.danger
  318. : AppColors.textSecondary,
  319. ),
  320. ),
  321. ),
  322. const SizedBox(height: 8),
  323. // 出车前里程
  324. TDInput(
  325. controller: _startOdometerCtrl,
  326. hintText: '出车前里程(公里)',
  327. inputType: TextInputType.number,
  328. onChanged: (v) => setState(() {}),
  329. ),
  330. const SizedBox(height: 8),
  331. // 还车后里程
  332. TDInput(
  333. controller: _endOdometerCtrl,
  334. hintText: '还车后里程(公里)',
  335. inputType: TextInputType.number,
  336. onChanged: (v) => setState(() {}),
  337. ),
  338. if (_endOdometerCtrl.text.isNotEmpty && !isEndOdometerValid)
  339. const Padding(
  340. padding: EdgeInsets.only(top: 4),
  341. child: Text(
  342. '还车后里程不能小于出车前里程',
  343. style: TextStyle(
  344. fontSize: AppFontSizes.caption,
  345. color: AppColors.danger,
  346. ),
  347. ),
  348. ),
  349. const SizedBox(height: 8),
  350. // 实际费用
  351. TDInput(
  352. controller: _actualCostCtrl,
  353. hintText: '实际费用金额(元)',
  354. inputType: TextInputType.number,
  355. onChanged: (v) => setState(() {}),
  356. ),
  357. const SizedBox(height: 8),
  358. // 费用备注
  359. TDInput(
  360. controller: _costRemarkCtrl,
  361. hintText: '费用备注(路桥费/停车费等)',
  362. inputType: TextInputType.text,
  363. onChanged: (v) => setState(() {}),
  364. ),
  365. const SizedBox(height: 16),
  366. // 确认提交按钮
  367. SizedBox(
  368. width: double.infinity,
  369. height: 40,
  370. child: Material(
  371. color: _canSubmitReturn(isEndOdometerValid)
  372. ? AppColors.primary
  373. : AppColors.textPlaceholder,
  374. borderRadius: BorderRadius.circular(22),
  375. child: InkWell(
  376. onTap: _canSubmitReturn(isEndOdometerValid) && !_isSubmittingReturn
  377. ? _submitReturn
  378. : null,
  379. borderRadius: BorderRadius.circular(22),
  380. child: const Center(
  381. child: Text(
  382. '确认还车',
  383. style: TextStyle(
  384. fontSize: AppFontSizes.body,
  385. fontWeight: FontWeight.w500,
  386. color: Colors.white,
  387. ),
  388. ),
  389. ),
  390. ),
  391. ),
  392. ),
  393. ],
  394. ),
  395. );
  396. }
  397. bool _canSubmitReturn(bool isEndOdometerValid) {
  398. return _actualReturnTime != null &&
  399. _startOdometerCtrl.text.isNotEmpty &&
  400. _endOdometerCtrl.text.isNotEmpty &&
  401. isEndOdometerValid;
  402. }
  403. void _submitReturn() {
  404. final l10n = AppLocalizations.of(context);
  405. showDialog(
  406. context: context,
  407. builder: (ctx) => TDAlertDialog(
  408. title: l10n.get('confirmSubmit'),
  409. contentWidget: Text(l10n.get('submitConfirmContent')),
  410. leftBtn: TDDialogButtonOptions(
  411. title: l10n.get('cancel'),
  412. action: () => Navigator.pop(ctx),
  413. ),
  414. rightBtn: TDDialogButtonOptions(
  415. title: l10n.get('confirm'),
  416. theme: TDButtonTheme.primary,
  417. action: () {
  418. Navigator.pop(ctx);
  419. setState(() => _isSubmittingReturn = true);
  420. TDToast.showText('还车登记已提交', context: context);
  421. setState(() => _isSubmittingReturn = false);
  422. },
  423. ),
  424. ),
  425. );
  426. }
  427. Widget _buildApprovalTimeline(VehicleModel vehicle) {
  428. final mockRecords = _generateMockRecords(vehicle);
  429. final mockChain = <String>['u-mgr'];
  430. return Container(
  431. padding: const EdgeInsets.all(16),
  432. decoration: BoxDecoration(
  433. color: AppColors.bgCard,
  434. borderRadius: BorderRadius.circular(8),
  435. ),
  436. child: ApprovalTimeline(
  437. records: mockRecords,
  438. chain: mockChain,
  439. currentApproverId: vehicle.status == 'pending' ? 'u-mgr' : '',
  440. ),
  441. );
  442. }
  443. List<ApprovalRecord> _generateMockRecords(VehicleModel v) {
  444. if (v.status == 'draft' || v.status == 'withdrawn') return [];
  445. final records = <ApprovalRecord>[
  446. ApprovalRecord(
  447. id: 'ar-${v.id}-init',
  448. bizId: v.id,
  449. bizType: 'vehicle',
  450. approverId: 'u-init',
  451. approverName: '系统',
  452. approvalLevel: 0,
  453. action: 'approve',
  454. opinion: '发起申请',
  455. approvalTime: v.createTime,
  456. ),
  457. ];
  458. if (v.status == 'approved' || v.status == 'returned') {
  459. records.add(ApprovalRecord(
  460. id: 'ar-${v.id}-mgr',
  461. bizId: v.id,
  462. bizType: 'vehicle',
  463. approverId: 'u-mgr',
  464. approverName: '李四(经理)',
  465. approvalLevel: 1,
  466. action: 'approve',
  467. opinion: '同意',
  468. approvalTime: v.updateTime,
  469. ));
  470. } else if (v.status == 'rejected') {
  471. records.add(ApprovalRecord(
  472. id: 'ar-${v.id}-mgr',
  473. bizId: v.id,
  474. bizType: 'vehicle',
  475. approverId: 'u-mgr',
  476. approverName: '李四(经理)',
  477. approvalLevel: 1,
  478. action: 'reject',
  479. opinion: '请提供更详细的事由',
  480. approvalTime: v.updateTime,
  481. ));
  482. }
  483. return records;
  484. }
  485. void _pickReturnDateTime(VehicleModel vehicle) {
  486. final l10n = AppLocalizations.of(context);
  487. TDPicker.showDatePicker(
  488. context,
  489. title: l10n.get('selectReturnTime'),
  490. useYear: true,
  491. useMonth: true,
  492. useDay: true,
  493. useHour: true,
  494. useMinute: true,
  495. initialDate: [
  496. DateTime.now().year,
  497. DateTime.now().month,
  498. DateTime.now().day,
  499. DateTime.now().hour,
  500. DateTime.now().minute,
  501. ],
  502. onConfirm: (selected) {
  503. setState(() {
  504. _actualReturnTime = DateTime(
  505. selected['year']!,
  506. selected['month']!,
  507. selected['day']!,
  508. selected['hour']!,
  509. selected['minute']!,
  510. );
  511. });
  512. },
  513. );
  514. }
  515. Widget _buildActionBar(BuildContext context, VehicleModel vehicle) {
  516. Widget? actionButton;
  517. if (vehicle.status == 'draft') {
  518. actionButton = _singleButton('编辑', AppColors.primary, () {
  519. context.push('/vehicle/apply', extra: vehicle.id);
  520. });
  521. } else if (vehicle.status == 'pending') {
  522. actionButton = _singleButton('撤回申请', AppColors.primary, () {
  523. TDToast.showText('已撤回', context: context);
  524. });
  525. } else if (vehicle.status == 'rejected') {
  526. actionButton = _singleButton('重新编辑', AppColors.primary, () {
  527. context.push('/vehicle/apply', extra: vehicle.id);
  528. });
  529. } else if (vehicle.status == 'returned') {
  530. return Container(
  531. height: 72,
  532. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  533. decoration: const BoxDecoration(color: AppColors.bgCard),
  534. child: Center(
  535. child: Text(
  536. '已还车归档于 ${vehicle.actualReturnTime != null ? du.DateUtils.formatDateTime(vehicle.actualReturnTime!) : ''}',
  537. style: const TextStyle(
  538. fontSize: AppFontSizes.caption,
  539. color: AppColors.textSecondary,
  540. ),
  541. ),
  542. ),
  543. );
  544. }
  545. if (actionButton == null) return const SizedBox.shrink();
  546. return Container(
  547. height: 72,
  548. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  549. decoration: const BoxDecoration(color: AppColors.bgCard),
  550. child: Row(children: [const Spacer(), actionButton, const Spacer()]),
  551. );
  552. }
  553. Widget _singleButton(String label, Color color, VoidCallback onTap) {
  554. return SizedBox(
  555. height: 40,
  556. child: Material(
  557. color: color,
  558. borderRadius: BorderRadius.circular(22),
  559. child: InkWell(
  560. onTap: onTap,
  561. borderRadius: BorderRadius.circular(22),
  562. child: Center(
  563. child: Padding(
  564. padding: const EdgeInsets.symmetric(horizontal: 32),
  565. child: Text(
  566. label,
  567. style: const TextStyle(
  568. fontSize: AppFontSizes.body,
  569. fontWeight: FontWeight.w500,
  570. color: Colors.white,
  571. ),
  572. ),
  573. ),
  574. ),
  575. ),
  576. ),
  577. );
  578. }
  579. (IconData, Color, String) _statusProps(String status) {
  580. switch (status) {
  581. case 'approved':
  582. return (Icons.check_circle, AppColors.success, '已通过');
  583. case 'rejected':
  584. return (Icons.cancel, AppColors.danger, '已拒绝');
  585. case 'draft':
  586. return (Icons.edit_note, AppColors.statusGray, '草稿');
  587. case 'withdrawn':
  588. return (Icons.cancel_outlined, const Color(0xFF5A7D9A), '已撤回');
  589. case 'returned':
  590. return (Icons.assignment_return, AppColors.primary, '已还车');
  591. default:
  592. return (Icons.access_time, AppColors.warning, '审批中');
  593. }
  594. }
  595. String _statusSubText(VehicleModel vehicle) {
  596. switch (vehicle.status) {
  597. case 'pending':
  598. return vehicle.approvalInstanceId.isNotEmpty
  599. ? '审批中,请耐心等待'
  600. : '等待审批';
  601. case 'approved':
  602. return '已通过,请按时出车';
  603. case 'returned':
  604. return vehicle.actualReturnTime != null
  605. ? '还车时间:${du.DateUtils.formatDateTime(vehicle.actualReturnTime!)}'
  606. : '已还车归档';
  607. default:
  608. return '';
  609. }
  610. }
  611. }