272 lines
8.4 KiB
TypeScript
272 lines
8.4 KiB
TypeScript
import React, { useRef, useEffect } from 'react';
|
||
import { Card, Steps, Button, message, Space, Row, Col, Modal } from 'antd';
|
||
import { connect, history } from 'umi';
|
||
import type { ConnectProps, Dispatch } from 'umi';
|
||
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
|
||
import BasicInfoStep from './components/BasicInfoStep';
|
||
import SupplierSelectStep from './components/SupplierSelectStep';
|
||
import EvaluatorSelectStep from './components/EvaluatorSelectStep';
|
||
import styles from './supplierAnnualTaskManageAdd.less';
|
||
import type { SupplierTaskModelState } from '@/models/supplierAnnualTaskManage';
|
||
|
||
const { Step } = Steps;
|
||
|
||
/**
|
||
* 获取URL参数
|
||
* 解析URL中的id和mode参数，用于判断是否为编辑模式
|
||
* @returns {object} 包含id和mode的对象
|
||
*/
|
||
const getUrlParams = () => {
|
||
const location = window.location.href;
|
||
const url = new URL(location);
|
||
return {
|
||
id: url.searchParams.get('id'),
|
||
mode: url.searchParams.get('mode'),
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 页面组件Props接口定义
|
||
* 继承了ConnectProps，添加了supplierTaskManage和dispatch
|
||
*/
|
||
interface PageProps extends ConnectProps {
|
||
supplierAnnualTaskManage: SupplierTaskModelState; // dva model状态
|
||
dispatch: Dispatch; // dva dispatch方法
|
||
}
|
||
|
||
/**
|
||
* 供应商任务管理添加/编辑组件
|
||
* 使用步骤式表单引导用户完成添加或编辑任务的流程
|
||
*/
|
||
const SupplierTaskManageAdd: React.FC<PageProps> = ({ supplierAnnualTaskManage, dispatch }) => {
|
||
// 获取dva model中的状态
|
||
const { currentStep, loading, detailLoading } = supplierAnnualTaskManage;
|
||
|
||
// 判断是否为编辑模式
|
||
const urlParams = getUrlParams();
|
||
const isEditMode = urlParams.mode === 'edit' && urlParams.id;
|
||
const taskId = urlParams.id || '';
|
||
|
||
// 创建表单引用，用于访问子组件的表单方法（主要用于验证）
|
||
const basicFormRef = useRef<any>(null); // 基本信息表单引用
|
||
const supplierFormRef = useRef<any>(null); // 供应商选择表单引用
|
||
const evaluatorFormRef = useRef<any>(null); // 评价人员表单引用
|
||
const divisionFormRef = useRef<any>(null); // 评价分工表单引用
|
||
|
||
/**
|
||
* 编辑模式下获取任务详情，或新建模式下重置状态
|
||
* 利用useEffect在组件挂载或依赖项变化时触发
|
||
*/
|
||
useEffect(() => {
|
||
if (isEditMode && taskId && dispatch) {
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/saveMode',
|
||
payload: 'edit',
|
||
});
|
||
// 编辑模式，获取任务详情
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/fetchTaskDetail',
|
||
payload: { taskId },
|
||
});
|
||
} else if (dispatch) {
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/setMode',
|
||
payload: 'add',
|
||
});
|
||
// 新建模式，重置状态
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/resetState',
|
||
});
|
||
}
|
||
}, [isEditMode, taskId, dispatch]);
|
||
|
||
/**
|
||
* 组件卸载时重置状态
|
||
*/
|
||
useEffect(() => {
|
||
return () => {
|
||
if (dispatch) {
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/resetState',
|
||
});
|
||
}
|
||
};
|
||
}, [dispatch]);
|
||
|
||
// 步骤配置，定义每个步骤的标题、描述和内容组件
|
||
const steps = [
|
||
{
|
||
title: '基本信息', // 步骤标题
|
||
description: '请填写基本信息', // 步骤描述
|
||
content: <BasicInfoStep ref={basicFormRef} />, // 步骤内容组件
|
||
},
|
||
{
|
||
title: '选择供应商',
|
||
description: '请选择参加评价的供应商',
|
||
content: <SupplierSelectStep ref={supplierFormRef} />,
|
||
},
|
||
{
|
||
title: '选择年审人员',
|
||
description: '请选择供应商年审人员',
|
||
content: <EvaluatorSelectStep ref={evaluatorFormRef} />,
|
||
},
|
||
];
|
||
|
||
/**
|
||
* 处理返回按钮点击事件
|
||
* 返回上一页
|
||
*/
|
||
const handleBack = () => {
|
||
history.goBack();
|
||
};
|
||
|
||
/**
|
||
* 处理下一步按钮点击事件
|
||
* 验证当前步骤的表单数据，通过后进入下一步
|
||
*/
|
||
const handleNext = async () => {
|
||
try {
|
||
// 根据当前步骤验证相应的表单
|
||
if (currentStep === 0 && basicFormRef.current) {
|
||
// 验证基本信息
|
||
await basicFormRef.current.validateFields();
|
||
} else if (currentStep === 1 && supplierFormRef.current) {
|
||
// 验证供应商选择
|
||
await supplierFormRef.current.validateFields();
|
||
} else if (currentStep === 2 && evaluatorFormRef.current) {
|
||
// 验证评价人员选择
|
||
await evaluatorFormRef.current.validateFields();
|
||
}
|
||
|
||
// 验证通过，进入下一步
|
||
if (dispatch) {
|
||
dispatch({ type: 'supplierAnnualTaskManage/nextStep' });
|
||
}
|
||
} catch (errorInfo: any) {
|
||
// 表单验证失败
|
||
console.log('表单验证失败:', errorInfo);
|
||
if (typeof errorInfo === 'string') {
|
||
message.error(errorInfo);
|
||
} else if (errorInfo && errorInfo.errorFields) {
|
||
message.error('请完成必填项');
|
||
}
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理上一步按钮点击事件
|
||
* 返回上一个步骤
|
||
*/
|
||
const handlePrev = () => {
|
||
if (dispatch) {
|
||
dispatch({ type: 'supplierAnnualTaskManage/prevStep' });
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 提交任务数据
|
||
* @param taskStatus 任务状态，决定是否需要下级单位完善
|
||
*/
|
||
const submitTaskData = (taskStatus: string | null) => {
|
||
if (dispatch) {
|
||
dispatch({
|
||
type: 'supplierAnnualTaskManage/submitTaskData',
|
||
payload: {
|
||
taskStatus,
|
||
isEditMode,
|
||
taskId,
|
||
onSuccess: () => {
|
||
history.goBack();
|
||
},
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理提交按钮点击事件
|
||
* 验证评价分工表单，通过后根据是否为编辑模式决定提交方式
|
||
*/
|
||
const handleSubmit = async () => {
|
||
// 验证评价分工
|
||
if (divisionFormRef.current) {
|
||
const result = divisionFormRef.current.validate();
|
||
if (!result.valid) {
|
||
message.error(result.message);
|
||
return;
|
||
}
|
||
}
|
||
// 如果是编辑模式，则直接提交 提示是否确认后直接提交
|
||
Modal.confirm({
|
||
title: '提示',
|
||
content: '是否确认提交',
|
||
onOk: () => {
|
||
submitTaskData(null);
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="common-container">
|
||
{/* 卡片容器，显示加载状态 */}
|
||
<Card bordered={false} loading={detailLoading}>
|
||
{/* 页面头部，包含标题和返回按钮 */}
|
||
<div className="page-header">
|
||
<h2>{isEditMode ? '修改年审任务' : '新增年审任务'}</h2>
|
||
<Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
|
||
返回
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 步骤式表单布局 */}
|
||
<Row gutter={24} className={styles.stepsLayout}>
|
||
{/* 左侧步骤导航 */}
|
||
<Col span={6} className={styles.stepsLeft}>
|
||
<Steps direction="vertical" current={currentStep} className={styles.verticalSteps}>
|
||
{steps.map((item) => (
|
||
<Step key={item.title} title={item.title} description={item.description} />
|
||
))}
|
||
</Steps>
|
||
</Col>
|
||
{/* 右侧表单内容 */}
|
||
<Col span={18} className={styles.stepsRight}>
|
||
<div className={styles.stepsContent}>{steps[currentStep].content}</div>
|
||
|
||
{/* 步骤操作按钮 */}
|
||
<div className={styles.stepsAction}>
|
||
<Space>
|
||
{/* 如果当前是评价分工步骤，则不显示上一步按钮 */}
|
||
{currentStep > 0 && (
|
||
<Button onClick={handlePrev}>上一步</Button>
|
||
)}
|
||
{currentStep < steps.length - 1 && (
|
||
<Button type="primary" onClick={handleNext}>
|
||
下一步
|
||
</Button>
|
||
)}
|
||
{currentStep === steps.length - 1 && (
|
||
<Button
|
||
type="primary"
|
||
loading={loading}
|
||
icon={<SaveOutlined />}
|
||
onClick={handleSubmit}
|
||
>
|
||
{isEditMode ? '保存' : '提交'}
|
||
</Button>
|
||
)}
|
||
</Space>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 将dva model中的状态映射到组件props
|
||
export default connect(
|
||
({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
|
||
supplierAnnualTaskManage,
|
||
}),
|
||
)(SupplierTaskManageAdd);
|