system-copyright-react/src/route/proj/ProjEditAll.tsx

import './proj-edit.css';
import { useNavigate, useParams } from "react-router-dom";
import { Button, message, Modal } from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import { Process } from "../../interfaces/step/IStepProj.ts";
import CardProjDownload from "../../components/card/CardProjDownload.tsx";
import CardProjJump from "../../components/card/CardProjJump.tsx";
import { useEffect, useState } from "react";
import { Axios, get } from "../../util/AjaxUtils.ts";
import { EditStepEnum, IProjEdit } from "../../interfaces/card/ICardProj.ts";
import { MAX_MOD_SIZE } from "./edit/ProjConfigModList.tsx";
import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import TitleIntroduction from '../../route/proj/edit/ProjEditStep1.tsx'
import TitleIntroductionShow from '../../route/proj/edit/ProjEditStep1Show.tsx'
import SoftwareInfo from '../../route/proj/edit/ProjEditStep2.tsx'
import SoftwareInfoShow from '../../route/proj/edit/ProjEditStep2Show.tsx'
export default function ProjEditAll() {
    //第一步 标题简介弹窗
    const [titleIntroductionOpen, setTitleIntroductionOpen] = useState(false)
    const [titleIntroductionShowOpen, setTitleIntroductionShowOpen] = useState(false)
    //第二步 软件基本信息弹窗
    const [softwareInfoOpen, setSoftwareOpen] = useState(false)
    const [softwareInfoShowOpen, setSoftwareShowOpen] = useState(false)
    const nav = useNavigate();
    const pathParams = useParams();

    const [messageApi, contextHolder] = message.useMessage();
    const [editStepArray, setEditStepArray] = useState<IProjEdit[]>([]);
    const [isEditStepEdited, setIsEditStepEdited] = useState(false);
    const [isConfigEdited, setIsConfigEdited] = useState(false);
    const [generateStatus, setGenerateStatus] = useState(GenerateStatus.NONE);
    const [previewUrl, setPreviewUrl] = useState('');

    // const height = window.innerHeight - 240;

    const renderEditStep = (data: any, isEdited: boolean, isGenerateSuccess: boolean) => {

        const editStepArray: IProjEdit[] = [];
        editStepArray.push(
            {
                title: '第1步:软件简介确认',
                desc: '修改软件系统的相关简介与详细介绍',
                step: 1,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.projIntroduction ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/step1/${pathParams.projId}`)
                        setTitleIntroductionOpen(true)
                    } else {
                        // nav(`/proj-edit/step1-show/${pathParams.projId}`)
                        setTitleIntroductionShowOpen(true)
                    }
                }
            },
            {
                title: '第2步:软件基本信息填写',
                desc: '完善软件简称、版本号、软件所属者及联系人等信息',
                step: 2,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.apply.projDevCompleteDate ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                canBtnClick: false,
                handleEdit() {
                    if (generateStatus != GenerateStatus.SUCCESS) {
                        // nav(`/proj-edit/step2/${pathParams.projId}`)
                        setSoftwareOpen(true)

                    } else {
                        // nav(`/proj-edit/step2-show/${pathParams.projId}`)
                        setSoftwareShowOpen(true)

                    }
                }
            },
            // {
            //     title: '著作人信息',
            //     desc: '请完善著作人相关信息',
            //     step: 4,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: editSteps[3].editStatus,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/step4/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/step4-show/${pathParams.projId}`)
            //         }
            //     }
            // },
            // {
            //     title: '申请人信息',
            //     desc: '请完善申请人信息',
            //     step: 5,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: editSteps[4].editStatus,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/step5/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/step5-show/${pathParams.projId}`)
            //         }
            //     }
            // },
        )
        setEditStepArray(editStepArray);
        setIsEditStepEdited(isEdited);
    }

    const renderData = () => {
        get<any>({
            messageApi: messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                const isEdited = Boolean(data.projIntroduction) == true && Boolean(data.apply.projDevCompleteDate) == true && Boolean(data.apply.envHardDev) == true && Boolean(data.loginpage.loginpageId) == true
                const isConfig = data.loginpage.loginpageId && MAX_MOD_SIZE > 0;
                const isGenerateSuccess: boolean = data.generate.generateStatus == GenerateStatus.SUCCESS;
                renderEditStep(data, isEdited, isGenerateSuccess);
                setIsConfigEdited(isConfig);
                setGenerateStatus(data.generate.generateStatus);
                setPreviewUrl(data.previewUrl);
            }
        })
    }

    useEffect(() => {
        renderData();
    }, [])

    return (
        <>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: '编辑项目'},
                ]}
            /> */}
            <div className="proj-edit" style={{ marginTop: '21px', padding: '15px 175px' }}>
                <StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING}
                    descTitle="完善信息"
                    descDetail="完善项目的基本信息"
                    hasNext={true}>
                    {
                        editStepArray.map((item, index) => {
                            return <CardProjEdit key={`editStep-${index}`}
                                title={item.title}
                                desc={item.desc}
                                status={item.status}
                                btnName={item.btnName}
                                handleEdit={item.handleEdit}
                                background={item.status == EditStepEnum.EDITED ? '#F5FAFE' : '#f3f3f3'}
                                shadow={item.status == EditStepEnum.EDITED ? '0px 3px 0px 0px rgba(55,144,215,0.18)' : ''}

                            />
                        })
                    }

                </StepProjEdit>
                <StepProjEdit step={2}
                    process={!isEditStepEdited ? Process.PENDING : (isConfigEdited ? Process.COMPLETE : Process.PROCESSING)}
                    descTitle="功能设置"
                    descDetail="设置系统的菜单功能" hasNext={true}>
                    {
                        <CardProjJump title="预览系统"
                            desc={isEditStepEdited && isConfigEdited ? "点击查看预览系统" : "制作中"}
                            canBtnClick={isEditStepEdited && isConfigEdited}
                            handleJump={() => {
                                window.open(`${Axios.defaults?.baseURL}/${previewUrl}`, '_blank')
                            }}
                        />
                    }
                </StepProjEdit>
                <StepProjEdit step={3}
                    process={generateStatus == GenerateStatus.SUCCESS ? Process.PROCESSING : Process.PENDING}
                    descTitle="资料下载">
                    <CardProjDownload title="申请表"
                        desc="点击下载申请表"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${pathParams.projId}`)
                        }}
                    />
                    <CardProjDownload title="操作手册"
                        desc="点击下载操作手册"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${pathParams.projId}`)
                        }}
                    />
                    <CardProjDownload title="代码压缩包"
                        desc="点击下载代码压缩包"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${pathParams.projId}`)
                        }}
                    />
                    <CardProjDownload title="代码文档"
                        desc="点击下载代码文档"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${pathParams.projId}`)
                        }}
                    />
                </StepProjEdit>
            </div>
            <div className="btn-container">
                <Button size="large" style={{
                    width: '200px',
                    height: '40px',
                    fontSize: '16px',
                    backgroundColor: '#e9e7e7',
                    color: '#A0A0A0',
                    border: 'none',
                }} onClick={() => {
                    nav(-1);
                }}>返回</Button>
            </div>
            {/* 第1步设置 */}
            <Modal open={titleIntroductionOpen}
                title="软件简介确认"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {

                    setTitleIntroductionOpen(false);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)

                }}
                footer={null}
            >
                <TitleIntroduction closeModal={() => { setTitleIntroductionOpen(false)
                    renderData()
                 }}></TitleIntroduction>
            </Modal>
            {/* 第1步查看 */}
            <Modal open={titleIntroductionShowOpen}
                destroyOnClose={true}

                title="软件简介查看"
                width={1500}
                onCancel={() => {
                    setTitleIntroductionShowOpen(false);
                }}
                footer={null}
            >
                <TitleIntroductionShow></TitleIntroductionShow>
            </Modal>
            {/* 第二步设置 */}
            <Modal open={softwareInfoOpen}
                title="软件基本信息填写"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setSoftwareOpen(false);
                    // setTimeout(() => {
                    //     props.closeModal()
                    //     window.location.reload(); // 刷新页面
                    // }, 1000);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)
                }}
                footer={null}
            >
                <SoftwareInfo closeModal={() => { setSoftwareOpen(false)
                    renderData()
                 }}></SoftwareInfo>
            </Modal>
            {/* 第二步查看 */}
            <Modal open={softwareInfoShowOpen}
                title="软件基本信息查看"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setSoftwareShowOpen(false);
                }}
                footer={null}
            >
                <SoftwareInfoShow></SoftwareInfoShow>
            </Modal>
        </>
    )
}