system-copyright-react/src/route/proj/edit/ProjConfigModList.tsx

import './proj-config-list-mod.css';
import {
    Alert,
    Breadcrumb, Button,
    message,
    Table, TableProps,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {EditOutlined, PlusOutlined, DeleteOutlined, SearchOutlined} from "@ant-design/icons";
import {del, get} from "../../../util/AjaxUtils.ts";

export const MAX_MOD_SIZE = 18;
export const MIN_MOD_SIZE = 10
export const MAX_MOD_SIZE_FREE = 3
export const MIN_MOD_SIZE_FREE = 1

interface DataType {
    projModId: string;
    projId: string;
    modContext: string;
    modName: string;
    modUrl: string;
    modDesc: string;
    modIcon: string;
}

type PropType = {
    isFree?: boolean;
}

export default function ProjConfigModList(props: PropType) {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [dataArray, setDataArray] = useState<DataType[]>();
    const [modSize, setModSize] = useState(0);
    const minSize = props.isFree ? MIN_MOD_SIZE_FREE : MIN_MOD_SIZE;
    const maxSize = props.isFree ? MAX_MOD_SIZE_FREE : MAX_MOD_SIZE;

    const height = window.innerHeight - 165;

    const renderData = () => {
        get<DataType[]>({
            messageApi,
            url: '/api/proj-mod/list',
            config: {
                params: {
                    projId: pathParams.projId
                }
            },
            onSuccess({data}) {
                setDataArray([...data]);
                setModSize(data.length);
            }
        })
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '菜单标题',
            dataIndex: 'modName',
            align: 'center',
            width: 180
        },
        {
            title: '菜单说明',
            dataIndex: 'modDesc',
            align: 'center',
        },
        {
            title: '图标',
            dataIndex: 'modIcon',
            align: 'center',
            width: 80,
            render: (_text) => {
                return <i className={_text}> </i>
            }
        },
        {
            title: '菜单地址',
            dataIndex: 'menuUrl',
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '操作',
            dataIndex: 'option',
            align: 'center',
            width: 100,
            render: (_text, record) => {
                return (
                    <>
                        {
                            modSize < maxSize ? (
                                <Button type="primary" size="small"
                                        style={{marginRight: '5px'}}
                                        onClick={() => {
                                            if(props.isFree) {
                                                nav(`/proj-edit/config-mod-fedit/${pathParams.projId}/${record.projModId}`)
                                            } else {
                                                nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
                                            }
                                        }}>
                                    <EditOutlined/>
                                </Button>
                            ) : (
                                <Button type="default" size="small"
                                        style={{marginRight: '5px'}}
                                        onClick={() => {
                                            if(props.isFree) {
                                                nav(`/proj-edit/config-mod-fshow/${pathParams.projId}/${record.projModId}`)
                                            } else {
                                                nav(`/proj-edit/config-mod-show/${pathParams.projId}/${record.projModId}`)
                                            }
                                        }}>
                                    <SearchOutlined/>
                                </Button>
                            )
                        }

                        <Button value="large" type="primary" size="small" danger
                                onClick={() => {
                                    del({
                                        messageApi,
                                        url: `/api/proj-mod/remove/proj-id/${pathParams.projId}/${record.projModId}`,
                                        onSuccess() {
                                            messageApi.success('删除成功');
                                            renderData();
                                        }
                                    })
                                }}
                        ><DeleteOutlined/></Button>
                    </>
                )
            }
        },
    ];

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

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {
                        title: <a onClick={() => {
                            nav(-1)
                        }}>编辑项目</a>
                    },
                    {title: '系统菜单管理'},
                ]}
            />
            <div className="mod-list-container" style={{height: `${height}px`}}>
                <Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info"/>
                <div className="mod-list">
                    <div className="table-btn-group">
                        {
                            modSize < maxSize ? (
                                <Button value="small" onClick={() => {
                                    if(props.isFree) {
                                        nav(`/proj-edit/config-mod-fsave/${pathParams.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-mod-save/${pathParams.projId}`)
                                    }
                                }}><PlusOutlined/> 新增</Button>
                            ) : <></>
                        }

                    </div>
                    <Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
                           scroll={{y: height - 210}} size="middle" bordered key="dataTable" rowKey="projModId"/>
                </div>
            </div>
        </>
    )

}