ad-manage/src/pages/launchSystemV3/material/cloudNew/selectFolder.tsx

import { useAjax } from "@/Hook/useAjax"
import { getFolderListApi } from "@/services/adqV3/cloudNew"
import { DataNode, DirectoryTreeProps, EventDataNode } from "antd/lib/tree";
import React, { useEffect, useState } from "react"
import { updateTreeData } from "./const";
import style from './index.less'
import { Button, Empty, Spin, Tree } from "antd";

interface Props {
    selectedKeys?: number
    onChange?: (selectedKeys?: number) => void
}
/**
 * 文件夹
 * @returns 
 */
const SelectFolder: React.FC<Props> = ({ selectedKeys, onChange }) => {

    /******************************/
    const [treeData, setTreeData] = useState<DataNode[]>([]);

    const getFolderList = useAjax((params) => getFolderListApi(params))
    /******************************/

    useEffect(() => {
        getFolder()
    }, [])

    const getFolder = () => {
        getFolderList.run({}).then(res => {
            setTreeData(() => res?.map((item: { folderName: any; id: any; createBy: number }) => ({
                title: item.folderName,
                value: item.id,
                key: item.id,
            })) || [])
        })
    }

    // 下级目录
    const handleUpdateFolder = (parentId: number) => {
        return getFolderListApi({ parentId }).then(res => {
            setTreeData(origin =>
                updateTreeData(origin, parentId, res?.data?.map((item: { folderName: any; id: any; createBy: number }) => ({
                    title: item.folderName,
                    value: item.id,
                    key: item.id,
                })) || []),
            );
        })
    }

    // 选中文件
    const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
        console.log('Trigger Expand', keys, info);
        onChange?.(keys?.length > 0 ? keys[0] : undefined as any)
    };

    return <div className={style.folder} style={{ width: 180 }}>
        <div className={style.top}>
            <Button
                style={{ padding: 0, height: 'auto', width: 71, fontSize: 14 }}
                onClick={() => {
                    onChange?.()
                }}
                type="link"
            >全部素材</Button>
        </div>
        <div className={style.bottom}>
            <Spin spinning={getFolderList.loading}>
                <Tree
                    showIcon
                    blockNode={true}
                    selectedKeys={selectedKeys ? [selectedKeys] : undefined}
                    loadData={(treeNode: EventDataNode<DataNode>) => {
                        return new Promise<void>(async (resolve) => {
                            console.log('Trigger Select', treeNode);
                            await handleUpdateFolder(Number(treeNode.key))
                            resolve()
                        })
                    }}
                    onSelect={onSelect}
                    treeData={treeData}
                />
                {!(treeData?.length > 0) && (getFolderList.loading ? <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 200 }} ></div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无文件夹" />)}
            </Spin>
        </div>
    </div>
}

export default React.memo(SelectFolder)