/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2025-04-08 10:15:00
|
* @LastEditTime: 2025-04-08 10:30:00
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 督办回复组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import { Button, Input, Modal, Toast } from 'dingtalk-design-mobile';
|
import NavBarPage from '../../../../components/NavBarPage';
|
import * as $$ from '../../../../utils/utility';
|
import './reply.less';
|
|
// 督办详情模拟数据
|
const mockSupervisionDetail = {
|
supervisionTime: '2025-3-1 12:00',
|
supervisionPerson: '李明明 (白云区综治中心) 13591990202',
|
supervisionContent: '本事项经初步核实，认为属于贵部门职责范围内的矛盾纠纷化解工作，请组织专门人员负责此事，尽快查明事实真相，依法依规进行处理，并在处理过程中充分考虑当事人的合理诉求，确保公平公正，维护当事人的合法权益。同时，请务必保持与当事人的沟通畅通，及时反馈办理进展，以增强矛盾纠纷化解工作的透明度和公信力。',
|
attachments: [
|
{
|
name: '关于加强矛盾纠纷解决指南',
|
size: '12.3K'
|
}
|
]
|
};
|
|
const SupervisionReply = () => {
|
const history = useHistory();
|
const location = useLocation();
|
const [replyContent, setReplyContent] = useState('');
|
const [attachments, setAttachments] = useState([]);
|
const [submitting, setSubmitting] = useState(false);
|
|
// 从URL获取督办ID
|
const supervisionId = $$.getQueryString('id');
|
|
// 添加附件
|
const handleAddAttachment = () => {
|
// 实际项目中，这里应该调用文件上传API
|
const newAttachment = {
|
id: Date.now().toString(),
|
name: '当事人沟通现场照片',
|
size: '12.3K'
|
};
|
setAttachments([...attachments, newAttachment]);
|
};
|
|
// 移除附件
|
const handleRemoveAttachment = (id) => {
|
setAttachments(attachments.filter(attachment => attachment.id !== id));
|
};
|
|
// 提交回复
|
const handleSubmit = () => {
|
if (!replyContent.trim()) {
|
Toast.show({
|
content: '请输入回复内容',
|
duration: 2000
|
});
|
return;
|
}
|
|
setSubmitting(true);
|
|
// 实际项目中，这里应该调用API提交回复
|
setTimeout(() => {
|
setSubmitting(false);
|
Toast.show({
|
content: '回复成功',
|
duration: 2000
|
});
|
|
// 返回上一页
|
history.goBack();
|
}, 1000);
|
};
|
|
// 渲染附件项
|
const renderAttachment = (file, isReplyAttachment = false) => {
|
return (
|
<div className="reply-attachment" key={file.id || file.name}>
|
<div className="reply-attachment-icon">
|
<svg viewBox="0 0 1024 1024" width="16" height="16">
|
<path d="M853.333 469.333c-17.066 0-32 14.934-32 32v256c0 23.467-19.2 42.667-42.667 42.667H245.333c-23.466 0-42.666-19.2-42.666-42.667V501.333c0-17.066-14.934-32-32-32s-32 14.934-32 32v256c0 59.733 46.933 106.667 106.666 106.667h533.334c59.733 0 106.666-46.934 106.666-106.667V501.333c0-17.066-14.933-32-32-32z" fill="#1677FF"></path>
|
<path d="M505.6 695.467c6.4 6.4 14.933 8.533 23.467 8.533s17.066-2.133 23.466-8.533l128-128c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L554.667 603.733V202.667c0-17.067-14.934-32-32-32s-32 14.933-32 32v401.066L409.6 522.667c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l140.8 128z" fill="#1677FF"></path>
|
</svg>
|
</div>
|
<div className="reply-attachment-name">{file.name}</div>
|
<div className="reply-attachment-size">{file.size}</div>
|
{isReplyAttachment ? (
|
<div
|
className="reply-attachment-delete"
|
onClick={() => handleRemoveAttachment(file.id)}
|
>
|
删除
|
</div>
|
) : (
|
<div className="reply-attachment-preview">预览</div>
|
)}
|
</div>
|
);
|
};
|
|
return (
|
<NavBarPage title="督办回复" showBack>
|
<div className="reply-container">
|
<div className="reply-header">督办回复详情</div>
|
|
{/* 督办详情部分 */}
|
<div className="reply-detail">
|
<div className="reply-section">
|
<div className="reply-label">督办时间</div>
|
<div className="reply-value">{mockSupervisionDetail.supervisionTime}</div>
|
</div>
|
|
<div className="reply-section">
|
<div className="reply-label">督办人</div>
|
<div className="reply-value">{mockSupervisionDetail.supervisionPerson}</div>
|
</div>
|
|
<div className="reply-section">
|
<div className="reply-label">督办内容</div>
|
<div className="reply-value">{mockSupervisionDetail.supervisionContent}</div>
|
</div>
|
|
{mockSupervisionDetail.attachments && mockSupervisionDetail.attachments.length > 0 && (
|
<div className="reply-section">
|
<div className="reply-label">督办附件</div>
|
<div className="reply-attachments">
|
{mockSupervisionDetail.attachments.map(file => renderAttachment(file))}
|
</div>
|
</div>
|
)}
|
</div>
|
|
<div className="reply-divider"></div>
|
|
{/* 回复编辑部分 */}
|
<div className="reply-edit">
|
<Input.TextArea
|
className="reply-textarea"
|
placeholder="请输入回复内容"
|
value={replyContent}
|
onChange={setReplyContent}
|
rows={5}
|
/>
|
|
{/* 回复附件 */}
|
{attachments.length > 0 && (
|
<div className="reply-section">
|
<div className="reply-label">附件材料</div>
|
<div className="reply-attachments">
|
{attachments.map(file => renderAttachment(file, true))}
|
</div>
|
</div>
|
)}
|
|
{/* 添加附件按钮 */}
|
<div className="reply-add-attachment" onClick={handleAddAttachment}>
|
<div className="reply-add-attachment-icon">
|
<svg viewBox="0 0 1024 1024" width="20" height="20">
|
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1677FF"/>
|
<path d="M680 480H544V344c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v136H344c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h136v136c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h136c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" fill="#1677FF"/>
|
</svg>
|
</div>
|
<div className="reply-add-attachment-text">添加附件</div>
|
</div>
|
</div>
|
|
{/* 底部提交按钮 */}
|
<div className="reply-footer">
|
<Button
|
type="primary"
|
className="reply-submit-btn"
|
loading={submitting}
|
onClick={handleSubmit}
|
>
|
提交
|
</Button>
|
</div>
|
</div>
|
</NavBarPage>
|
);
|
};
|
|
export default SupervisionReply;
|
