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

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

import ConfigModEdit from '../../proj/edit/ProjConfigModEdit.tsx'

export const MAX_MOD_SIZE = 15;
export const MIN_MOD_SIZE = 10
export const MAX_MOD_SIZE_FREE = 5
export const MIN_MOD_SIZE_FREE = 3

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

type PropType = {
    isFree?: boolean;
    projId?: string
}
export default function ProjConfigModList(props: PropType) {

    const [configModSaveOpen, setConfigModSaveOpen] = useState(false)
    const [configModEditOpen, setConfigModEdit] = useState(false)
    const [projModId, setprojModId] = useState('')
    // const nav = useNavigate();
    const pathParams = useParams();
    const [projId] = useState(pathParams.projId ? pathParams.projId : props.projId)
    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 - 210;

    const renderData = () => {
        get<DataType[]>({
            messageApi,
            url: '/api/proj-mod/list',
            config: {
                params: {
                    projId: 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 (
                    <>
                        <Button type="primary" size="small"
                            style={{ marginRight: '5px' }}
                            onClick={() => {
                                // if (props.isFree) {
                                //     // lyp
                                //     nav(`/proj-edit/config-mod-fedit/${pathParams.projId}/${record.projModId}`)
                                // } else {
                                //     nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
                                // }
                                setprojModId(record.projModId)
                                // console.log(record.projModId);

                                setConfigModEdit(true)
                            }}>
                            <EditOutlined />
                        </Button>
                        {/* {
                            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}`)
                                        }
                                    }}>
                                    <EditOutlined />
                                </Button>
                            )
                        } */}

                        <Button value="large" type="primary" size="small" danger
                            onClick={() => {
                                del({
                                    messageApi,
                                    url: `/api/proj-mod/remove/proj-id/${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}`)
                                    // }
                                    setConfigModSaveOpen(true)
                                }}><PlusOutlined /> 新增</Button>
                            ) : <></>
                        }

                    </div>
                    <Table columns={columns} dataSource={dataArray} pagination={{ pageSize: 20 }}
                        scroll={{ y: height - 210 }} size="middle" bordered key="dataTable" rowKey="projModId" />
                </div>
            </div>
            <Modal open={configModSaveOpen}
                title="新增"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setConfigModSaveOpen(false);
                }}
                footer={null}
            >
                <ConfigModSave
                    projId={projId}
                    closeModal={() => {
                        renderData()

                        setConfigModSaveOpen(false)
                    }}></ConfigModSave>
            </Modal>

            <Modal open={configModEditOpen}
                title="编辑"
                width={1500}

                onCancel={() => {
                    // setprojModId('')
                    // console.log(projModId);
                    setConfigModEdit(false);


                }}
                footer={null}
            >
                <ConfigModEdit
                    key={projModId}
                    closeModal={() => {
                        setConfigModEdit(false)
                        renderData()
                    }} projModId={projModId} ></ConfigModEdit>
            </Modal>
        </>
    )

}