dev01 пре 2 година
родитељ
комит
0ef4e2073e

+ 24 - 15
js/component/common/imgList/index.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import { Icon, message, Spin, Upload, Progress } from 'antd';
+import { Icon, message, Spin, Upload, Progress, Modal } from 'antd';
 import './index.less';
 import Viewer from 'viewerjs';
 import 'viewerjs/dist/viewer.css';
 import PropTypes from 'prop-types';
-// import PDFView from "../pdfupload";
 import pdfimg from '../../../../image/pdf_logo.png';
 
 const uploadButton = (
@@ -151,15 +150,14 @@ class ImgList extends Component {
                             onPreview={(file) => {
                                 let types = file.name.substr(file.name.lastIndexOf(".") + 1)
                                 if (!!file.type && file.type.split('/')[0] == "application" || types == "pdf") {
-                                    // let url = file.url || file.thumbUrl
-                                    // this.setState({
-                                    //     isPDF: true,
-                                    //     file: url,
-                                    // })
                                     let url = file.response.data.indexOf("/upload") == -1
                                         ? globalConfig.avatarHost + "/upload" + file.response.data
                                         : file.response.data
-                                    window.open(url)
+                                    this.setState({
+                                        isPDF: true,
+                                        file: url,
+                                    })
+                                    // window.open(url)
                                 } else {
                                     if (Object.keys(this.props.uploadConfig).length !== 0) {
                                         //TODO 上传组件,查看图片临时解决方法,无法查看下一张
@@ -260,15 +258,26 @@ class ImgList extends Component {
                     />
                     <div className='promptText'>文件上传中...</div>
                 </div> : <div />}
-                {/* {
+                {
+                    // PDF文件预览弹窗
                     this.state.isPDF &&
-                    <PDFView
-                        fileType="pdf"
+                    <Modal
+                        wrapClassName={"pdfmodal"}
                         visible={this.state.isPDF}
-                        file={this.state.file}
-                        closeFile={() => { this.setState({ isPDF: false }) }}
-                    />
-                } */}
+                        className="admin-desc-content"
+                        footer=""
+                        title=""
+                        width="1200px"
+                        onCancel={() => {
+                            this.setState({
+                                isPDF: false,
+                                file: "",
+                            })
+                        }}
+                    >
+                        <embed src={this.state.file} type="application/pdf" style={{ width: "100%", height: 700 }} />
+                    </Modal>
+                }
             </div>
         )
     }

+ 49 - 24
js/component/common/imgList/index.less

@@ -1,26 +1,30 @@
-.ImgListComponent{
-  .ImgList{
+.ImgListComponent {
+  .ImgList {
     width: 100%;
     display: flex;
     flex-flow: row wrap;
-    .fileItem{
+
+    .fileItem {
       margin: 0 12px 12px 0;
       padding: 8px;
       border-radius: 4px;
       border: 1px solid #d9d9d9;
       position: relative;
-      .imgFile{
+
+      .imgFile {
         width: 100%;
         height: 100%;
         overflow: hidden;
         border-radius: 4px;
       }
     }
-    .flexRowWrap{
+
+    .flexRowWrap {
       display: flex;
       flex-flow: row wrap;
     }
-    .coveringLayer{
+
+    .coveringLayer {
       display: none;
       position: absolute;
       top: 0;
@@ -34,42 +38,48 @@
     }
   }
 
-  .seeMore{
+  .seeMore {
     padding-right: 20px;
     color: #58a3ff;
   }
-  .seeMore:hover{
+
+  .seeMore:hover {
     color: #0e77ca;
     cursor: pointer;
   }
-  .mask{
-    position:fixed;
+
+  .mask {
+    position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 9999999999;
-    background: rgba(0,0,0,.8);
-    display:flex;
-    flex-flow:column;
-    align-items:center;
-    justify-content:center;
-    .progress{
+    background: rgba(0, 0, 0, .8);
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+
+    .progress {
       color: #FFF;
     }
-    .promptText{
+
+    .promptText {
       color: #FFF;
       padding-top: 15px;
     }
   }
 }
-.actionBar{
+
+.actionBar {
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
 }
-.imgModal{
+
+.imgModal {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -79,27 +89,42 @@
   align-items: center;
   justify-content: center;
   z-index: 99999;
-  .floatingLayer{
+
+  .floatingLayer {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 99997;
-    background: rgba(0,0,0,.5);
+    background: rgba(0, 0, 0, .5);
   }
-  .ant-modal-content{
-    background:rgba(0,0,0,0) !important;
+
+  .ant-modal-content {
+    background: rgba(0, 0, 0, 0) !important;
   }
-  .ant-modal-content{
+
+  .ant-modal-content {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
   }
 }
+
 .demandDetailShow-upload {
   .anticon-eye-o {
     margin-left: -8px;
   }
+
   .anticon-delete {
     display: none
   }
+}
+
+.pdfmodal .ant-modal-content {
+  background-color: rgba(255, 255, 255, 0);
+  box-shadow: 0 0;
+
+  .ant-modal-close {
+    background: red;
+    color: #FFF;
+  }
 }

+ 0 - 104
js/component/common/pdfupload/index.jsx

@@ -1,104 +0,0 @@
-import React, { Component } from "react";
-import { Modal, Button } from "antd";
-import "./index.less";
-// import PDF from 'react-pdf-js';
-
-/**
- * PDF上传  2022-08-15
- */
-class PDFView extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      fileState: props.visible,//父类传递的fileState
-      type: props.fileType,//父类传递的fileType
-      page: 1,
-      pages: null,
-    };
-    this.onDocumentComplete = this.onDocumentComplete.bind(this);
-    this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
-    this.onDocumentComplete = this.onDocumentComplete.bind(this);
-    this.handlePrevious = this.handlePrevious.bind(this);
-    this.handleNext = this.handleNext.bind(this);
-
-  }
-
-  componentWillReceiveProps(nextProps) {//props发生变化时执行
-    this.setState({
-      fileState: nextProps.visible,//父类传递的fileState
-      type: nextProps.fileType,//父类传递的fileType
-    })
-  }
-
-  componentDidMount() {
-
-  }
-
-  onDocumentLoadSuccess(numPages) {
-    this.setState({
-      numPages,
-      pageNumber: numPages
-    })
-  }
-
-  //获取所有页
-  onDocumentComplete(pages) {
-    this.setState({ page: 1, pages })
-  }
-  //点击上一页
-  handlePrevious() {
-    this.setState({ page: this.state.page - 1 })
-  }
-  //点击下一页
-  handleNext() {
-    this.setState({ page: this.state.page + 1 })
-  }
-
-
-
-  render() {
-    const { page, pages, type } = this.state;
-    const { file, } = this.props
-    return (<React.Fragment>
-      <Modal
-        title=""
-        visible={this.state.fileState}
-        footer={null}
-        onCancel={this.props.closeFile}
-      >
-        <div>
-          {
-            type == 'pdf' ?
-              <div>
-                <div className={styles.filePdf}>
-                  <PDF
-                    file={file}
-                    onDocumentComplete={this.onDocumentComplete}
-                    page={page}
-                  />
-                </div>
-                <div className={styles.filePdfFooter}>
-                  {page === 1 ?
-                    null
-                    :
-                    <Button type='primary' onClick={this.handlePrevious}>上一页</Button>
-                  }
-                  <div className={styles.filePdfPage}>
-                    <span>第{page}页</span>/<span>共{pages}页</span>
-                  </div>
-                  {page === pages ?
-                    null
-                    :
-                    <Button style={{ marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页</Button>
-                  }
-                </div>
-              </div>
-              : ''
-          }
-        </div>
-      </Modal>
-    </React.Fragment>)
-  }
-}
-
-export default PDFView;

+ 0 - 22
js/component/common/pdfupload/index.less

@@ -1,22 +0,0 @@
-.flieContent{
-  width: 100%;
-  height: calc(100% - 42px);
-}
-.filePdf{
-  width: 100%;
-  height: calc(100% - 84px);
-  display: flex;
-  justify-content: center;
-  overflow: scroll;
-  overflow-x: hidden;
-}
-.filePdfFooter{
-  height: 42px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.filePdfPage{
-  margin: 0 10px;
-}