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-25 19:25:57 +08:00
parent aaae4f05e4
commit 3b8419f7a7
7 changed files with 162 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/card/CardProjLoading.tsx
View File

@ -1,15 +1,28 @@
import './card-proj-loading.css';
import {Loading3QuartersOutlined} from '@ant-design/icons';
import {IProjLoading} from "../../interfaces/card/ICardProj.ts";
import {useState} from "react";
export default function CardProjLoading(props: IProjLoading) {
const [duration, setDuration] = useState(props.duration);
const interval = setInterval(() => {
if (duration <= 0) {
clearInterval(interval);
props.handleCountDownOver();
return;
}
setDuration(duration - 1000);
}, 1000);
export default function CardProjLoading(props:IProjLoading) {
return (
<div className="card-proj-loading">
<div className="title">
<Loading3QuartersOutlined spin={true} style={{color: '#0052d9'}}/>
<span className="label">{props.title}</span>
</div>
<div className="desc">资料正在排队，预计等待600s</div>
<div className="desc">{props.desc}，预计等待{duration}s</div>
</div>
)
}

10
src/components/card/CardProjResult.tsx
View File

@ -11,10 +11,12 @@ export default function CardProjResult(props: IProjResult) {
{
props.handleFeedback ? (
<div className="option">
<a href="/#" className="edit" onClick={(e) => {
e.preventDefault();
props.handleFeedback?.();
}}>反馈</a>
{
<a href="/#" className="edit" onClick={(e) => {
e.preventDefault();
props.handleFeedback?.();
}}>反馈</a>
}
</div>
) : <></>
}

3
src/interfaces/card/ICardProj.ts
View File

@ -17,6 +17,9 @@ export interface IProjEdit {
export interface IProjLoading {
title: string;
desc?: string;
duration: number;
handleCountDownOver(): void;
}
export interface IProjResult {

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

@ -1,6 +1,6 @@
import './proj-edit.css';
import {Link, useNavigate, useParams} from "react-router-dom";
import {Breadcrumb, Button, message} from "antd";
import {Breadcrumb, Button, message, Modal} from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import {Process} from "../../interfaces/step/IStepProj.ts";
@ -9,10 +9,10 @@ import CardProjResult from "../../components/card/CardProjResult.tsx";
import CardProjDownload from "../../components/card/CardProjDownload.tsx";
import CardProjJump from "../../components/card/CardProjJump.tsx";
import {useEffect, useState} from "react";
import {get} from "../../util/AjaxUtils.ts";
import {Axios, get, post} from "../../util/AjaxUtils.ts";
import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
import {MAX_MOD_SIZE} from "./edit/ProjConfigModList.tsx";
import {GenerateStatus} from "../../interfaces/proj/IProj.ts";
export default function ProjEdit() {
const nav = useNavigate();
@ -25,9 +25,12 @@ export default function ProjEdit() {
const [isConfigEdited, setIsConfigEdited] = useState(false);
// const [isAllStepEdited, setIsAllStepEdited] = useState(false);
const [canGenerate, setCanGenerate] = useState(false);
const [generateStatus, setGenerateStatus] = useState(GenerateStatus.NONE);
const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
const [previewUrl, setPreviewUrl] = useState('');
const height = window.innerHeight - 240;
const renderEditStep = (editSteps: any[]) => {
const renderEditStep = (editSteps: any[], isEdited: boolean) => {
const editStepArray: IProjEdit[] = [];
editStepArray.push(
{
@ -86,17 +89,10 @@ export default function ProjEdit() {
}
)
setEditStepArray(editStepArray);
setIsEditStepEdited(
editSteps[0].editStatus == EditStepEnum.EDITED
&& editSteps[1].editStatus == EditStepEnum.EDITED
&& editSteps[2].editStatus == EditStepEnum.EDITED
&& editSteps[3].editStatus == EditStepEnum.EDITED
&& editSteps[4].editStatus == EditStepEnum.EDITED
&& editSteps[5].editStatus == EditStepEnum.EDITED
)
setIsEditStepEdited(isEdited);
}
const renderSetting = (data: any) => {
const renderSetting = (data: any, isConfig: boolean) => {
const configArray: IProjEdit[] = [];
configArray.push(
{
@ -124,25 +120,40 @@ export default function ProjEdit() {
desc: '调整菜单顺序',
step: 3,
btnName: '设置',
status: data.projModCount > MAX_MOD_SIZE ? 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);
setIsConfigEdited(isConfig);
}
useEffect(() => {
const renderData = () => {
get({
messageApi: messageApi,
url: `/api/proj/get/${pathParams.projId}`,
onSuccess({data}) {
renderEditStep(data.editSteps);
renderSetting(data);
const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED
&& data.editSteps[1].editStatus == EditStepEnum.EDITED
&& data.editSteps[2].editStatus == EditStepEnum.EDITED
&& data.editSteps[3].editStatus == EditStepEnum.EDITED
&& data.editSteps[4].editStatus == EditStepEnum.EDITED
&& data.editSteps[5].editStatus == EditStepEnum.EDITED;
const isConfig = data.loginpage.loginpageId && MAX_MOD_SIZE > 0;
const isGenerate = isEdited && isConfig;
renderEditStep(data.editSteps, isEdited);
renderSetting(data, isConfig);
setCanGenerate(isGenerate);
setGenerateStatus(data.generate.generateStatus);
setPreviewUrl(data.previewUrl);
}
})
}
useEffect(() => {
renderData();
}, [])
return (
@ -193,31 +204,67 @@ export default function ProjEdit() {
<CardProjJump title="预览系统"
desc="点击查看预览系统"
handleJump={() => {
nav('/agent-select/2');
window.open(`${Axios.defaults?.baseURL}/${previewUrl}`, '_blank')
}}
/>
) : <></>
}
</StepProjEdit>
<StepProjEdit step={3} process={Process.PENDING} descTitle="资料生成" hasNext={true}>
<CardProjEdit title="资料生成"
desc="生成软著所需要的资料，此操作后项目无法再次编辑"
btnName="生成"
status={EditStepEnum.UN_EDIT}
canBtnClick={canGenerate}
handleEdit={() => {
console.log('编辑')
}}
/>
<CardProjLoading title="正在排队"
desc="资料正在排队，预计等待600秒"
/>
<CardProjResult title="生成成功"
isSuccess={true}
handleFeedback={() => {
console.log('反馈')
}}
/>
<StepProjEdit step={3} process={canGenerate ? Process.PROCESSING : Process.PENDING} descTitle="资料生成"
hasNext={true}>
{
generateStatus == GenerateStatus.NONE || generateStatus == GenerateStatus.FAILED ? (
<CardProjEdit title="资料生成"
desc="生成软著所需要的资料，此操作后项目无法再次编辑"
btnName="生成"
status={EditStepEnum.UN_EDIT}
canBtnClick={canGenerate}
handleEdit={() => {
setIsGenerateModalOpen(true);
}}
/>
) : <></>
}
{
generateStatus == GenerateStatus.PENDING ? (
<CardProjLoading title="正在排队"
desc="资料正在排队"
duration={600}
handleCountDownOver={() => {
renderData();
}}
/>
) : <></>
}
{
generateStatus == GenerateStatus.GENERATING ? (
<CardProjLoading title="正在生成"
desc="资料正在生成"
duration={600}
handleCountDownOver={() => {
renderData();
}}
/>
) : <></>
}
{
generateStatus == GenerateStatus.SUCCESS ? (
<CardProjResult title="生成成功"
isSuccess={true}
/>
) : <></>
}
{
generateStatus == GenerateStatus.FAILED ? (
<CardProjResult title="生成失败"
isSuccess={false}
handleFeedback={() => {
console.log('反馈')
}}
/>
) : <></>
}
</StepProjEdit>
<StepProjEdit step={4} process={Process.PENDING} descTitle="资料下载">
<CardProjDownload title="软件基本信息"
@ -244,7 +291,27 @@ export default function ProjEdit() {
nav(-1);
}}>返回</Button>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isGenerateModalOpen}
onOk={() => {
post({
messageApi,
url: `/api/proj/generate/proj-id/${pathParams.projId}`,
body: {},
onSuccess() {
messageApi.success('提交成功');
setIsGenerateModalOpen(false);
renderData();
}
})
}}
onCancel={() => {
setIsGenerateModalOpen(false);
}}>
<div>点击“确定按钮”后，项目便无法再次修改，建议通过预览查看系统，确认无误后点击“确定按钮”。</div>
</Modal>
</>
)
}

47
src/route/proj/edit/ProjConfigMenuList.tsx
View File

@ -1,11 +1,11 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, Input,
Breadcrumb, InputNumber,
message,
Table, TableProps,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {Link, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get, put} from "../../../util/AjaxUtils.ts";
@ -14,15 +14,14 @@ export const MAX_MOD_SIZE = 2;
interface DataType {
projModId: string;
projId: string;
modContext: string;
modName: string;
modUrl: string;
modDesc: string;
modIcon: string;
projMenuId: string;
menuTitle: string;
menuIcon: string;
menuUrl: string;
orderNo: string;
}
export default function ProjConfigMenuList() {
const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [dataArray, setDataArray] = useState<DataType[]>();
@ -47,22 +46,36 @@ export default function ProjConfigMenuList() {
const columns: TableProps<DataType>['columns'] = [
{
title: '菜单标题',
dataIndex: 'modName',
dataIndex: 'menuTitle',
align: 'center',
width: 180
width: 250
},
{
title: '菜单连接',
dataIndex: 'modDesc',
dataIndex: 'menuUrl',
align: 'center',
},
{
title: '顺序',
dataIndex: 'modIcon',
dataIndex: 'orderNo',
align: 'center',
width: 80,
width: 120,
render: (text, record) => {
return <Input defaultValue={text}/>
return <InputNumber defaultValue={text} onChange={(value) => {
put({
messageApi,
url: `/api/proj-menu/update-order-no/${record.projMenuId}`,
body: {
orderNo: value
},
onSuccess() {
messageApi.success('修改成功');
setTimeout(() => {
renderData();
}, 500)
}
})
}}/>
}
},
];
@ -83,10 +96,10 @@ export default function ProjConfigMenuList() {
]}
/>
<div className="mod-list-container" style={{height: `${height}px`}}>
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
<div className="mod-list">
<Alert message="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/>
<div className="mod-list" style={{marginTop: '15px'}}>
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
scroll={{y: height - 210}} size="middle" bordered key="dataTable" rowKey="projModId"/>
scroll={{y: height - 160}} size="middle" bordered key="dataTable" rowKey="projModId"/>
</div>
</div>
</>

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

@ -10,7 +10,7 @@ import {useEffect, useState} from "react";
import {EditOutlined, PlusOutlined, DeleteOutlined, SearchOutlined} from "@ant-design/icons";
import {del, get} from "../../../util/AjaxUtils.ts";
export const MAX_MOD_SIZE = 2;
export const MAX_MOD_SIZE = 15;
interface DataType {
projModId: string;

2
src/route/proj/edit/ProjEditStep5.tsx
View File

@ -43,7 +43,7 @@ export default function ProjEditStep5() {
})
}
})
})
}, [])
return (
<>