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

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

@ -1,95 +1,95 @@
import React from 'react'
import { Upload, Icon, Modal } from 'antd';
import "./index.less"
import React from "react";
import { Icon, message, Modal, Upload } from "antd";
import "./index.less";
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
function beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type==="image/png";
if (!isJPG) {
message.error('只允许上传jpg、png类型的图片!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图片大小限制2MB!');
}
return isJPG && isLt2M;
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
if (!isJPG) {
message.error("只允许上传jpg、png类型的图片!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("图片大小限制2MB!");
}
return isJPG && isLt2M;
}
export default class BackgroundUpload extends React.Component {
constructor(props) {
super(props)
this.state = {
showOperate: false,
visible: false
}
}
export default class BackgroundUpload extends React.Component {
constructor(props) {
super(props);
this.state = {
showOperate: 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 }));
}
// 上传完成监听
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);
}
// 删除
handleDelete = () => {
this.props.onChange && this.props.onChange(null);
};
// 预览
handlePreview = () => {
this.setState({visible: true})
}
// 预览
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>
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>
);
}
}

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

@ -1,31 +1,48 @@
.uploadPictureWrapper {
.previewWrapper {
position: relative;
width: 96px;
height: 96px;
border: 1px dashed #d9d9d9;
.previewImg {
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;
}
}
.previewWrapper {
position: relative;
width: 96px;
height: 96px;
border: 1px dashed #d9d9d9;
.previewImg {
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;
}
}
}
.ant-upload {
padding: 0;
line-height: 96px;
& > span {
height: 100%;
.avatar-uploader-trigger {
font-size: 28px;
}
}
}
}