forked from gzzfw/frontEnd/gzDyh

xusd
2024-09-13 466f59f771bc9306079728ba4363f4b204d5beca
gz-customerSystem/src/views/register/matterDetail/HandleRecord.jsx
@@ -2,18 +2,28 @@
 * @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, useRef, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import { Empty } from '@arco-design/web-react';
import { fold, down, empty, edit, register } from '@/assets/images';
import { Image } from 'antd';
import { link } from '@/assets/images';
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';
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 [formView, setFormView] = useState(false);
  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)
@@ -31,41 +41,96 @@
    }));
  };
  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>
      {list?.length > 0 ?
        <div>
          {list?.map((record,index) => (
          {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' }} onClick={() => toggleView(record.id)} />
                    <img src={down} alt='' style={{ width: '18px', marginRight: '6px', cursor: 'pointer' }} 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>
                {!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>
@@ -88,6 +153,7 @@
          description='暂无数据'
        />
      }
      <PersonCard personView={personView} handleCancel={handleCancel} personData={personData} />
    </div>
  )
}