事项详情接口

dminyi

2024-08-31 2ce6364f53a85623c9c2a99e9fcf58d4e8a2530c

 gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx

@@ -2,339 +2,338 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 11:31:01
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-28 14:41:24
 * @LastEditTime: 2024-08-31 15:32:42
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\MattersInfo.jsx
 * @Description: 事项详情
 */

import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import PersonCard from '@/components/personCard'
import { Row, Col, Space, Button, Switch } from 'antd';
import TableView from '@/components/TableView'
import { question, register, Matter, transfer } from '../../../../assets/images'
import * as $$ from '@/utils/utility';
import { Tabs, Typography, Steps } from '@arco-design/web-react';
import { Typography, Steps } from '@arco-design/web-react';
import "@arco-themes/react-gzzz/css/arco.css";
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle'
const TabPane = Tabs.TabPane;
import Handle from './handle';
import EventFlow from './secondWanderStep/EventFlow';

const style = {
    // textAlign: 'center',
    // marginTop: 20,
  // textAlign: 'center',
  // marginTop: 20,
};

const MattersInfo = () => {

    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 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}份
                </>
            )
function getCaseInfoApi(id) {
  return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
}


        },
        {
            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 表示系列案
            // 更多字段...
        },

        // 更多数据...
    ];
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 handleCheckParty = (value) => {
        console.log(value);
        setDialogType(value.partyType)
        setDetailVisabled(true)
    }
  const fakeColumns = [
    {
      title: '序号',
      dataIndex: 'caseNo',
      key: 'caseNo',
      width: 100,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '材料类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
      width: 60,

    //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3
    const handleAdd = (type) => {
        if (type === 2 || type === 3) {
            setAgentVisible(true)
        } else {
            setAddVisabled(true)
        }
        setDialogType(type)
    }
    },
    {
      title: '材料数量',
      dataIndex: 'inputUserName',
      key: 'perClassName',
      width: 180,
      render: (text) => (
        <>
          {text}份
        </>
      )

    //删除当事人
    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>
                    }
    },
    {
      title: '材料名称',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 180,

                >
                    <Typography.Paragraph style={style}>
                        <div className='dataSync-page'>
    },
    {
      title: '最新上传时间',
      dataIndex: 'mediateUserName',
      key: 'mediateUserName',
      width: 180,

                            <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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];

  //获取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>
      }
      {
        (props.active === '2' && props.current === 3) && <Typography.Paragraph style={style}>
          <Handle />
        </Typography.Paragraph>
      }
      {
        (props.active === '2' && props.current === 2) && <EventFlow />
      }
    </div>
  )
}

export default MattersInfo;