feat: 图片

zhangyongtian

2024-09-13 621a3268a8c2cebf899e3ba824c49a1513cb619b

feat: 图片

 gz-customerSystem/src/components/PreviewImage/index.jsx

New file
@@ -0,0 +1,25 @@
import React, { Fragment, useState } from 'react'
import { Image } from '@arco-design/web-react';
import { link } from '@/assets/images';
import './index.less';
import * as $$ from '@/utils/utility';

const appUrl = $$.appUrl;

export default function PreviewImage(props) {
  const [visible, setVisible] = useState(false)
  const { name, src, ...rest } = props
  return (
    <Fragment>
      <div style={{ display: 'none' }}>
        <Image.Preview
          src={`${appUrl.fileUrl}/${appUrl.sys}${src}`}
          visible={visible}
          onVisibleChange={setVisible}
          {...rest}
        />
      </div>
      <div onClick={() => { setVisible(true) }} style={{color: '#1a6fb8', cursor: 'pointer', display: 'inline-block'}}><img src={link} alt="" className="title-file" />{name}</div>
    </Fragment>
  )
}

 gz-customerSystem/src/components/PreviewImage/index.less

New file
@@ -0,0 +1,6 @@
.title-file {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  margin-top: -2px;
}

 gz-customerSystem/src/components/personCard/DetailDialog.jsx

@@ -2,6 +2,7 @@
import KeyVisits from "./KeyVisits";
import { link } from '@/assets/images';
import { Scrollbars } from "react-custom-scrollbars";
import PreviewImage from '../PreviewImage';

