338 lines
11 KiB
Dart
338 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
||
|
||
import '../models/org_node.dart';
|
||
|
||
/// 组织选择项：携带层级深度与是否可选，用于按组织树自上而下排序并缩进展示。
|
||
class OrgPickerOption {
|
||
const OrgPickerOption({
|
||
required this.node,
|
||
this.depth = 0,
|
||
this.selectable = true,
|
||
});
|
||
|
||
final OrgNode node;
|
||
final int depth;
|
||
final bool selectable;
|
||
}
|
||
|
||
/// 组织选择器：以底部弹窗形式展示层级组织列表，支持关键字实时搜索，
|
||
/// 选中后通过 Navigator.pop 返回对应的 [OrgPickerOption]。
|
||
class OrgPickerSheet extends StatefulWidget {
|
||
const OrgPickerSheet({
|
||
super.key,
|
||
required this.title,
|
||
required this.searchHint,
|
||
required this.emptyHint,
|
||
required this.options,
|
||
this.selectedId,
|
||
});
|
||
|
||
final String title;
|
||
final String searchHint;
|
||
final String emptyHint;
|
||
final List<OrgPickerOption> options;
|
||
final String? selectedId;
|
||
|
||
@override
|
||
State<OrgPickerSheet> createState() => _OrgPickerSheetState();
|
||
}
|
||
|
||
class _OrgPickerSheetState extends State<OrgPickerSheet> {
|
||
final _searchController = TextEditingController();
|
||
String _keyword = '';
|
||
String? _selectedId;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_selectedId = widget.selectedId;
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_searchController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
void _onSelect(OrgPickerOption option) {
|
||
if (_selectedId == option.node.id) {
|
||
Navigator.pop(context, option);
|
||
return;
|
||
}
|
||
setState(() => _selectedId = option.node.id);
|
||
Future.delayed(const Duration(milliseconds: 120), () {
|
||
if (mounted) Navigator.pop(context, option);
|
||
});
|
||
}
|
||
|
||
List<OrgPickerOption> get _filteredOptions {
|
||
final keyword = _keyword.trim().toLowerCase();
|
||
final list = widget.options.where((option) {
|
||
if (!option.selectable) return false;
|
||
if (keyword.isEmpty) return true;
|
||
return option.node.name.toLowerCase().contains(keyword);
|
||
}).toList();
|
||
// 将当前已选中的组织置顶展示，方便快速找到并确认当前选择。
|
||
if (_selectedId?.isNotEmpty == true) {
|
||
final selectedIndex = list.indexWhere((o) => o.node.id == _selectedId);
|
||
if (selectedIndex > 0) {
|
||
final selected = list.removeAt(selectedIndex);
|
||
list.insert(0, selected);
|
||
}
|
||
}
|
||
return list;
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
final filtered = _filteredOptions;
|
||
return Padding(
|
||
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
children: [
|
||
// 标题栏
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: Text(
|
||
widget.title,
|
||
style: theme.textTheme.titleMedium
|
||
?.copyWith(fontWeight: FontWeight.bold),
|
||
),
|
||
),
|
||
IconButton(
|
||
icon: const Icon(Icons.close),
|
||
tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
|
||
onPressed: () => Navigator.pop(context),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const Divider(height: 1),
|
||
// 搜索框
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
||
child: TextField(
|
||
controller: _searchController,
|
||
autofocus: true,
|
||
decoration: InputDecoration(
|
||
hintText: widget.searchHint,
|
||
border: const OutlineInputBorder(),
|
||
prefixIcon: const Icon(Icons.search),
|
||
suffixIcon: _keyword.isEmpty
|
||
? null
|
||
: IconButton(
|
||
icon: const Icon(Icons.clear),
|
||
onPressed: () {
|
||
_searchController.clear();
|
||
setState(() => _keyword = '');
|
||
},
|
||
),
|
||
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
|
||
),
|
||
onChanged: (v) => setState(() => _keyword = v),
|
||
),
|
||
),
|
||
// 结果列表
|
||
ConstrainedBox(
|
||
constraints: const BoxConstraints(maxHeight: 420),
|
||
child: filtered.isEmpty
|
||
? SizedBox(
|
||
height: 120,
|
||
child: Center(
|
||
child: Text(
|
||
widget.emptyHint,
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
)
|
||
: ListView.separated(
|
||
shrinkWrap: true,
|
||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||
itemCount: filtered.length,
|
||
separatorBuilder: (_, __) => const Divider(
|
||
height: 1,
|
||
indent: 16,
|
||
endIndent: 16,
|
||
),
|
||
itemBuilder: (context, index) {
|
||
final option = filtered[index];
|
||
final selected = _selectedId == option.node.id;
|
||
final baseStyle = theme.textTheme.bodyMedium;
|
||
return ListTile(
|
||
dense: true,
|
||
contentPadding: EdgeInsets.only(
|
||
left: 16 + option.depth * 16.0,
|
||
right: 16,
|
||
),
|
||
title: Text(
|
||
option.node.name,
|
||
style: option.selectable
|
||
? baseStyle?.copyWith(
|
||
color: selected
|
||
? theme.colorScheme.primary
|
||
: null,
|
||
fontWeight: selected
|
||
? FontWeight.bold
|
||
: FontWeight.normal,
|
||
)
|
||
: baseStyle?.copyWith(
|
||
color: theme.disabledColor,
|
||
),
|
||
),
|
||
trailing: selected
|
||
? Icon(
|
||
Icons.check_circle,
|
||
color: theme.colorScheme.primary,
|
||
)
|
||
: null,
|
||
selected: selected,
|
||
selectedTileColor: theme.colorScheme.primaryContainer
|
||
.withOpacity(0.38),
|
||
onTap: option.selectable
|
||
? () => _onSelect(option)
|
||
: null,
|
||
);
|
||
},
|
||
),
|
||
),
|
||
// 底部安全区
|
||
SizedBox(height: MediaQuery.of(context).padding.bottom),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// 表单中的「组织选择」输入框：点击后弹出 [OrgPickerSheet]，
|
||
/// 进入页面时自动展开选择器并高亮已选项。
|
||
class OrgPickerFormField extends StatefulWidget {
|
||
const OrgPickerFormField({
|
||
super.key,
|
||
this.value,
|
||
required this.labelText,
|
||
required this.options,
|
||
required this.onChanged,
|
||
this.validator,
|
||
this.autoOpen = true,
|
||
this.searchHint,
|
||
this.emptyHint,
|
||
});
|
||
|
||
final String? value;
|
||
final String labelText;
|
||
final List<OrgPickerOption> options;
|
||
final ValueChanged<String?> onChanged;
|
||
final String? Function(String?)? validator;
|
||
final bool autoOpen;
|
||
final String? searchHint;
|
||
final String? emptyHint;
|
||
|
||
@override
|
||
State<OrgPickerFormField> createState() => _OrgPickerFormFieldState();
|
||
}
|
||
|
||
class _OrgPickerFormFieldState extends State<OrgPickerFormField> {
|
||
bool _autoOpened = false;
|
||
FormFieldState<String>? _field;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_scheduleAutoOpen();
|
||
}
|
||
|
||
@override
|
||
void didUpdateWidget(covariant OrgPickerFormField oldWidget) {
|
||
super.didUpdateWidget(oldWidget);
|
||
// 外部 value 变更时同步到 FormField 状态。
|
||
if (oldWidget.value != widget.value) {
|
||
_field?.didChange(widget.value);
|
||
}
|
||
// 选项从空变为有值时（异步加载完成），立即自动展开选择器。
|
||
if (oldWidget.options.isEmpty && widget.options.isNotEmpty) {
|
||
_scheduleAutoOpen();
|
||
}
|
||
}
|
||
|
||
void _scheduleAutoOpen() {
|
||
if (!_shouldAutoOpen) return;
|
||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||
if (mounted && _shouldAutoOpen) {
|
||
_autoOpened = true;
|
||
_openPicker();
|
||
}
|
||
});
|
||
}
|
||
|
||
bool get _shouldAutoOpen =>
|
||
widget.autoOpen && widget.options.isNotEmpty && !_autoOpened;
|
||
|
||
Future<void> _openPicker() async {
|
||
if (!mounted) return;
|
||
final selected = await showModalBottomSheet<OrgPickerOption>(
|
||
useSafeArea: true,
|
||
context: context,
|
||
isScrollControlled: true,
|
||
builder: (ctx) => OrgPickerSheet(
|
||
title: widget.labelText,
|
||
searchHint: widget.searchHint ?? '搜索组织名称',
|
||
emptyHint: widget.emptyHint ?? '未找到匹配组织',
|
||
options: widget.options,
|
||
selectedId: widget.value,
|
||
),
|
||
);
|
||
if (selected != null && mounted) {
|
||
_field?.didChange(selected.node.id);
|
||
widget.onChanged(selected.node.id);
|
||
}
|
||
}
|
||
|
||
String? _displayName(String? value) {
|
||
if (value == null || value.isEmpty) return null;
|
||
for (final option in widget.options) {
|
||
if (option.node.id == value) return option.node.name;
|
||
}
|
||
return value;
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return FormField<String>(
|
||
initialValue: widget.value,
|
||
validator: widget.validator,
|
||
builder: (field) {
|
||
_field = field;
|
||
final displayName = _displayName(field.value);
|
||
final theme = Theme.of(context);
|
||
return InkWell(
|
||
onTap: _openPicker,
|
||
borderRadius: BorderRadius.circular(8),
|
||
child: InputDecorator(
|
||
decoration: InputDecoration(
|
||
labelText: widget.labelText,
|
||
border: const OutlineInputBorder(),
|
||
prefixIcon: const Icon(Icons.account_tree),
|
||
suffixIcon: const Icon(Icons.arrow_drop_down),
|
||
errorText: field.errorText,
|
||
),
|
||
child: Text(
|
||
displayName ?? widget.labelText,
|
||
style: TextStyle(
|
||
color: displayName == null ? theme.hintColor : null,
|
||
),
|
||
),
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
}
|