增加模块菜单编辑功能

src/components/modfield/ModField.tsx

@@ -82,7 +82,10 @@ export default function ModField(props: PropsType) {
             align: 'center',
             width: 150,
         },
-        {
+    ];
+
+    if(props.isEdit) {
+        columns.push({
             title: '操作',
             dataIndex: 'option',
             align: 'center',
@@ -100,8 +103,8 @@ export default function ModField(props: PropsType) {
                     return ''
                 }
             }
-        },
+        })
-    ];
+    }
 
     return (
         <>

src/layout/body/Body.tsx

@@ -15,6 +15,8 @@ import ProjConfigLoginpage from "../../route/proj/edit/ProjConfigLoginpage.tsx";
 import ProjConfigModList from "../../route/proj/edit/ProjConfigModList.tsx";
 import ProjConfigModSave from "../../route/proj/edit/ProjConfigModSave.tsx";
 import ProjConfigModEdit from "../../route/proj/edit/ProjConfigModEdit.tsx";
+import ProjConfigModShow from "../../route/proj/edit/ProjConfigModShow.tsx";
+import ProjConfigMenuList from "../../route/proj/edit/ProjConfigMenuList.tsx";
 
 const router = createBrowserRouter([
     {
@@ -73,6 +75,14 @@ const router = createBrowserRouter([
         path: '/proj-edit/config-mod-edit/:projId/:projModId',
         element: <ProjConfigModEdit/>
     },
+    {
+        path: '/proj-edit/config-mod-show/:projId/:projModId',
+        element: <ProjConfigModShow/>
+    },
+    {
+        path: '/proj-edit/config-menu-list/:projId',
+        element: <ProjConfigMenuList/>
+    },
     {
         path: '/agent-select/:projId',
         element: <AgentSelect/>

src/route/proj/ProjEdit.tsx

@@ -11,6 +11,7 @@ import CardProjJump from "../../components/card/CardProjJump.tsx";
 import {useEffect, useState} from "react";
 import {get} from "../../util/AjaxUtils.ts";
 import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
+import {MAX_MOD_SIZE} from "./edit/ProjConfigModList.tsx";
 
 
 export default function ProjEdit() {
@@ -113,7 +114,7 @@ export default function ProjEdit() {
                 desc: '请对系统菜单进行设置',
                 step: 2,
                 btnName: '设置',
-                status: data.projModCount > 0 ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
+                status: data.projModCount > MAX_MOD_SIZE ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                 handleEdit() {
                     nav(`/proj-edit/config-mod-list/${pathParams.projId}`)
                 }
@@ -123,12 +124,14 @@ export default function ProjEdit() {
                 desc: '调整菜单顺序',
                 step: 3,
                 btnName: '设置',
-                status: data.projModCount > 0 ? EditStepEnum.EDITED :  EditStepEnum.UN_EDIT,
+                status: data.projModCount > MAX_MOD_SIZE ? EditStepEnum.EDITED :  EditStepEnum.UN_EDIT,
                 handleEdit() {
+                    nav(`/proj-edit/config-menu-list/${pathParams.projId}`)
                 }
             }
         )
         setConfigArray(configArray);
+        setIsConfigEdited(data.loginpage.loginpageId && MAX_MOD_SIZE);
     }
 
     useEffect(() => {

src/route/proj/edit/ProjConfigMenuList.tsx

@@ -0,0 +1,95 @@
+import './proj-config-list-mod.css';
+import {
+    Alert,
+    Breadcrumb, Input,
+    message,
+    Table, TableProps,
+} from "antd";
+import {Link, useNavigate, useParams} from "react-router-dom";
+import {useEffect, useState} from "react";
+import {get, put} from "../../../util/AjaxUtils.ts";
+
+export const MAX_MOD_SIZE = 2;
+
+interface DataType {
+    projModId: string;
+    projId: string;
+    modContext: string;
+    modName: string;
+    modUrl: string;
+    modDesc: string;
+    modIcon: string;
+}
+
+export default function ProjConfigMenuList() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [dataArray, setDataArray] = useState<DataType[]>();
+
+    const height = window.innerHeight - 165;
+
+    const renderData = () => {
+        get<DataType>({
+            messageApi,
+            url: '/api/proj-menu/list',
+            config: {
+                params: {
+                    projId: pathParams.projId
+                }
+            },
+            onSuccess({data}) {
+                setDataArray([...data]);
+            }
+        })
+    }
+
+    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, record) => {
+                return <Input defaultValue={text}/>
+            }
+        },
+    ];
+
+    useEffect(() => {
+        renderData();
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: '系统菜单顺序'},
+                ]}
+            />
+            <div className="mod-list-container" style={{height: `${height}px`}}>
+                <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
+                <div className="mod-list">
+                    <Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
+                           scroll={{y: height - 210}} size="middle" bordered key="dataTable" rowKey="projModId"/>
+                </div>
+            </div>
+        </>
+    )
+
+}

src/route/proj/edit/ProjConfigModList.tsx

@@ -7,8 +7,10 @@ import {
 } from "antd";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import {useEffect, useState} from "react";
-import {EditOutlined, PlusOutlined, DeleteOutlined} from "@ant-design/icons";
+import {EditOutlined, PlusOutlined, DeleteOutlined, SearchOutlined} from "@ant-design/icons";
-import {get} from "../../../util/AjaxUtils.ts";
+import {del, get} from "../../../util/AjaxUtils.ts";
+
+export const MAX_MOD_SIZE = 2;
 
 interface DataType {
     projModId: string;
@@ -25,6 +27,8 @@ export default function ProjConfigModList() {
     const pathParams = useParams();
     const [messageApi, contextHolder] = message.useMessage();
     const [dataArray, setDataArray] = useState<DataType[]>();
+    const [modSize, setModSize] = useState(0);
+
     const height = window.innerHeight - 165;
 
     const renderData = () => {
@@ -37,7 +41,8 @@ export default function ProjConfigModList() {
                 }
             },
             onSuccess({data}) {
-                setDataArray([...data])
+                setDataArray([...data]);
+                setModSize(data.length);
             }
         })
     }
@@ -79,18 +84,39 @@ export default function ProjConfigModList() {
             dataIndex: 'option',
             align: 'center',
             width: 100,
-            render: (_text, record, index) => {
+            render: (_text, record) => {
                 return (
                     <>
-                        <Button value="default" type="primary" size="small"
+                        {
-                                style={{marginRight: '5px'}}
+                            modSize < MAX_MOD_SIZE ? (
-                                onClick={() => {
+                                <Button type="primary" size="small"
-                                    nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
+                                        style={{marginRight: '5px'}}
-                                }}
+                                        onClick={() => {
-                        ><EditOutlined/></Button>
+                                            nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
+                                        }}>
+                                    <EditOutlined/>
+                                </Button>
+                            ) : (
+                                <Button type="default" size="small"
+                                        style={{marginRight: '5px'}}
+                                        onClick={() => {
+                                            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>
                     </>
@@ -118,9 +144,14 @@ export default function ProjConfigModList() {
                 <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
                 <div className="mod-list">
                     <div className="table-btn-group">
-                        <Button value="small" onClick={() => {
+                        {
-                            nav(`/proj-edit/config-mod-save/${pathParams.projId}`)
+                            modSize < MAX_MOD_SIZE ? (
-                        }}><PlusOutlined/> 新增</Button>
+                                <Button value="small" onClick={() => {
+                                    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"/>

src/route/proj/edit/ProjConfigModShow.tsx

@@ -0,0 +1,135 @@
+import './proj-config-list-mod.css';
+import {
+    Alert,
+    Breadcrumb, Button, Col, Flex, Form, Input,
+    message, Row,
+} from "antd";
+import {Link, useNavigate, useParams} from "react-router-dom";
+import {useEffect, useState} from "react";
+import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
+import {get} from "../../../util/AjaxUtils.ts";
+
+type FormFieldType = {
+    projId: string;
+    modName: string;
+    modDesc: string;
+    modIcon: string;
+    fields: IModField[];
+}
+
+export default function ProjConfigModShow() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [form] = Form.useForm<FormFieldType>();
+    const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
+    const [fields, setFields] = useState<IModField[]>([]);
+
+    const height = window.innerHeight - 180;
+
+    useEffect(() => {
+        get({
+            messageApi,
+            url: `api/proj-mod/get/${pathParams.projModId}`,
+            onSuccess({data}) {
+                form.setFieldsValue({
+                    projId: data.projId,
+                    modName: data.modName,
+                    modDesc: data.modDesc,
+                    modIcon: data.modIcon,
+                    fields: data.fields,
+                });
+                setSelectedModIcon(data.modIcon);
+                setFields(data.fields)
+            }
+        })
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: <Link to={`/proj-edit/config-mod-list/${pathParams.projId}`}>系统菜单管理</Link>},
+                    {title: '查看菜单'},
+                ]}
+            />
+            <div className="mod-edit-container" style={{height: `${height}px`}}>
+                <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
+                <div className="mod-content">
+                    <Form
+                        name="basic"
+                        form={form}
+                        layout="vertical"
+                        labelCol={{span: 8}}
+                        wrapperCol={{span: 24}}
+                        style={{width: '100%'}}
+                        autoComplete="off"
+                    >
+                        <Row gutter={15}>
+                            <Col span={10}>
+                                <Form.Item<FormFieldType>
+                                    label="菜单名称"
+                                    name="modName"
+                                    extra="此内容会作为菜单名生成菜单，最多8个字"
+                                    rules={[{required: true, message: '请输入菜单名称'}]}
+                                >
+                                    <Input placeholder="请输入菜单名称" maxLength={8} readOnly/>
+                                </Form.Item>
+                                <Form.Item<FormFieldType>
+                                    label="菜单说明"
+                                    name="modDesc"
+                                    extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
+                                    rules={[{required: true, message: '请输入菜单说明'}]}
+                                >
+                                    <Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600} readOnly/>
+                                </Form.Item>
+                                <Form.Item<FormFieldType>
+                                    label="菜单图标"
+                                    name="modIcon"
+                                    extra="菜单图标会显示在菜单栏中"
+                                    rules={[{required: true, message: '请输入菜单图标'}]}
+                                >
+                                    <Button size="large"><i className={selectedModIcon}></i></Button>
+                                </Form.Item>
+                            </Col>
+                            <Col span={14}>
+                                <Form.Item<FormFieldType>
+                                    name="fields"
+                                    rules={[{required: true, message: '请添加菜单属性'}]}
+                                >
+                                    <ModField modFiledArray={fields}
+                                              isEdit={false}
+                                              scrollHeight={height - 380}
+                                              handleChange={(dataArray) => {
+                                                  if (!dataArray) {
+                                                      return;
+                                                  }
+                                                  form.setFieldValue('fields', dataArray);
+                                              }}/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+
+                        <Form.Item wrapperCol={{span: 24}}>
+                            <div style={{paddingTop: '15px'}}>
+                                <Flex align="center" justify="center" gap="large">
+                                    <Button type="default" htmlType="button" onClick={() => {
+                                        nav(-1);
+                                    }}>
+                                        返回
+                                    </Button>
+                                </Flex>
+                            </div>
+                        </Form.Item>
+                    </Form>
+
+                </div>
+            </div>
+        </>
+    )
+
+}