system-copyright-react/src/components/card/CardProj.tsx

import './card-proj.css';
import {
    CheckOutlined,
    ClockCircleOutlined,
    CloseCircleOutlined,
    CreditCardOutlined,
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    FolderOutlined,
    LoadingOutlined,
    SearchOutlined,
    SettingOutlined,
    WarningOutlined
} from '@ant-design/icons';
import {Button, ConfigProvider, Tag} from 'antd';
import {GenerateStatus, IProj, PayStatus} from "../../interfaces/proj/IProj.ts";
import {useNavigate} from "react-router-dom";
import {Axios} from "../../util/AjaxUtils.ts";

export default function CardProj(props: { item: IProj }) {
    const nav = useNavigate();
    const data = props.item;

    /**
     * 生成状态
     */
    const renderGenerateStatus = () => {
        if (data.generate.generateStatus == GenerateStatus.PENDING) {
            return <Tag color="cyan"><ClockCircleOutlined/> 等待生成</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.GENERATING) {
            return <Tag color="magenta"><LoadingOutlined/> 正在生成</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
            return <Tag color="green"><CheckOutlined/> 生成成功</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.FAILED) {
            return <Tag color="red"><WarningOutlined/> 生成失败</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.NONE) {
            return <Tag color="cyan">未生成</Tag>
        }
        return <Tag color="red"><CloseCircleOutlined/> 错误</Tag>
    }

    const renderOption = () => {
        if(data.pay.payStatus == PayStatus.UNPAID) {
            return (
                <>
                    <div className="option">
                        <Button size="small" type="text"><CreditCardOutlined /> 待付款</Button>
                    </div>
                </>
            )
        }
        return (
            <>
                <div className="option">
                    <Button size="small" type="text" onClick={() => {
                        if(data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-loginpage-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-loginpage/${data.projId}`)
                        }
                    }}><SettingOutlined/> 登录界面设置</Button>
                    <Button size="small" type="text" onClick={() => {
                        if(data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-mod-list-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-mod-list/${data.projId}`)
                        }
                    }}><SettingOutlined/> 系统菜单管理({data.projModCount})</Button>
                    <Button size="small" type="text" onClick={() => {
                        if(data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-menu-list-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-menu-list/${data.projId}`)

                        }
                    }}><SettingOutlined/> 菜单排序({data.projModCount})</Button>
                </div>
                {
                    data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                        <div className="option">
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
                            }}><DownloadOutlined/> 申请表</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
                            }}><DownloadOutlined/> 操作手册</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
                            }}><DownloadOutlined/> 代码压缩包</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
                            }}><DownloadOutlined/> 代码文档</Button>
                        </div>
                    ) : <></>
                }
            </>
        )
    }

    return (
        <div className="card-proj">
            <div className="title">
                <div className="left">
                    <a href="/#">{data.projName}</a>
                </div>
                <div className="right">
                    <span className="context">上下文：{data.projContext}</span>
                    <span className="date">{data.gmtCreate}</span>
                    <span className="status">{renderGenerateStatus()}</span>
                </div>
            </div>
            <hr/>
            <div className="body">
                <div className="line">
                    <div className="left">
                        <span>金额￥：{data.pay.payment / 100}</span>
                    </div>
                    <div className="right">
                        {
                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                <span>
                                    <SearchOutlined/>
                                    <a href="/#" onClick={(e) => {
                                        e.preventDefault();
                                        nav(`/proj-edit/${data.projId}`)
                                    }}>查看</a>
                                </span>
                            ) : (
                                <span>
                                    <EditOutlined/>
                                    <a href="/#" onClick={(e) => {
                                        e.preventDefault();
                                        nav(`/proj-edit/${data.projId}`)
                                    }}>编辑</a>
                                </span>
                            )
                        }
                        <span>
                            <EyeOutlined/>
                            <a href="/#" onClick={(e) => {
                                e.stopPropagation();
                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                            }}>预览</a>
                        </span>
                    </div>
                </div>
                <div className="line">
                    <div className="left">
                        {
                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                <span>
                                    <SearchOutlined/>
                                    <a href="/#" onClick={(e) => {
                                        e.preventDefault();
                                        nav(`/agent-select/${data.projId}`);
                                    }}>找代理</a>
                                </span>
                            ) : <></>
                        }
                    </div>
                    <div className="right">
                        <span>
                            <FolderOutlined/>
                            <a href="/#">目录</a>
                        </span>
                    </div>
                </div>
            </div>
            <hr/>
            <div className="foot">
                <ConfigProvider theme={{
                    components: {
                        Button: {
                            contentFontSizeSM: 12,
                        }
                    }
                }}>
                    {renderOption()}
                </ConfigProvider>
            </div>
        </div>
    )
}