fix:品类图片删除、属性值过滤输入

src/components/UploadImage/index.less

@@ -4,6 +4,7 @@
 
   .size_require {
     color: #97A0AF;
+    margin-left: 24px;
   }
 
   .upload_btn {
@@ -11,7 +12,6 @@
     width: 104px;
     height: 104px;
     display: flex;
-    margin-right: 24px;
     align-items: center;
     justify-content: center;
     color: #6B778C;
@@ -26,6 +26,11 @@
       border: 1px dashed rgba(223, 225, 230, 1);
     }
 
+    &.large {
+      width: 175px;
+      height: 120px;
+    }
+
     &>img {
       height: 100%;
       width: auto;
@@ -33,17 +38,41 @@
       margin: 0 auto;
     }
 
-    .img_box {
-      width: 104px;
-      height: 104px;
-      background-size: auto 100%;
-      background-repeat: no-repeat;
-      background-position: center center;
+    &>p {
+      margin-top: 12px;
+    }
+  }
+
+  // 删除效果
+  .delete_wrap {
+    display: none;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 2px;
 
+    .delete_btn {
+      color: #fff;
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%, -50%);
     }
+  }
 
-    &>p {
-      margin-top: 12px;
+  .upload_wrap{
+    position: relative;
+    width: 104px;
+    height: 104px;
+
+    &:hover {
+      .delete_wrap {
+        display: block;
+      }
     }
   }
+
 }
\ No newline at end of file

src/components/UploadImage/index.tsx

 import React, { useState, Fragment, forwardRef } from 'react'
-import { Upload, message } from 'antd'
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import { Upload, message, Button } from 'antd'
+import { LoadingOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'
 import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
 import cx from 'classnames'
 import styles from './index.less'
@@ -10,21 +10,24 @@ interface UploadImagePorpsType {
   size?: string;
   onChange: Function;
   disabled?: boolean;
+  large?: boolean;
+  fileMaxSize?: number;
+  showDesc?: boolean
 }
 
 const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
-  const { imgUrl, onChange, size = "386x256", disabled = false } = props
+  const { imgUrl, onChange, showDesc = true, size = "386x256", disabled = false, large = false, fileMaxSize = 200 } = props
   const [loading, setLoading] = useState<boolean>(false)
   const beforeUpload = (file: UploadFile) => {
     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
     if (!isJpgOrPng) {
       message.error('仅支持上传JPEG/JPG/PNG文件!');
     }
-    const isLt200k = file.size / 1024 < 200;
-    if (!isLt200k) {
-      message.error('上传图片不超过200K!');
+    const isSizeLimit = file.size / 1024 < fileMaxSize;
+    if (!isSizeLimit) {
+      message.error(`上传图片不超过${fileMaxSize}K!`);
     }
-    return isJpgOrPng && isLt200k;
+    return isJpgOrPng && isSizeLimit;
   }
 
   const uploadProps = {
@@ -54,6 +57,10 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
     beforeUpload
   };
 
+  const clearImage = () => {
+    onChange('')
+  }
+
   const uploadButton = (
     <Fragment>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
@@ -63,16 +70,24 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
 
   return (
     <div className={styles.upload_image_wrap}>
-      <Upload {...uploadProps}>
-        {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "")}>
-          {
-            imgUrl ? <div className={styles.img_box} style={{ backgroundImage: `url(${imgUrl})` }} ></div> : uploadButton
-          }
-        </div>}
-      </Upload>
-      <div className={styles.size_require}>
-        <p>支持JPG/PNG/JPEG， <br />最大不超过 200K， <br />尺寸：{size}</p>
+      <div className={styles.upload_wrap}>
+        <Upload {...uploadProps}>
+          {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "", large ? styles.large : '')}>
+            {
+              imgUrl ? <img src={imgUrl} /> : uploadButton
+            }
+          </div>}
+        </Upload>
+        {
+          imgUrl && <div className={styles.delete_wrap}><Button onClick={clearImage} className={styles.delete_btn} type="text" icon={<DeleteOutlined />} /></div>
+        }
       </div>
+      {
+        showDesc && 
+        <div className={styles.size_require}>
+          <p>支持JPG/PNG/JPEG， <br />最大不超过 {fileMaxSize}K， <br />尺寸：{size}</p>
+        </div>
+      }
     </div>
   )
 })

src/pages/classAndProperty/class/index.tsx

@@ -74,6 +74,7 @@ const ClassProperty: React.FC<{}> = () => {
       setNodeRecord(undefined)
       // 保存后要将是否填写过表单设为false
       setIsEditForm(false)
+      flag = false
     })
   }
 
@@ -125,8 +126,6 @@ const ClassProperty: React.FC<{}> = () => {
                           setIsEditForm(true)
                           flag = false
                         }
-                        else 
-                          flag = true
                       })
                     }}
                     schema={classSchema}

src/pages/classAndProperty/propertyValue/index.tsx

@@ -23,7 +23,7 @@ const formActions = createFormActions()
 const treeActions = createTreeActions()
 
 const fetchAttributeTreeData = async (params?) => {
-  const res = await PublicApi.getProductPlatformGetAttributeTree()
+  const res = await PublicApi.getProductPlatformGetAttributeTree({filterInput: true})
   return res
 }