/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-11-18 09:03:22
|
* @LastEditTime: 2022-12-09 16:40:16
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 调解详情展示
|
* 事件处置进度，21_00004-1：未开始，21_0004-2：进行中，21_00004-3：已结束，21_0004-4：超时限，21_0004-5：申情人撤回，21_0004-6：不予受理
|
*/
|
import React from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { TelephoneOutlined, AchieveFilled, CopyOutlined } from 'dd-icons';
|
import { avatar6, mediate_img_2, mediate_img_3, mediate_img_4, me_avatar } from '../../assets/img';
|
import { confirmModal, confirmThreeButtonModal, myTimeFormat, selectOption, showToast, timeFormat } from '../../utils/utility';
|
import { Button } from 'dingtalk-design-mobile';
|
import Descriptions from '../Descriptions';
|
import dd from 'gdt-jsapi';
|
|
const MediateDetailMsg = ({ eventId, taskId, data }) => {
|
const history = useHistory();
|
|
// 上报矛盾纠纷调处中心
|
function handleSubmitMediateCenter() {
|
confirmModal({
|
title: '上报确认',
|
subtitle: (
|
<>
|
上报矛盾纠纷调处中心<span className="public-color">上报矛盾纠纷调处中心</span>上报矛盾纠纷调处中心
|
</>
|
),
|
okText: '确定上报',
|
});
|
}
|
|
// 重新上报矛盾纠纷调处中心
|
function handleAgainSubmit() {
|
confirmThreeButtonModal({
|
title: '重新上报提醒',
|
subtitle: '再次上报前，请仔细根据退回原因修改或补充纠纷信息',
|
actions: [
|
{ text: '重新上报' },
|
{ text: '修改纠纷', onClick: () => history.push(`/hztGrid/mediateRegister?eventId=${eventId}`) },
|
{ text: '我再想想' },
|
],
|
});
|
}
|
|
// 复制
|
function handleCopy(text) {
|
dd.copyToClipboard({ text: text })
|
.then((res) => showToast({ content: '复制成功' }))
|
.catch((err) => showToast({ content: '复制失败' }));
|
}
|
|
// 网格员 - 处置/调解中
|
const dom1 = (
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img1" src={mediate_img_2} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>进行中</h5>
|
<div className="public-tag2 public-tag2-organ3">网格员调解中</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(data.inputTime)}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-dashed" />
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img2" src={me_avatar} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>{data.userName}</h5>
|
<div className="mediateDetailMsg-flex-phone">
|
<div className="mediateDetailMsg-flex-phone-icon">
|
<TelephoneOutlined />
|
</div>
|
<div>{data.mobile || '-'}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">
|
<div>{data.posName || '-'}</div>
|
<div className="public-rightBorder">
|
{data.districtName} {data.subdistrictName} {data.communityName}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
{/* TODO:暂无 <Button onClick={handleSubmitMediateCenter} size="middle" className="public-btn-danger" style={{ marginTop: '16px' }}>
|
上报矛盾纠纷调处中心
|
</Button> */}
|
<Button
|
onClick={() => history.push(`/hztGrid/mediateEventList/materialConclude?eventId=${eventId}&taskId=${taskId}`)}
|
size="middle"
|
type="primary"
|
style={{ marginTop: '16px' }}
|
>
|
纠纷办结
|
</Button>
|
</div>
|
</div>
|
);
|
|
// 网格员 - 已处置
|
const dom2 = (
|
<>
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
<div className="mediateDetailMsg-flex-imgSuccess">
|
<AchieveFilled />
|
</div>
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>已完成</h5>
|
<div className="public-tag2 public-tag2-blue3">网格员反馈</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(data.inputTime)}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-solid" />
|
<Descriptions
|
data={[
|
{ label: '办结选项', value: selectOption.conclude.find((item) => item.value === data.handleCanal)?.label },
|
{ label: '办结时间', value: timeFormat(data.finishTime) },
|
...(data.process !== '21_00004-3'
|
? []
|
: [
|
{
|
label: '调解结果',
|
value: <span className={`mediateDetailMsg-${data.mediResult === '22_00025-1' ? 'success' : 'fail'}`}>{data.mediResultName}</span>,
|
},
|
]),
|
{ label: '调解反馈', value: data.agreeContent },
|
]}
|
columns={1}
|
layout="vertical"
|
colon={false}
|
textGap={0}
|
itemGap={8}
|
/>
|
</div>
|
<div className="mediateDetailMsg-card">
|
<Descriptions title="调解附件" otherData={[{ type: 'files', files: data.fileInfoList }]} itemGap={0} />
|
<div className="mediateDetailMsg-solid" />
|
<div className="mediateDetailMsg-flex-subtitle">纠纷调解过程中的相关证明材料</div>
|
</div>
|
</>
|
);
|
|
// 矛盾纠纷调解处 - 未开始
|
const dom3 = (
|
<>
|
<div className="mediateDetailMsg-card2">
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img1" src={mediate_img_3} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>未开始</h5>
|
<div className="public-tag2 public-tag2-organ3">审查中</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(new Date())}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-solid" />
|
<div className="mediateDetailMsg-load">
|
<div className="mediateDetailMsg-load-spin">
|
<img src={mediate_img_4} alt="" />
|
</div>
|
<h4>矛盾纠纷调处中心审查中</h4>
|
<div className="mediateDetailMsg-load-subtitle">审查纠纷信息、材料及匹配调解员中...</div>
|
</div>
|
</div>
|
<div style={{ padding: '16px 0' }}>
|
<Button onClick={() => history.push(`/hztGrid/mediateEventList/materialConclude?eventId=${eventId}&taskId=${taskId}`)} type="primary">
|
纠纷办结
|
</Button>
|
</div>
|
</>
|
);
|
|
// 矛盾纠纷调解处 - 调解员处理
|
const dom4 = (
|
<>
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
{true ? (
|
<div className="mediateDetailMsg-flex-img3">
|
<AchieveFilled />
|
</div>
|
) : (
|
<img className="mediateDetailMsg-flex-img1" src={mediate_img_2} alt="" />
|
)}
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
{true ? (
|
<>
|
<h5>已完成</h5>
|
<div className="public-tag2 public-tag2-blue3">调解员反馈</div>
|
<div className="public-tag2 public-tag2-blue3">司法确认反馈</div>
|
</>
|
) : (
|
<>
|
<h5>进行中</h5>
|
<div className="public-tag2 public-tag2-organ3">调解员核实中</div>
|
</>
|
)}
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(new Date())}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-dashed" />
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img2" src={me_avatar} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>李飞</h5>
|
<div className="mediateDetailMsg-flex-phone">
|
<div className="mediateDetailMsg-flex-phone-icon">
|
<TelephoneOutlined />
|
</div>
|
<div>13590210706</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">
|
<span>调解员</span>
|
<span className="public-rightBorder">美兰区新埠街道人民调解委员会</span>
|
</div>
|
</div>
|
</div>
|
{/* 预约信息 */}
|
<div className="mediateDetailMsg-meeting">
|
<div className="mediateDetailMsg-meeting-left">
|
<div className="mediateDetailMsg-meeting-left-day">15号</div>
|
<div className="mediateDetailMsg-meeting-left-month">3月</div>
|
</div>
|
<div className="mediateDetailMsg-meeting-right">
|
<div>
|
<span>
|
预约时间：{myTimeFormat(new Date(), 'HH:mm')} ~ {myTimeFormat(new Date(), 'HH:mm')}
|
</span>
|
<span className="public-tag public-tag-green2">线下调解</span>
|
</div>
|
<div className="mediateDetailMsg-space">
|
<div>预约地点：</div>
|
<div className="mediateDetailMsg-space-right">新埠街道人民调委会第一调解室</div>
|
</div>
|
</div>
|
</div>
|
{/* 调解进行中 or 已完成 */}
|
<div className="mediateDetailMsg-ing">
|
<div>调解开始时间：{timeFormat(new Date())}</div>
|
<div>
|
调解时间：{timeFormat(new Date())} ~ {timeFormat(new Date())}
|
</div>
|
<div className="mediateDetailMsg-space">
|
<div>调解地点：</div>
|
<div className="mediateDetailMsg-space-right">新埠街道人民调委会第一调解室</div>
|
</div>
|
<div>调解方式：线上+线下</div>
|
<div>
|
<span>线上调解房间号：921402548</span>
|
<span onClick={() => handleCopy('房间号')} className="public-rightBorder">
|
<CopyOutlined style={{ marginRight: '4px' }} />
|
复制
|
</span>
|
</div>
|
<div>
|
<span>调解结果：</span>
|
<span className="public-success-color public-fail-color">调解不成功</span>
|
</div>
|
</div>
|
{/* 调解协议 */}
|
<div className="mediateDetailMsg-file">
|
<div className="mediateDetailMsg-file-left">
|
<div>调解</div>
|
<div>协议</div>
|
</div>
|
<div>
|
<div className="mediateDetailMsg-file-title">李小萌与王菲婚姻调解协议书</div>
|
<div className="public-tag public-tag-green3">点击查看</div>
|
</div>
|
</div>
|
</div>
|
{/* 司法确认 */}
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img2" src={avatar6} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>李晓</h5>
|
<div className="mediateDetailMsg-flex-phone" style={{ color: 'var(--common_level1_base_color)' }}>
|
<div className="mediateDetailMsg-flex-phone-icon" style={{ borderColor: 'var(--common_level1_base_color)' }}>
|
<TelephoneOutlined />
|
</div>
|
<div>13590210706</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">
|
<span>承办法官</span>
|
<span className="public-rightBorder">美兰区法院</span>
|
</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-ing" style={{ backgroundColor: 'rgba(249,241,189,0.6)' }}>
|
<div>
|
司法确认时间：{timeFormat(new Date())} ~ {timeFormat(new Date())}
|
</div>
|
<div className="mediateDetailMsg-space">
|
<div>司法确认地点：</div>
|
<div className="mediateDetailMsg-space-right">新埠街道人民调委会第一调解室</div>
|
</div>
|
<div>司法确认方式：线上+线下</div>
|
<div>
|
<span>司法确认结果：</span>
|
<span className="public-success-color public-fail-color">未达成</span>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-file mediateDetailMsg-file2">
|
<div className="mediateDetailMsg-file-left">
|
<div>民事</div>
|
<div>裁定</div>
|
</div>
|
<div>
|
<div className="mediateDetailMsg-file-title">李小萌与王菲婚姻调解协议书</div>
|
<div className="public-tag public-tag-brown">点击查看</div>
|
</div>
|
</div>
|
</div>
|
</>
|
);
|
|
// 退回
|
const dom5 = (
|
<>
|
<div style={{ flex: 1 }}>
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
<img className="mediateDetailMsg-flex-img1" src={mediate_img_3} alt="" />
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>未开始</h5>
|
<div className="public-tag2 public-tag2-red">退回</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(new Date())}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-solid" />
|
<Descriptions
|
data={[
|
{ label: '审查组织', value: '' },
|
{ label: '审查时间', value: timeFormat(new Date()) },
|
{ label: '原因说明', value: '' },
|
]}
|
columns={1}
|
layout="vertical"
|
colon={false}
|
textGap={0}
|
itemGap={8}
|
/>
|
<Button onClick={handleAgainSubmit} size="middle" className="public-btn-primary" style={{ marginTop: '16px' }}>
|
重新上报
|
</Button>
|
</div>
|
</div>
|
<div style={{ padding: '16px 0' }}>
|
<Button onClick={() => history.push(`/hztGrid/mediateEventList/materialConclude?eventId=${eventId}&taskId=${taskId}`)} type="primary">
|
纠纷办结
|
</Button>
|
</div>
|
</>
|
);
|
|
// 不予受理 or 异常终止
|
const dom6 = (
|
<div className="mediateDetailMsg-card">
|
<div className="mediateDetailMsg-flex">
|
<div className="mediateDetailMsg-flex-imgSuccess">
|
<AchieveFilled />
|
</div>
|
<div>
|
<div className="mediateDetailMsg-flex-title">
|
<h5>已完成</h5>
|
<div className="public-tag2 public-tag2-red">不予受理</div>
|
</div>
|
<div className="mediateDetailMsg-flex-subtitle">纠纷上报时间：{timeFormat(new Date())}</div>
|
</div>
|
</div>
|
<div className="mediateDetailMsg-solid" />
|
<Descriptions
|
data={[
|
{ label: '审查组织', value: '' },
|
{ label: '审查时间', value: timeFormat(new Date()) },
|
{ label: '原因说明', value: '' },
|
|
{ label: '调解组织', value: '' },
|
{
|
label: '调解员',
|
value: (
|
<>
|
<span>李晓明</span>
|
<span className="public-rightBorder">13178511718</span>
|
<TelephoneOutlined className="public-color" style={{ marginLeft: '4px' }} />
|
</>
|
),
|
},
|
{ label: '终止时间', value: timeFormat(new Date()) },
|
{ label: '原因说明', value: '' },
|
]}
|
columns={1}
|
layout="vertical"
|
colon={false}
|
textGap={0}
|
itemGap={8}
|
/>
|
</div>
|
);
|
|
let dom = null;
|
if (data.process === '21_00004-2') {
|
dom = dom1;
|
}
|
if (!['21_00004-1', '21_00004-2'].includes(data.process)) {
|
dom = dom2;
|
}
|
|
return <div className="mediateDetailMsg">{dom}</div>;
|
};
|
|
export default MediateDetailMsg;
|
