Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加模块菜单编辑功能

Browse Source
This commit is contained in:
WenC 2024-03-24 12:15:40 +08:00
parent 1111c6ff0b
commit aaae4f05e4
6 changed files with 296 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/modfield/ModField.tsx
View File

@ -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 (
<>

10
src/layout/body/Body.tsx
View File

@ -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/>

7
src/route/proj/ProjEdit.tsx
View File

@ -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(() => {

95
src/route/proj/edit/ProjConfigMenuList.tsx Normal file
View File

@ -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>
</>
)
}

59
src/route/proj/edit/ProjConfigModList.tsx
View File

@ -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 {get} from "../../../util/AjaxUtils.ts";
import {EditOutlined, PlusOutlined, DeleteOutlined, SearchOutlined} from "@ant-design/icons";
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'}}
onClick={() => {
nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
}}
><EditOutlined/></Button>
{
modSize < MAX_MOD_SIZE ? (
<Button type="primary" size="small"
style={{marginRight: '5px'}}
onClick={() => {
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}`)
}}><PlusOutlined/> 新增</Button>
{
modSize < MAX_MOD_SIZE ? (
<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"/>

135
src/route/proj/edit/ProjConfigModShow.tsx Normal file
View File

@ -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>
</>
)
}