import React, { useState, useEffect } from 'react';
|
import { Row, Col, Space, Button, Switch } from 'antd';
|
import * as $$ from '@/utils/utility';
|
import { Message, Typography, Modal } from '@arco-design/web-react';
|
import { question, majorStatus_1 } from '@/assets/images';
|
import FileTable from "./FileTable";
|
import PersonCard from '@/components/personCard';
|
import NameCard2 from '@/components/NameCard2';
|
import PersonCardDialog from './personCard';
|
import ApplyDialog from "../visit/component/applyDialog";
|
import AgentDialog from "../visit/component/agentDialog";
|
import { useNavigate } from 'react-router-dom';
|
import HandleRecord from './HandleRecord';
|
|
function getCaseInfoApi(id) {
|
return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
|
}
|
|
function updateVisibleStatusApi(data) {
|
return $$.ax.request({ url: 'caseInfo/updateVisibleStatus', type: 'post', service: 'mediate', data });
|
}
|
|
|
export default function MatterDetail(props) {
|
const levelColorMap = {
|
1: '#F53F3F',
|
2: '#EF6C24',
|
3: '#00B42A',
|
}
|
const [fakeData, setFakeData] = useState([]);//当事人信息数据
|
const [infoData, setInfoData] = useState({});
|
const [personView, setPersonView] = useState(false)
|
const [personId, setPersonId] = useState('')
|
const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
|
const [agentVisible, setAgentVisible] = useState(false);
|
const [dialogType, setDialogType] = useState();//添加当事人的类型
|
const [editData, setEditData] = useState(null);
|
|
const peopleMap = {
|
'15_020008-1': '申请方',
|
'15_020008-2': '被申请方',
|
'24_00006-1': '申请方代理人',
|
'24_00006-2': '被申请方代理人'
|
}
|
|
const handlePersonDetail = (id) => {
|
setPersonId(id)
|
setPersonView(true)
|
}
|
|
useEffect(() => {
|
//如果传进数据就不请求了
|
if (props.detailData) {
|
if (Object.keys(props.detailData).length != 0) {
|
handleData(props.detailData)
|
}
|
} else {
|
getCaseInfo(props.caseId)
|
}
|
}, [props.caseId, props.detailData])
|
|
//编辑当事人信息
|
const handleEdit = (value) => {
|
if (value.perType === '15_020008-1' || value.perType === '15_020008-2') {
|
//当事人
|
setAddVisabled(true)
|
} else {
|
//代理人
|
setAgentVisible(true)
|
}
|
setDialogType(value.perType)
|
console.log('value', value);
|
|
setEditData(value)
|
}
|
|
//添加当事人
|
const handleAddParty = (value, isEdit) => {
|
if (isEdit) {
|
//编辑
|
const newList = fakeData.map(item => {
|
if (item.id === value.id) {
|
return value
|
} else {
|
return item
|
}
|
})
|
setFakeData(newList)
|
setEditData(null)
|
} else {
|
setFakeData([...fakeData, {
|
...value
|
}])
|
}
|
}
|
|
//删除当事人
|
const handleDeleteParty = (event, value) => {
|
$$.modalInfo({
|
content: `确定删除${value.trueName}的当事人信息吗？`,
|
onOk: () => {
|
event.stopPropagation();
|
const filterData = fakeData.filter(item => item.id !== value.id)
|
setFakeData(filterData)
|
},
|
});
|
}
|
|
//获取数据
|
const getCaseInfo = async (id) => {
|
const res = await getCaseInfoApi(id)
|
if (res.type) {
|
handleData(res.data)
|
}
|
}
|
|
//数据处理
|
const handleData = (data) => {
|
const partyList = data.personList.concat(data.agentList)
|
setInfoData({
|
...data,
|
questionName: data.queAreaName === null ? '-' : data.queAreaName + (data.queRoadName ? '/' + data.queRoadName : ''),
|
caseType: data.caseTypeFirstName === null ? '-' : data.caseTypeFirstName + '/' + data.caseTypeName
|
})
|
setFakeData(partyList.map(item => {
|
const fileInfoList = item.fileInfoList
|
let file = [];//身份证明材料、企业登记材料
|
let file1 = [];//法人、机构身份证明材料、代理人授权委托书
|
if (fileInfoList && fileInfoList.length != 0) {
|
fileInfoList.forEach(item => {
|
if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
|
item.fileList.forEach(res => {
|
file.push({
|
...res,
|
uid: res.id,
|
})
|
})
|
}
|
if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
|
item.fileList.forEach(res => {
|
file1.push({
|
...res,
|
uid: res.id,
|
})
|
})
|
}
|
})
|
}
|
return {
|
...item,
|
file,
|
file1
|
}
|
}) || [])
|
}
|
|
//小程序是否可见
|
const handleHasAppletState = async (state) => {
|
const res = await updateVisibleStatusApi({ id: props.caseId, partyShow: state ? 1 : 0 })
|
if (res.type) {
|
Message.success('修改成功')
|
}
|
}
|
|
const navigate = useNavigate();
|
|
return (
|
<div style={{ position: 'relative' }}>
|
<Typography.Paragraph>
|
<div className='dataSync-noScrollPage'>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4>
|
</Space>
|
{props.hasApplet && (infoData?.canalName === '大厅来访' || infoData?.canalName === '线上来访') && <div>
|
<Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked onClick={(v) => handleHasAppletState(v)} />
|
</div>
|
}
|
</Col>
|
<div style={{ margin: '16px 0' }}>
|
<PersonCard
|
isCheck={false}
|
data={fakeData}
|
handleEdit={handleEdit}
|
/>
|
</div>
|
<Col span={24} className='title'>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>纠纷基本情况</h4>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
<Col span={8}>
|
<div><div className="title-text">事项状态</div></div>
|
<div style={{ color: '#1A6FB8' }}>{infoData?.statusName || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">事项编号</div></div>
|
<div>{infoData?.caseRef || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">市民编号</div></div>
|
<div>{infoData?.cityCode || '-'}</div>
|
</Col>
|
{/*事项等级分为三级，颜色需要做判断*/}
|
<Col span={8}>
|
<div className="title"><div className="title-text">事项等级</div></div>
|
<div style={{ display: 'flex' }}>
|
<div style={{ backgroundColor: levelColorMap[infoData?.caseLevel], marginRight: '4px', borderRadius: '4px' }}>
|
<div style={{ color: '#FFFFFF', padding: '0px 6px' }}>
|
{infoData?.caseLevel || '-'}
|
</div>
|
</div>级
|
</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">来访时间</div></div>
|
<div>{infoData.visitTime || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">来访人数（人）</div></div>
|
<div>{infoData.visitPeopleNum || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷类型</div></div>
|
<div>{infoData.caseType || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷发生时间</div></div>
|
<div>{infoData.occurTime || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">纠纷发生地点</div></div>
|
<div>{infoData.addr || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">{infoData?.canalSecond === '22_00003-1' ? '纠纷发生辖区' : '问题属地'}</div></div>
|
<div>{infoData.questionName || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">涉及人数（人）</div></div>
|
<div>{infoData.peopleNum || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">涉及金额（元）</div></div>
|
<div>{$$.thousands(infoData.amount) || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">事项来源</div></div>
|
<div>{infoData.canalName || '-'}</div>
|
</Col>
|
{/* <Col span={16}>
|
<div ><div className="title-text">来访形式</div></div>
|
<div>{infoData.visitWayName || '-'}</div>
|
</Col> */}
|
<Col span={24}>
|
<div className="title"><div className="title-text">事项概况</div></div>
|
<div>{infoData.caseDes || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title"><div className="title-text">事项申请</div></div>
|
<div>{infoData.caseClaim || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title"><div className="title-text">事项备注</div></div>
|
<div>{infoData.caseRemark || '-'}</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>
|
{
|
infoData?.canalSecond === '22_00003-1' && <>
|
<Col span={8}>
|
<div className="title"><div className="title-text">上报民警</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[0] || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title"><div className="title-text">上报民警联系电话</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[1] || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title"><div className="title-text">责任民警</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[3] || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title"><div className="title-text">调处人</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[4] || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title"><div className="title-text">调处方案</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[5] || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div className="title"><div className="title-text">风险等级</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[2] || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title"><div className="title-text">前期调处情况</div></div>
|
<div>{infoData?.tcqk?.split('--')?.[6] || '-'}</div>
|
</Col>
|
|
</>
|
}
|
</Row>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
|
</Space>
|
</Col>
|
<FileTable mainId={props.caseId} fileInfoList={infoData.fileInfoList} isReview={true} />
|
{console.log('props', props)}
|
{((props?.windowDetail || props?.gridDetail) && props?.listFeedback?.length != 0) &&
|
(<div style={{ backgroundColor: '#ffff', margin: '0px', paddingBottom: '12px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理记录（{props?.listFeedback?.length}）</h4>
|
</Space>
|
<HandleRecord isReview={true} data={props?.listFeedback} noEdit />
|
</div>)
|
}
|
{(infoData?.canal === '22_00001-1' || infoData?.canal === '22_00001-3') &&
|
<>
|
<Col span={24} style={{ marginTop: '12px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>登记信息</h4>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
{/*事项等级分为三级，颜色需要做判断*/}
|
<Col span={8}>
|
<div className="title"><div className="title-text">登记机构</div></div>
|
<div>{infoData.inputUnitName || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">登记人</div></div>
|
<NameCard2 name={infoData.inputUserName} userId={infoData.inputUserId} />
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">登记时间</div></div>
|
<div>{infoData.createTime || '-'}</div>
|
</Col>
|
</Row>
|
</>
|
}
|
{(!props?.windowDetail && !props?.gridDetail) && (<Button type='primary' style={{ marginTop: '20px' }} onClick={() => navigate(`/mediate/closeCaseEdit?caseId=${infoData.id}`)}>修改</Button>)}
|
</div>
|
</Typography.Paragraph>
|
<PersonCardDialog personView={personView} handleCancel={() => setPersonView(false)} personId={personId} />
|
<Modal
|
title={(editData ? '修改' : '添加') + peopleMap[dialogType]}
|
visible={addVisabled}
|
onOk={() => setAddVisabled(false)}
|
onCancel={() => {
|
setAddVisabled(false)
|
setEditData(null)
|
}}
|
autoFocus={false}
|
focusLock={true}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<ApplyDialog
|
dialogType={dialogType}
|
onClose={() => setAddVisabled(false)}
|
handleAddParty={handleAddParty}
|
editData={editData}
|
mainId={props.mainId}
|
/>
|
</Modal>
|
<Modal
|
title={(editData ? '修改' : '添加') + peopleMap[dialogType]}
|
visible={agentVisible}
|
onOk={() => setAgentVisible(false)}
|
onCancel={() => {
|
setAgentVisible(false)
|
setEditData(null)
|
}}
|
autoFocus={false}
|
focusLock={true}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<AgentDialog
|
handleAddParty={handleAddParty}
|
onClose={() => setAgentVisible(false)}
|
fakeData={fakeData}
|
dialogType={dialogType}
|
editData={editData}
|
mainId={props.mainId}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
