qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工资单模板上传背景组件的样式修改

This commit is contained in:
黎永顺 2023-02-03 11:24:17 +08:00
parent 5a73aee25b
commit db2fc4ba2e
2 changed files with 128 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
View File

@ -1,95 +1,95 @@
import React from 'react' import React from "react";
import { Upload, Icon, Modal } from 'antd'; import { Icon, message, Modal, Upload } from "antd";
import "./index.less" import "./index.less";
function getBase64(img, callback) { function getBase64(img, callback) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result)); reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img); reader.readAsDataURL(img);
} }
function beforeUpload(file) { function beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type==="image/png"; const isJPG = file.type === "image/jpeg" || file.type === "image/png";
if (!isJPG) { if (!isJPG) {
message.error('只允许上传jpg、png类型的图片!'); message.error("只允许上传jpg、png类型的图片!");
} }
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) { if (!isLt2M) {
message.error('图片大小限制2MB!'); message.error("图片大小限制2MB!");
} }
return isJPG && isLt2M; return isJPG && isLt2M;
} }
export default class BackgroundUpload extends React.Component { export default class BackgroundUpload extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
showOperate: false, showOperate: false,
visible: false visible: false
} };
}
// 上传完成监听
handleChange = (info) => {
if (info.file.status === 'done') {
this.props.onChange && this.props.onChange(info.file.response.data.acclink)
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
}
}
// 删除
handleDelete = () => {
this.props.onChange && this.props.onChange(null);
}
// 预览
handlePreview = () => {
this.setState({visible: true})
}
render() {
const props = {
action: '/api/doc/upload/uploadFile',
multiple: false,
listType: "picture-card",
showUploadList: false,
onChange: this.handleChange.bind(this)
};
const { imageUrl } = this.props;
return (
<div className="uploadPictureWrapper">
{
(imageUrl || imageUrl == "") ?
<div className="previewWrapper" onMouseEnter={() => {
this.setState({showOperate: true})
}} onMouseLeave={() => {
this.setState({showOperate: false})
}}>
<img src={imageUrl} alt="" className="previewImg"/>
{
this.state.showOperate && <div className="operateWrapper">
<i className="icon-coms-Supervise operateIcon" onClick={() => {
this.handlePreview()
}}/>
<i className="icon-coms-Delete operateIcon" onClick={() => {
this.handleDelete()
}}/>
</div>
}
</div>
:
<Upload {...props}>
<Icon type="plus" className="avatar-uploader-trigger" />
</Upload>
}
<Modal visible={this.state.visible} width={600} footer={null} onCancel={() => {
this.setState({visible: false})
}} >
<div style={{width: "100%", textAlign: "center"}}>
<img src={imageUrl}/>
</div>
</Modal>
</div>
);
}
} }
// 上传完成监听
handleChange = (info) => {
if (info.file.status === "done") {
this.props.onChange && this.props.onChange(info.file.response.data.acclink);
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
}
};
// 删除
handleDelete = () => {
this.props.onChange && this.props.onChange(null);
};
// 预览
handlePreview = () => {
this.setState({ visible: true });
};
render() {
const props = {
action: "/api/doc/upload/uploadFile",
multiple: false,
listType: "picture-card",
showUploadList: false,
onChange: this.handleChange.bind(this)
};
const { imageUrl } = this.props;
return (
<div className="uploadPictureWrapper">
{
(imageUrl || imageUrl == "") ?
<div className="previewWrapper" onMouseEnter={() => {
this.setState({ showOperate: true });
}} onMouseLeave={() => {
this.setState({ showOperate: false });
}}>
<img src={imageUrl} alt="" className="previewImg"/>
{
this.state.showOperate && <div className="operateWrapper">
<i className="icon-coms-Supervise operateIcon" onClick={() => {
this.handlePreview();
}}/>
<i className="icon-coms-Delete operateIcon" onClick={() => {
this.handleDelete();
}}/>
</div>
}
</div>
:
<Upload {...props}>
<Icon type="plus" className="avatar-uploader-trigger"/>
</Upload>
}
<Modal visible={this.state.visible} width={600} footer={null} onCancel={() => {
this.setState({ visible: false });
}}>
<div style={{ width: "100%", textAlign: "center" }}>
<img src={imageUrl} alt=""/>
</div>
</Modal>
</div>
);
}
}

73
pc4mobx/hrmSalary/pages/payroll/components/index.less
View File

@ -1,31 +1,48 @@
.uploadPictureWrapper { .uploadPictureWrapper {
.previewWrapper { .previewWrapper {
position: relative; position: relative;
width: 96px; width: 96px;
height: 96px; height: 96px;
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
.previewImg {
width: 100%; .previewImg {
height: 100%; width: 100%;
} height: 100%;
.operateWrapper {
position: absolute;
width: 96px;
height: 90px;
top: 0;
left: 0;
line-height: 96px;
z-index: 100;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
.operateIcon {
margin-right: 20px;
cursor: pointer;
}
.operateIcon:last-child {
margin-right: 0px;
}
}
} }
.operateWrapper {
position: absolute;
width: 96px;
height: 90px;
top: 0;
left: 0;
line-height: 96px;
z-index: 100;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
.operateIcon {
margin-right: 20px;
cursor: pointer;
}
.operateIcon:last-child {
margin-right: 0px;
}
}
}
.ant-upload {
padding: 0;
line-height: 96px;
& > span {
height: 100%;
.avatar-uploader-trigger {
font-size: 28px;
}
}
}
} }