Files
fe_supplier_frontend/src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/SupplierSelectStep.tsx

89 lines
3.1 KiB
TypeScript
Raw Normal View History

2025-06-27 19:55:19 +08:00
import React, { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
import { Card } from 'antd';
import styles from '../supplierAnnualTaskManageAdd.less';
import SupplierSelector from '@/components/SupplierSelector';
import type { SupplierItem } from '@/servers/dao/supplierAnnualTaskManag';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { SupplierTaskModelState } from '@/models/supplierAnnualTaskManage';
interface SupplierSelectStepProps {
supplierAnnualTaskManage: SupplierTaskModelState;
dispatch: Dispatch;
innerRef?: any; // 使用 innerRef 作为属性名
}
// 定义组件,使用 innerRef 代替直接的 ref
const SupplierSelectStepComponent = (props: SupplierSelectStepProps) => {
const { supplierAnnualTaskManage, dispatch, innerRef } = props;
// 从model获取数据
const { taskFormData } = supplierAnnualTaskManage;
// 内部状态避免直接操作formData导致循环更新
const [selectedSuppliers, setSelectedSuppliers] = useState<SupplierItem[]>([]);
// 当taskFormData.selectedSuppliers更新时同步到本地状态
useEffect(() => {
if (taskFormData.selectedSuppliers && taskFormData.selectedSuppliers.length > 0) {
setSelectedSuppliers(taskFormData.selectedSuppliers);
}
}, [taskFormData.selectedSuppliers]); // 只在表单ID变化时更新编辑模式加载时
// 暴露表单方法给父组件,使用 innerRef
useImperativeHandle(innerRef, () => ({
validateFields: () => {
// 这里可以添加自定义验证逻辑
return Promise.resolve();
},
// 删除不必要的方法因为现在使用Dva管理数据
}));
// 处理供应商选择
const handleSupplierSelect = (suppliers: SupplierItem[]) => {
// 确保每个供应商都有evaluators字段
const suppliersWithEvaluators = suppliers.map(supplier => ({
...supplier,
evaluators: supplier.evaluators || [], // 确保evaluators字段存在即使是空数组
evaluatorCount: supplier.evaluators?.length || 0 // 计算评价人员数量
}));
// 更新本地状态
setSelectedSuppliers(suppliersWithEvaluators);
// 通过dispatch更新model数据
dispatch({
type: 'supplierAnnualTaskManage/updateFormData',
payload: {
selectedSuppliers: suppliersWithEvaluators,
supplierIds: suppliersWithEvaluators.map(supplier => ({ id: supplier.id }))
}
});
};
return (
<div className={styles.supplierSelectStep}>
<Card title="供应商选择" bordered={false} className="inner-card">
<SupplierSelector
onSelect={handleSupplierSelect}
selectedSuppliers={selectedSuppliers}
/>
</Card>
</div>
);
};
// 连接 Dva model
const ConnectedComponent = connect(
({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
supplierAnnualTaskManage,
})
)(SupplierSelectStepComponent);
// 外层转发 ref 到 innerRef
const SupplierSelectStep = forwardRef((props: any, ref) => (
<ConnectedComponent {...props} innerRef={ref} />
));
export default SupplierSelectStep;