import NavBarPage from '../../../components/NavBarPage';
|
import ProcessFlow from '../components/ProcessFlow';
|
import './index.less';
|
import React, { useState } from 'react';
|
import { useHistory } from 'react-router-dom';
|
//
|
import { Form, Button, TextareaItem, DatePicker, Select, Toast } from 'dingtalk-design-mobile';
|
import { WriteEditOutlined } from 'dd-icons';
|
import BasicInfoForm from '../components/BasicInfoForm';
|
import FormCacheManager from '../components/FormCacheManager';
|
import * as $$ from '../../../utils/utility';
|
|
const CaseDes = () => {
|
const [form] = Form.useForm();
|
const history = useHistory();
|
|
const [currentForm, setCurrentForm] = useState('dispute'); // 直接设置初始表单为描述纠纷
|
const [guideVisible, setGuideVisible] = useState(false); // 添加指引弹窗可见状态
|
const [submitting, setSubmitting] = useState(false); // 提交状态
|
const [formData, setFormData] = useState({}); // 表单数据
|
|
// 保存草稿
|
const handleSaveDraft = async () => {
|
try {
|
console.log('保存草稿');
|
} catch (error) {
|
setSubmitting(false);
|
console.error('保存草稿失败:', error);
|
}
|
};
|
|
const onFinish = (values) => {
|
console.log('触发了保存');
|
};
|
|
// 表单缓存更新回调
|
const handleCacheUpdated = (formData) => {
|
console.log('表单缓存已更新:', formData);
|
};
|
|
// 不应该被FormCacheManager自动更新的字段列表
|
const excludedFields = ['caseType', 'caseTypeName', 'caseTypeFirst', 'caseTypeFirstName'];
|
|
// 处理下一步按钮点击
|
const handleNext = () => {
|
form
|
.validateFields()
|
.then((values) => {
|
if (currentForm === 'dispute') {
|
// 保存纠纷描述表单数据
|
console.log('保存纠纷描述表单:', values);
|
setCurrentForm('report');
|
setNodeStatus([2, 2, 1]); // 更新节点状态
|
} else if (currentForm === 'report') {
|
// 保存上报矛盾表单数据并提交
|
console.log('提交所有表单数据:', values);
|
// 这里可以添加提交到后端的逻辑
|
Toast.success('提交成功');
|
// 提交成功后返回上一页
|
history.goBack();
|
}
|
})
|
.catch((error) => {
|
console.error('表单验证失败:', error);
|
Toast.fail('请填写必填项');
|
});
|
};
|
|
// 处理预览按钮点击
|
const handlePreview = () => {
|
const saveData = $$.getSessionStorage('saveData') || {};
|
let nowData = { ...saveData, ...formData };
|
$$.setSessionStorage('saveData', nowData);
|
history.push('/gzdyh/preview');
|
};
|
|
// 处理上一步按钮点击
|
const handlePrevious = () => {
|
history.goBack();
|
};
|
|
// 表单数据变化
|
const handleGuideClick = (values, name) => {
|
console.log('指引弹窗处理函数', values, name);
|
setFormData(values);
|
};
|
|
// 定义节点状态：0-未开始，1-进行中，2-已完成
|
const [nodeStatus, setNodeStatus] = useState([
|
2, // 第一个节点 - 已完成
|
1, // 第二个节点 - 进行中
|
0, // 第三个节点 - 未开始
|
]);
|
|
// 节点配置
|
const nodes = [
|
{ id: 0, label: '填写人员' },
|
{ id: 1, label: '描述纠纷' },
|
{ id: 2, label: '上报矛盾' },
|
];
|
|
return (
|
<>
|
<NavBarPage
|
title="登记"
|
leftContentVisible={true}
|
rightContentFunc={handleSaveDraft}
|
rightChildren={
|
<>
|
<WriteEditOutlined />
|
保存草稿
|
</>
|
}
|
leftContentFunc={
|
currentForm === 'report'
|
? () => {
|
// 返回到纠纷描述状态
|
setCurrentForm('dispute');
|
// 更新节点状态
|
setNodeStatus([2, 1, 0]);
|
}
|
: history.goBack
|
}
|
/>
|
<div className="case-process-container">
|
<ProcessFlow nodes={nodes} nodeStatus={nodeStatus} />
|
</div>
|
|
<div className="case-info-container">{currentForm === 'dispute' && <BasicInfoForm onGuideClick={handleGuideClick} />}</div>
|
|
<div className="bottom-button-area">
|
<Button className="previous-button" onClick={handlePrevious} disabled={submitting}>
|
上一步
|
</Button>
|
<Button className="preview-button" type="primary" onClick={handlePreview} disabled={submitting}>
|
预览
|
</Button>
|
</div>
|
</>
|
);
|
};
|
|
export default CaseDes;
|