export default function DetailDialog(props) {
  const nuturalList = [
@@ -326,9 +327,14 @@
            ...res,
            value: <>
              {data[res.field]?.map(item => {
                return <a target="_blank">
                  <img src={link} alt="" className="title-file" />{item.name}
                </a>
                console.log(item);
                if(item.response) {
                  //新上传的，前端数据
                  const data = item.response.data[0]
                  return <PreviewImage name={data.name} src={data.showUrl} />
                } else {
                  return <PreviewImage name={item.name} src={item.showUrl} />
                }
              })}
            </>
          }

 gz-customerSystem/src/views/register/eventFlow/component/EscalationModel.jsx

@@ -116,10 +116,10 @@
            <Col span={24}>
              <FormItem
                label='上报至'
                field='trueName'
                field='name'
              >
                <div className='myTag' >
                  <img src={escalation} alt="" className="title-file" />白云区综治中心
                  <img src={escalation} alt="" className="title-file" />{unitData.auditUnitName}
                </div>
              </FormItem>
            </Col>

 gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx

@@ -38,18 +38,12 @@
            })
            if (res.type) {
              $$.infoSuccess({ content: '受理成功！' });
              navigate('/mediate/visit/visitWorkBench')
              navigate(`/mediate/visit/handleFeedback?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}`)
            }
          },
        });
      },
      key: 'sl',
    },
    {
      label: '提交',
      type: 'primary',
      click: () => { },
      key: 'tj',
    },
    {
      label: '自行受理',

 gz-customerSystem/src/views/register/eventFlow/component/Examine.jsx

@@ -133,7 +133,7 @@
                {infoData?.fileInfoList?.map(res => {
                  return res.fileList.map((result, resIndex) => {
                    return <a href="your-link-here.html" target="_blank">
                      <img src={link} alt="" className="title-file" />{result.trueName}
                      <img src={link} alt="" className="title-file" />{result.name}
                      {resIndex !== res.fileList.length - 1 && <>，</>}
                    </a>
                  })

 gz-customerSystem/src/views/register/handleFeedback/component/AuditView.jsx

@@ -175,7 +175,14 @@
                      action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.caseId}&ownerId=${id}&ownerType=22_00018-509`,
                    }}
                    field='file'
                    label='附件材料'
                    label={
                      <div>
                        附件材料
                        <Tooltip>
                          <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '-3px 4px 0px 4px' }} />
                        </Tooltip>
                      </div>
                    }
                    handleDelFile={handleDelFile}
                  />
                </Col>

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

@@ -571,7 +571,7 @@
      },
      tabList: [
        {
          value: '0',
          value: '2',
          label: '办理中',
          columns: [
            {
@@ -650,7 +650,7 @@
          ]
        },
        {
          value: '1',
          value: '0',
          label: '结案申请',
          columns: [
            {
@@ -722,7 +722,7 @@
          ]
        },
        {
          value: '2',
          value: '1',
          label: '已结案',
          columns: [
            {
@@ -1151,7 +1151,7 @@
        break;
      case '4'://办理中
        const { status, ...most } = searchData
        if (status && status === '0') {
        if (status && status === '2') {
          res = await pageMyTaskBlzApi({
            ...pageData,
            ...most
@@ -1208,7 +1208,7 @@
      setSearchData({
        sortType: 1,
        sortColmn: 1,
        status: '0',
        status: '2',
      })
    } else {
      setSearchData({

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

@@ -108,7 +108,7 @@
        background-color: #fff;
        margin: 0px 8px 0px 16px;
        padding: 12px 16px 16px 16px;
        height: calc(100vh - 228px);
        height: calc(100vh - 231px);
        overflow-y: scroll;
    }


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

@@ -167,13 +167,13 @@
          return {
            ...item,
            size: applyFile.fileList.length,
            fileNames: applyFile.fileList?.map(item => item.trueName).join('，'),
            fileNames: applyFile.fileList?.map(item => item.name).join('，'),
            updateTime: $$.timeFormat(applyFile.fileList[applyFile.fileList.length - 1].updateTime),
            fileList: applyFile.fileList.map(item => {
              return {
                ...item,
                uid: item.id,
                name: item.trueName
                // name: item.trueName
              }
            })
          }
@@ -182,13 +182,13 @@
          return {
            ...item,
            size: evidenceFile.fileList.length,
            fileNames: evidenceFile.fileList?.map(item => item.trueName).join('，'),
            fileNames: evidenceFile.fileList?.map(item => item.name).join('，'),
            updateTime: $$.timeFormat(evidenceFile.fileList[evidenceFile.fileList.length - 1].updateTime),
            fileList: evidenceFile.fileList.map(item => {
              return {
                ...item,
                uid: item.id,
                name: item.trueName
                // name: item.trueName
              }
            })
          }
@@ -226,12 +226,12 @@
        return {
          ...item,
          size: data.length,
          fileNames: data.map(item => item.trueName).join('，'),
          fileNames: data.map(item => item.name).join('，'),
          updateTime: $$.timeFormat(data[data.length - 1].updateTime),
          fileList: data.map(item => {
            return {
              ...item,
              name: item.trueName,
              // name: item.trueName,
              uid: item.id,
            }
          }),

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

@@ -82,7 +82,7 @@
    console.log(res);
    if (res.type) {
      if (res.data) {
        setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList?.map(item => item.trueName) })
        setTransactResult({ ...res.data })
      } else {
        setTransactResult(null)
      }

 gz-customerSystem/src/views/register/visit/component/previewTable.jsx

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { person, link } from '@/assets/images'
import { person1 } from '@/assets/images/icon'

import PreviewImage from '@/components/PreviewImage';



@@ -52,10 +52,10 @@
                  item.fileInfoList?.map(res => {
                    if (res.ownerType == "22_00018-202") {
                      return res.fileList.map((result, resIndex) => {
                        return <a href="your-link-here.html" target="_blank">
                          <img src={link} alt="" className="title-file" />{result.trueName}
                        return <div style={{display: 'inline-block'}}>
                          <PreviewImage name={result.name} src={result.showUrl} />
                          {resIndex !== res.fileList.length - 1 && <>，</>}
                        </a>
                        </div>
                      })
                    }
                  })

 gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx

@@ -58,13 +58,13 @@
        fileInfoList.forEach(item => {
          if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
            file.push({
              name: item.fileList[0].trueName,
              ...item.fileList[0],
              uid: item.fileList[0].id,
            })
          }
          if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
            file1.push({
              name: item.fileList[0].trueName,
              ...item.fileList[0],
              uid: item.fileList[0].id,
            })
          }

 gz-customerSystem/src/views/register/visit/preview.jsx

@@ -12,6 +12,7 @@
import { ApplyDialog, AgentDialog, Respondent, Company } from './component/previewTable'
import FileTable from "../matterDetail/FileTable";
import { link } from '@/assets/images';
import PreviewImage from '@/components/PreviewImage';

const Preview = (props) => {
  const [data, setData] = useState({})
@@ -221,10 +222,11 @@
            <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
            <td colspan='3'>
              {props.transactResult?.fileInfoBaseDTOList?.map((item, index) => {
                return <a href="your-link-here.html" target="_blank">
                  <img src={link} alt="" className="title-file" />{item.trueName}
                  {index !== props.transactResult.fileInfoBaseDTOList.length - 1 && <>，</>}
                </a>
                console.log(item);
                return <div style={{ display: 'inline-block' }}>
                  <PreviewImage name={item.name} src={item.showUrl} />
                  {index !== props.transactResult?.fileInfoBaseDTOList.length - 1 && <>，</>}
                </div>
              })}
            </td>
          </tr>