| | |
|---|
| | | const TabPane = Tabs.TabPane; |
|---|
| | | |
|---|
| | | const style = { |
|---|
| | | // textAlign: 'center', |
|---|
| | | // marginTop: 20, |
|---|
| | | // textAlign: 'center', |
|---|
| | | // marginTop: 20, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const MattersInfo = () => { |
|---|
| | | const MattersInfo = (props) => { |
|---|
| | | |
|---|
| | | const [fakeData, setFakeData] = useState([]);//当事人信息数据 |
|---|
| | | const [agentVisible, setAgentVisible] = useState(false); |
|---|
| | | const [dialogType, setDialogType] = useState(0);//添加当事人的类型 |
|---|
| | | const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 |
|---|
| | | const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 |
|---|
| | | const [upload, setUpLoad] = useState(false); |
|---|
| | | const [filesCheck, setFilesCheck] = useState(false); |
|---|
| | | const [active, setActive] = useState('1') |
|---|
| | | const [current, setCurrent] = useState(3); |
|---|
| | | const Step = Steps.Step; |
|---|
| | | const [fakeData, setFakeData] = useState([]);//当事人信息数据 |
|---|
| | | const [agentVisible, setAgentVisible] = useState(false); |
|---|
| | | const [dialogType, setDialogType] = useState(0);//添加当事人的类型 |
|---|
| | | const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 |
|---|
| | | const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 |
|---|
| | | const [upload, setUpLoad] = useState(false); |
|---|
| | | const [filesCheck, setFilesCheck] = useState(false); |
|---|
| | | const Step = Steps.Step; |
|---|
| | | |
|---|
| | | |
|---|
| | | const fakeColumns = [ |
|---|
| | | { |
|---|
| | | title: '序号', |
|---|
| | | dataIndex: 'caseNo', |
|---|
| | | key: 'caseNo', |
|---|
| | | width: 100, |
|---|
| | | render: (text, record, index) => <span>{index + 1}</span>, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '材料类型', |
|---|
| | | dataIndex: 'judicNo', |
|---|
| | | key: 'judicNo', |
|---|
| | | width: 60, |
|---|
| | | 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: 'inputUserName', |
|---|
| | | key: 'perClassName', |
|---|
| | | width: 180, |
|---|
| | | render: (text) => ( |
|---|
| | | <> |
|---|
| | | {text}份 |
|---|
| | | </> |
|---|
| | | ) |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '材料名称', |
|---|
| | | dataIndex: 'perClassName', |
|---|
| | | key: 'perClassName', |
|---|
| | | width: 180, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '材料名称', |
|---|
| | | dataIndex: 'perClassName', |
|---|
| | | key: 'perClassName', |
|---|
| | | width: 180, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '最新上传时间', |
|---|
| | | dataIndex: 'mediateUserName', |
|---|
| | | key: 'mediateUserName', |
|---|
| | | 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 表示系列案 |
|---|
| | | // 更多字段... |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 更多数据... |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | |
|---|
| | | //查看 |
|---|
| | | const handleCheckParty = (value) => { |
|---|
| | | console.log(value); |
|---|
| | | setDialogType(value.partyType) |
|---|
| | | setDetailVisabled(true) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3 |
|---|
| | | const handleAdd = (type) => { |
|---|
| | | if (type === 2 || type === 3) { |
|---|
| | | setAgentVisible(true) |
|---|
| | | } else { |
|---|
| | | setAddVisabled(true) |
|---|
| | | } |
|---|
| | | setDialogType(type) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //删除当事人 |
|---|
| | | const handleDeleteParty = (event, value) => { |
|---|
| | | event.stopPropagation(); |
|---|
| | | const filterData = fakeData.filter(item => item.id !== value.id) |
|---|
| | | setFakeData(filterData) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div style={{ position: 'relative' }}> |
|---|
| | | <Tabs defaultActiveTab='1' onChange={(v) => setActive(v)}> |
|---|
| | | <TabPane |
|---|
| | | key='1' |
|---|
| | | title={ |
|---|
| | | <span> |
|---|
| | | {active === '1' && <img src={Matter} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />} |
|---|
| | | <span style={{ fontSize: '16px' }}>事项详情</span> |
|---|
| | | </span> |
|---|
| | | } |
|---|
| | | |
|---|
| | | > |
|---|
| | | <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={true} |
|---|
| | | partyType={'applicant'} // 这里设定为申请人 |
|---|
| | | data={fakeData} |
|---|
| | | handleCheckParty={handleCheckParty} |
|---|
| | | handleAdd={handleAdd} |
|---|
| | | handleDeleteParty={handleDeleteParty} |
|---|
| | | /> |
|---|
| | | </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' }}>待办理</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={16}> |
|---|
| | | <div><div className="title-text">事项编号</div></div> |
|---|
| | | <div>GZ202408010001</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' }}>3</div></div>级</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={8}> |
|---|
| | | <div><div className="title-text">来访时间</div></div> |
|---|
| | | <div>2024-7-12 10:00</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>市场监管/金融纠纷</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={8}> |
|---|
| | | <div ><div className="title-text">纠纷发生时间</div></div> |
|---|
| | | <div>2024-7-11</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>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> |
|---|
| | | </TabPane> |
|---|
| | | <TabPane |
|---|
| | | key='3' |
|---|
| | | title={ |
|---|
| | | <span> |
|---|
| | | {active === '3' && <img src={transfer} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />} |
|---|
| | | <span style={{ fontSize: '16px' }}>流转办理</span> |
|---|
| | | </span> |
|---|
| | | } |
|---|
| | | > |
|---|
| | | <Typography.Paragraph style={style}> |
|---|
| | | |
|---|
| | | <Handle /> |
|---|
| | | |
|---|
| | | </Typography.Paragraph> |
|---|
| | | </TabPane> |
|---|
| | | </Tabs> |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 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 表示系列案 |
|---|
| | | // 更多字段... |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 更多数据... |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | |
|---|
| | | //查看 |
|---|
| | | const handleCheckParty = (value) => { |
|---|
| | | console.log(value); |
|---|
| | | setDialogType(value.partyType) |
|---|
| | | setDetailVisabled(true) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3 |
|---|
| | | const handleAdd = (type) => { |
|---|
| | | if (type === 2 || type === 3) { |
|---|
| | | setAgentVisible(true) |
|---|
| | | } else { |
|---|
| | | setAddVisabled(true) |
|---|
| | | } |
|---|
| | | setDialogType(type) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //删除当事人 |
|---|
| | | const handleDeleteParty = (event, value) => { |
|---|
| | | event.stopPropagation(); |
|---|
| | | const filterData = fakeData.filter(item => item.id !== value.id) |
|---|
| | | setFakeData(filterData) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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' }}>待办理</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={16}> |
|---|
| | | <div><div className="title-text">事项编号</div></div> |
|---|
| | | <div>GZ202408010001</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' }}>3</div></div>级</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={8}> |
|---|
| | | <div><div className="title-text">来访时间</div></div> |
|---|
| | | <div>2024-7-12 10:00</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>市场监管/金融纠纷</div> |
|---|
| | | </Col> |
|---|
| | | <Col span={8}> |
|---|
| | | <div ><div className="title-text">纠纷发生时间</div></div> |
|---|
| | | <div>2024-7-11</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>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> |
|---|
| | | } |
|---|
| | | { |
|---|
| | | (props.active === '3' && props.current === 3) && <Typography.Paragraph style={style}> |
|---|
| | | <Handle /> |
|---|
| | | </Typography.Paragraph> |
|---|
| | | } |
|---|
| | | </div> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default MattersInfo; |
|---|
