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-23 16:20:14 +08:00
parent ea0b30554c
commit e48922e931
9 changed files with 223 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/ConfigModModal/ConfigModModal.tsx Normal file
View File

@ -0,0 +1,158 @@
import './proj-config-list-mod.css';
import {
Button, Col, Flex, Form, Input,
message, Row,
} from "antd";
import { useNavigate} from "react-router-dom";
import { useEffect, useState } from "react";
import ModField, { IModField } from "../modfield/ModField.tsx";
import { get } from "../../util/AjaxUtils.ts";
// import { MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE } from "../../route/proj/edit/ProjConfigModList.tsx";
type FormFieldType = {
projId: string;
modName: string;
modDesc: string;
modIcon: string;
fields: IModField[];
}
type PropsType = {
id: string;
isFree?: boolean;
onConfirm: any
}
export default function ProjConfigModShow(props: PropsType) {
// 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 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;
useEffect(() => {
get<any>({
messageApi,
url: `api/proj-mod/get/${props.id}`,
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: <a onClick={() => {
if(props.isFree) {
nav(`/proj-efree/${pathParams.projId}`)
} else {
`/proj-edit/${pathParams.projId}`
}
}}>编辑项目</a>
},
{
title: <a onClick={() => {
nav(-1);
}}>系统菜单管理</a>
},
{title: '查看菜单'},
]}
/> */}
<div className="mod-edit-container" style={{ height: `${height}px`, marginTop: '17px' }}>
<div style={{ height: `${height}px`, overflow: 'auto' }}>
{/* <Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} 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" size='large' htmlType="button" onClick={() => {
props.onConfirm()
}}>
返回
</Button>
</Flex>
</div>
</Form.Item>
</Form>
</div>
</div>
</div>
</>
)
}

22
src/components/ConfigModModal/proj-config-list-mod.css Normal file
View File

@ -0,0 +1,22 @@
.mod-list-container {
background-color: var(--color-light);
padding: 15px 15px 0 15px;
overflow: auto;
}
.mod-list-container .mod-list .table-btn-group {
margin: 15px 0;
}
.mod-list-container .mod-list .table-btn-group .ant-btn {
margin-right: 5px;
}
.mod-edit-container {
background-color: var(--color-light);
padding: 15px;
}
.mod-edit-container .mod-content {
margin-top: 15px;
}

6
src/components/EditModal/EditModal.tsx
View File

@ -4,7 +4,7 @@ import {
Button, Col, Flex, Form, Input,
message, Modal, Row, Spin,
} from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import FaiconSelect from "../faicon/FaIconSelect.tsx";
import ModField, { IModField } from "../modfield/ModField.tsx";
@ -183,13 +183,13 @@ export default function ProjConfigModEdit(props: idType) {
console.log(((form.getFieldValue('fields'))[0].fieldDesc));
const isChinese =
(form.getFieldValue('fields')).every((item: { fieldDesc: string; }) => {
return /[\u4e00-\u9fa5]/.test(item.fieldDesc);
return /^([\u4e00-\u9fa5a-zA-Z]+)$/.test(item.fieldDesc);
});
console.log(isChinese);
if (!isChinese) {
messageApi.error('描述必须含有中文')
messageApi.error('描述由中文和字母组成')
} else {
console.log(projId);

28
src/components/ai/mod/AiHelperMod.tsx
View File

@ -3,8 +3,10 @@ import { CheckOutlined, LoadingOutlined, ReloadOutlined, RedoOutlined } from "@a
import { useEffect, useState } from "react";
import { IProjMod } from "../../../interfaces/proj/IProj.ts";
import EditModal from '../../EditModal/EditModal.tsx'
import ConfigModModal from '../../ConfigModModal/ConfigModModal.tsx'
import { get } from "../../../util/AjaxUtils.ts";
import { useParams } from "react-router-dom";
import { SearchOutlined } from '@ant-design/icons';
import {
message
@ -30,6 +32,8 @@ export default function AiHelperMod(props: PropsType) {
const [modArray, setModArray] = useState<IProjMod[]>([]);
const [newModArray, setNewModArray] = useState<ProjModType[]>([]);
const [id, setId] = useState('')
const[configModal,setConfigModal] = useState(false)
const [editModal, setEditModal] = useState(false)
const [updata, setUpdata] = useState<any[]>([])
const [status, setStatus] = useState('')
@ -53,7 +57,7 @@ export default function AiHelperMod(props: PropsType) {
messageApi,
url: `/api/proj/get/${pathParams.projId}`,
onSuccess({ data }) {
console.log('其他页面状态判断', data);
// console.log('其他页面状态判断', data);
setStatus(data.generate.generateStatus)
}
})
@ -97,17 +101,20 @@ export default function AiHelperMod(props: PropsType) {
width: 80,
align: 'center',
render: (_value, record, index) => {
if(status == 'SUCCESS' ){
return(
<Button disabled>已成功</Button>
if (status == 'SUCCESS') {
return (
<Button icon={<SearchOutlined />} onClick={() => {
setId(record.projModId)
setConfigModal(true)
}}></Button>
)
}else if(status == 'GENERATING'){
return(
} else if (status == 'GENERATING') {
return (
<LoadingOutlined />
)
}
else{
else {
if (record.aiFieldStatus == 'GENERATING') {
return <LoadingOutlined />
}
@ -267,16 +274,17 @@ export default function AiHelperMod(props: PropsType) {
props.handleGenerate();
}}><ReloadOutlined /> 重新生成</Button>
</Space>
) : <Button type="link" disabled={status=='SUCCESS' || status=='GENERATING' ? true : false} style={{ cursor: 'pointer' }}
) : <Button type="link" disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false} style={{ cursor: 'pointer' }}
onClick={() => {
props.handleGenerate();
}}>AI生成</Button>
}
</div>
<Modal title="编辑" open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
< EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
</Modal>
<Modal title="查看" open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
<ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
</Modal>
</>
)

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

@ -440,9 +440,9 @@ export default function ProjEdit() {
width: '200px',
height: '40px',
fontSize: '16px',
backgroundColor: '#e9e7e7',
color: '#A0A0A0',
border: 'none',
backgroundColor: 'white',
// color: '#A0A0A0',
// border: 'none',
}} onClick={() => {
nav(-1);
}}>返回</Button>
@ -501,6 +501,7 @@ export default function ProjEdit() {
maskClosable={false}
destroyOnClose
onCancel={() => {
renderData()
setAiHelperModalOpen(false);
// console.log(123);

14
src/route/proj/ProjNew.tsx
View File

@ -28,7 +28,8 @@ export default function ProjNew() {
projIntroduction: '',
});
const [createProjId, setCreateProjId] = useState('');
const listProjChargeAdditional: string[] = [];
const oldlistProjChargeAdditional: string[] = [];
const [listProjChargeAdditional,setlistProjChargeAdditional] = useState<string[]>([])
useEffect(() => {
get({
@ -66,13 +67,18 @@ export default function ProjNew() {
const videoDemo = queryParams.get('videoDemo') == 'true' ? true : false
if (pkg) {
price += charge.additional.pkg;
listProjChargeAdditional.push(ProjAdditionalType.PKG);
oldlistProjChargeAdditional.push(ProjAdditionalType.PKG);
console.log(listProjChargeAdditional);
}
if (videoDemo) {
price += charge.additional.videoDemo;
listProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
oldlistProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
console.log(listProjChargeAdditional);
}
setChargePrice(price);
setlistProjChargeAdditional(oldlistProjChargeAdditional)
// console.log('传递信息pkg:',pkg,'videoDemo:',videoDemo);
// console.log('显示价格',price);
@ -164,6 +170,8 @@ export default function ProjNew() {
cancelText="取消"
open={isCreateModalOpen}
onOk={() => {
// console.log('最终',listProjChargeAdditional);
setIsCreateModalOpen(false);
post<any>({
messageApi,

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

@ -180,13 +180,13 @@ export default function ProjConfigModEdit(props: PropsType) {
const isChinese =
( form.getFieldValue('fields')).every((item: { fieldDesc: string; }) => {
return /[\u4e00-\u9fa5]/.test(item.fieldDesc);
return /^([\u4e00-\u9fa5a-zA-Z]+)$/.test(item.fieldDesc);
});
// console.log(isChinese);
if (!isChinese) {
messageApi.error('描述必须含有中文')
messageApi.error('描述由中文和字母组成')
}else{
put({
messageApi,

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

@ -187,11 +187,11 @@ export default function ProjConfigModSave(props: PropsType) {
// console.log( ((form.getFieldValue('fields'))[0].fieldDesc ));
const isChinese =
( form.getFieldValue('fields')).every((item: { fieldDesc: string; }) => {
return /^[\u4e00-\u9fa5]+$/.test(item.fieldDesc);
return /^([\u4e00-\u9fa5a-zA-Z]+)$/.test(item.fieldDesc);
});
if (!isChinese) {
messageApi.error('描述必须为中文')
messageApi.error('描述由中文和字母组成')
}else{
post({
messageApi,

2
src/util/AjaxUtils.ts
View File

@ -6,7 +6,7 @@ export const Axios = axios;
// axios.defaults.baseURL = 'http://192.168.0.163:7025/copyright';
axios.defaults.baseURL = 'http://192.168.0.15:7025/copyright';
// axios.defaults.baseURL = '/copyright';
export const WebSocketBaseUrl: string = 'ws://192.168.0.163:7025/copyright';
export const WebSocketBaseUrl: string = 'ws://192.168.0.15:7025/copyright';
// export const WebSocketBaseUrl: string = '/copyright';
export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671'; // 18634604067
// export const DevUserId: string = 'c2438eb8-2685-49a9-bf02-5111a5192d96'; // 18647109157