expense_list_page.dart 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_riverpod/flutter_riverpod.dart';
  3. import 'package:go_router/go_router.dart';
  4. import 'package:flutter_slidable/flutter_slidable.dart';
  5. import '../../core/theme/app_colors.dart';
  6. import '../../core/utils/date_utils.dart' as du;
  7. import '../../core/utils/responsive.dart';
  8. import '../../shared/widgets/app_card.dart';
  9. import '../../shared/widgets/status_tag.dart';
  10. import '../../shared/widgets/empty_state.dart';
  11. import '../../shared/widgets/loading_widget.dart';
  12. import 'expense_list_controller.dart';
  13. import 'expense_model.dart';
  14. class ExpenseListPage extends ConsumerStatefulWidget {
  15. const ExpenseListPage({super.key});
  16. @override
  17. ConsumerState<ExpenseListPage> createState() => _ExpenseListPageState();
  18. }
  19. class _ExpenseListPageState extends ConsumerState<ExpenseListPage> {
  20. int _page = 1;
  21. @override
  22. Widget build(BuildContext context) {
  23. final status = ref.watch(expenseStatusFilterProvider);
  24. final itemsAsync = ref.watch(expenseListProvider(_page));
  25. final r = ResponsiveHelper.of(context);
  26. return Scaffold(
  27. appBar: AppBar(
  28. title: const Text('报销单'),
  29. actions: [
  30. IconButton(
  31. icon: const Icon(Icons.add, color: Colors.white),
  32. onPressed: () => context.push('/expense/apply'),
  33. ),
  34. ],
  35. ),
  36. body: Column(
  37. children: [
  38. _buildStatusFilter(status, r),
  39. Expanded(
  40. child: Center(
  41. child: ConstrainedBox(
  42. constraints: BoxConstraints(maxWidth: r.listMaxWidth),
  43. child: itemsAsync.when(
  44. loading: () => const LoadingWidget(),
  45. error: (_, __) => const EmptyState(message: '加载失败'),
  46. data: (items) => items.isEmpty
  47. ? const EmptyState(message: '暂无报销单')
  48. : ListView.builder(
  49. padding: const EdgeInsets.symmetric(vertical: 4),
  50. itemCount: items.length,
  51. itemBuilder: (_, index) =>
  52. _buildItem(items[index]),
  53. ),
  54. ),
  55. ),
  56. ),
  57. ),
  58. ],
  59. ),
  60. );
  61. }
  62. Widget _buildStatusFilter(String current, ResponsiveHelper r) {
  63. final statuses = [
  64. {'key': '', 'label': '全部'},
  65. {'key': 'pending', 'label': '待审批'},
  66. {'key': 'approved', 'label': '已通过'},
  67. {'key': 'rejected', 'label': '已拒绝'},
  68. ];
  69. final filterBar = SingleChildScrollView(
  70. scrollDirection: Axis.horizontal,
  71. padding: EdgeInsets.zero,
  72. child: Row(
  73. children: statuses.map((s) {
  74. final isSelected = current == s['key'];
  75. return Padding(
  76. padding: const EdgeInsets.only(right: 8),
  77. child: GestureDetector(
  78. onTap: () {
  79. ref.read(expenseStatusFilterProvider.notifier).state =
  80. s['key']!;
  81. _page = 1;
  82. },
  83. child: Container(
  84. padding:
  85. const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
  86. decoration: BoxDecoration(
  87. color: isSelected ? AppColors.primaryLight : Colors.white,
  88. borderRadius: BorderRadius.circular(16),
  89. border: Border.all(
  90. color: isSelected
  91. ? AppColors.primary
  92. : const Color(0xFFDDDDDD),
  93. ),
  94. ),
  95. child: Text(
  96. s['label']!,
  97. style: TextStyle(
  98. color: isSelected
  99. ? AppColors.primary
  100. : AppColors.textSecondary,
  101. fontSize: 12,
  102. ),
  103. ),
  104. ),
  105. ),
  106. );
  107. }).toList(),
  108. ),
  109. );
  110. return Padding(
  111. padding: const EdgeInsets.only(bottom: 4),
  112. child: r.isWide
  113. ? Center(
  114. child: SizedBox(width: r.listMaxWidth, child: filterBar))
  115. : filterBar,
  116. );
  117. }
  118. Widget _buildItem(ExpenseModel item) {
  119. return Slidable(
  120. endActionPane: ActionPane(
  121. motion: const ScrollMotion(),
  122. children: [
  123. SlidableAction(
  124. onPressed: (_) => context.push('/expense/apply?id=${item.id}'),
  125. backgroundColor: AppColors.primary,
  126. foregroundColor: Colors.white,
  127. icon: Icons.edit,
  128. label: '编辑',
  129. ),
  130. ],
  131. ),
  132. child: AppCard(
  133. onTap: () => context.push('/expense/detail/${item.id}'),
  134. child: Column(
  135. crossAxisAlignment: CrossAxisAlignment.start,
  136. children: [
  137. Row(
  138. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  139. children: [
  140. Text(item.reportNo,
  141. style: const TextStyle(
  142. fontWeight: FontWeight.w600,
  143. fontSize: 14,
  144. color: AppColors.textPrimary)),
  145. StatusTag(status: item.status),
  146. ],
  147. ),
  148. const SizedBox(height: 4),
  149. Text(
  150. '${item.expenseType} · ¥${item.totalAmount.toStringAsFixed(2)}',
  151. style: const TextStyle(
  152. color: AppColors.textSecondary, fontSize: 12),
  153. ),
  154. const SizedBox(height: 4),
  155. Row(
  156. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  157. children: [
  158. Text(item.applicantName,
  159. style: const TextStyle(
  160. color: AppColors.textHint, fontSize: 11)),
  161. Text(du.DateUtils.formatDateTime(item.createTime),
  162. style: const TextStyle(
  163. color: AppColors.textHint, fontSize: 11)),
  164. ],
  165. ),
  166. ],
  167. ),
  168. ),
  169. );
  170. }
  171. }