distribution-management/src/pages/MiniApp/CompConfig/DrawerBox/pageList.tsx

import { useDrag } from "ahooks";
import { Col, Row, Space, Tabs, Typography } from "antd";
import React, { useState, useImperativeHandle, forwardRef, useRef, useCallback } from "react";
import styles from './index.less'
import { useModel } from "@umijs/max";
import { useToken } from "@ant-design/pro-components";
const DragItem = ({ children }: any) => {
    const dragRef = useRef(null);
    const [dragging, setDragging] = useState(false);

    useDrag(children.key, dragRef, {
        onDragStart: () => {
            console.log(children.key)
            setDragging(true);
        },
        onDragEnd: () => {
            setDragging(false);
        },
    });

    return (
        <div
            ref={dragRef}
            style={{ display: 'inline-block' }}
        >
            {children}
        </div>
    );
};
type Item = {
    componentName: string,//组件名称 也是type
    defaultComponentConfigList: any[],//组件配置
    enabled: boolean,//是否可编辑
    enabledAppTypes: number[]//支持的小程序
    id: number,//组件id
    remark: string,//备注 一般为中文名称
    pagePath: string,//所在页面地址
    disabled: boolean,//是否看使用,在已经添加进页面后禁止使用
}

const Comp = ({ item }: { item: Item }) => {
    let { token } = useToken()
    return item.disabled ? <div key={`${item.id}-${item.componentName}-${item.pagePath}`} className={styles.box} style={{ background: token.colorBgContainerDisabled, cursor: 'no-drop' }}>
        {item.remark || item.componentName}
    </div> : <DragItem >
        <div key={`${item.id}-${item.componentName}-${item.pagePath}`} className={styles.box} style={{ cursor: "copy" }}>
            {item.remark || item.componentName}
        </div>
    </DragItem>
}


// 定义组件的 Props 类型
interface Props {
    data: any[]
}
// 使用 forwardRef 以支持传递 ref
const PageList = forwardRef((props: Props, ref) => {
    let { initialState } = useModel("@@initialState")
    let { state, dispatch } = useModel('appPageConifg')
    let { data } = props
    // 使用 useImperativeHandle 暴露方法给父组件
    useImperativeHandle(ref, () => ({
    }));
    return <Tabs
        onChange={(activeKey) => {
            dispatch({ type: "setAll", params: { activePage: activeKey } })
        }}
        activeKey={state.activePage}
        items={data?.map(item => {
            return {
                label: item.pageName,
                key: item.pagePath,
                disabled: !item.enabledComponent,
                children: item.pagePath === state.activePage ? <Row gutter={[20, 20]} className={styles.pageList} >
                    <Col span={24} style={{ order: 0 }}>
                        <Typography.Title level={4} >顶部组件</Typography.Title>
                        {
                            item?.appComponentList?.filter((i: Item) => i.componentName === 'banners')?.map((comp: Item) => {
                                let newComp = { ...comp, pagePath: item.pagePath }
                                let appType = initialState?.selectApp?.appType || 0
                                let pageConfig = state.pageConfigList?.find(page => page.pageUrl === item.pagePath)
                                let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
                                let list = thePage?.componentConfigList || []
                                newComp.disabled = !!list.find(i => i.appComponentId == newComp.id)
                                if (newComp.enabledAppTypes.includes(appType)) {
                                    return <Comp item={newComp} key={item.id} />
                                }
                            })
                        }
                    </Col>
                    <Col span={24}>
                        <Typography.Title level={4} >内容组件</Typography.Title>
                        <Space wrap>
                            {
                                item?.appComponentList?.filter((i: Item) => i.componentName !== 'banners')?.map((comp: Item) => {
                                    let newComp = { ...comp, pagePath: item.pagePath }
                                    let appType = initialState?.selectApp?.appType || 0
                                    let pageConfig = state.pageConfigList?.find((page: { pageUrl: any; }) => page.pageUrl === item.pagePath)
                                    let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
                                    let list = thePage?.componentConfigList || []
                                    newComp.disabled = !!list.find(i => i.appComponentId == newComp.id)
                                    if (newComp.enabledAppTypes.includes(appType)) {
                                        return <Comp item={newComp} key={comp.id} />
                                    }
                                })
                            }
                        </Space>
                    </Col>
                </Row> : <>无组件</>,
            }
        })} />
});

export default PageList;