/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-13 15:19:57
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-09-04 15:00:02
|
* @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
|
* @Description: 预览信息
|
*/
|
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 { link } from '@/assets/images';
|
|
const Preview = (props) => {
|
const [data, setData] = useState({})
|
|
useEffect(() => {
|
console.log(props.data);
|
const applyData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "自然人");
|
const agentData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方代理人");
|
const company = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "非法人组织");
|
const respondentData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "法人");
|
|
const applyData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "自然人");
|
const agentData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方代理人");
|
const company1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "非法人组织");
|
const respondentData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "法人");
|
|
setData({
|
applyData,
|
agentData,
|
company,
|
respondentData,
|
applyData1,
|
agentData1,
|
company1,
|
respondentData1
|
})
|
}, [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 left-line"></div>
|
<div className="line middle-line"></div>
|
<div className="line right-line"></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}
|
|
<div style={{ marginBottom: '8px' }}>被申请方</div>
|
<div className="line-container" style={{ marginBottom: '20px' }}>
|
<div className="line left-line"></div>
|
<div className="line middle-line"></div>
|
<div className="line right-line"></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}
|
<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: '#00B42A', 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>{props.data?.visitTime || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">来访人数（人）</div></div>
|
<div>{props.data?.visitPeopleNum || '-'}</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?.queProvName ?
|
`${props.data.queProvName}/${props.data.queCityName}/${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={8}>
|
<div ><div className="title-text">事项来源</div></div>
|
<div>大厅来访</div>
|
</Col>
|
<Col span={16}>
|
<div ><div className="title-text">来访形式</div></div>
|
<div>来访</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={16}>
|
<div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
|
<div>{props.data?.majorStatus === 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'>2024-7-1 10:00</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
|
<td width='380'>{props.transactResult?.fileTime || '-'}</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) => {
|
return <a href="your-link-here.html" target="_blank">
|
<img src={link} alt="" className="title-file" />{item.trueName}
|
{index !== props.transactResult.fileInfoBaseDTOList.length - 1 && <>，</>}
|
</a>
|
})}
|
</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} />
|
</div>
|
)
|
}
|
|
export default Preview
|
