feat: 工作台时限组件

zhangyongtian

2024-09-11 92e258fd2f911df1e04d81ea847cfacdc7b8b874

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, { useState, useRef, useEffect } from 'react';
import * as $$ from '@/utils/utility';
import { Form, Input, Tabs, Typography, Empty, Radio, Button, Modal } from '@arco-design/web-react';
import { register, fold, down, empty, link, edit } from '@/assets/images';
 
export default function HandleRecord(props) {
  const [formView, setFormView] = useState(false);
  const [list, setList] = useState([]);
 
  useEffect(() => {
    setList(props.data)
  }, [props.data])
 
  const toggleView = (id) => {
    setList(list.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };
 
  const handleEdit = (id) => {
    props.handleEdit(id)
  }
 
  return (
    <div>
      {list?.length > 0 ?
        <div>
          {list?.map(record => (
            <div key={record.id} className='container-bottom-left-record'>
              <div className='container-bottom-left-record-top'>
                {
                  record.showView ? (
                    <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} />
                  ) : (
                    <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} />
                  )
                }
                <div>{`${record.createTime} ${record.handleUnitName}`}</div>
                <div className={`container-bottom-left-record-top-${record.handleType === '2' ? 'remark' : 'hostOrg'}`}>{record.handleType === '2' ? '配合部门' : '承办部门'}</div>
                <div><img src={edit} alt='' className='container-bottom-left-record-top-edit' onClick={() => handleEdit(record)} /></div>
              </div>
              <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}>
                <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'>
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title" width="120">操作人</th>
                    <td>{record.handleUnitName}</td>
                  </tr>
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
                    <td>{record.handleContent}</td>
                  </tr>
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title" width="120">办理附件</th>
                    <td>{record.handleUnitName}</td>
                  </tr>
                </table>
              </div>
            </div>
          ))}
        </div>
        :
        <Empty
          icon={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                marginBottom: '100px'
              }}
            >
              <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
            </div>
          }
          description='暂无数据'
        />
      }
    </div>
  )
}