import React, { useState, useEffect } from 'react';
|
import { Row, Col, Space, Button, Switch } from 'antd';
|
import PersonCard from '@/components/personCard';
|
import TableView from '@/components/TableView';
|
import * as $$ from '@/utils/utility';
|
import { Typography, Steps } from '@arco-design/web-react';
|
import { question, register, Matter, transfer } from '@/assets/images'
|
|
function getCaseInfoApi(id) {
|
return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
|
}
|
|
function listIdTypeInfoApi(data) {
|
return $$.ax.request({ url: `fileInfo/listIdTypeInfo`, type: 'post', service: 'sys', data });
|
}
|
|
|
export default function MatterDetail(props) {
|
const [fakeData, setFakeData] = useState([]);//当事人信息数据
|
const [upload, setUpLoad] = useState(false);
|
const [filesCheck, setFilesCheck] = useState(false);
|
const [infoData, setInfoData] = useState({});
|
|
const fakeColumns = [
|
{
|
title: '序号',
|
dataIndex: 'caseNo',
|
key: 'caseNo',
|
width: 100,
|
render: (text, record, index) => <span>{index + 1}</span>,
|
},
|
{
|
title: '材料类型',
|
dataIndex: 'ownerTypeName',
|
key: 'ownerTypeName',
|
width: 60,
|
|
},
|
{
|
title: '材料数量',
|
dataIndex: 'size',
|
key: 'size',
|
width: 180,
|
render: (text) => <span>{text}份</span>,
|
|
},
|
{
|
title: '材料名称',
|
dataIndex: 'fileNames',
|
key: 'fileNames',
|
width: 180,
|
|
},
|
{
|
title: '最新上传时间',
|
dataIndex: 'fileNames',
|
key: 'fileNames',
|
width: 180,
|
|
},
|
{
|
title: '操作',
|
dataIndex: 'perClassName',
|
key: 'perClassName',
|
width: 200,
|
render: (text) => (
|
<div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
|
<div onClick={() => setFilesCheck(true)}>查看</div>
|
<div>删除</div>
|
<div>下载</div>
|
<div onClick={() => setUpLoad(true)}>上传</div>
|
</div>
|
)
|
},
|
// 更多列配置...
|
];
|
|
|
const [fakeData1, setFakeData1] = useState([
|
{
|
ownerTyp: "22_00018-101",
|
ownerTypeName: "申请材料",
|
size: '0',
|
ownerId: null,
|
ownerName: null,
|
perType: null,
|
agentStatus: null,
|
fileNames: "-",
|
fileList: []
|
},
|
{
|
ownerType: "22_00018-102",
|
ownerTypeName: "证据材料",
|
size: '0',
|
ownerId: null,
|
ownerName: null,
|
perType: null,
|
agentStatus: null,
|
fileNames: "-",
|
fileList: []
|
},
|
|
]);
|
|
const listIdTypeInfo = async () => {
|
const res = await listIdTypeInfoApi({
|
mainId: props.id, //事项ID
|
ownerIdList: [props.id], //具体所属编号
|
typeList: []
|
})
|
if (res.type) {
|
let data = res.data?.[0]?.fileList
|
if (res.data.length > 0) {
|
setFakeData1(data)
|
}
|
}
|
}
|
|
useEffect(() => {
|
console.log(props);
|
getCaseInfo(props.id)
|
listIdTypeInfo()
|
}, [props.id])
|
|
//获取id
|
const getCaseInfo = async (id) => {
|
const res = await getCaseInfoApi('24083010062110001')
|
|
if (res.type) {
|
let data = res.data
|
const partyList = data.personList.concat(data.agentList)
|
setInfoData({
|
...data,
|
questionName: data.queProvName === null ? '-' : data.queProvName + '/' + data.queCityName + '/' + data.queAreaName + '/' + data.queRoadName + '/' + data.queVillageName,
|
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') {
|
file.push({
|
name: item.fileList[0].trueName,
|
uid: item.fileList[0].id,
|
})
|
}
|
if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
|
file1.push({
|
name: item.fileList[0].trueName,
|
uid: item.fileList[0].id,
|
})
|
}
|
})
|
}
|
return {
|
...item,
|
file,
|
file1
|
}
|
}))
|
}
|
|
}
|
|
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><h5>当事人信息</h5>
|
</Space>
|
{props.hasApplet && <div>
|
<Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
|
</div>
|
}
|
</Col>
|
<div style={{ margin: '16px 0' }}>
|
<PersonCard
|
isCheck={false}
|
data={fakeData}
|
/>
|
</div>
|
<Col span={24} className='title'>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
|
</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={16}>
|
<div><div className="title-text">事项编号</div></div>
|
<div>{infoData?.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' }}>{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">问题属地</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={16}>
|
<div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
|
<div>{infoData.majorStatus === '0' ? '否' : infoData.majorStatus === '1' ? '是' : '-'}</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><h5>事件材料</h5>
|
</Space>
|
</Col>
|
|
<TableView
|
columns={fakeColumns}
|
dataSource={fakeData1}
|
size="small"
|
rowKey="id"
|
bordered={true}
|
style={{ marginBottom: '20px' }}
|
/>
|
<Col span={24} className='title'>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>登记信息</h5>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
{/*事项等级分为三级，颜色需要做判断*/}
|
<Col span={8}>
|
<div className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
|
<div>{infoData.inputUnitName || '-'}</div>
|
</Col>
|
<Col span={8}>
|
<div><div className="title-text">登记人</div></div>
|
<div style={{ display: 'flex' }}>
|
<div>{infoData.inputUserName || '-'}</div>
|
<img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
|
</div>
|
</Col>
|
<Col span={8}>
|
<div ><div className="title-text">登记时间</div></div>
|
<div>{infoData.createTime || '-'}</div>
|
</Col>
|
</Row>
|
{props.hasEditBtn && <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>}
|
</div>
|
|
</Typography.Paragraph>
|
</div>
|
)
|
}
|
