system-copyright-react/src/components/ai/mod/AiHelperMod.tsx

import { Button, Divider, Dropdown, Space, Table, TableProps, Modal } from "antd";
import { CheckOutlined, LoadingOutlined, ReloadOutlined, RedoOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { IProjMod } from "../../../interfaces/proj/IProj.ts";
import EditModal from '../../EditModal/EditModal.tsx'
import ConfigModModal from '../../ConfigModModal/ConfigModModal.tsx'
import { get } from "../../../util/AjaxUtils.ts";
import { useParams } from "react-router-dom";
import { SearchOutlined } from '@ant-design/icons';
import {
    message
} from "antd";
type PropsType = {
    mods: IProjMod[];
    newMods: ProjModType[],
    handleGenerate: () => void;
    handleSave: (index: number, mod: ProjModType) => void;
    handleResaveField: (index: number, projModId: string) => void;
    handleRemove: (index: number, projModId: string, item: IProjMod) => void;
    handleEdit: (index: number, projModId: string, item: IProjMod) => void;
}

type ProjModType = {
    name: string,
    desc: string,
}

export default function AiHelperMod(props: PropsType) {
    // 菜单状态是否可以编辑
    const [messageApi] = message.useMessage();
    const [modArray, setModArray] = useState<IProjMod[]>([]);
    const [newModArray, setNewModArray] = useState<ProjModType[]>([]);
    const [id, setId] = useState('')

    const[configModal,setConfigModal] = useState(false)
    const [editModal, setEditModal] = useState(false)
    const [updata, setUpdata] = useState<any[]>([])
    const [status, setStatus] = useState('')
    // const [items, setItems] = useState<any[]>([])
    const pathParams = useParams();
    useEffect(() => {
        console.log('mods', props.mods);

        setModArray(props.mods);
        setNewModArray(props.newMods);
    }, [props.mods, props.newMods]);
    useEffect(() => {
        if (updata.length != 0) {
            console.log('更新数据', updata);
            setModArray(updata)
        }

    }, [updata])
    useEffect(() => {
        get<any>({
            messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                // console.log('其他页面状态判断', data);
                setStatus(data.generate.generateStatus)
            }
        })

    }, [])
    const modColumnArray: TableProps<IProjMod>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        { title: '模块名称', dataIndex: 'modName', key: 'name', width: 200, align: 'center' },
        { title: '模块描述', dataIndex: 'modDesc', key: 'desc', align: 'center' },
        {
            title: 'AI状态',
            dataIndex: 'aiFieldStatus',
            key: 'desc',
            width: 100,
            align: 'center',
            render: (value) => {
                if (value == 'GENERATING') {
                    return '处理中'
                }
                if (value == 'FAILED') {
                    return '失败'
                }
                if (value == 'SUCCESS') {
                    return '成功'
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            width: 80,
            align: 'center',
            render: (_value, record, index) => {
                if (status == 'SUCCESS') {
                    return (
                        <Button icon={<SearchOutlined />} onClick={() => {
                            setId(record.projModId)
                            setConfigModal(true)
                        }}></Button>
                    )
                } else if (status == 'GENERATING') {
                    return (
                        <LoadingOutlined />
                    )
                }

                else {
                    if (record.aiFieldStatus == 'GENERATING') {
                        return <LoadingOutlined />
                    }
                    if (record.aiFieldStatus == 'FAILED') {
                        return <Button onClick={() => {
                            props.handleResaveField(index, record.projModId);
                        }}><RedoOutlined /></Button>
                    }
                    return (
                        <Dropdown menu={{
                            items: [
                                {
                                    key: 'edit',
                                    label: '编辑',
                                    onClick: () => {
                                        // props.handleEdit(index, record.projModId, record);
                                        setId(record.projModId)
                                        setEditModal(true)
                                    }
                                }, {
                                    key: 'remove',
                                    label: '删除',
                                    onClick: () => {
                                        props.handleRemove(index, record.projModId, record);
                                    }
                                },
                            ]
                        }} placement="bottom" arrow>
                            <Button>…</Button>
                        </Dropdown>
                    )
                }
                // if (record.aiFieldStatus == 'GENERATING') {
                //     return <LoadingOutlined />
                // }
                // if (record.aiFieldStatus == 'FAILED') {
                //     return <Button onClick={() => {
                //         props.handleResaveField(index, record.projModId);
                //     }}><RedoOutlined /></Button>
                // }
                // return (
                //     <Dropdown menu={{
                //         items: [
                //             {
                //                 key: 'edit',
                //                 label: '编辑',
                //                 onClick: () => {
                //                     // props.handleEdit(index, record.projModId, record);
                //                     setId(record.projModId)
                //                     setEditModal(true)
                //                 }
                //             }, {
                //                 key: 'remove',
                //                 label: '删除',
                //                 onClick: () => {
                //                     props.handleRemove(index, record.projModId, record);
                //                 }
                //             },
                //         ]
                //     }} placement="bottom" arrow>
                //         <Button>…</Button>
                //     </Dropdown>
                // )
                // if (record.aiFieldStatus == 'SUCCESS' || status == 'GENERATING') {
                //     return (
                //         <Dropdown menu={{
                //             items: [

                //             ]
                //         }} placement="bottom" arrow>
                //             <Button>…</Button>
                //         </Dropdown>
                //     )
                // }else{
                //     return(
                //         <Dropdown menu={{
                //             items: [
                //                 {
                //                     key: 'edit',
                //                     label: '编辑',
                //                     onClick: () => {
                //                         // props.handleEdit(index, record.projModId, record);
                //                         setId(record.projModId)
                //                         setEditModal(true)
                //                     }
                //                 }, {
                //                     key: 'remove',
                //                     label: '删除',
                //                     onClick: () => {
                //                         props.handleRemove(index, record.projModId, record);
                //                     }
                //                 },
                //             ]
                //         }} placement="bottom" arrow>
                //             <Button>…</Button>
                //         </Dropdown>
                //     )
                // }
            }
        },
    ];

    const newModColumnArray: TableProps<ProjModType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        { title: '模块名称', dataIndex: 'name', key: 'name', width: 200, align: 'center' },
        { title: '模块描述', dataIndex: 'desc', key: 'desc', align: 'center' },
        {
            title: '确认',
            dataIndex: 'option',
            key: 'option',
            width: 80,
            align: 'center',
            render: (_value, record, index) => {
                return (
                    <Button onClick={() => {
                        props.handleSave(index, record);
                    }}>
                        <CheckOutlined />
                    </Button>
                )
            }
        },
    ];

    return (
        <>
            <div style={{ padding: '5px 0 0 0', fontWeight: 'bold' }}>模块管理</div>
            <div style={{ padding: '5px 0 0 0' }}>
                {newModArray.length > 0 ? <Divider orientation="right" plain>原模块</Divider> : <></>}
                <Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true} scroll={{ y: 240 }}
                    pagination={false} rowKey="projModId" />
                {
                    newModArray.length > 0 ? (
                        <>
                            <Divider orientation="right" plain>新模块</Divider>
                            <Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true}
                                scroll={{ y: 240 }} pagination={false} rowKey="id" />
                        </>
                    ) : <></>
                }
            </div>
            <div style={{ padding: '5px 0 0 0', textAlign: 'center' }}>
                {
                    newModArray.length > 0 ? (
                        <Space>
                            <Button type="link" style={{ cursor: 'pointer' }}
                                onClick={() => {
                                    props.handleGenerate();
                                }}><ReloadOutlined /> 重新生成</Button>
                        </Space>
                    ) : <Button type="link" disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false} style={{ cursor: 'pointer' }}
                        onClick={() => {
                            props.handleGenerate();
                        }}>AI生成</Button>
                }
            </div>
            <Modal title="编辑" open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
                < EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
            </Modal>
            <Modal title="查看" open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
                <ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
            </Modal>
        </>
    )
}