(undefined);
const handleTodayClick = () => {
const today = dayjs();
const params = {
time: [today.startOf('day'), today.endOf('day')],
payment_status: undefined,
};
form.setFieldsValue(params);
list.onSearch(params);
setValueType(1);
};
return (
{/* ... 其他按钮 */}
);
};
```
**关键点**:
- 使用 `form.setFieldsValue` 设置筛选参数
- 使用 `list.onSearch` 触发搜索
- 使用 `valueType` 状态控制按钮的激活状态
- 使用 `ghost` 属性控制按钮样式
#### HandleActions 组件
```
const HandleActions = (props: { locales: any }) => {
const { locales } = props;
const { serverActions, refManager, ...otherProps } = useContainerContext();
const filterButtonListValue = useMemo(
() => ({
otherFilter: getFilterButtonList(locales),
}),
[locales]
);
const sortList = useMemo(() => getSortList(locales), [locales]);
return (
<>
);
};
```
### 5. 多语言配置 (locales.ts)
```
export default {
en: {
'pisell2.orderList.title': 'Order List',
'pisell2.orderList.column.orderNumber': 'Order Number',
// ... 其他英文配置
},
'zh-CN': {
'pisell2.orderList.title': '订单列表',
'pisell2.orderList.column.orderNumber': '订单号',
// ... 其他简体中文配置
},
'zh-HK': {
'pisell2.orderList.title': '訂單列表',
'pisell2.orderList.column.orderNumber': '訂單號',
// ... 其他繁体中文配置
},
};
```
**关键点**:
- 使用命名空间 `pisell2.orderList` 避免冲突
- 按功能模块分组（column、filter、sort 等）
- 保持三种语言的 key 一致
## 开发建议
### 1. 状态管理
- 使用 `PisellDataSourceContainer` 的上下文管理数据状态
- 避免在组件内部维护冗余状态
- 使用 `useMemo` 缓存计算结果
### 2. 性能优化
```
// ✅ 推荐：使用 useMemo 缓存配置
const tableColumns = useMemo(() => getTableColumns(locales), [locales]);
// ❌ 不推荐：每次渲染都重新计算
const tableColumns = getTableColumns(locales);
```
### 3. 类型安全
```
// 定义清晰的 Props 类型
interface OrderListProps {
business_type: string;
}
// 使用类型断言时注意安全性
const customer = (record.customer || {}) as CustomerInfo;
```
### 4. 错误处理
```
// API 请求时处理错误
try {
const res = await listApi(params);
return res?.data;
} catch (error) {
console.error('Failed to fetch order list:', error);
return { list: [], total: 0 };
}
```
### 5. 代码组织
- 将配置与逻辑分离（config.tsx vs index.tsx）
- 将可复用的子组件提取到 components 目录
- 将 API 接口统一管理在 serve.ts
## 扩展开发
### 添加新的筛选项
1. 在 `config.tsx` 的 `getFilterButtonList` 中添加配置：
```
{
name: 'new_field',
type: 'select',
key: 'new_field',
label: locales.getText('pisell2.orderList.filter.newField.label'),
other: {
formItemProps: { labelCol: { span: 24 } },
placeholder: locales.getText('pisell2.orderList.filter.newField.placeholder'),
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
],
},
}
```
2. 在 `locales.ts` 中添加多语言配置
3. 在 `serve.ts` 的 `formatParams` 中处理参数（如果需要）
### 添加新的表格列
1. 在 `config.tsx` 的 `getTableColumns` 中添加列配置：
```
{
title: locales.getText('pisell2.orderList.column.newColumn'),
dataIndex: 'new_field',
key: 'new_field',
isShow: false, // 默认隐藏
render: (value: any) => {
return value || '-';
},
}
```
2. 在 `locales.ts` 中添加多语言配置
### 添加新的快捷筛选按钮
在 `components/FilterList.tsx` 中添加：
```
const handleCustomClick = () => {
const params = {
// 自定义筛选参数
};
form.setFieldsValue(params);
list.onSearch(params);
setValueType(5);
};
// 在 JSX 中添加按钮
```
## 调试技巧
### 1. 查看数据源上下文
```
const context = useContainerContext();
console.log('DataSource Context:', context);
```
### 2. 查看请求参数
```
const formatParams = (params: Record) => {
console.log('Original Params:', params);
const formatted = { /* ... */ };
console.log('Formatted Params:', formatted);
return formatted;
};
```
### 3. 查看表格数据
在浏览器控制台中：
```javascript
// 查看表格数据
document.querySelector('.ant-table-tbody').innerText;
```
## 常见问题
### 1. 多语言不生效
**原因**: 多语言未正确初始化
**解决**:
```
// 确保在组件顶部初始化多语言
locales.init(localeTexts, context?.engine?.props?.locale || 'zh-CN');
```
### 2. 筛选参数未传递到接口
**原因**: `formatParams` 中未处理该参数
**解决**:
```
const formatParams = (params: Record) => {
const { newField, ...rest } = params;
return {
...rest,
new_field: newField, // 添加参数映射
};
};
```
### 3. 表格列不显示
**原因**: 列被默认隐藏了
**解决**:
- 点击列设置按钮，勾选需要显示的列
- 或在配置中设置 `isShow: true`
### 4. 下拉选项加载失败
**原因**: API 接口返回数据格式不匹配
**解决**:
```
options: (params?: string) =>
getCustomerSelectOptions(params).then((res: any) => {
console.log('API Response:', res); // 调试输出
return res.map((item: any) => ({
label: item.display_name,
value: item.id,
}));
})
```
## 测试要点
1. **功能测试**
- 所有筛选条件是否正常工作
- 排序是否正确
- 分页是否正确
- 快捷筛选按钮是否正确
2. **边界测试**
- 空数据展示
- 大量数据性能
- 特殊字符处理
3. **多语言测试**
- 切换语言后文案是否正确
- 日期格式是否符合语言习惯
4. **兼容性测试**
- 不同浏览器兼容性
- 不同屏幕尺寸适配