fix

src/components/FileBoxAD/components/moveTo/index.tsx

@@ -0,0 +1,71 @@
+import { editMediaFolder } from "@/services/launchAdq/material"
+import { Form, message, Modal, Select } from "antd"
+import React, { useState } from "react"
+import { useModel } from "umi"
+
+
+interface Props {
+    catalogueData: any[]
+    isAll: boolean
+    visible?: boolean
+    onChange?: () => void
+    onClose?: () => void
+}
+/**
+ * 移动至
+ * @returns 
+ */
+const MoveTo: React.FC<Props> = ({ isAll, visible, onClose, catalogueData = [] }) => {
+
+    /*****************************/
+    const { state, list } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
+    const { selectFile, mediaType, belongUser } = state
+    const [form] = Form.useForm();
+    const [loading, setLoading] = useState<boolean>(false)
+    /*****************************/
+
+    const handleOk = () => {
+        form.validateFields().then(values => {
+            if (selectFile && selectFile?.length > 0) {
+                let hide = message.loading('移动至。。。', 0)
+                setLoading(true)
+                let ajax = selectFile.map(id => editMediaFolder({ sysMediaId: id, folderId: values.folderId, mediaType: mediaType as any }))
+                Promise.all(ajax).then(res => {
+                    console.log('移动至。。。', res);
+                    if (res[0]?.data) {
+                        list.refresh()
+                        setLoading(false)
+                        hide()
+                        message.success('移动成功')
+                        onClose?.()
+                    }
+                })
+            }
+        })
+    }
+
+    return <Modal
+        title="移动至"
+        visible={visible}
+        onCancel={() => onClose?.()}
+        onOk={handleOk}
+        confirmLoading={loading}
+    >
+        <Form
+            form={form}
+            labelCol={{ span: 4 }}
+            className='ad_form_style'
+            colon={false}
+            initialValues={{}}
+        >
+            <Form.Item label={<strong>文件夹</strong>} name='folderId' rules={[{ required: true, message: '请选择文件夹' }]}>
+                <Select style={{ width: 380 }} placeholder='请选择'>
+                    {[{ title: belongUser == 1 ? '个人本地' : '公共本地', id: 0 }, ...catalogueData]?.map((item) => <Select.Option value={item.id} key={item.id}>{item.title}</Select.Option>)}
+                </Select>
+            </Form.Item>
+        </Form>
+    </Modal>
+}
+
+
+export default React.memo(MoveTo)

src/components/FileBoxAD/components/tree/index.tsx

@@ -49,7 +49,7 @@ function TreeBox(props: { data: any[], belongUser: any }): any {
         <Tree
             treeData={arr}
             showIcon
-            // draggable
+            draggable
             blockNode
             defaultExpandAll={true}
             autoExpandParent={true}

src/components/FileBoxAD/index.less

@@ -434,6 +434,7 @@
     opacity: 1;
   }
 }
+
 .maskClass {
   background-color: transparent;
 
@@ -442,4 +443,13 @@
     padding: 4px 10px;
     border-radius: 6px;
   }
+}
+
+
+.moveSelected {
+  position: fixed;
+  top: 0;
+  left: 0;
+  border: 1px dashed #2783F5;
+  pointer-events: none;
 }

src/components/FileBoxAD/index.tsx

@@ -9,6 +9,7 @@ import TreeBox from "./components/tree"
 import SortModal from "./components/fileModal/sortModal"
 import { EyeOutlined } from "@ant-design/icons"
 import ImgsModal from "./components/imgsModal"
