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

import { BetaSchemaForm, ProFormInstance } from "@ant-design/pro-components";
import { useEffect, useMemo, useRef } from "react";
import { bannersConfig, hotBooksConfig, hotCategoryConfig } from "./compFormConfig";
import { useModel } from "@umijs/max";
import { Button, Popconfirm } from "antd";
import { useAjax } from "@/Hook/useAjax";
import { queryCategoryList } from "@/services/global";
import { Config } from "@/models/appPageConifg";

type Props = {
    pageList?: any[]
    compName: "banners" | "hot_books" | "hot_category",
}
export function CompConfig(props: Props) {
    let { pageList = [], compName } = props
    const formRef = useRef<ProFormInstance>();
    let { state, dispatch } = useModel('appPageConifg')
    let QueryCategoryList = useAjax((params) => queryCategoryList(params))

    // 获取分类列表
    useEffect(() => {
        if (compName === 'hot_category') {
            QueryCategoryList.run({ workDirection: state.tabs })
        }
    }, [state.tabs, compName])
    // 获取对应from设置
    let columns = useMemo(() => {
        switch (compName) {
            case 'banners':
                return bannersConfig(pageList);
            case "hot_books":
                return hotBooksConfig();
            case "hot_category":
                return hotCategoryConfig(QueryCategoryList?.data?.data,formRef);
        }
    }, [compName, pageList, QueryCategoryList?.data?.data,formRef])

    // 获取当前页面配置表
    const list = useMemo(() => {
        let pageConfig = state.pageConfigList.find(page => page.pageUrl === state.activePage)
        let list: {
            appComponentId: number | string;
            componentType: string;
            showRightButton?: boolean;
            componentName?: string;
            remark?: string;
            configs?: Config[];
        }[] = []
        if (state.isWorkDirection) {
            let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
            list = thePage?.componentConfigList || []
        } else {
            list = pageConfig?.workDirectionList?.[0].componentConfigList || []
        }
        return list
    }, [state])
 
    // 提交表单
    const submit = async (values: any) => {
    }
    // 初始化内容
    useEffect(() => {
        let thatConfig = list.find(item => item.componentType === compName)
        console.log("初始化内容",thatConfig)
        formRef.current?.setFieldsValue(thatConfig)
    }, [list])
    // 值变化
    const handelValues = (values: any, isDel?: boolean) => {
        console.log("values",values)
        // 处理分类 书籍 需要的完整数据
        if(values){
            for (let config of values?.configs) {
                if (config?.bookId) {
                    config.bookInfo = config.bookId
                    config.bookId = config.bookInfo.id
                }
                if (config?.categoryId) {
                    config.categoryInfo = QueryCategoryList?.data?.data?.find((item: { id: any; })=>item.id == config.categoryId) 
                    config.categoryId = config.categoryInfo.id
                }
                if (config?.bookIds) {
                    config.bookInfos = config.bookIds
                    config.bookIds = config.bookInfos.map((item: { id: any; }) => item.id)
                }
            }
        }
        // 找到当前的页面
        let pageConfig = state.pageConfigList.find(page => page.pageUrl === state.activePage)
        //找到当前选中的组件    
        let thatConfig = list.find(item => item.componentType === compName)
        // 修改组件的内容
        if (thatConfig) {
            thatConfig.configs = values ? values.configs : []
            if(values?.componentName){
                thatConfig.componentName = values?.componentName
                thatConfig.showRightButton = values?.showRightButton
            }
        }
        // 判断当前页面是否存在男女频，获取对应的页面配置列表
        if (state.isWorkDirection) {
            let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
            if (thePage) {
                // 删除的判断
                if (isDel) {
                    thePage.componentConfigList = list?.filter(item => item.componentType !== compName)
                } else {
                    thePage.componentConfigList = list
                }
            }
        } else {
            if (pageConfig) {
                if (isDel) {
                    pageConfig.workDirectionList[0].componentConfigList = list?.filter(item => item.componentType !== compName)
                } else {
                    pageConfig.workDirectionList[0].componentConfigList = list
                }
            }
            pageConfig && (pageConfig.workDirectionList[0].componentConfigList = list)
        }
        // 修改保存数据到状态管理
        dispatch({
            type: 'setAll', params: {
                pageConfigList: state.pageConfigList,
                index: state.index + 1,
                compAc: isDel ? "" : state.compAc
            }
        })
    }
    return <BetaSchemaForm<any>
        formRef={formRef}
        layoutType={"Form"}
        size="small"
        colProps={{
            span: 12,
        }}
        grid={true}
        submitter={{
            render: (props, doms) => {
                return [<Popconfirm key={compName + "del"} title="确定要删除此组件？" onConfirm={() => {
                    handelValues(null, true)
                }}><Button danger>删除</Button></Popconfirm>, ...doms];
            },
        }}
        onFinish={submit}
        onReset={() => {
            handelValues(null)
        }}
        columns={columns}
        onValuesChange={(changedValues: any, values: any) => {
            handelValues(values)
        }}
    />
}