diff --git a/src/compenents/upload-image-button/index.module.less b/src/compenents/upload-image-button/index.module.less index 8874736..4084585 100644 --- a/src/compenents/upload-image-button/index.module.less +++ b/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; +} diff --git a/src/compenents/upload-image-button/index.tsx b/src/compenents/upload-image-button/index.tsx index a6a8521..3fb13c9 100644 --- a/src/compenents/upload-image-button/index.tsx +++ b/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(""); // 获取图片列表 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); + }} > @@ -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); + }} /> @@ -130,10 +142,21 @@ export const UploadImageButton = (props: PropsInterface) => { className="image-item" style={{ backgroundImage: `url(${item.url})` }} onClick={() => { - props.onSelected(item.url); - setShowModal(false); + setSelected(item.url); }} - > + > + {selected.indexOf(item.url) !== -1 && ( + { + e.stopPropagation(); + setSelected(""); + }} + > + + + )} + ))} {imageList.length > 0 && ( diff --git a/src/index.less b/src/index.less index 019888e..5b5c90e 100644 --- a/src/index.less +++ b/src/index.less @@ -614,6 +614,8 @@ textarea.ant-input { background-size: contain; background-position: center center; background-color: #f6f6f6; + position: relative; + cursor: pointer; } }