+import MoveTo from "./components/moveTo"
 
 interface News {
     id: number,
@@ -62,15 +63,35 @@ function FlieBox(props: Props) {
     const [listData, setListData] = useState<any>({})
     const [showImg, setShowImg] = useState(-1)
 
+    /********************************/
+    let moveSelected = document.getElementById("moveSelected"); // 选区
+    let fileContent = document.getElementById("file_content"); // 内容区
+    const [startPoint, setStartPoint] = useState({ x: 0, y: 0, flag: false }); // 记录鼠标开始按下坐标 flag 是否开启拖拽
+    const [isSelect, setIsSelect] = useState<boolean>(false)  // 记录是否框选过素材
+    const [sourceList, setSourceList] = useState<any>({})
+    const [moveShow, setMoveShow] = useState<boolean>(false)
+    /********************************/
+
+    // 处理数据
+    useEffect(() => {
+        let newList = {}
+        listData?.records?.forEach((item: { id: number }) => {
+            newList[item.id] = JSON.parse(JSON.stringify(item))
+        })
+        setSourceList(newList)
+    }, [listData?.records])
+
     // 获取数据
     useEffect(() => {
         setListData(list?.data)
     }, [list, mediaType])
+
     /**复制编号 */
     const copyId = useCallback((e: React.MouseEvent<HTMLSpanElement, MouseEvent>, value: string) => {
         e.stopPropagation()//阻止冒泡传递到文件夹被点击事件
         copy(value)
     }, [])
+
     /**全局右键菜单 */
     const Menu = useCallback((props: { isItem?: boolean }) => {
         if (props.isItem && isAll) {
@@ -87,7 +108,8 @@ function FlieBox(props: Props) {
                 <li onClick={() => { set({ actionItem: rightClickPup, sortVisible: true }) }}>编辑排序</li>
                 <li onClick={() => { set({ fileVisible: true }) }}>新建文件夹</li>
                 <li onClick={() => { set({ imgVisrible: true }) }}>新建素材</li>
-                <li onClick={(e) => { delPupOn(rightClickPup.id); onFile(e, rightClickPup, isAll, true) }} style={{ color: 'red' }}> 删除</li>
+                {isAll && selectFile && selectFile?.length > 0 && <li onClick={() => { setMoveShow(true) }}>移动至</li>}
+                <li onClick={(e) => { delPupOn(rightClickPup.id); onFile(e, rightClickPup, isAll, true) }} style={{ color: 'red' }}>删除</li>
                 {isAll && selectFile && selectFile?.length > 0 && <li onClick={dels} style={{ color: 'red' }}>删除选中文件</li>}
             </ul>
         }
@@ -178,12 +200,112 @@ function FlieBox(props: Props) {
         }
     }, [folderId, moveId, mediaType])
 
+    /** 判断2个元素是否重合 */
+    const elementsOverlap = (el1: HTMLElement, el2: HTMLElement) => {
+        const domRect1 = el1.getBoundingClientRect();
+        const domRect2 = el2.getBoundingClientRect();
+        return !(
+            domRect1.top > domRect2.bottom ||
+            domRect1.right < domRect2.left ||
+            domRect1.bottom < domRect2.top ||
+            domRect1.left > domRect2.right
+        );
+    }
+
+    /**记录鼠标down event */
+    const onMouseDown = ({ target: { dataset }, pageX, pageY }: any) => {
+        const { type } = dataset
+        if (isBack && num !== 100) return
+        if (moveSelected && type === 'right-boxzones') {
+            moveSelected.style.top = pageY + 'px';
+            moveSelected.style.left = pageX + 'px';
+            setStartPoint({ x: pageX, y: pageY, flag: true })
+        }
+    }
+
+    /**记录鼠标抬起事件 */
+    const onMouseUp = () => {
+        if (startPoint.flag && moveSelected) {
+            setStartPoint({ x: 0, y: 0, flag: false })
+            moveSelected.style.width = '0px';
+            moveSelected.style.height = '0px';
+            moveSelected.style.top = '0px';
+            moveSelected.style.left = '0px';
+            moveSelected.style.bottom = '0px';
+            moveSelected.style.right = '0px';
+        }
+    }
+    /** 鼠标移动事件 */
+    const onMouseMove = ({ pageX, pageY }: any) => {
+        const { x, y, flag } = startPoint
+        if (flag) {
+            if (moveSelected) {
+                if (pageX < x) { //表示左移
+                    moveSelected.style.left = pageX + 'px';
+                    moveSelected.style.width = (x - pageX) + 'px'; //向左移动的距离作为选区的宽
+                } else {
+                    moveSelected.style.width = (pageX - x) + 'px';
+                }
+                if (pageY < y) { //向上移动
+                    moveSelected.style.top = pageY + 'px';
+                    moveSelected.style.height = (y - pageY) + 'px';
+                } else {
+                    moveSelected.style.height = (pageY - y) + 'px';
+                }
+                //通过得到的left和top加上元素自身的宽高来计算选区的right和bottom
+                moveSelected.style.bottom = Number(moveSelected.style.top.split('px')[0]) + Number(moveSelected.style.height.split('px')[0]) + 'px';
+                moveSelected.style.right = Number(moveSelected.style.left.split('px')[0]) + Number(moveSelected.style.width.split('px')[0]) + 'px';
+
+                if (fileContent && fileContent?.children?.length > 0) {
+                    //找出选中的区域并激活
+                    let checkboxs: any = fileContent?.children
+                    for (let i = 0; i < checkboxs?.length; i++) {
+                        let id = checkboxs[i]?.getAttribute('data-id')
+                        if (elementsOverlap(moveSelected, checkboxs[i]) && id) {
+                            id = Number(id)
+                            let state = selectFile?.some((i) => i === id)
+                            if (!state) {//新增
+                                setIsSelect(true)
+                                set({ selectFile: [...selectFile as number[], id] })
+                                if (isBack) {
+                                    set({ selectItem: [...selectItem, sourceList[id]] })
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /** 鼠标离开可拖动区域事件 */
+    const onMouseLeave = () => {
+        if (startPoint.flag && moveSelected) {
+            setStartPoint({ x: 0, y: 0, flag: false })
+            moveSelected.style.width = '0px';
+            moveSelected.style.height = '0px';
+            moveSelected.style.top = '0px';
+            moveSelected.style.left = '0px';
+        }
+    }
+
     return <div style={{ display: 'flex', flexFlow: 'row', width: '100%' }}>
         {get_folder_tree?.data?.length > 0 && <div style={{ flexShrink: 0 }}>
             {treeEl}
         </div>}
-        <div style={{ flex: 1, paddingTop: 10 }}>
-            <div className={style.files} onContextMenu={rightMenu} style={height ? { height } : {}}>
+        <div
+            style={{ flex: 1, paddingTop: 10 }}
+            data-type="right-boxzones"
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            onMouseLeave={onMouseLeave}
+            onMouseMove={onMouseMove}
+            onDoubleClick={() => {
+                if (isSelect) {
+                    set({ selectItem: [] }); set({ selectFile: [] })
+                }
+            }}
+        >
+            <div className={style.files} data-type="right-boxzones" onContextMenu={rightMenu} style={height ? { height } : {}}>
                 {/* 关联公众号筛选 */}
                 <div className={style.wxSelect}>
 
@@ -207,154 +329,156 @@ function FlieBox(props: Props) {
                 </div>
                 {/* 内容 */}
                 <Spin spinning={list.loading} style={{ width: '100%' }}>
-                    <div className={style.file_content}>
-                        {
-                            listData?.records?.map((item: Item, index: number) => {
-                                if (item.folder) {
-                                    {/* 文件夹模板 */ }
-                                    return <Popconfirm
-                                        title="确定要删除吗？"
-                                        onConfirm={() => { dels(item) }}
-                                        okText="是"
-                                        cancelText="否"
-                                        onCancel={delPupOff}
-                                        visible={delPupId === item.id}
-                                        key={item.id}
-                                    >
-                                        <Spin tip='正在请求素材详情，请耐心等待...' spinning={get?.loading}>
-                                            <div
-                                                className={`${style.flex_box} ${selectFile?.some((id: number) => id === item.id) ? style.action : ''}`}
-                                                onContextMenu={(e) => { rightMenu(e, item) }}
-                                                onClick={(e) => { changeClickFile(e, item, isAll, noFile) }}
-                                                onDragStart={(e: any) => {
-                                                    e.preventDefault()
-                                                }}
-                                            >
-                                                <img src={fileImg}
-                                                    className={style.flex_box_img}
-                                                    onClick={(e: any) => { e.stopPropagation(); fileClick(item) }}
-                                                    onDragOver={(ev) => {
-                                                        ev.preventDefault()
-                                                    }}
-                                                    onDrop={() => {
-                                                        if (item.id !== folderId) {
-                                                            setActionId(item.id)
-                                                        }
-                                                    }}
-                                                />
-                                                <span className={style.flex_box_name} >{item?.title}</span>
-                                                <span className={style.flex_box_id} onClick={(e) => { copyId(e, item?.number) }} >{item?.number}</span>
-                                            </div>
-                                        </Spin>
-                                    </Popconfirm>
-                                } else {
-                                    {/* 图片模板 ,视频模板,音频模板*/ }
-                                    let topPageElements: any
-                                    let topName: string = ""
-                                    if (mediaType === 'PAGE' && item?.pageSpecsList) {
-                                        topPageElements = item?.pageSpecsList[0]?.pageElementsSpecList[0]
-                                    }
-                                    let El = null
-                                    if (mediaType === 'IMG') {
-                                        El = <Image
-                                            src={item.url}
+                    <div className={style.file_content} data-type="right-boxzones" id="file_content">
+                        {listData?.records?.map((item: Item, index: number) => {
+                            if (item.folder) {
+                                {/* 文件夹模板 */ }
+                                return <Popconfirm
+                                    title="确定要删除吗？"
+                                    onConfirm={() => { dels(item) }}
+                                    okText="是"
+                                    cancelText="否"
+                                    onCancel={delPupOff}
+                                    visible={delPupId === item.id}
+                                    key={item.id}
+                                >
+                                    <Spin tip='正在请求素材详情，请耐心等待...' spinning={get?.loading}>
+                                        <div
+                                            className={`${style.flex_box} ${selectFile?.some((id: number) => id === item.id) ? style.action : ''}`}
+                                            onContextMenu={(e) => { rightMenu(e, item) }}
                                             onClick={(e) => {
                                                 e.stopPropagation()
-                                                let className = (e.target as any).className
-                                                if (className === 'ant-image-mask-info') {
-                                                    setShowImg(index)
-                                                } else {
-                                                    changeClickFile(e, item, isAll, noFile)
-                                                }
+                                                e.preventDefault()
+                                                changeClickFile(e, item, isAll, noFile)
                                             }}
-                                            preview={{
-                                                visible: showImg === index,
-                                                maskClassName: style.maskClass,
-                                                onVisibleChange: (value) => {
-                                                    if (!value) {
-                                                        setShowImg(-1)
+                                            onDragStart={(e: any) => {
+                                                e.preventDefault()
+                                            }}
+                                        >
+                                            <img src={fileImg}
+                                                className={style.flex_box_img}
+                                                onClick={(e: any) => { e.stopPropagation(); fileClick(item) }}
+                                                onDragOver={(ev) => {
+                                                    ev.preventDefault()
+                                                }}
+                                                onDrop={() => {
+                                                    if (item.id !== folderId) {
+                                                        setActionId(item.id)
                                                     }
+                                                }}
+                                            />
+                                            <span className={style.flex_box_name} >{item?.title}</span>
+                                            <span className={style.flex_box_id} onClick={(e) => { copyId(e, item?.number) }} >{item?.number}</span>
+                                        </div>
+                                    </Spin>
+                                </Popconfirm>
+                            } else {
+                                {/* 图片模板 ,视频模板,音频模板*/ }
+                                let topPageElements: any
+                                let topName: string = ""
+                                if (mediaType === 'PAGE' && item?.pageSpecsList) {
+                                    topPageElements = item?.pageSpecsList[0]?.pageElementsSpecList[0]
+                                }
+                                let El = null
+                                if (mediaType === 'IMG') {
+                                    El = <Image
+                                        src={item.url}
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            let className = (e.target as any).className
+                                            if (className === 'ant-image-mask-info') {
+                                                setShowImg(index)
+                                            } else {
+                                                changeClickFile(e, item, isAll, noFile)
+                                            }
+                                        }}
+                                        preview={{
+                                            visible: showImg === index,
+                                            maskClassName: style.maskClass,
+                                            onVisibleChange: (value) => {
+                                                if (!value) {
+                                                    setShowImg(-1)
                                                 }
-                                            }}
-                                        />
-                                    } else if (mediaType === 'VIDEO') {
-                                        El = <video src={item.url} style={{ width: 130, height: 100 }} controls />
-                                    } else if (mediaType === 'PAGE') {
-                                        switch (topPageElements?.elementType) {
-                                            case 'TOP_IMAGE':
-                                                topName = "顶部图片"
-                                                El = <Image
-                                                    src={topPageElements?.topImageSpec?.imageUrl}
-                                                    preview={{ visible: false, maskClassName: style.maskClass }}
-                                                    onClick={(e) => {
-                                                        e.stopPropagation()
-                                                        let className = (e.target as any).className
-                                                        if (className === 'ant-image-mask-info') {
-                                                            setPage && setPage(1, item.id)
-                                                        } else {
-                                                            changeClickFile(e, item, isAll, noFile)
-                                                        }
-                                                    }}
-                                                />
-                                                break
-                                            case 'TOP_SLIDER':
-                                                topName = "顶部轮播图"
-                                                El = <>
-                                                    <Carousel autoplay style={{ width: 150, textAlign: 'center' }}>
-                                                        {topPageElements?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <div key={index}>
-                                                            <Image
-                                                                preview={{ visible: false, maskClassName: style.maskClass }}
-                                                                src={url}
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation()
-                                                                    let className = (e.target as any).className
-                                                                    if (className === 'ant-image-mask-info') {
-                                                                        setPage && setPage(1, item.id)
-                                                                    } else {
-                                                                        changeClickFile(e, item, isAll, noFile)
-                                                                    }
-                                                                }} />
-                                                        </div>)}
-                                                    </Carousel>
-                                                </>
-                                                break
-                                            case 'TOP_VIDEO':
-                                                topName = "顶部视频"
-                                                El = <div className={style.pageVideo}>
-                                                    <div className={style.pagePreview} onClick={(e) => { e.stopPropagation(); setPage && setPage(1, item.id) }}><EyeOutlined /> 预览</div>
-                                                    <video src={topPageElements?.topVideoSpec?.videoUrl} style={{ width: 130, height: 100 }} />
-                                                </div>
-                                                break
-                                        }
-                                    }
-                                    return <Popconfirm
-                                        title="确定要删除吗？"
-                                        onConfirm={() => { dels(item.id) }}
-                                        okText="是"
-                                        cancelText="否"
-                                        onCancel={delPupOff}
-                                        visible={delPupId === item.id}
-                                        key={item.id}
-                                    >
-                                        <Spin tip='正在请求素材详情，请耐心等待...' spinning={get?.loading}>
-                                            <div
-                                                className={`${style.image_box} ${!isBack ? (selectFile?.some((id: number) => id === item.id) ? style.action : '') : (selectItem?.some((item1: { url: string }) => item1.url === item.url) ? style.action : '')}`}
-                                                onContextMenu={(e) => { rightMenu(e, item) }}
-                                                onClick={(e) => { changeClickFile(e, item, isAll) }}
-                                                {...moveConfig(item)}
-                                            >
-                                                <span className={`${style.select}`} onClick={(e) => { changeClickFile(e, item, isAll) }}>
-                                                    <span role="img" aria-label="check" style={{ color: '#fff' }}><svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span>
-                                                </span>
-                                                {El}
-                                                <span className={style.flex_box_name} onClick={(e) => { copyId(e, item?.videoTitle || item?.title) }}>{item?.videoTitle || item?.title}</span>
-                                                {mediaType === 'PAGE' ? <span>{topName}</span> : <span>{item?.width}*{item.height}</span>}
+                                            }
+                                        }}
+                                    />
+                                } else if (mediaType === 'VIDEO') {
+                                    El = <video src={item.url} style={{ width: 130, height: 100 }} controls />
+                                } else if (mediaType === 'PAGE') {
+                                    switch (topPageElements?.elementType) {
+                                        case 'TOP_IMAGE':
+                                            topName = "顶部图片"
+                                            El = <Image
+                                                src={topPageElements?.topImageSpec?.imageUrl}
+                                                preview={{ visible: false, maskClassName: style.maskClass }}
+                                                onClick={(e) => {
+                                                    e.stopPropagation()
+                                                    let className = (e.target as any).className
+                                                    if (className === 'ant-image-mask-info') {
+                                                        setPage && setPage(1, item.id)
+                                                    } else {
+                                                        changeClickFile(e, item, isAll, noFile)
+                                                    }
+                                                }}
+                                            />
+                                            break
+                                        case 'TOP_SLIDER':
+                                            topName = "顶部轮播图"
+                                            El = <>
+                                                <Carousel autoplay style={{ width: 150, textAlign: 'center' }}>
+                                                    {topPageElements?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <div key={index}>
+                                                        <Image
+                                                            preview={{ visible: false, maskClassName: style.maskClass }}
+                                                            src={url}
+                                                            onClick={(e) => {
+                                                                e.stopPropagation()
+                                                                let className = (e.target as any).className
+                                                                if (className === 'ant-image-mask-info') {
+                                                                    setPage && setPage(1, item.id)
+                                                                } else {
+                                                                    changeClickFile(e, item, isAll, noFile)
+                                                                }
+                                                            }} />
+                                                    </div>)}
+                                                </Carousel>
+                                            </>
+                                            break
+                                        case 'TOP_VIDEO':
+                                            topName = "顶部视频"
+                                            El = <div className={style.pageVideo}>
+                                                <div className={style.pagePreview} onClick={(e) => { e.stopPropagation(); setPage && setPage(1, item.id) }}><EyeOutlined /> 预览</div>
+                                                <video src={topPageElements?.topVideoSpec?.videoUrl} style={{ width: 130, height: 100 }} />
                                             </div>
-                                        </Spin>
-                                    </Popconfirm>
+                                            break
+                                    }
                                 }
-                            })
-                        }
+                                return <Popconfirm
+                                    title="确定要删除吗？"
+                                    onConfirm={() => { dels(item.id) }}
+                                    okText="是"
+                                    cancelText="否"
+                                    onCancel={delPupOff}
+                                    visible={delPupId === item.id}
+                                    key={item.id}
+                                >
+                                    <Spin tip='正在请求素材详情，请耐心等待...' spinning={get?.loading} data-id={item.id}>
+                                        <div
+                                            className={`${style.image_box} ${!isBack ? (selectFile?.some((id: number) => id === item.id) ? style.action : '') : (selectItem?.some((item1: { url: string }) => item1.url === item.url) ? style.action : '')}`}
+                                            onContextMenu={(e) => { rightMenu(e, item) }}
+                                            onClick={(e) => { changeClickFile(e, item, isAll) }}
+                                            {...moveConfig(item)}
+                                        >
+                                            <span className={`${style.select}`} onClick={(e) => { changeClickFile(e, item, isAll) }}>
+                                                <span role="img" aria-label="check" style={{ color: '#fff' }}><svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span>
+                                            </span>
+                                            {El}
+                                            <span className={style.flex_box_name} onClick={(e) => { copyId(e, item?.videoTitle || item?.title) }}>{item?.videoTitle || item?.title}</span>
+                                            {mediaType === 'PAGE' ? <span>{topName}</span> : <span>{item?.width}*{item.height}</span>}
+                                        </div>
+                                    </Spin>
+                                </Popconfirm>
+                            }
+                        })}
                     </div>
                 </Spin>
                 {/* 鼠标右键菜单 */}
@@ -366,6 +490,8 @@ function FlieBox(props: Props) {
                 {/* 新建非图文 */}
                 {imgVisrible && <ImgModal isAll={isAll} />}
                 {imgsVisrible && <ImgsModal isAll={isAll} />}
+                {/* 移动至 */}
+                {moveShow && <MoveTo visible={moveShow} onClose={() => setMoveShow(false)} isAll={isAll} catalogueData={get_folder_tree.data} />}
             </div>
             <div className={style.pagination}>
                 {/* 分页 */}
@@ -383,6 +509,7 @@ function FlieBox(props: Props) {
                     total={listData?.total}
                 />}
             </div>
+            <div className={style.moveSelected} id='moveSelected' />
         </div>
     </div>
 }

src/models/useLaunchAdq/useBdMediaPup.ts

@@ -409,47 +409,47 @@ function useBdMediaPup() {
 
   /**编辑非图文素材名称*/
   const nameOk = useCallback((selectWx: any) => {
-      if (fileName && actionItem) {
-        let obj = {
-          title: fileName,
-          belongUser: belongUser === '0' ? false : true,
-          sysMediaId: actionItem?.id,
-          mediaType: actionItem?.mediaType,
-          folder: actionItem?.folder,
-          url: actionItem?.url,
-          sort,
-        };
-        // if (mediaType === 'VIDEO') {
-        //   obj['videoTitle'] = videoTitle;
-        //   obj['videoDescription'] = videoDescription;
-        // }
-        edit.run(obj).then((res) => {
-          list.refresh();
-          get_folder_tree.refresh()
-          offEditFile(); //关闭弹窗并清空相关数据
-        });
-      }
-    },
+    if (fileName && actionItem) {
+      let obj = {
+        title: fileName,
+        belongUser: belongUser === '0' ? false : true,
+        sysMediaId: actionItem?.id,
+        mediaType: actionItem?.mediaType,
+        folder: actionItem?.folder,
+        url: actionItem?.url,
+        sort,
+      };
+      // if (mediaType === 'VIDEO') {
+      //   obj['videoTitle'] = videoTitle;
+      //   obj['videoDescription'] = videoDescription;
+      // }
+      edit.run(obj).then((res) => {
+        list.refresh();
+        get_folder_tree.refresh()
+        offEditFile(); //关闭弹窗并清空相关数据
+      });
+    }
+  },
     [fileName, actionItem, edit, belongUser, mediaType, videoTitle, videoDescription],
   );
   /**删除文件 */
   const dels = useCallback((id?: any) => {
-      let arr = typeof id === 'number' ? [id] : selectFile;
-      let len = arr?.length || 0;
-      if (len) {
-        arr?.map((id, index) => {
-          del.run({ sysMediaId: id, mediaType }).then(() => {
-            set({ selectFile: selectFile?.filter((i) => i !== id) }); //清理已删除文件
-            if (index === len - 1) {
-              list.refresh();
-              get_folder_tree.refresh();
-            }
-          });
+    let arr = typeof id === 'number' ? [id] : selectFile;
+    let len = arr?.length || 0;
+    if (len) {
+      arr?.map((id, index) => {
+        del.run({ sysMediaId: id, mediaType }).then(() => {
+          set({ selectFile: selectFile?.filter((i) => i !== id) }); //清理已删除文件
+          if (index === len - 1) {
+            list.refresh();
+            get_folder_tree.refresh();
+          }
         });
-      } else {
-        message.error('请选择文件')
-      }
-    },
+      });
+    } else {
+      message.error('请选择文件')
+    }
+  },
     [list, selectFile, mediaType],
   );
   /**获取本地素材数据列表 */
@@ -579,39 +579,38 @@ function useBdMediaPup() {
     [selectFile],
   );
   /**判断是取消还是选中文件的操作在点击打钩时使用 */
-  const changeClickFile = useCallback(
-    (e: any, item: { id: any; folder?: boolean, url: string }, isAll?: boolean, noFile?: boolean) => {
-      let { id, url } = item;
-      e?.stopPropagation(); //阻止冒泡传递到文件夹被点击事件
-      let state = selectItem?.some((i) => i.url === url);
-      if (state) {
-        //存在就是删除
-        set({
-          selectFile: selectFile?.filter((i) => i !== id),
-          selectItem: selectItem?.filter((i: { url: string }) => i.url !== url),
-        });
-      } else {
-        //否则新增
-        if (num === 1) {
-          if (state) {
-            //存在就是删除
-            set({ selectFile: selectFile?.filter((i) => i !== id), selectItem: [] });
-          } else {
-            //否则新增
-            set({ selectFile: [id], selectItem: [item] });
-          }
+  const changeClickFile = useCallback((e: any, item: { id: any; folder?: boolean, url: string }, isAll?: boolean, noFile?: boolean) => {
+    let { id, url } = item;
+    e?.stopPropagation(); //阻止冒泡传递到文件夹被点击事件
+    let state = selectItem?.some((i) => i.url === url);
+    if (state) {
+      //存在就是删除
+      set({
+        selectFile: selectFile?.filter((i) => i !== id),
+        selectItem: selectItem?.filter((i: { url: string }) => i.url !== url),
+      });
+    } else {
+      //否则新增
+      if (num === 1) {
+        if (state) {
+          //存在就是删除
+          set({ selectFile: selectFile?.filter((i) => i !== id), selectItem: [] });
         } else {
-          if (selectFile && num && selectFile?.length >= num) {
-            message.error(`只能选择${num}张`);
-            return;
-          }
-          let newSelectItem = selectItem || [];
-          newSelectItem.push(item);
-          set({ selectItem: newSelectItem, selectFile: [...(selectFile as number[]), id] });
+          //否则新增
+          set({ selectFile: [id], selectItem: [item] });
         }
+      } else {
+        if (selectFile && num && selectFile?.length >= num) {
+          message.error(`只能选择${num}张`);
+          return;
+        }
+        let newSelectItem = selectItem || [];
+        newSelectItem.push(item);
+        set({ selectItem: newSelectItem, selectFile: [...(selectFile as number[]), id] });
       }
-      // }
-    },
+    }
+    // }
+  },
     [selectFile, mediaType, num],
   );
   /**开启删除弹窗 */

src/pages/launchSystemNew/components/selectCloud/index.tsx

@@ -92,7 +92,7 @@ const SelectCloud: React.FC<Props> = (props) => {
         maskClosable={false}
         bodyStyle={{ padding: 0 }}
     >
-        <Tabs onChange={(activeKey: any) => { set({ belongUser: activeKey }) }} activeKey={belongUser} style={{ margin: '0 24px' }} tabBarExtraContent={<Space>
+        <Tabs tabBarStyle={{ marginBottom: 0 }} onChange={(activeKey: any) => { set({ belongUser: activeKey }) }} activeKey={belongUser} style={{ margin: '0 24px' }} tabBarExtraContent={<Space>
             {
                 mediaType === 'PAGE' ? null : <Button size='small' type="primary" onClick={() => { set({ imgVisrible: true }) }}>新建素材</Button>
             }

src/pages/launchSystemNew/material/cloud/DndContainer.tsx

@@ -0,0 +1,2 @@
+export const BoxClassName = 'box'
+export const BoxContainer = 'selectContainer'

src/services/launchAdq/material.ts

@@ -212,7 +212,7 @@ export async function getFolderTree(props: { belongUser: any, mediaType: 'IMG' |
     })
   }
 }
-/*改变文件位置*/
+/*改变文件位置 folderId 文件ID sysMediaId 素材ID */
 export async function editMediaFolder(params: { sysMediaId: number, folderId: number, mediaType: 'IMG' | 'VIDEO' | 'PAGE' }) {
   const { folderId, sysMediaId, mediaType } = params
   if (mediaType === 'IMG') {