feat: 商品详情页、XLS导入修复、分页选择器、导出功能
后端： - 新增 product_images 表，支持每商品最多5张图（服务端压缩至1200px/JPEG85%） - products 表新增 public_id(UUID)、description 字段 - 新增商品详情接口、二维码接口、公开商品接口（无鉴权） - 修复 XLS 导入：OLE2 magic bytes 检测 + 临时文件解析，兼容 extrame/xls - 修复商品/名称/系列/规格三张表导入数据为0（LastCol()=0 bug） - 所有导入接口返回 total/imported/skipped 统计 - config 新增 StorageConfig，支持 STORAGE_* 环境变量覆盖 - 种子数据修复：products 补 public_id、新增 product_images TRUNCATE、schema.sql 表名修正 前端： - 商品详情页：图片上传/删除、描述内联编辑、二维码弹窗、公开链接复制 - 公开商品页：无鉴权路由 /product/:public_id，Flutter Web SPA - 商品详情列表（批次追踪）商品名超链接跳转详情页 - 导航「商品管理」改名「商品详情」 - 所有列表表格新增每页条数选择（10/20/50/100） - 表格列头内嵌筛选（FilterableColumnHeader） - 导出 Excel 功能（入库/出库/库存/财务/批次/往来单位） - 网络恢复自动刷新 + 离线缓存展示 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -9,6 +9,7 @@ class DataTableCard extends StatefulWidget {
|
||||
final int page;
|
||||
final int pageSize;
|
||||
final ValueChanged<int>? onPageChanged;
|
||||
final ValueChanged<int>? onPageSizeChanged;
|
||||
|
||||
const DataTableCard({
|
||||
super.key,
|
||||
@@ -19,6 +20,7 @@ class DataTableCard extends StatefulWidget {
|
||||
this.page = 1,
|
||||
this.pageSize = 20,
|
||||
this.onPageChanged,
|
||||
this.onPageSizeChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -91,6 +93,7 @@ class _DataTableCardState extends State<DataTableCard> {
|
||||
total: widget.totalCount!,
|
||||
pageSize: widget.pageSize,
|
||||
onPageChanged: widget.onPageChanged,
|
||||
onPageSizeChanged: widget.onPageSizeChanged,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -157,19 +160,45 @@ class _PaginationBar extends StatelessWidget {
|
||||
final int total;
|
||||
final int pageSize;
|
||||
final ValueChanged<int>? onPageChanged;
|
||||
final ValueChanged<int>? onPageSizeChanged;
|
||||
|
||||
static const _pageSizeOptions = [10, 20, 50, 100];
|
||||
|
||||
const _PaginationBar({
|
||||
required this.page,
|
||||
required this.total,
|
||||
required this.pageSize,
|
||||
this.onPageChanged,
|
||||
this.onPageSizeChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final totalPages = (total / pageSize).ceil().clamp(1, 9999);
|
||||
// 确保当前 pageSize 在选项中（如默认值 50 不在列表时仍能显示）
|
||||
final effectiveSize = _pageSizeOptions.contains(pageSize) ? pageSize : _pageSizeOptions.first;
|
||||
return Row(
|
||||
children: [
|
||||
// 每页条数选择器
|
||||
if (onPageSizeChanged != null) ...[
|
||||
const Text('每页', style: TextStyle(fontSize: 13, color: AppTheme.textSecondary)),
|
||||
const SizedBox(width: 4),
|
||||
DropdownButtonHideUnderline(
|
||||
child: DropdownButton<int>(
|
||||
value: effectiveSize,
|
||||
isDense: true,
|
||||
style: const TextStyle(fontSize: 13, color: AppTheme.textPrimary),
|
||||
items: _pageSizeOptions
|
||||
.map((n) => DropdownMenuItem(value: n, child: Text('$n 条')))
|
||||
.toList(),
|
||||
onChanged: (v) {
|
||||
if (v != null) onPageSizeChanged!(v);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
],
|
||||
// 翻页控件
|
||||
IconButton(
|
||||
icon: const Icon(Icons.first_page, size: 18),
|
||||
onPressed: page > 1 ? () => onPageChanged?.call(1) : null,
|
||||
@@ -182,20 +211,16 @@ class _PaginationBar extends StatelessWidget {
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
Text('$page / $totalPages',
|
||||
style: const TextStyle(fontSize: 13)),
|
||||
Text('$page / $totalPages', style: const TextStyle(fontSize: 13)),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.chevron_right, size: 18),
|
||||
onPressed:
|
||||
page < totalPages ? () => onPageChanged?.call(page + 1) : null,
|
||||
onPressed: page < totalPages ? () => onPageChanged?.call(page + 1) : null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.last_page, size: 18),
|
||||
onPressed: page < totalPages
|
||||
? () => onPageChanged?.call(totalPages)
|
||||
: null,
|
||||
onPressed: page < totalPages ? () => onPageChanged?.call(totalPages) : null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lpinyin/lpinyin.dart';
|
||||
import '../models/product.dart';
|
||||
|
||||
class SelectProductDialog extends StatefulWidget {
|
||||
final List<Product> products;
|
||||
final int? selectedId;
|
||||
|
||||
const SelectProductDialog({
|
||||
super.key,
|
||||
required this.products,
|
||||
this.selectedId,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SelectProductDialog> createState() => _SelectProductDialogState();
|
||||
}
|
||||
|
||||
class _SelectProductDialogState extends State<SelectProductDialog> {
|
||||
final _searchCtrl = TextEditingController();
|
||||
List<Product> _filtered = [];
|
||||
|
||||
// 缓存每个商品的拼音索引，避免搜索时重复计算
|
||||
late final Map<int, _PinyinIndex> _pinyinCache;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_pinyinCache = {
|
||||
for (final p in widget.products) p.id: _PinyinIndex.from(p),
|
||||
};
|
||||
_filtered = widget.products;
|
||||
_searchCtrl.addListener(_onSearch);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchCtrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onSearch() {
|
||||
final q = _searchCtrl.text.trim().toLowerCase();
|
||||
setState(() {
|
||||
if (q.isEmpty) {
|
||||
_filtered = widget.products;
|
||||
} else {
|
||||
_filtered = widget.products.where((p) {
|
||||
// 原文匹配（名称、规格、编码、条码）
|
||||
if (p.name.toLowerCase().contains(q)) return true;
|
||||
if (p.spec?.toLowerCase().contains(q) ?? false) return true;
|
||||
if (p.code.toLowerCase().contains(q)) return true;
|
||||
if (p.barcode?.toLowerCase().contains(q) ?? false) return true;
|
||||
// 拼音匹配（全拼 or 首字母）
|
||||
final idx = _pinyinCache[p.id]!;
|
||||
if (idx.fullPinyin.contains(q)) return true;
|
||||
if (idx.initials.contains(q)) return true;
|
||||
return false;
|
||||
}).toList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 每行约 56px，窗口默认显示约 6 行，可滚动查看全部
|
||||
const listHeight = 56.0 * 6;
|
||||
|
||||
return Dialog(
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
child: SizedBox(
|
||||
width: 480,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// 标题栏
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 16, 8, 0),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text('选择商品',
|
||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
icon: const Icon(Icons.close, size: 20),
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 搜索框
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
||||
child: TextField(
|
||||
controller: _searchCtrl,
|
||||
autofocus: true,
|
||||
decoration: InputDecoration(
|
||||
hintText: '搜索名称 / 规格 / 编码 / 拼音首字母...',
|
||||
prefixIcon: const Icon(Icons.search, size: 18),
|
||||
suffixIcon: _searchCtrl.text.isNotEmpty
|
||||
? IconButton(
|
||||
onPressed: _searchCtrl.clear,
|
||||
icon: const Icon(Icons.clear, size: 16),
|
||||
visualDensity: VisualDensity.compact,
|
||||
)
|
||||
: null,
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 10),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
// 商品列表（固定高度，可滚动）
|
||||
if (_filtered.isEmpty)
|
||||
const SizedBox(
|
||||
height: listHeight,
|
||||
child: Center(
|
||||
child: Text('无匹配商品', style: TextStyle(color: Colors.grey)),
|
||||
),
|
||||
)
|
||||
else
|
||||
SizedBox(
|
||||
height: listHeight,
|
||||
child: ListView.separated(
|
||||
itemCount: _filtered.length,
|
||||
separatorBuilder: (_, __) =>
|
||||
const Divider(height: 1, indent: 16, endIndent: 16),
|
||||
itemBuilder: (context, i) {
|
||||
final p = _filtered[i];
|
||||
final isSelected = p.id == widget.selectedId;
|
||||
return ListTile(
|
||||
dense: true,
|
||||
selected: isSelected,
|
||||
selectedTileColor: Colors.blue.shade50,
|
||||
title: Text(
|
||||
p.name,
|
||||
style: const TextStyle(fontSize: 13),
|
||||
),
|
||||
subtitle: Text(
|
||||
[
|
||||
if (p.spec != null && p.spec!.isNotEmpty) p.spec!,
|
||||
p.unit,
|
||||
if (p.code.isNotEmpty) '编码: ${p.code}',
|
||||
].join(' · '),
|
||||
style: const TextStyle(fontSize: 12, color: Colors.grey),
|
||||
),
|
||||
trailing: isSelected
|
||||
? const Icon(Icons.check, color: Colors.blue, size: 18)
|
||||
: null,
|
||||
onTap: () => Navigator.pop(context, p),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 每个商品的拼音索引：全拼 + 首字母，在 initState 时一次性计算并缓存
|
||||
class _PinyinIndex {
|
||||
final String fullPinyin; // "longjingcha"
|
||||
final String initials; // "ljc"
|
||||
|
||||
const _PinyinIndex({required this.fullPinyin, required this.initials});
|
||||
|
||||
factory _PinyinIndex.from(Product p) {
|
||||
// 拼接名称 + 规格作为拼音转换源
|
||||
final text = '${p.name}${p.spec ?? ''}';
|
||||
final full = PinyinHelper.getPinyinE(text, separator: '', defPinyin: '')
|
||||
.toLowerCase();
|
||||
final init = PinyinHelper.getShortPinyin(text).toLowerCase();
|
||||
return _PinyinIndex(fullPinyin: full, initials: init);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user