| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456 |
- import 'package:flutter/material.dart';
- import 'package:flutter_riverpod/flutter_riverpod.dart';
- import 'package:go_router/go_router.dart';
- import '../shell/nav_bar_config.dart';
- import '../../core/theme/app_colors.dart';
- import '../../core/utils/date_utils.dart' as du;
- import '../../shared/widgets/form_section.dart';
- import '../../shared/widgets/form_field_row.dart';
- import '../../shared/widgets/status_banner.dart';
- import '../../shared/widgets/action_bar.dart';
- import '../../shared/widgets/approval_timeline.dart';
- import 'expense_model.dart';
- import '../../core/i18n/app_localizations.dart';
- import 'expense_list_controller.dart';
- class ExpenseDetailPage extends ConsumerWidget {
- final String id;
- const ExpenseDetailPage({super.key, required this.id});
- @override
- Widget build(BuildContext context, WidgetRef ref) {
- final expense = mockExpenses.firstWhere(
- (e) => e.id == id,
- orElse: () => mockExpenses.first,
- );
- final l10n = AppLocalizations.of(context);
- ref
- .read(navBarConfigProvider.notifier)
- .update(
- NavBarConfig(
- title: l10n.get('expenseDetail'),
- showBack: true,
- onBack: () => context.pop(),
- ),
- );
- return Column(
- children: [
- Expanded(
- child: SingleChildScrollView(
- padding: const EdgeInsets.all(16),
- child: Column(
- children: [
- _buildStatusBanner(expense),
- const SizedBox(height: 4),
- _buildSubmitTime(expense),
- const SizedBox(height: 16),
- _buildBasicInfoSection(expense),
- const SizedBox(height: 16),
- _buildAccountSection(expense),
- const SizedBox(height: 16),
- _buildDetailSection(expense),
- const SizedBox(height: 16),
- _buildInvoiceSection(expense),
- const SizedBox(height: 16),
- _buildComplianceSection(expense),
- const SizedBox(height: 16),
- if (expense.approvalRecords.isNotEmpty ||
- expense.approvalChain.isNotEmpty)
- _buildApprovalSection(expense),
- const SizedBox(height: 16),
- _buildArchiveSection(expense),
- ],
- ),
- ),
- ),
- _buildBottomBar(context, expense),
- ],
- );
- }
- Widget _buildStatusBanner(ExpenseModel expense) {
- final (icon, color, label) = switch (expense.status) {
- 'approved' => (Icons.check_circle, AppColors.success, '已通过'),
- 'rejected' => (Icons.cancel, AppColors.danger, '已拒绝'),
- 'draft' => (Icons.edit, AppColors.statusGray, '草稿'),
- _ => (Icons.schedule, AppColors.warning, '审批中'),
- };
- final approverText = switch (expense.status) {
- 'approved' when expense.approvalRecords.isNotEmpty =>
- '审批人:${expense.approvalRecords.last.approverName}',
- 'rejected' when expense.approvalRecords.isNotEmpty =>
- '拒绝人:${expense.approvalRecords.last.approverName}',
- 'pending' when expense.currentApproverId.isNotEmpty =>
- '当前审批人:${expense.currentApproverId}',
- _ => '',
- };
- return StatusBanner(
- icon: icon,
- statusText: label,
- subText: approverText,
- color: color,
- );
- }
- Widget _buildSubmitTime(ExpenseModel expense) {
- return Padding(
- padding: const EdgeInsets.only(left: 4, top: 4),
- child: Align(
- alignment: Alignment.centerLeft,
- child: Text(
- '提交时间:${du.DateUtils.formatDateTime(expense.createTime)}',
- style: const TextStyle(
- fontSize: AppFontSizes.caption,
- color: AppColors.textPlaceholder,
- ),
- ),
- ),
- );
- }
- Widget _buildBasicInfoSection(ExpenseModel expense) {
- return FormSection(
- title: '基本信息',
- children: [
- FormFieldRow(
- label: '申请人',
- value: expense.applicantName,
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '所属部门',
- value: expense.deptName,
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '费用类型',
- value: expense.expenseType,
- readOnly: true,
- showArrow: false,
- ),
- Container(
- height: 44,
- padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- const Text(
- '报销金额',
- style: TextStyle(
- fontSize: AppFontSizes.body,
- color: AppColors.textSecondary,
- ),
- ),
- Text(
- '¥${expense.totalAmount.toStringAsFixed(2)}',
- style: const TextStyle(
- fontSize: AppFontSizes.subtitle,
- fontWeight: FontWeight.w700,
- color: AppColors.amountPrimary,
- ),
- ),
- ],
- ),
- ),
- FormFieldRow(
- label: '关联项目',
- value: expense.projectName.isNotEmpty ? expense.projectName : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '预算科目',
- value: expense.budgetSubjectId.isNotEmpty
- ? expense.budgetSubjectId
- : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- ],
- );
- }
- Widget _buildAccountSection(ExpenseModel expense) {
- return FormSection(
- title: '收款账户',
- children: [
- FormFieldRow(
- label: '开户银行',
- value: expense.accountName.isNotEmpty ? expense.accountName : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '账户名称',
- value: expense.accountName.isNotEmpty ? expense.accountName : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '银行账号',
- value: expense.accountId.isNotEmpty ? expense.accountId : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- ],
- );
- }
- Widget _buildDetailSection(ExpenseModel expense) {
- return FormSection(
- title: '费用明细',
- children: [
- // Table header
- Container(
- height: 36,
- padding: const EdgeInsets.symmetric(horizontal: 8),
- decoration: BoxDecoration(
- color: AppColors.bgPage,
- borderRadius: BorderRadius.circular(4),
- ),
- child: Row(
- children: [
- const Expanded(
- flex: 3,
- child: Text(
- '费用项目',
- style: TextStyle(
- fontSize: AppFontSizes.caption,
- fontWeight: FontWeight.w500,
- color: AppColors.textSecondary,
- ),
- ),
- ),
- Expanded(
- flex: 2,
- child: Text(
- '金额',
- textAlign: TextAlign.right,
- style: const TextStyle(
- fontSize: AppFontSizes.caption,
- fontWeight: FontWeight.w500,
- color: AppColors.textSecondary,
- ),
- ),
- ),
- ],
- ),
- ),
- if (expense.details.isEmpty)
- const Padding(
- padding: EdgeInsets.symmetric(vertical: 8),
- child: Text(
- '暂无明细数据',
- style: TextStyle(
- fontSize: AppFontSizes.body,
- color: AppColors.textPlaceholder,
- ),
- ),
- )
- else
- ...expense.details.map(
- (d) => Container(
- height: 28,
- child: Row(
- children: [
- Expanded(
- flex: 3,
- child: Text(
- d.expenseDesc,
- style: const TextStyle(
- fontSize: AppFontSizes.body,
- color: AppColors.textPrimary,
- ),
- ),
- ),
- Expanded(
- flex: 2,
- child: Text(
- '¥${d.totalAmount.toStringAsFixed(2)}',
- textAlign: TextAlign.right,
- style: const TextStyle(
- fontSize: AppFontSizes.body,
- fontWeight: FontWeight.w500,
- color: AppColors.amountPrimary,
- ),
- ),
- ),
- ],
- ),
- ),
- ),
- if (expense.details.isNotEmpty) ...[
- Container(height: 1, color: AppColors.border),
- Container(
- height: 36,
- padding: const EdgeInsets.symmetric(vertical: 8),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- const Text(
- '合计',
- style: TextStyle(
- fontSize: AppFontSizes.body,
- fontWeight: FontWeight.w600,
- color: AppColors.textPrimary,
- ),
- ),
- Text(
- '¥${expense.totalAmount.toStringAsFixed(2)}',
- style: const TextStyle(
- fontSize: AppFontSizes.subtitle,
- fontWeight: FontWeight.w700,
- color: AppColors.amountPrimary,
- ),
- ),
- ],
- ),
- ),
- ],
- ],
- );
- }
- Widget _buildInvoiceSection(ExpenseModel expense) {
- final hasInvoices = expense.invoiceImages.isNotEmpty;
- return FormSection(
- title: '发票附件',
- children: [
- if (!hasInvoices)
- const Padding(
- padding: EdgeInsets.symmetric(vertical: 8),
- child: Text(
- '暂无发票附件',
- style: TextStyle(
- fontSize: AppFontSizes.body,
- color: AppColors.textPlaceholder,
- ),
- ),
- )
- else
- Wrap(
- spacing: 8,
- runSpacing: 8,
- children: expense.invoiceImages.map((url) {
- return Container(
- width: 80,
- height: 80,
- decoration: BoxDecoration(
- color: AppColors.bgPage,
- borderRadius: BorderRadius.circular(4),
- border: Border.all(
- color: AppColors.border,
- strokeAlign: BorderSide.strokeAlignInside,
- ),
- ),
- child: const Center(
- child: Icon(
- Icons.image_outlined,
- size: 24,
- color: AppColors.textPlaceholder,
- ),
- ),
- );
- }).toList(),
- ),
- ],
- );
- }
- Widget _buildComplianceSection(ExpenseModel expense) {
- final checks = ['发票信息与报销一致', '发票金额与报销金额一致', '发票日期在有效期内', '发票抬头为公司全称'];
- return FormSection(
- title: '发票合规检查',
- children: checks.map((text) {
- return Container(
- height: 44,
- child: Row(
- children: [
- Icon(Icons.check_circle, size: 16, color: AppColors.success),
- const SizedBox(width: 8),
- Text(
- text,
- style: const TextStyle(
- fontSize: AppFontSizes.body,
- color: AppColors.textPrimary,
- ),
- ),
- ],
- ),
- );
- }).toList(),
- );
- }
- Widget _buildApprovalSection(ExpenseModel expense) {
- return FormSection(
- title: '审批流程',
- children: [
- ApprovalTimeline(
- records: expense.approvalRecords,
- chain: expense.approvalChain,
- currentApproverId: expense.currentApproverId,
- ),
- ],
- );
- }
- Widget _buildArchiveSection(ExpenseModel expense) {
- return FormSection(
- title: '财务归档',
- children: [
- FormFieldRow(
- label: '凭证号',
- value: expense.voucherNo.isNotEmpty ? expense.voucherNo : null,
- hint: '-',
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '归档日期',
- value: du.DateUtils.formatDate(expense.updateTime),
- readOnly: true,
- showArrow: false,
- ),
- FormFieldRow(
- label: '归档人',
- value: '财务部',
- readOnly: true,
- showArrow: false,
- ),
- ],
- );
- }
- Widget _buildBottomBar(BuildContext context, ExpenseModel expense) {
- final canWithdraw =
- expense.status == 'pending' || expense.status == 'draft';
- if (!canWithdraw) {
- return const SizedBox.shrink();
- }
- return ActionBar(
- showLeft: false,
- centerLabel: '撤回申请',
- rightLabel: '提交审批',
- onCenterTap: () {
- ScaffoldMessenger.of(
- context,
- ).showSnackBar(const SnackBar(content: Text('已撤回')));
- context.pop();
- },
- onRightTap: null,
- );
- }
- }
|