合并冲突

zhangyongtian

2024-09-08 f7452b9d6295748c9840245d26df6514e8ed2c1d

 gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx

@@ -1,9 +1,164 @@
import React from 'react'
import React, { Fragment, useState } from 'react';
import { register, downO, up, link } from '@/assets/images';
import { Row, Col, Space } from 'antd';

export default function ApplyInfo(props) {
  const [list, setList] = useState([
    {
      appType: '上报申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 1,
      statusName: '审核通过',
      id: 1,
      fileInfo: '上报至白云区综治中心的说明材料.pdf',
    },
    {
      appType: '结案申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 2,
      statusName: '审核中',
      id: 2,
    },
    {
      appType: '回退申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 3,
      statusName: '审核不通过',
      id: 3,
    }
  ]);

  const map = {
    '上报申请': [
      [{
        value: 'subTitle',
        label: '申请信息',
      },
      {
        value: 'bumen',
        label: '上报至',
      },
      {
        value: 'opinion',
        label: '上报意见',
      },
      {
        value: 'fileInfo',
        label: '附件材料',
      },
      {
        value: 'shijian',
        label: '申请时间',
      },
      {
        value: 'people',
        label: '申请人',
      },
    ],
      [
        {
          value: 'subTitle',
          label: '审核信息',
        },
        {
          value: 'statusName',
          label: '审核结果',
          color: '#00B42A'
        },
        {
          value: 'people',
          label: '理由说明',
        },
        {
          value: 'fileInfo',
          label: '附件材料',
        },
        {
          value: 'shijian',
          label: '审核时间',
        },
        {
          value: 'people',
          label: '审核人',
        },
      ]
    ]
  }

  const toggleView = (id) => {
    setList(list.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };

  const handleDom = (data, item) => {
    console.log(data);
    if (data.value === 'subTitle') {
      return <Col span={24} key={data.value}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>{data.label}</h5>
        </Space>
      </Col>
    } else if (data.label === '附件材料') {
      return <Col span={24} key={data.value}>
        <div><div className="title-text">{data.label}</div></div>
        <div style={{ color: '#1A6FB8' }}><img src={link} alt="" className="title-file" />{item[data.value] || '-'}</div>
      </Col>
    } else {
      return <Col span={24} key={data.value}>
        <div><div className="title-text">{data.label}</div></div>
        <div style={{ color: data.color }}>{item[data.value] || '-'}</div>
      </Col>
    }
  }

  return (
    <div>
      
    <div style={{ margin: '0 16px' }}>
      <div>
        {list?.map(item => {
          return <div className='applyInfoClass' style={{ background: item.showView ? '#eff8ff' : '#fff' }} key={item.id}>
            <div className='applyInfoClass-img' onClick={() => { toggleView(item.id) }}>
              <img src={item.showView ? up : downO} alt="" className="title-downUp" />
            </div>
            <div className='applyInfoClass-title'>
              <div className='applyInfoClass-title-txt'>{item.appType}</div>
              <div className={`applyInfoClass-title-tag-${item.status}`} >{item.statusName}</div>
            </div>
            {item.showView ? <div>
              {
                map[item.appType]?.map((res, index) => {
                  return <Row gutter={[16, 16]} key={index}>
                    {res.map(data => {
                      return handleDom(data, item)
                    })}
                  </Row>
                })
              }
            </div> : <div>
              <span style={{ marginRight: '32px' }}>
                <span style={{ color: '#86909C' }}>申请时间：</span><span>{item.time}</span>
              </span>
              <span style={{ marginRight: '8px' }}>
                <span style={{ color: '#86909C' }}>申请人：</span><span>{item.addr}</span>
              </span>
              <span><span>{item.people}<img src={register} alt="" className="title-register" /></span></span>
            </div>}

          </div>
        })}
      </div>
    </div>
  )
}