forked from gzzfw/frontEnd/gzDyh

liuwh
2024-09-17 5aa4a814ab8d4aa194a9683ebefaefdfc6d92c3a
gz-customerSystem/src/views/register/matterDetail/index.jsx
@@ -1,170 +1,70 @@
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'
import { Typography } from '@arco-design/web-react';
import { question, register } from '@/assets/images';
import FileTable from "./FileTable";
function getCaseInfoApi(id) {
  return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
  return $$.ax.request({ url: '/caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
}
export default function MatterDetail(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 [fakeData, setFakeData] = useState([]);//当事人信息数据
  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 表示系列案
      // 更多字段...
    },
    // 更多数据...
  ];
  useEffect(() => {
    console.log(props);
    getCaseInfo(props.caseId)
  }, [props.caseId])
  //获取id
  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
  const getCaseInfo = async (id) => {
    const res = await getCaseInfoApi(props.caseId)
    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,
        questionName: data.queAreaName === null ? '-' : data.queAreaName + '/' + data.queRoadName,
        caseType: data.caseTypeFirstName === null ? '-' : data.caseTypeFirstName + '/' + data.caseTypeName
      })
      setFakeData(data.personList.concat(data.agentList))
      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
        }
      }) || [])
    }
  }
  // useEffect(() => {
  //   getCaseInfo()
  // }, [])
  return (
    <div style={{ position: 'relative' }}>
@@ -173,7 +73,7 @@
          <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4>
            </Space>
            {props.hasApplet && <div>
              <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
@@ -188,7 +88,7 @@
          </div>
          <Col span={24} className='title'>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>纠纷基本情况</h4>
            </Space>
          </Col>
          <Row gutter={[16, 16]}>
@@ -255,47 +155,43 @@
            </Col>
            <Col span={16}>
              <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
              <div>{infoData.majorStatus === '0' ? '否' : '是'}</div>
              <div>{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>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
            </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>}
          <FileTable mainId={props.caseId} fileInfoList={infoData.fileInfoList} isReview={true} />
          {infoData?.canal === '22_00001-1' &&
            <>
              <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><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>