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

lyp

Browse Source
This commit is contained in:
xixi 2024-05-21 15:24:48 +08:00
parent 2e50dbe6d2
commit e56864c02e
5 changed files with 137 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import './proj-edit.css'; import './proj-edit.css';1
// import {Link, useNavigate, useParams} from "react-router-dom"; // import {Link, useNavigate, useParams} from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { Button, FloatButton, message, Modal } from "antd"; import { Button, FloatButton, message, Modal } from "antd";

14
src/route/proj/edit/ProjConfigMenuListShow.tsx
View File

@ -1,6 +1,6 @@
import './proj-config-list-mod.css'; import './proj-config-list-mod.css';
import {Alert, Breadcrumb, message, Table, TableProps,} from "antd"; import {Alert, message, Table, TableProps,} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {get} from "../../../util/AjaxUtils.ts"; import {get} from "../../../util/AjaxUtils.ts";
@ -17,12 +17,12 @@ interface DataType {
} }
export default function ProjConfigMenuListShow() { export default function ProjConfigMenuListShow() {
const nav = useNavigate(); // const nav = useNavigate();
const pathParams = useParams(); const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
const [dataArray, setDataArray] = useState<DataType[]>(); const [dataArray, setDataArray] = useState<DataType[]>();
const height = window.innerHeight - 165; const height = window.innerHeight - 200;
const renderData = () => { const renderData = () => {
get<DataType[]>({ get<DataType[]>({
@ -66,15 +66,15 @@ export default function ProjConfigMenuListShow() {
return ( return (
<> <>
{contextHolder} {contextHolder}
<Breadcrumb {/* <Breadcrumb
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>}, {title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '系统菜单顺序'}, {title: '系统菜单顺序'},
]} ]}
/> /> */}
<div className="mod-list-container" style={{height: `${height}px`}}> <div className="mod-list-container" style={{height: `${height}px`,marginTop:'17px',overflow:'auto'}}>
<Alert message="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/> <Alert message="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/>
<div className="mod-list" style={{marginTop: '15px'}}> <div className="mod-list" style={{marginTop: '15px'}}>
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}} <Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}

17
src/route/proj/edit/ProjConfigModEdit.tsx
View File

@ -148,10 +148,14 @@ export default function ProjConfigModEdit(props: PropsType) {
<Flex align="center" justify="center" gap="large"> <Flex align="center" justify="center" gap="large">
<Button type="primary" <Button type="primary"
htmlType="submit" htmlType="submit"
style={{backgroundColor: 'var(--color-primary)'}}> size='large'
// style={{backgroundColor: 'var(--color-primary)'}}
>
保存 保存
</Button> </Button>
<Button type="default" htmlType="button" onClick={() => { <Button type="default" htmlType="button"
size='large'
onClick={() => {
nav(-1); nav(-1);
}}> }}>
返回 返回
@ -169,6 +173,14 @@ export default function ProjConfigModEdit(props: PropsType) {
open={isEditModalOpen} open={isEditModalOpen}
onOk={() => { onOk={() => {
setIsEditModalOpen(false); setIsEditModalOpen(false);
const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
console.log( ((form.getFieldValue('fields'))[0].fieldDesc ));
if (!reg.test((form.getFieldValue('fields'))[0].fieldDesc)) {
messageApi.error('描述必须为中文')
}else{
put({ put({
messageApi, messageApi,
url: `/api/proj-mod/update/${pathParams.projModId}`, url: `/api/proj-mod/update/${pathParams.projModId}`,
@ -189,6 +201,7 @@ export default function ProjConfigModEdit(props: PropsType) {
setLoading(false); setLoading(false);
} }
}) })
}
}} }}
onCancel={() => { onCancel={() => {
setIsEditModalOpen(false); setIsEditModalOpen(false);

12
src/route/proj/edit/ProjConfigModListShow.tsx
View File

@ -1,11 +1,11 @@
import './proj-config-list-mod.css'; import './proj-config-list-mod.css';
import { import {
Alert, Alert,
Breadcrumb, Button, Button,
message, message,
Table, TableProps, Table, TableProps,
} from "antd"; } from "antd";
import {Link, useNavigate, useParams} from "react-router-dom"; import { useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {SearchOutlined} from "@ant-design/icons"; import {SearchOutlined} from "@ant-design/icons";
import {get} from "../../../util/AjaxUtils.ts"; import {get} from "../../../util/AjaxUtils.ts";
@ -26,7 +26,7 @@ export default function ProjConfigModListShow() {
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
const [dataArray, setDataArray] = useState<DataType[]>(); const [dataArray, setDataArray] = useState<DataType[]>();
const height = window.innerHeight - 165; const height = window.innerHeight - 200;
const renderData = () => { const renderData = () => {
get<DataType[]>({ get<DataType[]>({
@ -103,15 +103,15 @@ export default function ProjConfigModListShow() {
return ( return (
<> <>
{contextHolder} {contextHolder}
<Breadcrumb {/* <Breadcrumb
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>}, {title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '系统菜单查看'}, {title: '系统菜单查看'},
]} ]}
/> /> */}
<div className="mod-list-container" style={{height: `${height}px`}}> <div className="mod-list-container" style={{height: `${height}px`,marginTop:'17px',overflow:'auto'}}>
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/> <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
<div className="mod-list" style={{marginTop: '15px'}}> <div className="mod-list" style={{marginTop: '15px'}}>
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}} <Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}

178
src/route/proj/edit/ProjConfigModSave.tsx
View File

@ -1,15 +1,15 @@
import './proj-config-list-mod.css'; import './proj-config-list-mod.css';
import { import {
Alert, Alert,
Button, Col, Flex, Form, Input, Button, Col, Flex, Form, Input,
message, Modal, Row, Spin, message, Modal, Row, Spin,
} from "antd"; } from "antd";
import { useNavigate, useParams} from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx"; import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx"; import ModField, { IModField } from "../../../components/modfield/ModField.tsx";
import {post} from "../../../util/AjaxUtils.ts"; import { post } from "../../../util/AjaxUtils.ts";
import {MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE} from "./ProjConfigModList.tsx"; import { MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE } from "./ProjConfigModList.tsx";
type FormFieldType = { type FormFieldType = {
modName: string; modName: string;
@ -66,16 +66,16 @@ export default function ProjConfigModSave(props: PropsType) {
{title: '添加菜单'}, {title: '添加菜单'},
]} ]}
/> */} /> */}
<div className="mod-edit-container" style={{height: `${height}px`,marginTop:'18px',overflow:'auto'}}> <div className="mod-edit-container" style={{ height: `${height}px`, marginTop: '18px', overflow: 'auto' }}>
<Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info"/> <Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info" />
<div className="mod-content"> <div className="mod-content">
<Form <Form
name="basic" name="basic"
form={form} form={form}
layout="vertical" layout="vertical"
labelCol={{span: 8}} labelCol={{ span: 8 }}
wrapperCol={{span: 24}} wrapperCol={{ span: 24 }}
style={{width: '100%'}} style={{ width: '100%' }}
onFinish={() => { onFinish={() => {
setIsEditModalOpen(true); setIsEditModalOpen(true);
}} }}
@ -87,23 +87,43 @@ export default function ProjConfigModSave(props: PropsType) {
label="菜单名称" label="菜单名称"
name="modName" name="modName"
extra="此内容会作为菜单名生成菜单，最多8个字" extra="此内容会作为菜单名生成菜单，最多8个字"
rules={[{required: true, message: '请输入菜单名称'}]} rules={[{ required: true, message: '请输入菜单名称' },
// {
// validator: (_, value) => {
// const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
// if (!reg.test(value)) {
// return Promise.reject('请输入中文字符');
// }
// return Promise.resolve();
// }
// },
]}
> >
<Input placeholder="请输入菜单名称" maxLength={8}/> <Input placeholder="请输入菜单名称" maxLength={8} />
</Form.Item> </Form.Item>
<Form.Item<FormFieldType> <Form.Item<FormFieldType>
label="菜单说明" label="菜单说明"
name="modDesc" name="modDesc"
extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字" extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
rules={[{required: true, message: '请输入菜单说明'}]} rules={[{ required: true, message: '请输入菜单说明' },
// {
// validator: (_, value) => {
// const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
// if (!reg.test(value)) {
// return Promise.reject('请输入中文字符');
// }
// return Promise.resolve();
// }
// }
]}
> >
<Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600}/> <Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600} />
</Form.Item> </Form.Item>
<Form.Item<FormFieldType> <Form.Item<FormFieldType>
label="菜单图标" label="菜单图标"
name="modIcon" name="modIcon"
extra="菜单图标会显示在菜单栏中" extra="菜单图标会显示在菜单栏中"
rules={[{required: true, message: '请输入菜单图标'}]} rules={[{ required: true, message: '请输入菜单图标' }]}
> >
<Button size="large" onClick={() => { <Button size="large" onClick={() => {
setIsModIconModalOpen(true); setIsModIconModalOpen(true);
@ -113,7 +133,8 @@ export default function ProjConfigModSave(props: PropsType) {
<Col span={14}> <Col span={14}>
<Form.Item<FormFieldType> <Form.Item<FormFieldType>
name="fields" name="fields"
rules={[{required: true, message: '请添加菜单属性'}]} rules={[{ required: true, message: '请添加菜单属性' }
]}
> >
<ModField <ModField
isEdit={true} isEdit={true}
@ -124,27 +145,27 @@ export default function ProjConfigModSave(props: PropsType) {
return; return;
} }
form.setFieldValue('fields', dataArray); form.setFieldValue('fields', dataArray);
}}/> }} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Form.Item wrapperCol={{span: 24}}> <Form.Item wrapperCol={{ span: 24 }}>
<div style={{paddingTop: '15px'}}> <div style={{ paddingTop: '15px' }}>
<Flex align="center" justify="center" gap="large"> <Flex align="center" justify="center" gap="large">
<Button type="primary" <Button type="primary"
htmlType="submit" htmlType="submit"
// style={{backgroundColor: 'var(--color-primary)'}} // style={{backgroundColor: 'var(--color-primary)'}}
size='large' size='large'
> >
保存 保存
</Button> </Button>
<Button type="default" htmlType="button" <Button type="default" htmlType="button"
size='large' size='large'
onClick={() => { onClick={() => {
nav(-1); nav(-1);
}}> }}>
返回 返回
</Button> </Button>
</Flex> </Flex>
@ -155,54 +176,71 @@ export default function ProjConfigModSave(props: PropsType) {
</div> </div>
</div> </div>
<Modal title="提示" <Modal title="提示"
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
open={isEditModalOpen} open={isEditModalOpen}
onOk={() => { onOk={() => {
setIsEditModalOpen(false);
post({ setIsEditModalOpen(false);
messageApi,
url: `/api/proj-mod/save`, const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
body: { console.log( ((form.getFieldValue('fields'))[0].fieldDesc ));
projId: pathParams.projId,
modName: form.getFieldValue('modName'),
modDesc: form.getFieldValue('modDesc'), if (!reg.test((form.getFieldValue('fields'))[0].fieldDesc)) {
modIcon: form.getFieldValue('modIcon'), messageApi.error('描述必须为中文')
fields: form.getFieldValue('fields'), }else{
}, post({
onBefore() { messageApi,
setLoading(true); url: `/api/proj-mod/save`,
}, body: {
onSuccess() { projId: pathParams.projId,
messageApi.success('添加成功'); modName: form.getFieldValue('modName'),
nav(0); modDesc: form.getFieldValue('modDesc'),
}, modIcon: form.getFieldValue('modIcon'),
onFinally() { fields: form.getFieldValue('fields'),
setLoading(false); },
} onBefore() {
}) setLoading(true);
}} },
onCancel={() => { onSuccess() {
setIsEditModalOpen(false); messageApi.success('添加成功');
}}> setTimeout(function () {
// 刷新当前页面
// location.reload();
// 返回上一页
nav(-1);
}, 1000);
},
onFinally() {
setLoading(false);
}
})
}
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div> <div>确定提交吗？</div>
</Modal> </Modal>
<Modal title="选择图标" <Modal title="选择图标"
footer={false} footer={false}
open={isModIconModalOpen} open={isModIconModalOpen}
onCancel={() => { onCancel={() => {
setIsModIconModalOpen(false); setIsModIconModalOpen(false);
}}> }}>
<div style={{maxHeight: '400px', overflow: 'auto'}}> <div style={{ maxHeight: '400px', overflow: 'auto' }}>
<FaiconSelect selectedIcon={selectedModIcon} <FaiconSelect selectedIcon={selectedModIcon}
handleClick={(icon) => { handleClick={(icon) => {
form.setFieldValue('modIcon', icon); form.setFieldValue('modIcon', icon);
setSelectedModIcon(icon); setSelectedModIcon(icon);
}} }}
/> />
</div> </div>
</Modal> </Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen/> <Spin tip="正在提交..." spinning={loading} fullscreen />
</> </>
) )