import React, { useState, useEffect } from "react";
|
import { Row, Col, Space } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
import { ApplyDialog, AgentDialog, Respondent, Company } from './component/previewTable'
|
import FileTable from "../matterDetail/FileTable";
|
import { majorStatus_1 } from '@/assets/images';
|
import PreviewImage from '@/components/PreviewImage';
|
import MyPDF from '@/components/MyPDF';
|
import WantUserTag from '@/components/WantUserTag/Handling';
|
|
const Preview = (props) => {
|
const isOrganization = $$.getQueryString('isOrganization')
|
const [data, setData] = useState({});
|
const levelColorMap = {
|
1: '#F53F3F',
|
2: '#EF6C24',
|
3: '#00B42A',
|
}
|
|
useEffect(() => {
|
const applyData = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "自然人");
|
const agentData = props.data?.fakeData?.filter(item => item.perType === "24_00006-1");
|
const company = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "非法人组织");
|
const respondentData = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "法人");
|
const applyList = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "24_00006-1") || [];
|
|
const applyData1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "自然人");
|
const agentData1 = props.data?.fakeData?.filter(item => item.perType === "24_00006-2");
|
const company1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "非法人组织");
|
const respondentData1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "法人");
|
const applyForList = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" || item.perType === "24_00006-2") || [];
|
|
setData({
|
applyData,
|
agentData,
|
company,
|
respondentData,
|
applyData1,
|
agentData1,
|
company1,
|
respondentData1,
|
applyList,
|
applyForList
|
})
|
}, [props.data])
|
|
return (
|
<div style={{ ...props.style }}>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>当事人信息</h4>
|
</Space>
|
</Col>
|
<div style={{ marginBottom: '8px' }}>申请方</div>
|
<div className="line-container" style={{ marginBottom: '20px' }}>
|
<div className="line-box">
|
<div className="line-box-active" style={{ left: '13px' }}></div>
|
</div>
|
</div>
|
{/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 */}
|
{data.applyData && data.applyData.length > 0 ? (
|
<ApplyDialog applyDialog={data.applyData} />
|
) : null}
|
|
{/* AgentDialog 只有在 agentData 存在且不为空时才渲染 */}
|
{data.agentData && data.agentData.length > 0 ? (
|
<AgentDialog agentDialog={data.agentData} />
|
) : null}
|
|
{/* Respondent 只有在 respondentData 存在且不为空时才渲染 */}
|
{data.respondentData && data.respondentData.length > 0 ? (
|
<Respondent respondent={data.respondentData} />
|
) : null}
|
|
{data.company && data.company.length > 0 ? (
|
<Company company={data.company} />
|
) : null}
|
{data.applyList?.length === 0 && <div style={{ padding: '100px 0' }}>{$$.MyNewEmpty()}</div>}
|
|
<div style={{ marginBottom: '8px' }}>被申请方</div>
|
<div className="line-container" style={{ marginBottom: '20px' }}>
|
<div className="line-box">
|
<div className="line-box-active"></div>
|
</div>
|
</div>
|
{data.applyData1 && data.applyData1.length > 0 ? (
|
<ApplyDialog applyDialog={data.applyData1} />
|
) : null}
|
|
{data.agentData1 && data.agentData1.length > 0 ? (
|
<AgentDialog agentDialog={data.agentData1} />
|
) : null}
|
|
{data.respondentData1 && data.respondentData1.length > 0 ? (
|
<Respondent respondent={data.respondentData1} />
|
) : null}
|
|
{data.company1 && data.company1.length > 0 ? (
|
<Company company={data.company1} />
|
) : null}
|
{data.applyForList?.length === 0 && <div style={{ padding: '100px 0' }}>{$$.MyNewEmpty()}</div>}
|
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>纠纷基本情况</h4>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
{props.isDoc &&
|
<>
|
<Col span={8}>
|
<div><div className="title-text">事项状态</div></div>
|
<div style={{ color: '#1A6FB8' }}>{props.data?.statusName || '-'}</div>
|
</Col>
|
<Col span={16}>
|
<div><div className="title-text">事项编号</div></div>
|
<div>{props.data?.caseRef || '-'}</div>
|
</Col>
|
</>
|
}
|
<Col span={8}>
|
<div className="title">
|
<div className="title-text">事项等级</div>
|
</div>
|
<div style={{ display: 'flex' }}><div style={{ backgroundColor: levelColorMap[props.data?.caseLevel], marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>{props.data?.caseLevel || '-'}</div></div>级</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">事项来源</div></div>
|
<div>自行排查</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">来访形式</div></div>
|
<div>排查</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷类型</div></div>
|
<div>
|
{props.data?.caseTypeFirstName ?
|
`${props.data.caseTypeFirstName}/${props.data.caseTypeName}`
|
: '-'
|
}
|
</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷发生时间</div></div>
|
<div>{props.data?.occurTime || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷发生地点</div></div>
|
<div>{props.data?.addr || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">问题属地</div></div>
|
<div>
|
{props.data?.queAreaName ? `${props.data.queAreaName}/${props.data.queRoadName}` : '-'
|
}
|
</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">涉及人数（人）</div></div>
|
<div>{props.data?.peopleNum || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">涉及金额（元）</div></div>
|
<div>{$$.thousands(props.data?.amount) || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title"><div className="title-text">事项概况</div></div>
|
<div>{props.data?.caseDes || '-'} </div>
|
</Col>
|
<Col span={24}>
|
<div className="title"><div className="title-text">事项申请</div></div>
|
<div>{props.data?.caseClaim || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title title-gap">
|
{props.data?.majorStatus === 1 && <img src={majorStatus_1} alt="" srcset="" />}
|
<div style={{ color: props.data?.majorStatus === 1 ? '#F53F3F' : 'inherit' }} className="title-text">是否重大矛盾纠纷</div>
|
</div>
|
<div>{props.data?.majorStatus === 1 ? '是' : '否'}</div>
|
</Col>
|
<Col span={16}>
|
<div className="title title-gap">
|
{props.data?.isRisk === '1' && <img src={majorStatus_1} alt="" srcset="" />}
|
<div style={{ color: props.data?.isRisk === '1' ? '#F53F3F' : 'inherit' }} className="title-text">是否扬言风险纠纷</div>
|
</div>
|
<div>{props.data?.isRisk === '1' ? '是' : '否'}</div>
|
</Col>
|
</Row>
|
{props.transactResult && <>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>办理结果</h4>
|
</Space>
|
</Col>
|
<table border="1" align="center" cellpadding="8" className="table" >
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">化解结果</th>
|
<td width='380'>{props.transactResult.mediResultName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
|
<td width='380'>{props.transactResult.mediator || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">承办部门</th>
|
<td>{props.transactResult.mediateUnitName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">配合部门</th>
|
<td>{props.transactResult.applyAssistUnitName || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th>
|
<td width='380'>{$$.minuteFormat(props.transactResult?.acceptTime) || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
|
<td width='380'>{$$.minuteFormat(props.transactResult?.closeTime) || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
|
<td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
|
<td width='380' colspan='3'>{props.transactResult?.agreeContent || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">协议履行情况</th>
|
<td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
|
<td colspan='3'>
|
{props.transactResult?.fileInfoBaseDTOList?.map((item, index) => {
|
console.log(item);
|
return <div style={{ display: 'inline-block' }}>
|
{item.suffix === 'pdf' ? <MyPDF name={item.name} fileUrl={item.showUrl} key={index} /> : <PreviewImage name={item.name} src={item.showUrl} />}
|
{/* <PreviewImage name={item.name} src={item.showUrl} /> */}
|
{index !== props.transactResult?.fileInfoBaseDTOList.length - 1 && <>，</>}
|
</div>
|
})}
|
</td>
|
</tr>
|
</table>
|
</>}
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>事件材料</h4>
|
</Space>
|
</Col>
|
<FileTable mainId={props.mainId} fileInfoList={props.data?.fileInfoList} isReview={true} />
|
{isOrganization && <>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>调解员</h4>
|
</Space>
|
</Col>
|
<WantUserTag name={props.data?.mediator} />
|
</>
|
}
|
</div>
|
)
|
}
|
|
export default Preview
|
