| | |
| | | * @Author: dminyi 1301963064@qq.com |
| | | * @Date: 2024-09-06 09:40:00 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @LastEditTime: 2024-09-11 12:00:20 |
| | | * @LastEditTime: 2024-09-13 10:29:41 |
| | | * @FilePath: \gzDyh\gz-customerSystem\src\views\register\matterDetail\HandleRecord.jsx |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | * @Description: 办理记录 |
| | | */ |
| | | import React, { useState, useEffect } from 'react'; |
| | | import { Empty } from '@arco-design/web-react'; |
| | | import { fold, down, empty, edit } from '@/assets/images'; |
| | | import { fold, down, empty, edit, register } from '@/assets/images'; |
| | | import { Image } from 'antd'; |
| | | import { link } from '@/assets/images'; |
| | | import * as $$ from '@/utils/utility'; |
| | | import PersonCard from './personCard'; |
| | | |
| | | function getByIdRoleApi(id) { |
| | | return $$.ax.request({ url: `ctUser/getByIdRole?id=` + id, type: 'get', service: 'cust' }); |
| | | } |
| | | |
| | | export default function HandleRecord(props) { |
| | | const appUrl = $$.appUrl; |
| | | const [list, setList] = useState([]); |
| | | const [imgVisible, setImgVisible] = useState({ visible: false, src: '' }); |
| | | const [personView, setPersonView] = useState(false) |
| | | const [personData, setPersonData] = useState({}) |
| | | |
| | | useEffect(() => { |
| | | setList(props.data) |
| | |
| | | })); |
| | | }; |
| | | |
| | | const getByIdRole = async (id) => { |
| | | const res = await getByIdRoleApi(id) |
| | | if (res.type) { |
| | | setPersonView(!personView) |
| | | setPersonData(res.data) |
| | | } |
| | | } |
| | | |
| | | const handlePersonDetail = (id) => { |
| | | getByIdRole(id) |
| | | } |
| | | |
| | | const handleCancel=()=>{ |
| | | setPersonView(false) |
| | | } |
| | | |
| | | |
| | | |
| | | const handleEdit = (id) => { |
| | | props.handleEdit(id) |
| | | } |
| | | |
| | | function handleOpenFiles(record) { |
| | | if (record.cat === '22_00017-3') { |
| | | setImgVisible({ visible: true, src: `${appUrl.fileUrl}/${appUrl.sys}${record.showUrl}` }); |
| | | } else if (record.cat === '22_00017-6' || record.cat === '22_00017-1' || record.cat === '22_00017-2') { |
| | | window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${record.id}`); |
| | | } else { |
| | | $$.info({ type: 'warning', content: '抱歉,暂不支持在线查看,已下载请查看' }); |
| | | window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${record.id}`); |
| | | } |
| | | } |
| | | |
| | | |
| | | return ( |
| | | <div> |
| | |
| | | <div> |
| | | {list?.map((record, index) => ( |
| | | <div key={record.id} className='container-bottom-left-record'> |
| | | <div className='container-bottom-left-record-top'> |
| | | <div className='container-bottom-left-record-top' style={{ borderBottom: record.showView ? '1px solid #d9d9d9' : null }}> |
| | | { |
| | | record.showView ? ( |
| | | <img src={down} alt='' style={{ width: '18px', marginRight: '6px', cursor: 'pointer' }} 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> |
| | | {!props.isReview && <div><img src={edit} alt='' className='container-bottom-left-record-top-edit' onClick={() => handleEdit(record)} /></div>} |
| | | {!props.isReview && !props.noEdit && <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> |
| | | <td> |
| | | {record.handleUserName || '-'} |
| | | <img src={register} alt='' onClick={() => handlePersonDetail(record.handleUserId)} style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '-4px' }} /> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th> |
| | | <td>{record.handleContent}</td> |
| | | <td>{record.handleContent || '-'}</td> |
| | | </tr> |
| | | <tr> |
| | | <th bgcolor="#F7F8FA" className="table-title" width="120">办理附件</th> |
| | | <td>{record?.fileInfoList?.[0]?.trueName}</td> |
| | | <div style={{ display: 'none' }}> |
| | | <Image |
| | | src={imgVisible.src} |
| | | preview={{ |
| | | visible: imgVisible.visible, |
| | | src: imgVisible.src, |
| | | onVisibleChange: (value) => setImgVisible({ visible: false }), |
| | | }} |
| | | /> |
| | | </div> |
| | | <td> |
| | | {record?.fileInfoList?.length > 0 ? |
| | | <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: '#1A6FB8' }}> |
| | | <img src={link} alt='' style={{ width: '14px', height: '14px' }} /> |
| | | <div> |
| | | {record?.fileInfoList?.map((item, index) => |
| | | <div key={index} onClick={() => handleOpenFiles(item)} style={{ cursor: 'pointer' }}>{item.name || '-'}{index === record.fileInfoList.length - 1 ? '' : ','}</div> |
| | | )} |
| | | </div> |
| | | </div> : '-' |
| | | } |
| | | |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | |
| | | description='暂无数据' |
| | | /> |
| | | } |
| | | <PersonCard personView={personView} handleCancel={handleCancel} personData={personData} /> |
| | | </div> |
| | | ) |
| | | } |