From db2fc4ba2e862b40879532bc8a644ff0de7b247f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Fri, 3 Feb 2023 11:24:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E8=B5=84=E5=8D=95=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=83=8C=E6=99=AF=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../payroll/components/backgroundUpload.js    | 164 +++++++++---------
 .../pages/payroll/components/index.less       |  75 ++++----
 2 files changed, 128 insertions(+), 111 deletions(-)

diff --git a/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js b/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
index 0b8bcb35..da0bcf43 100644
--- a/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
+++ b/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
@@ -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>
-        );
-      }
-  }
\ No newline at end of file
+            :
+            <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>
+    );
+  }
+}
diff --git a/pc4mobx/hrmSalary/pages/payroll/components/index.less b/pc4mobx/hrmSalary/pages/payroll/components/index.less
index aec5737a..38191bdb 100644
--- a/pc4mobx/hrmSalary/pages/payroll/components/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/components/index.less
@@ -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%;
     }
-}
\ No newline at end of file
+
+    .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;
+      }
+    }
+  }
+}