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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| /*
| * @Company: hugeInfo
| * @Author: lwh
| * @Date: 2024-04-08
| * @LastEditTime: 2025-05-20 16:10:39
| * @LastEditors: lwh
| * @Version: 1.0.0
| * @Description: 档案信息组件
| */
| import React, { useState, useEffect } from 'react';
| import { Avatar, Upload, Button } from 'dingtalk-design-mobile';
| import InfoView from './../../../../components/InfoView';
| import MyModal from './../../../../components/MyModal';
| import * as $$ from '../../../../utils/utility';
| import './index.less';
|
| const appUrl = $$.appUrl;
| export const Bysl = (props) => {
| const [data, setData] = useState({});
| const [modalImg, setModalImg] = useState({ visible: false, url: '' });
|
| const onPreview = async (file) => {
| const src = `${appUrl.fileUrl}/${appUrl.sys}/${file.showUrl}`;
| window.open(src);
| // if (file.cat === '22_00017-6') {
| // // 文件预览
| // } else {
| // // 图片文件，使用模态框预览
| // setModalImg({ visible: true, url: src });
| // }
| };
|
| useEffect(() => {
| const applyData = props.data?.fakeData?.filter((item) => item.perType === '15_020008-1' || item.perType === '24_00006-1');
| const appliedData = props.data?.fakeData?.filter((item) => item.perType === '15_020008-2' || item.perType === '24_00006-2');
|
| setData({
| ...props.data,
| applyData,
| appliedData,
| });
| }, [props.data]);
|
| // 渲染上传组件
| const renderUpload = (ownerType) => {
| const fileList = data.fileInfoList || [];
|
| return fileList.length > 0 ? (
| <>
| <Upload
| label=""
| disabled
| onPreview={onPreview}
| fileList={fileList}
| type="form-upload"
| accept="*"
| previewContent="预览"
| showUploadList={{
| showRemoveIcon: false,
| showUploadBtn: false,
| }}
| className="bysl-upload-preview-only"
| />
| <MyModal visible={modalImg.visible} center title="查看图片" onClose={() => setModalImg({ visible: false, url: '' })}>
| <div style={{ height: '1px', width: '100%', backgroundColor: 'rgba(126, 134, 142, 0.16)' }}></div>
| <div style={{ height: '300px' }}>
| <img src={modalImg.url} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
| </div>
| </MyModal>
| </>
| ) : (
| '-'
| );
| };
|
| return (
| <div className="bysl">
| <div className="bysl-info">
| <InfoView
| showButtons={false}
| OnClick={() => {
| console.log('点击编辑');
| }}
| list={[
| {
| type: 'text',
| title: '不予受理部门',
| key: '-',
| },
| {
| type: 'diy',
| title: '不予受理时间',
| value: <div className="bysl-info-time">{data.visitTime || '-'}</div>,
| },
| {
| type: 'diy',
| title: '操作人',
| value: <div className="bysl-info-time">{data.handleUserName} {data.mobile || ''}</div>,
| },
| {
| type: 'text',
| title: '不予受理理由',
| value: 'disContent',
| paddingBottom: true,
| },
| {
| type: 'divider',
| },
| {
| type: 'diy',
| title: '附件材料',
| value: <div className="bysl-info-apply-material">{renderUpload()}</div>,
| },
| {
| type: 'divider',
| },
| ]}
| data={data || {}}
| />
| </div>
| </div>
| );
| };
|
| export default Bysl;
|
|
