30470 录取通知书模板设置功能优化

one_stop_public/libs/ImgUploadCom.jsx

 import React from 'react';
-import {Upload, message} from 'antd';
+import { Upload, message, Badge, Icon } from 'antd';
 import config from '@/webPublic/one_stop_public/config';
-import {zipImage} from "@/webPublic/zyd_public/utils/handlePhoto";
+import { zipImage } from '@/webPublic/zyd_public/utils/handlePhoto';
 import { getToken } from '@/webPublic/one_stop_public/utils/token';
 import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
 
@@ -14,7 +14,7 @@ export default class ImgUploadCom extends React.Component {
     };
   }
 
-  triggerChange = changedValue => {
+  triggerChange = (changedValue) => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
     if (onChange) {
@@ -26,7 +26,7 @@ export default class ImgUploadCom extends React.Component {
     // Should be a controlled component.
     if ('value' in nextProps) {
       const value = nextProps.value;
-      this.setState({url: value});
+      this.setState({ url: value });
     }
   }
 
@@ -35,23 +35,34 @@ export default class ImgUploadCom extends React.Component {
       message.success(`图片上传成功`);
 
       if (!('value' in this.props)) {
-        this.setState({url: info.file.response});
+        this.setState({ url: info.file.response });
       }
       this.triggerChange(info.file.response);
     } else if (info.file.status === 'error') {
       message.error(`图片上传失败`);
     }
   };
-  changePos = obj => {
+  changePos = (obj) => {
     if (!('value' in this.props)) {
-      this.setState({...obj});
+      this.setState({ ...obj });
     }
-    this.triggerChange({...obj});
+    this.triggerChange({ ...obj });
+  };
+
+  removePicture = (e) => {
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    this.triggerChange('');
   };
 
   render() {
-    const {json, disabled} = this.props;
-    const {url} = this.state;
+    const {
+      json,
+      disabled
+    } = this.props;
+    const { url } = this.state;
     return (
       <Upload.Dragger
         disabled={disabled}
@@ -64,25 +75,37 @@ export default class ImgUploadCom extends React.Component {
           token: getToken(),
         }}
         beforeUpload={(file) => {
-        return zipImage(file, 4);
-        // 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30%  如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围
-        // 禅道bug 23185
+          return zipImage(file, 4);
+          // 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30%  如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围
+          // 禅道bug 23185
         }}
         showUploadList={false}
         name="file"
         action={config.uploadUrl}
         onChange={this.changeUrl}
         multiple={false}
-        style={{padding: 0}}
-      >
+        style={{ padding: 0 }}>
         {url ? (
-          <img src={queryFileUrl(url)} style={{
-            height: json.height,
-            width: json.width,
-            maxWidth: '60vw', // 解决图片在移动端过宽的bug
-          }}/>
+          <Badge count={<Icon type="close-circle"
+                              style={{ color: 'red' }}
+                              onClick={this.removePicture}
+          />}>
+            <img
+              src={queryFileUrl(url)}
+              style={{
+                height: json.height,
+                width: json.width,
+                maxWidth: '60vw', // 解决图片在移动端过宽的bug
+              }}
+            />
+          </Badge>
         ) : (
-          <div style={{height: json.height, width: json.width}}/>
+          <div
+            style={{
+              height: json.height,
+              width: json.width,
+            }}
+          />
         )}
       </Upload.Dragger>
     );