选择图片组件选中后再确定

src/compenents/upload-image-button/index.module.less

@@ -18,3 +18,20 @@
   line-height: 30px;
   display: flex;
 }
+
+.checked {
+  width: 16px;
+  height: 16px;
+  background: #ff4d4f;
+  border-radius: 3px;
+  border: 2px solid #ff4d4f;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  cursor: pointer;
+}

src/compenents/upload-image-button/index.tsx

@@ -12,7 +12,7 @@ import {
 import { resource, resourceCategory } from "../../api";
 import styles from "./index.module.less";
 import { CreateResourceCategory } from "../create-rs-category";
-import { CloseOutlined } from "@ant-design/icons";
+import { CloseOutlined, CheckOutlined } from "@ant-design/icons";
 import { UploadImageSub } from "./upload-image-sub";
 import { TreeCategory } from "../../compenents";
 
@@ -49,6 +49,7 @@ export const UploadImageButton = (props: PropsInterface) => {
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(15);
   const [total, setTotal] = useState(0);
+  const [selected, setSelected] = useState<string>("");
 
   // 获取图片列表
   const getImageList = () => {
@@ -97,6 +98,14 @@ export const UploadImageButton = (props: PropsInterface) => {
           open={true}
           width={820}
           maskClosable={false}
+          onOk={() => {
+            if (!selected) {
+              message.error("请选择图片后确定");
+              return;
+            }
+            props.onSelected(selected);
+            setShowModal(false);
+          }}
         >
           <Row style={{ width: 752, minHeight: 520, marginTop: 24 }}>
             <Col span={7}>
@@ -104,7 +113,10 @@ export const UploadImageButton = (props: PropsInterface) => {
                 refresh={false}
                 type="no-cate"
                 text={"图片"}
-                onUpdate={(keys: any) => setCategoryIds(keys)}
+                onUpdate={(keys: any) => {
+                  setSelected("");
+                  setCategoryIds(keys);
+                }}
               />
             </Col>
             <Col span={17}>
@@ -130,10 +142,21 @@ export const UploadImageButton = (props: PropsInterface) => {
                     className="image-item"
                     style={{ backgroundImage: `url(${item.url})` }}
                     onClick={() => {
-                      props.onSelected(item.url);
+                      setSelected(item.url);
-                      setShowModal(false);
                     }}
-                  ></div>
+                  >
+                    {selected.indexOf(item.url) !== -1 && (
+                      <i
+                        className={styles.checked}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelected("");
+                        }}
+                      >
+                        <CheckOutlined />
+                      </i>
+                    )}
+                  </div>
                 ))}
               </div>
               {imageList.length > 0 && (

src/index.less

@@ -614,6 +614,8 @@ textarea.ant-input {
     background-size: contain;
     background-position: center center;
     background-color: #f6f6f6;
+    position: relative;
+    cursor: pointer;
   }
 }