23680 求职创业补贴---，详情页资预览料图片可以自由缩放大小

one_stop_public/filePreview/index.jsx

@@ -60,6 +60,8 @@ export default class index extends Component {
       type = Array.isArray(type) && type.length && type[type.length - 1];
     }
 
+    // return null;
+
     return (
       <>
         {isShow ? (

one_stop_public/libs/UploadCom.js

+// 图片上传组件
 import React from 'react';
-import {Button, Icon, message, Modal, Upload} from 'antd';
-import {queryApiActionPath} from '../utils/queryConfig';
+import { Button, Icon, message, Modal, Upload } from 'antd';
+import { queryApiActionPath } from '../utils/queryConfig';
 import config from '@/webPublic/one_stop_public/config';
 import styles from './style.less';
 import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy';
-import {getContainer} from "@/webPublic/one_stop_public/utils/utils";
+import { getContainer } from '@/webPublic/one_stop_public/utils/utils';
+import Viewer from 'react-viewer';
 
 message.config({
 	top: 300,
-})
+});
 
 export function checkIsImage(path) {
 	if (!path) {
 		return false;
 	}
 	let p = path.toLowerCase();
-  let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find(x => {
+	let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find((x) => {
 		return path.indexOf(x) > -1;
 	});
 	return !!find;
@@ -57,12 +59,11 @@ class UploadCom extends React.Component {
 			try {
 				this.otherProps = new Function(this.otherProps)();
 				// console.log(this.otherProps);
-      } catch (e) {
-      }
+			} catch (e) {}
 		}
 	}
 
-  triggerChange = changedValue => {
+	triggerChange = (changedValue) => {
 		// Should provide an event to pass value to Form.
 		const onChange = this.props.onChange;
 		if (onChange) {
@@ -71,37 +72,35 @@ class UploadCom extends React.Component {
 	};
 
 	//图片上传之前进行判断
-  beforeUpload = file => {
-    return this.isSize(file).then(res => {
+	beforeUpload = (file) => {
+		return this.isSize(file).then((res) => {
 			message.info('正在上传中,请等待');
 			return true;
 		});
 	};
 
 	//检测尺寸
-  isSize = file => {
-    const {limitWarnningMessage} = this.otherProps;
+	isSize = (file) => {
+		const { limitWarnningMessage } = this.otherProps;
 		return new Promise((resolve, reject) => {
-      let {width, height, widthMinusHeight} = this.otherProps.limitImageSize;
+			let { width, height, widthMinusHeight } = this.otherProps.limitImageSize;
 			let _URL = window.URL || window.webkitURL;
 			let img = new Image();
-      img.onload = function () {
+			img.onload = function() {
 				let valid = img.width >= width && img.height >= height;
-        if(!!widthMinusHeight && valid){
-
-          if(widthMinusHeight > 0){
-            if((img.width - img.height) < widthMinusHeight){
+				if (!!widthMinusHeight && valid) {
+					if (widthMinusHeight > 0) {
+						if (img.width - img.height < widthMinusHeight) {
 							// widthMinusHeight: number// 限制必须宽度大于高度 且 宽度 - 高度 >= widthMinusHeight
 							valid = false;
 						}
 					}
-          if(widthMinusHeight < 0){
-            if((img.height - img.width) < Math.abs(widthMinusHeight)){
+					if (widthMinusHeight < 0) {
+						if (img.height - img.width < Math.abs(widthMinusHeight)) {
 							// widthMinusHeight: number// 限制必须高度大于宽度
 							valid = false;
 						}
 					}
-
 				}
 				valid ? resolve() : reject();
 			};
@@ -111,9 +110,7 @@ class UploadCom extends React.Component {
 				return file;
 			},
 			() => {
-        message.error(
-          file.name + limitWarnningMessage,
-        );
+				message.error(file.name + limitWarnningMessage);
 				return Promise.reject();
 			},
 		);
@@ -127,20 +124,20 @@ class UploadCom extends React.Component {
 		}
 	}
 
-  changeUrl = info => {
+	changeUrl = (info) => {
 		if (info.file.status === 'done') {
 			message.success(`${info.file.name} 上传成功`);
 			const files = this.state.files;
-      files.push({path: info.file.response, name: info.file.name});
+			files.push({ path: info.file.response, name: info.file.name });
 			if (!('value' in this.props)) {
-        this.setState({files});
+				this.setState({ files });
 			}
-      this.triggerChange({files});
+			this.triggerChange({ files });
 		} else if (info.file.status === 'error') {
 			message.error(`${info.file.name} 上传失败`);
 		}
 	};
-  remove = path => {
+	remove = (path) => {
 		const files = this.state.files;
 		for (var i = 0; i < files.length; i++) {
 			if (files[i].path == path) {
@@ -149,14 +146,14 @@ class UploadCom extends React.Component {
 			}
 		}
 		if (!('value' in this.props)) {
-      this.setState({files});
+			this.setState({ files });
 		}
-    this.triggerChange({files});
+		this.triggerChange({ files });
 	};
 
 	render() {
-    const {files, previewVisible, previewImage} = this.state;
-    const {isMultiple, accept, btnName, disabled} = this.props;
+		const { files, previewVisible, previewImage, previewImageName } = this.state;
+		const { isMultiple, accept, btnName, disabled } = this.props;
 		const props = {
 			name: 'file',
 			multiple: isMultiple,
@@ -165,7 +162,6 @@ class UploadCom extends React.Component {
 			showUploadList: false,
 			onChange: this.changeUrl,
 			beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
-
 		};
 		return (
 			<div>
@@ -174,26 +170,22 @@ class UploadCom extends React.Component {
 					{!disabled && (
 						<>
 							<Button>
-              <Icon type="upload"/>
+								<Icon type="upload" />
 								{btnName ? btnName : '上传附件'}
 							</Button>
-              {
-                this.otherProps?.limitImageInfo &&
-                <div>
-                  {this.otherProps?.limitImageInfo}
-                </div>
-              }
+							{this.otherProps?.limitImageInfo && <div>{this.otherProps?.limitImageInfo}</div>}
 						</>
 					)}
 				</Upload>
 				<ul className={styles.ulImageList}>
-          {(Array.isArray(files) && files || []).map(f => {
+					{((Array.isArray(files) && files) || []).map((f) => {
+					  // console.log(f);
 						if (f.path && checkIsImage(f.path)) {
 							return (
 								<li key={f.path} className={styles.preview_img}>
 									<div className={styles.preview_div}>
 										<img
-                      style={{width: '100px', height: 'auto'}}
+											style={{ width: '100px', height: 'auto' }}
 											className={styles.img}
 											src={queryApiActionPath() + f.path}
 										/>
@@ -202,17 +194,17 @@ class UploadCom extends React.Component {
 											onClick={() => {
 												// window.open(queryApiActionPath() + f.path);
 												this.setState({
-                          previewVisible: true,
 													previewImage: queryApiActionPath() + f.path,
+                          previewImageName : f.name,
+                          previewVisible: true,
                         });
-                      }}
-                    >
-                      <Icon type="eye" className={styles.icon_eye}/>
+											}}>
+											<Icon type="eye" className={styles.icon_eye} />
 										</div>
 									</div>
 									{!disabled && (
 										<Icon
-                      style={{marginLeft: 10}}
+											style={{ marginLeft: 10 }}
 											type="delete"
 											onClick={this.remove.bind(this, f.path)}
 										/>
@@ -227,7 +219,7 @@ class UploadCom extends React.Component {
 								</a>{' '}
 								{!disabled && (
 									<Icon
-                    style={{marginLeft: 10}}
+										style={{ marginLeft: 10 }}
 										type="delete"
 										onClick={this.remove.bind(this, f.path)}
 									/>
@@ -236,24 +228,18 @@ class UploadCom extends React.Component {
 						);
 					})}
 				</ul>
-    <Modal
+					<Viewer
 						visible={previewVisible}
-      footer={null}
-      getContainer={getContainer}
-      onCancel={() => this.setState({previewVisible: false})}
-      width={'90vw'}
-    >
-      <div style={{
-        textAlign: 'center',
-        width: '100%',
-      }}>
-      <img alt="example" style={{
-        maxWidth: '1200px',
-        maxHeight: '700px',
-        height: 'auto',
-      }} src={previewImage}/>
-      </div>
-    </Modal>
+						onClose={() => {
+							this.setState({ previewVisible: false });
+						}}
+						images={[
+							{
+								src: previewImage,
+								alt: previewImageName,
+							},
+						]}
+					/>
 			</div>
 		);
 	}

one_stop_public/tableCompon/index.jsx

@@ -2100,15 +2100,6 @@ export default class tableCom extends Component {
               cm = (
                 <ul  className={styles.imageUl}>
                   {files.map((f, index2) => {
-                    // if (f.path.indexOf('.png') != -1 || f.path.indexOf('.jpg') != -1) {
-                    //   return (
-                    //     <img
-                    //       key={index2}
-                    //       style={{ width: 100, height: 100 }}
-                    //       src={queryApiActionPath() + f.path}
-                    //     />
-                    //   );
-                    // }
                     if (get === 'web' && !this.props.isPrint) {
                       return (
                         <li key={index2}>