Skip to content

W
WebPublic
提交 6f157c3f authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

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

上级 7d04a3f0
隐藏空白字符变更
内嵌 并排
正在显示 包含 212 行增加 和 233 行删除
one_stop_public/filePreview/index.jsx
浏览文件 @ 6f157c3f
...@@ -60,6 +60,8 @@ export default class index extends Component { ...@@ -60,6 +60,8 @@ export default class index extends Component {
type = Array.isArray(type) && type.length && type[type.length - 1]; type = Array.isArray(type) && type.length && type[type.length - 1];
} }
// return null;
return ( return (
<> <>
{isShow ? ( {isShow ? (
......
one_stop_public/libs/UploadCom.js
浏览文件 @ 6f157c3f
// 图片上传组件
import React from 'react'; import React from 'react';
import {Button, Icon, message, Modal, Upload} from 'antd'; import { Button, Icon, message, Modal, Upload } from 'antd';
import {queryApiActionPath} from '../utils/queryConfig'; import { queryApiActionPath } from '../utils/queryConfig';
import config from '@/webPublic/one_stop_public/config'; import config from '@/webPublic/one_stop_public/config';
import styles from './style.less'; import styles from './style.less';
import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy'; 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({ message.config({
top: 300, top: 300,
}) });
export function checkIsImage(path) { export function checkIsImage(path) {
if (!path) { if (!path) {
return false; return false;
} }
let p = path.toLowerCase(); 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 path.indexOf(x) > -1;
}); });
return !!find; return !!find;
} }
export default function index(props) { export default function index(props) {
if (window.location.href.indexOf('jy/geren/subsidy') > -1) { if (window.location.href.indexOf('jy/geren/subsidy') > -1) {
return <UploadComDiyForQnZy {...props} />; return <UploadComDiyForQnZy {...props} />;
} else { } else {
return <UploadCom {...props} />; return <UploadCom {...props} />;
} }
} }
/** /**
...@@ -43,218 +45,202 @@ export default function index(props) { ...@@ -43,218 +45,202 @@ export default function index(props) {
* */ * */
class UploadCom extends React.Component { class UploadCom extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value || {}; const value = props.value || {};
this.state = { this.state = {
files: value.files, files: value.files,
previewVisible: false, previewVisible: false,
previewImage: '', previewImage: '',
}; };
this.otherProps = {}; this.otherProps = {};
if (props.json?.otherProps) { if (props.json?.otherProps) {
this.otherProps = props.json?.otherProps; this.otherProps = props.json?.otherProps;
try { try {
this.otherProps = new Function(this.otherProps)(); this.otherProps = new Function(this.otherProps)();
// console.log(this.otherProps); // console.log(this.otherProps);
} catch (e) { } catch (e) {}
} }
} }
}
triggerChange = changedValue => { triggerChange = (changedValue) => {
// Should provide an event to pass value to Form. // Should provide an event to pass value to Form.
const onChange = this.props.onChange; const onChange = this.props.onChange;
if (onChange) { if (onChange) {
onChange(Object.assign({}, this.state, changedValue)); onChange(Object.assign({}, this.state, changedValue));
} }
}; };
//图片上传之前进行判断 //图片上传之前进行判断
beforeUpload = file => { beforeUpload = (file) => {
return this.isSize(file).then(res => { return this.isSize(file).then((res) => {
message.info('正在上传中,请等待'); message.info('正在上传中,请等待');
return true; return true;
}); });
}; };
//检测尺寸 //检测尺寸
isSize = file => { isSize = (file) => {
const {limitWarnningMessage} = this.otherProps; const { limitWarnningMessage } = this.otherProps;
return new Promise((resolve, reject) => { 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 _URL = window.URL || window.webkitURL;
let img = new Image(); let img = new Image();
img.onload = function () { img.onload = function() {
let valid = img.width >= width && img.height >= height; let valid = img.width >= width && img.height >= height;
if(!!widthMinusHeight && valid){ 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)) {
// widthMinusHeight: number// 限制必须高度大于宽度
valid = false;
}
}
}
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
message.error(file.name + limitWarnningMessage);
return Promise.reject();
},
);
};
if(widthMinusHeight > 0){ componentWillReceiveProps(nextProps) {
if((img.width - img.height) < widthMinusHeight){ // Should be a controlled component.
// widthMinusHeight: number// 限制必须宽度大于高度 且 宽度 - 高度 >= widthMinusHeight if ('value' in nextProps) {
valid = false; const value = nextProps.value;
} this.setState(value);
} }
if(widthMinusHeight < 0){ }
if((img.height - img.width) < Math.abs(widthMinusHeight)){
// widthMinusHeight: number// 限制必须高度大于宽度
valid = false;
}
}
} changeUrl = (info) => {
valid ? resolve() : reject(); if (info.file.status === 'done') {
}; message.success(`${info.file.name} 上传成功`);
img.src = _URL.createObjectURL(file); const files = this.state.files;
}).then( files.push({ path: info.file.response, name: info.file.name });
() => { if (!('value' in this.props)) {
return file; this.setState({ files });
}, }
() => { this.triggerChange({ files });
message.error( } else if (info.file.status === 'error') {
file.name + limitWarnningMessage, message.error(`${info.file.name} 上传失败`);
); }
return Promise.reject(); };
}, remove = (path) => {
); const files = this.state.files;
}; for (var i = 0; i < files.length; i++) {
if (files[i].path == path) {
files.splice(i, 1);
break;
}
}
if (!('value' in this.props)) {
this.setState({ files });
}
this.triggerChange({ files });
};
componentWillReceiveProps(nextProps) { render() {
// Should be a controlled component. const { files, previewVisible, previewImage, previewImageName } = this.state;
if ('value' in nextProps) { const { isMultiple, accept, btnName, disabled } = this.props;
const value = nextProps.value; const props = {
this.setState(value); name: 'file',
} multiple: isMultiple,
} accept: accept,
action: config.uploadUrl,
changeUrl = info => { showUploadList: false,
if (info.file.status === 'done') { onChange: this.changeUrl,
message.success(`${info.file.name} 上传成功`); beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
const files = this.state.files; };
files.push({path: info.file.response, name: info.file.name}); return (
if (!('value' in this.props)) { <div>
this.setState({files}); {' '}
} <Upload {...props} disabled={disabled}>
this.triggerChange({files}); {!disabled && (
} else if (info.file.status === 'error') { <>
message.error(`${info.file.name} 上传失败`); <Button>
} <Icon type="upload" />
}; {btnName ? btnName : '上传附件'}
remove = path => { </Button>
const files = this.state.files; {this.otherProps?.limitImageInfo && <div>{this.otherProps?.limitImageInfo}</div>}
for (var i = 0; i < files.length; i++) { </>
if (files[i].path == path) { )}
files.splice(i, 1); </Upload>
break; <ul className={styles.ulImageList}>
} {((Array.isArray(files) && files) || []).map((f) => {
} // console.log(f);
if (!('value' in this.props)) { if (f.path && checkIsImage(f.path)) {
this.setState({files}); return (
} <li key={f.path} className={styles.preview_img}>
this.triggerChange({files}); <div className={styles.preview_div}>
}; <img
style={{ width: '100px', height: 'auto' }}
render() { className={styles.img}
const {files, previewVisible, previewImage} = this.state; src={queryApiActionPath() + f.path}
const {isMultiple, accept, btnName, disabled} = this.props; />
const props = { <div
name: 'file', className={styles.mask}
multiple: isMultiple, onClick={() => {
accept: accept, // window.open(queryApiActionPath() + f.path);
action: config.uploadUrl, this.setState({
showUploadList: false, previewImage: queryApiActionPath() + f.path,
onChange: this.changeUrl, previewImageName : f.name,
beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
};
return (
<div>
{' '}
<Upload {...props} disabled={disabled}>
{!disabled && (
<>
<Button>
<Icon type="upload"/>
{btnName ? btnName : '上传附件'}
</Button>
{
this.otherProps?.limitImageInfo &&
<div>
{this.otherProps?.limitImageInfo}
</div>
}
</>
)}
</Upload>
<ul className={styles.ulImageList}>
{(Array.isArray(files) && files || []).map(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'}}
className={styles.img}
src={queryApiActionPath() + f.path}
/>
<div
className={styles.mask}
onClick={() => {
// window.open(queryApiActionPath() + f.path);
this.setState({
previewVisible: true, previewVisible: true,
previewImage: queryApiActionPath() + f.path,
}); });
}} }}>
> <Icon type="eye" className={styles.icon_eye} />
<Icon type="eye" className={styles.icon_eye}/> </div>
</div> </div>
</div> {!disabled && (
{!disabled && ( <Icon
<Icon style={{ marginLeft: 10 }}
style={{marginLeft: 10}} type="delete"
type="delete" onClick={this.remove.bind(this, f.path)}
onClick={this.remove.bind(this, f.path)} />
/> )}
)} </li>
</li> );
); }
} return (
return ( <li key={f.path}>
<li key={f.path}> <a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}> {f.name}
{f.name} </a>{' '}
</a>{' '} {!disabled && (
{!disabled && ( <Icon
<Icon style={{ marginLeft: 10 }}
style={{marginLeft: 10}} type="delete"
type="delete" onClick={this.remove.bind(this, f.path)}
onClick={this.remove.bind(this, f.path)} />
/> )}
)} </li>
</li> );
); })}
})} </ul>
</ul> <Viewer
<Modal visible={previewVisible}
visible={previewVisible} onClose={() => {
footer={null} this.setState({ previewVisible: false });
getContainer={getContainer} }}
onCancel={() => this.setState({previewVisible: false})} images={[
width={'90vw'} {
> src: previewImage,
<div style={{ alt: previewImageName,
textAlign: 'center', },
width: '100%', ]}
}}> />
<img alt="example" style={{ </div>
maxWidth: '1200px', );
maxHeight: '700px', }
height: 'auto',
}} src={previewImage}/>
</div>
</Modal>
</div>
);
}
} }
one_stop_public/tableCompon/index.jsx
浏览文件 @ 6f157c3f
...@@ -2100,15 +2100,6 @@ export default class tableCom extends Component { ...@@ -2100,15 +2100,6 @@ export default class tableCom extends Component {
cm = ( cm = (
<ul className={styles.imageUl}> <ul className={styles.imageUl}>
{files.map((f, index2) => { {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) { if (get === 'web' && !this.props.isPrint) {
return ( return (
<li key={index2}> <li key={index2}>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论