From b4852614f236f932c135bec0c1bda727ca5dc3b4 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 31 Aug 2024 15:58:36 +0800
Subject: [PATCH] 抽离事项详情
---
gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx | 289 +--------------------------------------------------------
1 files changed, 5 insertions(+), 284 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx b/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx
index 72eeb62..c256a02 100644
--- a/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx
@@ -18,6 +18,7 @@
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle';
import EventFlow from './secondWanderStep/EventFlow';
+import MatterDetali from '../../matterDetail';
const style = {
// textAlign: 'center',
@@ -32,297 +33,17 @@
const MattersInfo = (props) => {
- const [fakeData, setFakeData] = useState([{
- "trueName": "王大锤",
- "mobile": "13380313412",
- "certiType": "09_00015-1",
- "certiTypeName": "身份证",
- "certiNo": "440981199902025123",
- "perType": "15_020008-1",
- "perClass": "09_01001-1",
- "perTypeName": "申请方当事人",
- "perClassName": "自然人",
- "id": "24083010053310002"
- }, {
- "trueName": "刘俊峰",
- "mobile": "13380313412",
- "certiType": "09_00015-1",
- "certiTypeName": "身份证",
- "certiNo": "440981199902023234",
- "perType": "15_020008-2",
- "perClass": "09_01001-1",
- "perTypeName": "被申请方当事人",
- "perClassName": "自然人",
- "id": "24083010054710003"
- }]);//当事人信息数据
- 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: 'judicNo',
- key: 'judicNo',
- width: 60,
-
- },
- {
- title: '材料数量',
- dataIndex: 'inputUserName',
- key: 'perClassName',
- width: 180,
- render: (text) => (
- <>
- {text}份
- </>
- )
-
-
- },
- {
- title: '材料名称',
- dataIndex: 'perClassName',
- key: 'perClassName',
- width: 180,
-
- },
- {
- title: '最新上传时间',
- dataIndex: 'mediateUserName',
- key: 'mediateUserName',
- 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 = [
- {
- id: 1,
- caseNo: 'A20230101',
- judicNo: '申请材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 2,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
-
- // 更多数据...
- ];
-
- //获取id
- const getCaseInfo = async () => {
- const res = await getCaseInfoApi('24083010062110001')
- if (res.type) {
- let data = res.data
- setInfoData([...fakeData1, {
- ...data,
- // status:
- // data.status === '1' ? '待签收' :
- // data.status === '2' ? '待受理' :
- // data.status === '3' ? '办理中' :
- // data.status === '4' ? '结案审核' :
- // data.status === '5' ? '待评价' :
- // data.status === '6' ? '已归档' : '未知状态'
- }])
-
- setInfoData(res.data)
- }
- }
-
- useEffect(() => {
- getCaseInfo()
- }, [])
+
+
return (
<div style={{ position: 'relative' }}>
{props.active === '1' &&
- <Typography.Paragraph style={style}>
- <div className='dataSync-page'>
-
- <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>
- <div>
- <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
- </div>
- </Col>
- <div style={{ margin: '16px 0' }}>
- <PersonCard
- isCheck={false}
- data={fakeData}
- />
- </div>
- <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
- <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.caseId || '-'}</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.caseTypeFirstName}/{infoData.caseTypeName}</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>广州市天河区中山七路康王柏德来商业城</div>
- </Col>
- <Col span={8}>
- <div ><div className="title-text">问题属地</div></div>
- {/* <div>{queProvName}/{queCityName}/{queAreaName}/{queRoadName}</div> */}
- </Col>
- <Col span={8}>
- <div ><div className="title-text">涉及人数（人）</div></div>
- <div>2</div>
- </Col>
- <Col span={8}>
- <div ><div className="title-text">涉及金额（元）</div></div>
- <div>{$$.thousands(20000)}</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>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
- </Col>
- <Col span={24}>
- <div className="title"><div className="title-text">事项申请</div></div>
- <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
- </Col>
- <Col span={16}>
- <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
- <div>否</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} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
- <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>天河区棠下街道综治中心</div>
- </Col>
- <Col span={8}>
- <div><div className="title-text">登记人</div></div>
- <div style={{ display: 'flex' }}>
- <div>李晓明</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>2024-7-8 10:00</div>
- </Col>
- </Row>
- <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
- </div>
-
- </Typography.Paragraph>
+ <MatterDetali />
}
{
(props.active === '2' && props.current === 3) && <Typography.Paragraph style={style}>
--
Gitblit v1.8.0