From 3b8419f7a75ef9eb74ef3fd994cacaa1ec4e6ce6 Mon Sep 17 00:00:00 2001 From: WenC <450292408@qq.com> Date: Mon, 25 Mar 2024 19:25:57 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/card/CardProjLoading.tsx | 17 ++- src/components/card/CardProjResult.tsx | 10 +- src/interfaces/card/ICardProj.ts | 3 + src/route/proj/ProjEdit.tsx | 145 +++++++++++++++------ src/route/proj/edit/ProjConfigMenuList.tsx | 47 ++++--- src/route/proj/edit/ProjConfigModList.tsx | 2 +- src/route/proj/edit/ProjEditStep5.tsx | 2 +- 7 files changed, 162 insertions(+), 64 deletions(-) diff --git a/src/components/card/CardProjLoading.tsx b/src/components/card/CardProjLoading.tsx index 9b03f92..0f3e47e 100644 --- a/src/components/card/CardProjLoading.tsx +++ b/src/components/card/CardProjLoading.tsx @@ -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 (
{props.title}
-
资料正在排队，预计等待600s
+
{props.desc}，预计等待{duration}s
) } \ No newline at end of file diff --git a/src/components/card/CardProjResult.tsx b/src/components/card/CardProjResult.tsx index 4ba0a6d..80d35aa 100644 --- a/src/components/card/CardProjResult.tsx +++ b/src/components/card/CardProjResult.tsx @@ -11,10 +11,12 @@ export default function CardProjResult(props: IProjResult) { { props.handleFeedback ? (
- { - e.preventDefault(); - props.handleFeedback?.(); - }}>反馈 + { + { + e.preventDefault(); + props.handleFeedback?.(); + }}>反馈 + }
) : <> } diff --git a/src/interfaces/card/ICardProj.ts b/src/interfaces/card/ICardProj.ts index 4f7f3d4..30628a2 100644 --- a/src/interfaces/card/ICardProj.ts +++ b/src/interfaces/card/ICardProj.ts @@ -17,6 +17,9 @@ export interface IProjEdit { export interface IProjLoading { title: string; desc?: string; + duration: number; + + handleCountDownOver(): void; } export interface IProjResult { diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx index 02e3347..d59be32 100644 --- a/src/route/proj/ProjEdit.tsx +++ b/src/route/proj/ProjEdit.tsx @@ -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() { { - nav('/agent-select/2'); + window.open(`${Axios.defaults?.baseURL}/${previewUrl}`, '_blank') }} /> ) : <> } - - { - console.log('编辑') - }} - /> - - { - console.log('反馈') - }} - /> + + { + generateStatus == GenerateStatus.NONE || generateStatus == GenerateStatus.FAILED ? ( + { + setIsGenerateModalOpen(true); + }} + /> + ) : <> + } + { + generateStatus == GenerateStatus.PENDING ? ( + { + renderData(); + }} + /> + ) : <> + } + { + generateStatus == GenerateStatus.GENERATING ? ( + { + renderData(); + }} + + /> + ) : <> + } + { + generateStatus == GenerateStatus.SUCCESS ? ( + + ) : <> + } + { + generateStatus == GenerateStatus.FAILED ? ( + { + console.log('反馈') + }} + /> + ) : <> + } 返回 - + { + post({ + messageApi, + url: `/api/proj/generate/proj-id/${pathParams.projId}`, + body: {}, + onSuccess() { + messageApi.success('提交成功'); + setIsGenerateModalOpen(false); + renderData(); + } + }) + }} + onCancel={() => { + setIsGenerateModalOpen(false); + }}> +
点击“确定按钮”后，项目便无法再次修改，建议通过预览查看系统，确认无误后点击“确定按钮”。
+ ) } \ No newline at end of file diff --git a/src/route/proj/edit/ProjConfigMenuList.tsx b/src/route/proj/edit/ProjConfigMenuList.tsx index 622cdb3..979af82 100644 --- a/src/route/proj/edit/ProjConfigMenuList.tsx +++ b/src/route/proj/edit/ProjConfigMenuList.tsx @@ -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(); @@ -47,22 +46,36 @@ export default function ProjConfigMenuList() { const columns: TableProps['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 + return { + 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() { ]} />
- -
+ +
+ scroll={{y: height - 160}} size="middle" bordered key="dataTable" rowKey="projModId"/> diff --git a/src/route/proj/edit/ProjConfigModList.tsx b/src/route/proj/edit/ProjConfigModList.tsx index 4c55f3b..494b01c 100644 --- a/src/route/proj/edit/ProjConfigModList.tsx +++ b/src/route/proj/edit/ProjConfigModList.tsx @@ -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; diff --git a/src/route/proj/edit/ProjEditStep5.tsx b/src/route/proj/edit/ProjEditStep5.tsx index 81b0911..3ad45ed 100644 --- a/src/route/proj/edit/ProjEditStep5.tsx +++ b/src/route/proj/edit/ProjEditStep5.tsx @@ -43,7 +43,7 @@ export default function ProjEditStep5() { }) } }) - }) + }, []) return ( <>