feat: 办理记录组件

zhangyongtian

2024-09-06 ee7848e5597f688b7f7eecdb10b3e9679dc9c016

feat: 办理记录组件

 gz-customerSystem/src/assets/images/downO.png

 gz-customerSystem/src/assets/images/index.js

@@ -59,6 +59,8 @@
import knock from "./knock.png";
import edit from "./edit.png";
import applyRecord from "./applyRecord.png";
import downO from "./downO.png";
import up from "./up.png";

export {
  ledger_1,
@@ -112,5 +114,7 @@
  examine,
  knock,
  edit,
  applyRecord
  applyRecord,
  downO,
  up
};

 gz-customerSystem/src/assets/images/up.png

 gz-customerSystem/src/views/register/index.less

@@ -85,15 +85,19 @@
    }

    &-file {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: 4px;
        width: 14px;
        height: 14px;
        margin-right: 4px;
        margin-top: 4px;
    }

    &-register {
        width: 12px;
        margin-left: 4px;
    }

    &-downUp {
        width: 24px
    }
}

@@ -559,14 +563,14 @@

    }

    &-info{
    &-info {
        display: flex;

        &-time{
        &-time {
            margin-right: 8px;
        }

        &-detail{
        &-detail {
            color: #1A6FB8;
        }
    }
@@ -585,27 +589,92 @@
    justify-content: center;
    margin-bottom: 24px;

    &-mark{
    &-mark {
        color: rgb(26, 111, 184);
    border: 1px solid rgb(26, 111, 184);
    padding: 0px 8px;
    margin-right: 8px;
        border: 1px solid rgb(26, 111, 184);
        padding: 0px 8px;
        margin-right: 8px;
        border-radius: 4px;
    }

    &-title{
    &-title {
        color: #1D2129;
        font-size: 16px;
        font-weight: 500;
    }
}

.icon{
// width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px'
    &-register{
.icon {

    // width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px'
    &-register {
        width: 14px;
        height: 14px;
        margin-left: 8px;
        margin-top: -2px;
    }
}

.applyInfoClass {
    width: 100%;
    height: 82px;
    background: #ffffff;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 16px;
    position: relative;

    &-title {
        display: flex;
        align-items: center;

        &-txt {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #1d2129;
            line-height: 24px;
            margin-right: 8px;
        }

        &-tag {
            &-1 {
                height: 24px;
                border: 1px solid #00b42a;
                border-radius: 2px;
                padding: 0 8px;
                text-align: center;
                color: #00b42a;
            }

            &-2 {
                height: 24px;
                border: 1px solid #3491FA;
                border-radius: 2px;
                padding: 0 8px;
                text-align: center;
                color: #3491FA;
            }

            &-3 {
                height: 24px;
                border: 1px solid #F53F3F;
                border-radius: 2px;
                padding: 0 8px;
                text-align: center;
                color: #F53F3F;
            }
        }
    }

    &-img {
        position: absolute;
        right: 16px;
        cursor: pointer;
        top: 28px;
    }
}

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

@@ -1,9 +1,73 @@
import React from 'react'
import React, { Fragment, useState } from 'react';
import { register, downO, up } from '@/assets/images';

export default function ApplyInfo(props) {
  const [list, setList] = useState([
    {
      appType: '上报申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 1,
      statusName: '审核通过',
      id: 1,
    },
    {
      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 toggleView = (id) => {
    setList(list.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };

  return (
    <div>
      
    <div style={{ margin: '0 16px' }}>
      <div>
        {list?.map(item => {
          return <div className='applyInfoClass'>
            <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>
            <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>
  )
}