outing_log_create_page.dart 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  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:tdesign_flutter/tdesign_flutter.dart';
  5. import '../shell/nav_bar_config.dart';
  6. import '../../core/utils/responsive.dart';
  7. import '../../shared/widgets/form_section.dart';
  8. import '../../shared/widgets/action_bar.dart';
  9. import '../../core/i18n/app_localizations.dart';
  10. import '../../core/theme/app_colors_extension.dart';
  11. class OutingLogCreatePage extends ConsumerStatefulWidget {
  12. const OutingLogCreatePage({super.key});
  13. @override
  14. ConsumerState<OutingLogCreatePage> createState() =>
  15. _OutingLogCreatePageState();
  16. }
  17. class _OutingLogCreatePageState extends ConsumerState<OutingLogCreatePage> {
  18. final _customerCtrl = TextEditingController();
  19. final _summaryCtrl = TextEditingController();
  20. final _planCtrl = TextEditingController();
  21. // GPS 模拟
  22. String _gpsAddress = '深圳市南山区科技园南路88号';
  23. final double _gpsLat = 22.5431;
  24. final double _gpsLng = 113.9532;
  25. double _gpsAccuracy = 15.0;
  26. bool _gpsFailed = false;
  27. // 客户联想
  28. final List<String> _mockCustomers = [
  29. '华软科技',
  30. '云创数据',
  31. '数据引力',
  32. '天诚科技',
  33. '博思软件',
  34. '智云科技',
  35. '恒通信息',
  36. '创新无限',
  37. ];
  38. List<String> _customerSuggestions = [];
  39. bool _showCustomerSuggestions = false;
  40. String? _selectedCustomer;
  41. // 客户联系人
  42. final Map<String, List<Map<String, String>>> _mockContacts = {
  43. '华软科技': [
  44. {'name': '赵经理', 'phone': '13800138001', 'position': 'IT经理'},
  45. {'name': '李主管', 'phone': '13800138002', 'position': '采购主管'},
  46. ],
  47. '云创数据': [
  48. {'name': '陈经理', 'phone': '13800138003', 'position': '技术总监'},
  49. ],
  50. '数据引力': [
  51. {'name': '孙总', 'phone': '13800138004', 'position': '总经理'},
  52. ],
  53. '天诚科技': [
  54. {'name': '周主任', 'phone': '13800138005', 'position': '办公室主任'},
  55. ],
  56. };
  57. Map<String, String>? _selectedContact;
  58. // 照片
  59. final List<String> _photos = [];
  60. static const int _maxPhotos = 9;
  61. @override
  62. void dispose() {
  63. _customerCtrl.dispose();
  64. _summaryCtrl.dispose();
  65. _planCtrl.dispose();
  66. super.dispose();
  67. }
  68. void _onCustomerChanged(String value) {
  69. setState(() {
  70. _selectedCustomer = null;
  71. _selectedContact = null;
  72. if (value.isEmpty) {
  73. _customerSuggestions = [];
  74. _showCustomerSuggestions = false;
  75. } else {
  76. _customerSuggestions = _mockCustomers
  77. .where((c) => c.contains(value))
  78. .toList();
  79. _showCustomerSuggestions = _customerSuggestions.isNotEmpty;
  80. }
  81. });
  82. }
  83. void _selectCustomer(String customer) {
  84. setState(() {
  85. _selectedCustomer = customer;
  86. _customerCtrl.text = customer;
  87. _showCustomerSuggestions = false;
  88. _selectedContact = null;
  89. });
  90. }
  91. Future<void> _pickContact() async {
  92. if (_selectedCustomer == null) {
  93. TDToast.showText('请先选择客户名称', context: context);
  94. return;
  95. }
  96. final contacts = _mockContacts[_selectedCustomer];
  97. if (contacts == null || contacts.isEmpty) {
  98. TDToast.showText('该客户暂无联系人', context: context);
  99. return;
  100. }
  101. final result = await showDialog<Map<String, String>>(
  102. context: context,
  103. builder: (ctx) => TDAlertDialog.vertical(
  104. title: '选择联系人',
  105. buttons: contacts
  106. .map(
  107. (c) => TDDialogButtonOptions(
  108. title: '${c['name']} ${c['position']} ${c['phone']}',
  109. action: () => Navigator.pop(ctx, c),
  110. ),
  111. )
  112. .toList(),
  113. ),
  114. );
  115. if (result != null) {
  116. setState(() => _selectedContact = result);
  117. }
  118. }
  119. Future<void> _takePhoto() async {
  120. if (_photos.length >= _maxPhotos) {
  121. TDToast.showText('最多拍摄9张照片', context: context);
  122. return;
  123. }
  124. final idx = _photos.length + 1;
  125. setState(() {
  126. _photos.add('photo_placeholder_$idx');
  127. });
  128. if (context.mounted) {
  129. TDToast.showText(
  130. '模拟拍照:已拍摄第 $idx 张照片(含水印:${DateTime.now().toString().substring(0, 19)} | $_gpsLat°N, $_gpsLng°E)',
  131. context: context,
  132. );
  133. }
  134. }
  135. void _removePhoto(int index) {
  136. setState(() => _photos.removeAt(index));
  137. }
  138. Future<void> _simulateGps() async {
  139. setState(() {
  140. _gpsFailed = false;
  141. _gpsAddress = '深圳市南山区科技园南路88号';
  142. _gpsAccuracy = 15.0;
  143. });
  144. TDToast.showText('GPS定位成功', context: context);
  145. }
  146. Future<void> _saveDraft() async {
  147. if (context.mounted) {
  148. TDToast.showText('已保存为草稿', context: context);
  149. }
  150. }
  151. Future<void> _submit() async {
  152. if (_gpsFailed) {
  153. TDToast.showText('无法获取GPS定位,请检查位置权限', context: context);
  154. return;
  155. }
  156. if (_gpsAddress.isEmpty) {
  157. TDToast.showText('GPS定位中,请稍后', context: context);
  158. return;
  159. }
  160. if (_photos.isEmpty) {
  161. TDToast.showText('请至少拍摄一张现场照片', context: context);
  162. return;
  163. }
  164. if (_summaryCtrl.text.trim().isEmpty) {
  165. TDToast.showText('请填写工作总结', context: context);
  166. return;
  167. }
  168. if (context.mounted) {
  169. TDToast.showText('外勤日志提交成功', context: context);
  170. context.pop();
  171. }
  172. }
  173. @override
  174. Widget build(BuildContext context) {
  175. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  176. final r = ResponsiveHelper.of(context);
  177. final l10n = AppLocalizations.of(context);
  178. ref
  179. .read(navBarConfigProvider.notifier)
  180. .update(
  181. NavBarConfig(
  182. title: l10n.get('outingLogCreate'),
  183. showBack: true,
  184. onBack: () => context.pop(),
  185. ),
  186. );
  187. return Column(
  188. children: [
  189. Expanded(
  190. child: Align(
  191. alignment: Alignment.topCenter,
  192. child: ConstrainedBox(
  193. constraints: BoxConstraints(maxWidth: r.formMaxWidth),
  194. child: SingleChildScrollView(
  195. padding: const EdgeInsets.symmetric(vertical: 8),
  196. child: Column(
  197. children: [
  198. _buildGpsSection(),
  199. const SizedBox(height: 8),
  200. FormSection(
  201. title: l10n.get('customerInfo'),
  202. children: [
  203. Container(
  204. padding: const EdgeInsets.symmetric(
  205. horizontal: 10,
  206. vertical: 4,
  207. ),
  208. decoration: BoxDecoration(
  209. color: colors.bgPage,
  210. borderRadius: BorderRadius.circular(4),
  211. ),
  212. child: Column(
  213. crossAxisAlignment: CrossAxisAlignment.start,
  214. children: [
  215. TDInput(
  216. controller: _customerCtrl,
  217. hintText: l10n.get('searchCustomer'),
  218. onChanged: _onCustomerChanged,
  219. ),
  220. if (_showCustomerSuggestions)
  221. ..._customerSuggestions.map(
  222. (s) => GestureDetector(
  223. onTap: () => _selectCustomer(s),
  224. child: Container(
  225. padding: const EdgeInsets.symmetric(
  226. vertical: 8,
  227. horizontal: 4,
  228. ),
  229. decoration: BoxDecoration(
  230. border: Border(
  231. top: BorderSide(color: colors.border),
  232. ),
  233. ),
  234. child: Text(
  235. s,
  236. style: TextStyle(
  237. fontSize: 14,
  238. color: colors.textPrimary,
  239. ),
  240. ),
  241. ),
  242. ),
  243. ),
  244. ],
  245. ),
  246. ),
  247. const SizedBox(height: 12),
  248. GestureDetector(
  249. onTap: _pickContact,
  250. child: Container(
  251. padding: const EdgeInsets.symmetric(
  252. horizontal: 10,
  253. vertical: 12,
  254. ),
  255. decoration: BoxDecoration(
  256. color: colors.bgPage,
  257. borderRadius: BorderRadius.circular(4),
  258. ),
  259. child: Row(
  260. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  261. children: [
  262. Text(
  263. _selectedContact != null
  264. ? '${_selectedContact!['name']} ${_selectedContact!['phone']}'
  265. : l10n.get('selectContactHint'),
  266. style: TextStyle(
  267. fontSize: 14,
  268. color: _selectedContact != null
  269. ? colors.textPrimary
  270. : colors.textPlaceholder,
  271. ),
  272. ),
  273. Icon(
  274. Icons.chevron_right,
  275. size: 14,
  276. color: colors.textPlaceholder,
  277. ),
  278. ],
  279. ),
  280. ),
  281. ),
  282. ],
  283. ),
  284. const SizedBox(height: 8),
  285. FormSection(
  286. title: l10n.get('workSummary'),
  287. children: [
  288. Container(
  289. padding: const EdgeInsets.all(12),
  290. decoration: BoxDecoration(
  291. color: colors.bgPage,
  292. borderRadius: BorderRadius.circular(4),
  293. ),
  294. child: TDInput(
  295. controller: _summaryCtrl,
  296. maxLines: 5,
  297. hintText: '请填写本次外勤工作总结(必填)',
  298. ),
  299. ),
  300. ],
  301. ),
  302. const SizedBox(height: 8),
  303. FormSection(
  304. title: l10n.get('followUp'),
  305. children: [
  306. Container(
  307. padding: const EdgeInsets.symmetric(
  308. horizontal: 10,
  309. vertical: 4,
  310. ),
  311. decoration: BoxDecoration(
  312. color: colors.bgPage,
  313. borderRadius: BorderRadius.circular(4),
  314. ),
  315. child: TDInput(
  316. controller: _planCtrl,
  317. hintText: '后续推进计划(选填)',
  318. ),
  319. ),
  320. ],
  321. ),
  322. const SizedBox(height: 8),
  323. FormSection(
  324. title: l10n.get('sitePhotos'),
  325. actionText: _photos.length >= _maxPhotos
  326. ? l10n.get('limitReached')
  327. : l10n.get('takePhoto'),
  328. showAction: _photos.length < _maxPhotos,
  329. actionIcon: Icons.camera_alt_outlined,
  330. onActionTap: _photos.length >= _maxPhotos
  331. ? null
  332. : _takePhoto,
  333. children: [
  334. if (_photos.isEmpty)
  335. GestureDetector(
  336. onTap: _takePhoto,
  337. child: Container(
  338. height: 100,
  339. decoration: BoxDecoration(
  340. color: colors.bgPage,
  341. borderRadius: BorderRadius.circular(4),
  342. border: Border.all(
  343. color: colors.border,
  344. width: 1,
  345. ),
  346. ),
  347. child: Center(
  348. child: Column(
  349. mainAxisAlignment: MainAxisAlignment.center,
  350. children: [
  351. Icon(
  352. Icons.camera_alt_outlined,
  353. size: 32,
  354. color: colors.primary,
  355. ),
  356. SizedBox(height: 4),
  357. Text(
  358. '点击拍照(至少1张)',
  359. style: TextStyle(
  360. fontSize: 12,
  361. color: colors.textPlaceholder,
  362. ),
  363. ),
  364. ],
  365. ),
  366. ),
  367. ),
  368. )
  369. else
  370. Wrap(
  371. spacing: 8,
  372. runSpacing: 8,
  373. children: [
  374. ..._photos.asMap().entries.map(
  375. (entry) => _buildPhotoThumbnail(
  376. entry.key,
  377. entry.value,
  378. ),
  379. ),
  380. if (_photos.length < _maxPhotos)
  381. GestureDetector(
  382. onTap: _takePhoto,
  383. child: Container(
  384. width: 80,
  385. height: 80,
  386. decoration: BoxDecoration(
  387. color: colors.bgPage,
  388. borderRadius: BorderRadius.circular(4),
  389. border: Border.all(color: colors.border),
  390. ),
  391. child: Icon(
  392. Icons.add,
  393. size: 28,
  394. color: colors.primary,
  395. ),
  396. ),
  397. ),
  398. ],
  399. ),
  400. const SizedBox(height: 8),
  401. Container(
  402. padding: const EdgeInsets.all(8),
  403. decoration: BoxDecoration(
  404. color: colors.primaryLight,
  405. borderRadius: BorderRadius.circular(4),
  406. ),
  407. child: Row(
  408. children: [
  409. Icon(
  410. Icons.info_outline,
  411. size: 14,
  412. color: colors.primary,
  413. ),
  414. const SizedBox(width: 6),
  415. Expanded(
  416. child: Text(
  417. '照片将自动添加水印:服务器授时 + GPS经纬度(${_gpsLat.toStringAsFixed(4)}°N, ${_gpsLng.toStringAsFixed(4)}°E)',
  418. style: TextStyle(
  419. fontSize: 11,
  420. color: colors.textSecondary,
  421. ),
  422. ),
  423. ),
  424. ],
  425. ),
  426. ),
  427. ],
  428. ),
  429. const SizedBox(height: 80),
  430. ],
  431. ),
  432. ),
  433. ),
  434. ),
  435. ),
  436. ActionBar(
  437. centerLabel: l10n.get('saveDraft'),
  438. rightLabel: l10n.get('submit'),
  439. showLeft: false,
  440. onCenterTap: _saveDraft,
  441. onRightTap: _submit,
  442. ),
  443. ],
  444. );
  445. }
  446. Widget _buildGpsSection() {
  447. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  448. if (_gpsFailed) {
  449. return Container(
  450. margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
  451. padding: const EdgeInsets.all(12),
  452. decoration: BoxDecoration(
  453. color: colors.bgCard,
  454. borderRadius: BorderRadius.circular(8),
  455. ),
  456. child: Row(
  457. children: [
  458. Icon(Icons.location_off, size: 22, color: colors.statusGray),
  459. const SizedBox(width: 10),
  460. Expanded(
  461. child: Column(
  462. crossAxisAlignment: CrossAxisAlignment.start,
  463. children: [
  464. Text(
  465. '无法获取当前位置',
  466. style: TextStyle(fontSize: 14, color: colors.textPrimary),
  467. ),
  468. SizedBox(height: 4),
  469. Text(
  470. '请检查位置权限设置',
  471. style: TextStyle(fontSize: 12, color: colors.textSecondary),
  472. ),
  473. ],
  474. ),
  475. ),
  476. GestureDetector(
  477. onTap: _simulateGps,
  478. child: Container(
  479. padding: const EdgeInsets.symmetric(
  480. horizontal: 12,
  481. vertical: 6,
  482. ),
  483. decoration: BoxDecoration(
  484. color: colors.primaryLight,
  485. borderRadius: BorderRadius.circular(4),
  486. ),
  487. child: Text(
  488. '重试',
  489. style: TextStyle(fontSize: 12, color: colors.primary),
  490. ),
  491. ),
  492. ),
  493. ],
  494. ),
  495. );
  496. }
  497. final isWarning = _gpsAccuracy > 100;
  498. return Container(
  499. margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
  500. padding: const EdgeInsets.all(12),
  501. decoration: BoxDecoration(
  502. color: colors.bgCard,
  503. borderRadius: BorderRadius.circular(8),
  504. ),
  505. child: Row(
  506. crossAxisAlignment: CrossAxisAlignment.start,
  507. children: [
  508. Icon(
  509. Icons.shield_outlined,
  510. size: 22,
  511. color: isWarning ? colors.warning : colors.success,
  512. ),
  513. const SizedBox(width: 10),
  514. Expanded(
  515. child: Column(
  516. crossAxisAlignment: CrossAxisAlignment.start,
  517. children: [
  518. Text(
  519. _gpsAddress,
  520. style: TextStyle(fontSize: 14, color: colors.textPrimary),
  521. ),
  522. const SizedBox(height: 4),
  523. Row(
  524. children: [
  525. Text(
  526. '${_gpsLat.toStringAsFixed(4)}°N, ${_gpsLng.toStringAsFixed(4)}°E · 精度 ${_gpsAccuracy.toStringAsFixed(0)}m',
  527. style: TextStyle(
  528. fontSize: 12,
  529. color: isWarning
  530. ? colors.warning
  531. : colors.textSecondary,
  532. ),
  533. ),
  534. if (isWarning) ...[
  535. const SizedBox(width: 6),
  536. Icon(
  537. Icons.warning_amber_rounded,
  538. size: 14,
  539. color: colors.warning,
  540. ),
  541. ],
  542. ],
  543. ),
  544. ],
  545. ),
  546. ),
  547. ],
  548. ),
  549. );
  550. }
  551. Widget _buildPhotoThumbnail(int index, String photo) {
  552. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  553. return Stack(
  554. children: [
  555. Container(
  556. width: 80,
  557. height: 80,
  558. decoration: BoxDecoration(
  559. color: colors.infoBorder,
  560. borderRadius: BorderRadius.circular(4),
  561. ),
  562. child: Center(
  563. child: Icon(Icons.image_outlined, size: 32, color: colors.primary),
  564. ),
  565. ),
  566. Positioned(
  567. top: -4,
  568. right: -4,
  569. child: GestureDetector(
  570. onTap: () => _removePhoto(index),
  571. child: Container(
  572. padding: const EdgeInsets.all(2),
  573. decoration: BoxDecoration(
  574. color: colors.danger,
  575. shape: BoxShape.circle,
  576. ),
  577. child: const Icon(Icons.close, size: 14, color: Colors.white),
  578. ),
  579. ),
  580. ),
  581. Positioned(
  582. bottom: 2,
  583. left: 2,
  584. right: 2,
  585. child: Container(
  586. padding: const EdgeInsets.symmetric(horizontal: 2),
  587. color: Colors.black54,
  588. child: Text(
  589. '${DateTime.now().hour.toString().padLeft(2, '0')}:${DateTime.now().minute.toString().padLeft(2, '0')} ${_gpsLat.toStringAsFixed(2)},${_gpsLng.toStringAsFixed(2)}',
  590. style: const TextStyle(fontSize: 8, color: Colors.white),
  591. maxLines: 1,
  592. overflow: TextOverflow.ellipsis,
  593. ),
  594. ),
  595. ),
  596. ],
  597. );
  598. }
  599. }