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:
xixi 2024-05-21 11:21:34 +08:00
parent 9b4de12e03
commit 03538b1190
32 changed files with 3542 additions and 1551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/card/CardImgSelect.tsx
View File

@ -16,10 +16,11 @@ export default function CardImgSelect(props: ImgSelect) {
const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${props.imgs}`;
console.log(imgSrc)
return (
<div className={props.selected ? 'card-img-select card-img-selected' : 'card-img-select'}
<div className={props.selected ? 'card-img-select card-img-selected' : 'card-img-select' }
style={{marginRight:'10px',marginBottom:'10px'}}
onClick={props.handleClick}>
<div className="card-img">
<Image src={imgSrc} fallback={errorImage} preview={false} width={220} height={120}/>
<Image src={imgSrc} fallback={errorImage} preview={false} width={200} height={120}/>
</div>
<div className="card-title">
<div className="checkbox"></div>

2
src/components/card/card-img-select.css
View File

@ -1,4 +1,5 @@
.card-img-select {
width: 200px;
display: inline-block;
padding: 10px;
border: 1px solid var(--color-border);
@ -7,6 +8,7 @@
cursor: pointer;
}
.card-img-select:hover {
border-color: var(--color-primary);
}

31
src/components/menu/MenuWithBottomButton.tsx
View File

@ -1,6 +1,6 @@
import './menu-with-bottom-button.css'
import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import serveImg from '../../static/left/serves.png'
// import serveImg from '../../static/left/serves.png'
import { useNavigate } from 'react-router-dom';
// import newImg from '../../static/left/new.png'
@ -8,13 +8,16 @@ import { useNavigate } from 'react-router-dom';
// RightOutlined1
// } from '@ant-design/icons';
export default function MenuWithTopButton(props: IMenuWithTopButton) {
const navugate = useNavigate()
const navigate = useNavigate()
const list = props.list.map((item, index) => (
// 创建项目下三个选项
<li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
props.handleListItem(e, index, item);
navugate('/home')
if (item.path) {
navigate(item.path);
}
// navigate('/home');
}}>
@ -29,29 +32,15 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
{/* button 是三个黄色按钮 */}
<div className='bot' onClick={(e) => {
props.button.handle(e);
}}>
<div className='bot-lift'>
<img src={serveImg} alt="" />
{/* <img src={serveImg} alt="" /> */}
<div className='sell-buy' style={{display:props.button.name=='我要卖'?'block':'none'}}>卖</div>
<div className='sell-buy' style={{display:props.button.name=='我要买'?'block':'none'}}>买</div>
<div> {props.button.name}</div>
</div>
{/* <div className='bot-right' onClick={(e) => {
props.button.handle(e);
}}>
<img src={newImg} alt="" />
<div>创建</div>
</div> */}
</div>
{/* <button className="btn btn-orange top-button"
onClick={(e) => {
props.button.handle(e);
console.log(e);
}}
>
{props.button.name}
</button> */}
<ul>{list}</ul>
</div>
)

14
src/components/menu/menu-with-bottom-button.css
View File

@ -29,6 +29,19 @@
margin-right: 9px;
}
.bot-lift .sell-buy {
width: 19px;
height: 19px;
border-radius: 50%;
border: 2px solid #FFAF22;
font-size: 12px;
text-align: center;
line-height: 19px;
font-weight: 700;
margin-left: 23px;
margin-right: 6px;
}
.bot-right {
display: flex;
align-items: center;
@ -66,6 +79,7 @@
text-decoration-line: underline;
}
/* .icon{
color: white;
margin-left: 101px;

1
src/interfaces/menu/IMenuWithTopButton.ts
View File

@ -5,6 +5,7 @@ export interface IMenuListItem {
icon?: string;
name: string;
active?: boolean;
path?:string
}
export interface IMenuButton {

9
src/route/CopyrightGgoods/CopyrightGgoods.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export default function CopyrightGgoods() {
return (
<div>
著作权商品页面
</div>
)
}

2
src/route/Home/Home.tsx
View File

@ -19,7 +19,7 @@ export default function Home() {
// setListType(state.listType)
// }
// console.log('传递过来的',listType);
// console.log(indexListContext);
console.log('页面判断',indexListContext.type);
return (

9
src/route/ProductRelease/ProductRelease.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export default function ProductRelease() {
return (
<div>
商品发布页面
</div>
)
}

7
src/route/TradingGoods/TradingGoods.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
export default function TradingGoods() {
return (
<div>交易商品页面</div>
)
}

7
src/route/TransactionOrder/TransactionOrder.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
export default function TransactionOrder() {
return (
<div>交易订单页面</div>
)
}

163
src/route/index/Index.tsx
View File

@ -4,7 +4,7 @@ import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
// import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
// import ListProj from "../../components/list/ListProj.tsx";
// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
@ -80,7 +80,9 @@ export default function Index() {
],
handleListItem(_e, _index, item: IMenuListItem) {
projMenu.list.forEach(item => item.active = false);
agentMenu.list.forEach(item => item.active = false);
sellMenu.list.forEach(item => item.active = false);
buyMenu.list.forEach(item => item.active = false);
item.active = true;
setProjMenu({
...projMenu
@ -91,50 +93,100 @@ export default function Index() {
// keywords: ''
})
// sessionStorage.setItem('listType', String(IndexListDataType.PROJ));
// sessionStorage.setItem('listType', String(IndexListDataType.AGENT));
// console.log(IndexListDataType.PROJ);
// console.log(sessionStorage.getItem('listType'));
// nav('/home', {
// state: {
// listType: '0',
// }
// })
},
});
const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
// const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
// button: {
// name: '代理服务',
// handle() {
// dispatch({
// type: IndexListDataType.PROJ,
// value: 'COMPLETE',
// })
// }
// },
// list: [
// { id: 'ALL', name: '全部项目' },
// { id: 'PROCESSING', name: '进行中的' },
// { id: 'COMPLETE', name: '已完成的' },
// ],
// handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
// projMenu.list.forEach(item => item.active = false);
// agentMenu.list.forEach(item => item.active = false);
// item.active = true;
// setAgentMenu({
// ...agentMenu
// })
// dispatch({
// type: IndexListDataType.AGENT,
// value: item.id,
// })
// }
// })
const [sellMenu, setSellMenu] = useState<IMenuWithTopButton>({
button: {
name: '代理服务',
name: '我要卖',
handle() {
dispatch({
type: IndexListDataType.PROJ,
value: 'COMPLETE',
})
// dispatch({
// type: IndexListDataType.PROJ,
// value: 'COMPLETE',
// })
}
},
list: [
{ id: 'ALL', name: '全部项目' },
{ id: 'PROCESSING', name: '进行中的' },
{ id: 'COMPLETE', name: '已完成的' },
{ id: '1', name: '商品发布', path: '/product-release' },
{ id: '2', name: '交易订单', path: '/transaction-order' },
// { id: 'COMPLETE', name: '已完成的' },
],
handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
projMenu.list.forEach(item => item.active = false);
agentMenu.list.forEach(item => item.active = false);
item.active = true;
setAgentMenu({
...agentMenu
})
dispatch({
type: IndexListDataType.AGENT,
value: item.id,
sellMenu.list.forEach(item => item.active = false);
buyMenu.list.forEach(item => item.active = false);
item.active = true;
setSellMenu({
...sellMenu
})
// dispatch({
// type: IndexListDataType.AGENT,
// value: item.id,
// })
}
})
const [buyMenu, setBuyMenu] = useState<IMenuWithTopButton>({
button: {
name: '我要买',
handle() {
// dispatch({
// type: IndexListDataType.PROJ,
// value: 'COMPLETE',
// })
}
},
list: [
{ id: '1', name: '著作权商品', path: '/copyright-goods' },
{ id: '2', name: '交易商品', path: '/trading-goods' },
// { id: 'COMPLETE', name: '已完成的' },
],
handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
projMenu.list.forEach(item => item.active = false);
sellMenu.list.forEach(item => item.active = false);
buyMenu.list.forEach(item => item.active = false);
item.active = true;
setBuyMenu({
...buyMenu
})
// dispatch({
// type: IndexListDataType.AGENT,
// value: item.id,
// })
}
})
const location = useLocation()
const [now, setNow] = useState<string>('首页')
// 编辑项目路由名
@ -152,8 +204,8 @@ export default function Index() {
} else if (location.pathname.includes('/proj-create')) {
setNow('创建项目')
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }])
//
} else if (location.pathname.includes('/proj-edit') && !location.pathname.includes('/step') &&!location.pathname.includes('/config-loginpage') ) {
// /config-mod-list /config-menu-list
} else if (location.pathname.includes('/proj-edit')&& !location.pathname.includes('/config-mod-edit') && !location.pathname.includes('/step') && !location.pathname.includes('/config-loginpage')&& !location.pathname.includes('/config-mod-save')&& !location.pathname.includes('/config-mod-list')&& !location.pathname.includes('/config-menu-list')) {
setNow('编辑项目')
// setEditname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
@ -177,17 +229,35 @@ export default function Index() {
setNow('标题简介')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '基本信息' }])
}else if (location.pathname.includes('/proj-edit/config-loginpage')) {
} else if (location.pathname.includes('/proj-edit/config-loginpage')) {
setNow('登录界面设置')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '登录界面设置' }])
}else if (location.pathname.includes('/proj-edit/config-mod-list')) {
setNow('系统菜单管理')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单管理' }])
}else if (location.pathname.includes('/proj-edit/config-menu-list')) {
setNow('系统菜单顺序')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单顺序' }])
}else if (location.pathname.includes('/step3')) {
setNow('软件功能特点')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '软件功能特点' }])
}else if (location.pathname.includes('/proj-edit/config-mod-save')) {
setNow('添加菜单')
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '添加菜单' }])
}else if (location.pathname.includes('/proj-edit/config-mod-edit')) {
setNow('编辑菜单')
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-2) }}>编辑项目</a> },{ title: <a onClick={() => { nav(-1) }}>系统菜单管理</a> }, { title: '编辑菜单' }])
// /config-mod-edit
}
}, [location.pathname])
useEffect(() => {
sessionStorage.setItem('pathArray', JSON.stringify([{ title: <Link to={'/home'}>首页</Link> }]));
sessionStorage.setItem('now', '首页');
// nav('/home')
// sessionStorage.setItem('pathArray', JSON.stringify([{ title: <Link to={'/home'}>首页</Link> }]));
// sessionStorage.setItem('now', '首页');
if (searchParams.get('type') == 'agent') {
dispatch({
type: IndexListDataType.AGENT,
@ -223,23 +293,28 @@ export default function Index() {
<IndexListDispatchContext.Provider value={dispatch}>
<div className="index">
<div className="left">
<div style={{height:'15px',width:'230px',background:'white'}}></div>
<div style={{ height: '15px', width: '230px', background: 'white' }}></div>
<MenuWithTopButton
button={projMenu.button}
list={projMenu.list}
handleListItem={projMenu.handleListItem}
/>
<MenuTreeWithTopButton />
<MenuWithBottomButtom
button={agentMenu.button}
list={agentMenu.list}
handleListItem={agentMenu.handleListItem}
/>
{/* <MenuWithBottomButtom
button={agentMenu.button}
list={agentMenu.list}
handleListItem={agentMenu.handleListItem}
/> */}
{/* <MenuWithBottomButtom
button={sellMenu.button}
list={sellMenu.list}
handleListItem={sellMenu.handleListItem}
/>
<MenuWithBottomButtom
button={buyMenu.button}
list={buyMenu.list}
handleListItem={buyMenu.handleListItem}
/> */}
</div>
<div className="right">
<div>

178
src/route/proj/ProjCreate.tsx
View File

@ -23,7 +23,7 @@ export default function ProjCreate() {
}
});
const nav = useNavigate();
const height = window.innerHeight - 140;
const height = window.innerHeight - 170;
useEffect(() => {
get<any>({
messageApi: messageApi,
@ -41,150 +41,9 @@ export default function ProjCreate() {
return (
< >
{contextHolder}
{/* <Breadcrumb
items={[
{ title: <Link to={'/'}>首页</Link> },
{ title: '创建项目' },
]}
/> */}
<div style={{ height: `${height}px`, overflow: 'auto' }}>
<div className="proj-create">
{/*<CardProjType*/}
{/* head={'全托管'}*/}
{/* bodyLineArray={[*/}
{/* {*/}
{/* title: '提供的服务：',*/}
{/* contents: [*/}
{/* '提供系统搭建',*/}
{/* '系统可在线运行三年',*/}
{/* '软著材料编写',*/}
{/* '软著申报',*/}
{/* '包下证',*/}
{/* '提供系统演示视频文件',*/}
{/* '提供系统安装包',*/}
{/* ]*/}
{/* },*/}
{/* {*/}
{/* title: '使用流程：',*/}
{/* contents: [*/}
{/* '编写软著名称',*/}
{/* '对搭建系统进行核验',*/}
{/* '接受证书',*/}
{/* ]*/}
{/* }*/}
{/* ]}*/}
{/* buyArray={[*/}
{/* {*/}
{/* id: ProjChargeType.ALL,*/}
{/* price: charge.proj.all,*/}
{/* handleClick: () => {*/}
{/* nav(`/proj-new/${ProjChargeType.ALL}`)*/}
{/* }*/}
{/* }*/}
{/* ]}*/}
{/*/>*/}
{/*<CardProjType*/}
{/* head={'写材料+代理'}*/}
{/* bodyLineArray={[*/}
{/* {*/}
{/* title: '提供的服务：',*/}
{/* contents: [*/}
{/* '提供系统搭建平台与客服指导',*/}
{/* '系统可在线运行一年',*/}
{/* '软著材料编写',*/}
{/* '资料补正不限',*/}
{/* '软著申报',*/}
{/* '包下证',*/}
{/* ]*/}
{/* },*/}
{/* {*/}
{/* title: '使用流程：',*/}
{/* contents: [*/}
{/* '1、按系统操作手册执行',*/}
{/* ]*/}
{/* }*/}
{/* ]}*/}
{/* chargeLineArray={[*/}
{/* {*/}
{/* id: ProjAdditionalType.PKG,*/}
{/* price: charge.additional.pkg,*/}
{/* title: `安装包 ${charge.additional.pkg / 100} 元`*/}
{/* },*/}
{/* {*/}
{/* id: ProjAdditionalType.VIDEO_DEMO,*/}
{/* price: charge.additional.videoDemo,*/}
{/* title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`*/}
{/* }*/}
{/* ]}*/}
{/* buyArray={[
{
id: ProjChargeType.MATERIAL_AGENT,
label: '普件：',
price: charge.proj.materialAgent,
handleClick: (_title, additional) => {
nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
}
},
{
id: ProjChargeType.MATERIAL_AGENT_URGENT,
label: '加急：',
price: charge.proj.materialAgentUrgent,
handleClick: (_title, additional) => {
nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
}
}
]} */}
{/*/>*/}
<div style={{ }}>
<div className="proj-create" style={{height: `${height}px`, overflow: 'auto' }}>
{/* <CardProjType
head={'写材料'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建',
'系统可在线运行三年',
'软著材料编写',
'软著申报',
'包下证',
'提供系统演示视频文件',
'提供系统安装包',
]
},
{
title: '使用流程：',
contents: [
'编写软著名称',
'对搭建系统进行核验',
'接受证书',
]
}
]}
chargeLineArray={[
{
id: ProjAdditionalType.PKG,
price: charge.additional.pkg,
title: `安装包 ${charge.additional.pkg / 100} 元`
},
{
id: ProjAdditionalType.VIDEO_DEMO,
price: charge.additional.videoDemo,
title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`
}
]}
buyArray={[
{
id: ProjChargeType.MATERIAL,
price: charge.proj.material,
handleClick: (_title, additional) => {
nav(`/proj-new/${ProjChargeType.MATERIAL}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`);
}
}
]}
/> */}
<CardProjType
head={'全托'}
bodyLineArray={[
{
@ -199,12 +58,7 @@ export default function ProjCreate() {
'提供系统安装包'
]
},
// {
// title: '使用流程：',
// contents: [
// '按系统操作手册执行',
// ]
// }
]}
newArray={[
{
@ -224,8 +78,8 @@ export default function ProjCreate() {
}
}
]}
/>
<CardProjType
/> */}
{/* <CardProjType
head={'写材料+代理'}
bodyLineArray={[
{
@ -239,12 +93,7 @@ export default function ProjCreate() {
'包下证'
]
},
// {
// title: '使用流程：',
// contents: [
// '按系统操作手册执行',
// ]
// }
]}
newArray={[
{
@ -285,7 +134,7 @@ export default function ProjCreate() {
title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`
}
]}
/>
/> */}
<CardProjType
head={'写材料'}
bodyLineArray={[
@ -332,7 +181,7 @@ export default function ProjCreate() {
}
]}
/>
<CardProjType
{/* <CardProjType
head={'免费试用'}
bodyLineArray={[
{
@ -342,12 +191,7 @@ export default function ProjCreate() {
'系统可在线存储三天',
]
},
// {
// title: '使用流程：',
// contents: [
// '按系统操作手册执行',
// ]
// }
]}
newArray={[
{
@ -367,7 +211,7 @@ export default function ProjCreate() {
}
}
]}
/>
/> */}
</div>
</div>
</>

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

@ -52,11 +52,14 @@ export default function ProjEdit() {
projDesc: '',
projMods: [],
});
// 判断状态
// const height = window.innerHeight - 240;
const renderEditStep = (editSteps: any[], isEdited: boolean, isGenerateSuccess: boolean) => {
const renderEditStep = (data:any, isEdited: boolean, isGenerateSuccess: boolean) => {
console.log('嘻嘻',data);
// projIntroduction
const editStepArray: IProjEdit[] = [];
editStepArray.push(
{
@ -64,7 +67,7 @@ export default function ProjEdit() {
desc: '完善代码、样式类型和详细介绍等内容',
step: 1,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[0].editStatus,
status: data.projIntroduction?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step1/${pathParams.projId}`)
@ -78,7 +81,7 @@ export default function ProjEdit() {
desc: '完善项目简介、编程语言、版本、公司等内容',
step: 2,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[1].editStatus,
status: data.apply.projDevCompleteDate?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
// if (generateStatus != GenerateStatus.SUCCESS) {
if (!isGenerateSuccess) {
@ -93,7 +96,7 @@ export default function ProjEdit() {
desc: '请完善软件功能特点',
step: 3,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[2].editStatus,
status: data.apply.envHardDev?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step3/${pathParams.projId}`)
@ -102,62 +105,13 @@ export default function ProjEdit() {
}
}
},
{
title: '著作人信息',
desc: '请完善著作人相关信息',
step: 4,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[3].editStatus,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step4/${pathParams.projId}`)
} else {
nav(`/proj-edit/step4-show/${pathParams.projId}`)
}
}
},
{
title: '申请人信息',
desc: '请完善申请人信息',
step: 5,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[4].editStatus,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step5/${pathParams.projId}`)
} else {
nav(`/proj-edit/step5-show/${pathParams.projId}`)
}
}
},
{
title: '选择登录页面',
desc: '选择软件的登录页面模板',
step: 6,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[5].editStatus,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step6/${pathParams.projId}`)
} else {
nav(`/proj-edit/step6-show/${pathParams.projId}`)
}
}
}
)
setEditStepArray(editStepArray);
setIsEditStepEdited(isEdited);
}
const renderSetting = (data: any, isConfig: boolean, isGenerateSuccess: boolean) => {
const configArray: IProjEdit[] = [];
configArray.push(
{
title: '登录界面设置',
desc: '请对登录界面完成个性化设置',
step: 1,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
// 状态判断lyp
status: data.loginpage.loginpageId?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
@ -166,7 +120,71 @@ export default function ProjEdit() {
}
}
},
{
// {
// title: '著作人信息',
// desc: '请完善著作人相关信息',
// step: 4,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[3].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step4/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step4-show/${pathParams.projId}`)
// }
// }
// },
// {
// title: '申请人信息',
// desc: '请完善申请人信息',
// step: 5,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[4].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step5/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step5-show/${pathParams.projId}`)
// }
// }
// },
// {
// title: '选择登录页面',
// desc: '选择软件的登录页面模板',
// step: 6,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[5].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step6/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step6-show/${pathParams.projId}`)
// }
// }
// }
)
setEditStepArray(editStepArray);
setIsEditStepEdited(isEdited);
}
const renderSetting = (data: any, isConfig: boolean, isGenerateSuccess: boolean) => {
const configArray: IProjEdit[] = [];
configArray.push(
// {
// title: '登录界面设置',
// desc: '请对登录界面完成个性化设置',
// step: 1,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/config-loginpage-show/${pathParams.projId}`)
// }
// }
// },
{
title: '系统菜单管理',
desc: '请对系统菜单进行设置',
step: 2,
@ -179,6 +197,7 @@ export default function ProjEdit() {
nav(`/proj-edit/config-mod-list-show/${pathParams.projId}`)
}
}
},
{
title: '菜单顺序',
@ -204,16 +223,20 @@ export default function ProjEdit() {
messageApi: messageApi,
url: `/api/proj/get/${pathParams.projId}`,
onSuccess({ 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;
console.log('状态判断',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 isEdited = Boolean(data.projIntroduction) == true && Boolean(data.apply.projDevCompleteDate) == true && Boolean(data.apply.envHardDev) == true && Boolean(data.loginpage.loginpageId) == true
// console.log('isEdited',isEdited);
const isConfig = data.loginpage.loginpageId && data.projModCount > MIN_MOD_SIZE;
const isGenerate = isEdited && isConfig;
const isGenerateSuccess: boolean = data.generate.generateStatus == GenerateStatus.SUCCESS;
renderEditStep(data.editSteps, isEdited, isGenerateSuccess);
renderEditStep(data, isEdited, isGenerateSuccess);
renderSetting(data, isConfig, isGenerateSuccess);
setCanGenerate(isGenerate);
setGenerateStatus(data.generate.generateStatus);
@ -278,7 +301,7 @@ export default function ProjEdit() {
title={item.title}
desc={item.desc}
btnName={item.btnName}
canBtnClick={item.status == EditStepEnum.EDITED}
canBtnClick={isEditStepEdited}
status={item.status}
handleEdit={item.handleEdit}
background={item.status == EditStepEnum.EDITED ? '#F5FEFA' : '#f3f3f3'}
@ -472,7 +495,9 @@ export default function ProjEdit() {
destroyOnClose
onCancel={() => {
setAiHelperModalOpen(false);
renderData()
// console.log(123);
// renderData()
}}
>
<AiHelper

70
src/route/proj/ProjEditAll.tsx
View File

@ -25,7 +25,7 @@ export default function ProjEditAll() {
// const height = window.innerHeight - 240;
const renderEditStep = (editSteps: any[], isEdited: boolean, isGenerateSuccess: boolean) => {
const renderEditStep = (data: any, isEdited: boolean, isGenerateSuccess: boolean) => {
const editStepArray: IProjEdit[] = [];
editStepArray.push(
{
@ -33,7 +33,7 @@ export default function ProjEditAll() {
desc: '完善代码、样式类型和详细介绍等内容',
step: 1,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[0].editStatus,
status: data.projIntroduction?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step1/${pathParams.projId}`)
@ -43,33 +43,48 @@ export default function ProjEditAll() {
}
},
{
title: '著作人信息',
desc: '请完善著作人相关信息',
step: 4,
title: '基本信息',
desc: '完善项目简介、编程语言、版本、公司等内容',
step: 2,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[3].editStatus,
status: data.apply.projDevCompleteDate?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
canBtnClick: false,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step4/${pathParams.projId}`)
if (generateStatus != GenerateStatus.SUCCESS) {
nav(`/proj-edit/step2/${pathParams.projId}`)
} else {
nav(`/proj-edit/step4-show/${pathParams.projId}`)
}
}
},
{
title: '申请人信息',
desc: '请完善申请人信息',
step: 5,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[4].editStatus,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step5/${pathParams.projId}`)
} else {
nav(`/proj-edit/step5-show/${pathParams.projId}`)
nav(`/proj-edit/step2-show/${pathParams.projId}`)
}
}
},
// {
// title: '著作人信息',
// desc: '请完善著作人相关信息',
// step: 4,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[3].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step4/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step4-show/${pathParams.projId}`)
// }
// }
// },
// {
// title: '申请人信息',
// desc: '请完善申请人信息',
// step: 5,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[4].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step5/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step5-show/${pathParams.projId}`)
// }
// }
// },
)
setEditStepArray(editStepArray);
setIsEditStepEdited(isEdited);
@ -80,15 +95,10 @@ export default function ProjEditAll() {
messageApi: messageApi,
url: `/api/proj/get/${pathParams.projId}`,
onSuccess({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 isEdited = Boolean(data.projIntroduction) == true && Boolean(data.apply.projDevCompleteDate) == true && Boolean(data.apply.envHardDev) == true && Boolean(data.loginpage.loginpageId) == true
const isConfig = data.loginpage.loginpageId && MAX_MOD_SIZE > 0;
const isGenerateSuccess: boolean = data.generate.generateStatus == GenerateStatus.SUCCESS;
renderEditStep(data.editSteps, isEdited, isGenerateSuccess);
renderEditStep(data, isEdited, isGenerateSuccess);
setIsConfigEdited(isConfig);
setGenerateStatus(data.generate.generateStatus);
setPreviewUrl(data.previewUrl);

142
src/route/proj/ProjEditFree.tsx
View File

@ -27,7 +27,7 @@ export default function ProjEdit() {
// const height = window.innerHeight - 240;
const renderEditStep = (editSteps: any[], isEdited: boolean, isGenerateSuccess: boolean) => {
const renderEditStep = (data: any, isEdited: boolean, isGenerateSuccess: boolean) => {
const editStepArray: IProjEdit[] = [];
editStepArray.push(
{
@ -35,7 +35,7 @@ export default function ProjEdit() {
desc: '完善代码、样式类型和详细介绍等内容',
step: 1,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[0].editStatus,
status: data.projIntroduction?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step1/${pathParams.projId}`)
@ -49,7 +49,7 @@ export default function ProjEdit() {
desc: '完善项目简介、编程语言、版本、公司等内容',
step: 2,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[1].editStatus,
status: data.apply.projDevCompleteDate?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
canBtnClick: false,
handleEdit() {
if (generateStatus != GenerateStatus.SUCCESS) {
@ -64,7 +64,7 @@ export default function ProjEdit() {
desc: '请完善软件功能特点',
step: 3,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[2].editStatus,
status: data.apply.envHardDev?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
canBtnClick: false,
handleEdit() {
if (!isGenerateSuccess) {
@ -74,64 +74,15 @@ export default function ProjEdit() {
}
}
},
{
title: '著作人信息',
desc: '请完善著作人相关信息',
step: 4,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[3].editStatus,
canBtnClick: false,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step4/${pathParams.projId}`)
} else {
nav(`/proj-edit/step4-show/${pathParams.projId}`)
}
}
},
{
title: '申请人信息',
desc: '请完善申请人信息',
step: 5,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[4].editStatus,
canBtnClick: false,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step5/${pathParams.projId}`)
} else {
nav(`/proj-edit/step5-show/${pathParams.projId}`)
}
}
},
{
title: '选择登录页面',
desc: '选择软件的登录页面模板',
step: 6,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: editSteps[5].editStatus,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/step6/${pathParams.projId}`)
} else {
nav(`/proj-edit/step6-show/${pathParams.projId}`)
}
}
}
)
setEditStepArray(editStepArray);
setIsEditStepEdited(isEdited);
}
const renderSetting = (data: any, isConfig: boolean, isGenerateSuccess: boolean) => {
const configArray: IProjEdit[] = [];
configArray.push(
{
title: '登录界面设置',
desc: '请对登录界面完成个性化设置',
step: 1,
btnName: !isGenerateSuccess ? '设置' : '查看',
status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
canBtnClick: false,
// 状态判断lyp
status:data.loginpage.loginpageId?EditStepEnum.EDITED:EditStepEnum.UN_EDIT,
handleEdit() {
if (!isGenerateSuccess) {
nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
@ -140,6 +91,72 @@ export default function ProjEdit() {
}
}
},
// {
// title: '著作人信息',
// desc: '请完善著作人相关信息',
// step: 4,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[3].editStatus,
// canBtnClick: false,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step4/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step4-show/${pathParams.projId}`)
// }
// }
// },
// {
// title: '申请人信息',
// desc: '请完善申请人信息',
// step: 5,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[4].editStatus,
// canBtnClick: false,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step5/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step5-show/${pathParams.projId}`)
// }
// }
// },
// {
// title: '选择登录页面',
// desc: '选择软件的登录页面模板',
// step: 6,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: editSteps[5].editStatus,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/step6/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/step6-show/${pathParams.projId}`)
// }
// }
// }
)
setEditStepArray(editStepArray);
setIsEditStepEdited(isEdited);
}
const renderSetting = (data: any, isConfig: boolean, isGenerateSuccess: boolean) => {
const configArray: IProjEdit[] = [];
configArray.push(
// {
// title: '登录界面设置',
// desc: '请对登录界面完成个性化设置',
// step: 1,
// btnName: !isGenerateSuccess ? '设置' : '查看',
// status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
// handleEdit() {
// if (!isGenerateSuccess) {
// nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
// } else {
// nav(`/proj-edit/config-loginpage-show/${pathParams.projId}`)
// }
// }
// },
{
title: '系统菜单管理',
desc: '请对系统菜单进行设置',
@ -178,12 +195,16 @@ export default function ProjEdit() {
messageApi: messageApi,
url: `/api/proj/get/${pathParams.projId}`,
onSuccess({ data }) {
const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED
&& data.editSteps[5].editStatus == EditStepEnum.EDITED;
// const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED
// && data.editSteps[5].editStatus == EditStepEnum.EDITED;
// console.log(data);
const isEdited = Boolean(data.projIntroduction) && Boolean(data.loginpage.loginpageId) == true
// console.log('isEdited',isEdited);
const isConfig = data.loginpage.loginpageId && data.projModCount > MAX_MOD_SIZE_FREE;
const isGenerate = isEdited && isConfig;
const isGenerateSuccess: boolean = data.generate.generateStatus == GenerateStatus.SUCCESS;
renderEditStep(data.editSteps, isEdited, isGenerateSuccess);
renderEditStep(data, isEdited, isGenerateSuccess);
renderSetting(data, isConfig, isGenerateSuccess);
setCanGenerate(isGenerate);
setGenerateStatus(data.generate.generateStatus);
@ -244,7 +265,6 @@ export default function ProjEdit() {
background={item.status == EditStepEnum.EDITED ? '#F5FEFA' : '#f3f3f3'}
shadow={item.status == EditStepEnum.EDITED ? ' 0px 3px 0px 0px rgba(55,215,138,0.18)' : ''}
/>
})
}

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

@ -19,7 +19,7 @@ export default function ProjNew() {
const [messageApi, contextHolder] = message.useMessage();
const [loading, setLoading] = useState<boolean>(false);
// const height = window.innerHeight - 150;
const height = window.innerHeight - 180;
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [chargePrice, setChargePrice] = useState(0);
@ -91,7 +91,7 @@ export default function ProjNew() {
{title: '新建项目'},
]}
/> */}
<div className='projNew'>
<div className='projNew' style={{height: `${height}px`, overflow: 'auto' }}>
<div className="proj-new">
{/* <div className="proj-title">请完善项目的基本信息</div> */}
<div className="proj-form">
@ -132,19 +132,25 @@ export default function ProjNew() {
<div style={{ marginTop: '156px' }}>
<Form.Item>
<Flex align="center" justify="center" gap="large">
<Button style={{
backgroundColor: '#F5F5F5', width: '216px',
height: '50px', color: '#AFAFAF', fontSize: '16px'
}} type="default" htmlType="button" onClick={() => {
<Button
// style={{
// backgroundColor: '#F5F5F5', width: '216px',
// height: '50px', color: '#AFAFAF', fontSize: '16px'
// }}
size='large'
type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
}}
>
返回
</Button>
<Button type="primary" htmlType="submit"
style={{
backgroundColor: 'var(--color-primary)', width: '216px',
height: '50px', fontSize: '16px', marginLeft: '53px'
}}>
size='large'
// style={{
// backgroundColor: 'var(--color-primary)', width: '216px',
// height: '50px', fontSize: '16px', marginLeft: '53px'
// }}
>
保存并付款
</Button>

531
src/route/proj/edit/ProjConfigLoginpage.tsx
View File

@ -2,13 +2,13 @@ import './proj-config-loginpage.css';
import {
Col,
Flex,
// Flex,
GetProp,
Input,
message,
Modal,
Row,
Space,
// Space,
Spin,
Upload,
UploadFile,
@ -18,6 +18,7 @@ import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { DevUserId, get, downloadUrl, put, uploadImageUrl, post } from "../../../util/AjaxUtils.ts";
import { Button, Form } from 'antd';
import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
type FormFieldType = {
loginpageId: string;
@ -43,7 +44,10 @@ export default function ProjConfigLoginpage() {
const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]);
const [iframeSrcDoc, setIframeSrcDoc] = useState();
const height = window.innerHeight - 180;
const [loginpageArray, setloginpageArray] = useState<any[]>([])
const [selectedLoginpageId, setSelectedLoginpageId] = useState('');
// 若无选择的背景 默认的第一个图片的背景
// const [defaultId, setDefaultId] = useState('')
const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
@ -55,10 +59,42 @@ export default function ProjConfigLoginpage() {
const preview = () => {
post<any>({
messageApi,
url: '/api/proj/preview',
url: `/api/proj/preview/${pathParams.projId}`,
body: {
projId: pathParams.projId,
loginpageId: form.getFieldValue('loginpageId'),
// projId: pathParams.projId,
loginpageId: selectedLoginpageId,
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'),
copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'),
},
onSuccess({ data }) {
setIframeSrcDoc(data.data);
console.log(data);
}
})
}
const getlistLoginpage = () => {
get<any>({
messageApi,
url: '/api/loginpage/list',
onSuccess({ data }) {
console.log('登录页图片列表', data);
setloginpageArray(data)
// setDefaultId(data[0].loginpageId)
upLoginPage(data[0].loginpageId)
}
})
}
const upLoginPage = (id: string) => {
post<any>({
messageApi,
url: `/api/proj/preview/${pathParams.projId}`,
body: {
// projId: pathParams.projId,
loginpageId: id,
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'),
@ -70,12 +106,14 @@ export default function ProjConfigLoginpage() {
}
})
}
useEffect(() => {
getlistLoginpage()
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
onSuccess({ data }) {
console.log('寻找被选中id', data);
setSelectedLoginpageId(data.loginpageId);
form.setFieldValue('loginpageId', data.loginpageId);
form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner);
@ -108,7 +146,13 @@ export default function ProjConfigLoginpage() {
...bgImgArray
])
}
preview();
// preview()
if (data.loginpageId) {
upLoginPage(data.loginpageId)
} else {
getlistLoginpage();
}
}
})
@ -125,22 +169,32 @@ export default function ProjConfigLoginpage() {
{title: '登录界面设置'},
]}
/> */}
<div className="form-container" style={{ height: `${height}px`, marginTop: '18px', overflow: 'auto', padding: '0', background: '#EFEFEF' }}>
<div className="loginpage-body">
<div className="form-container" style={{ height: `${height}px`, overflow: 'hidden', marginTop: '18px', padding: '0', background: '#EFEFEF' }}>
<div className="loginpage-body" style={{ height: `${height}px`, overflow: 'auto' }}>
<Row gutter={15}>
<Col span={16}>
<div className='loginpage-bodyL' >
<div className='loginpage-bodyL' style={{ height: `${height}px`, overflow: 'auto', paddingBottom: '10px', boxSizing: 'border-box' }}>
<iframe srcDoc={iframeSrcDoc} style={{
width: '93%',
height: `${height - 150}px`,
width: '91%',
height: `613px`,
border: '1px solid var(--color-border)',
// background: 'pink',
marginTop:'68px'
marginTop: '18px'
}} />
<div className='loginpage-bodyL-btn'>
<div className='seeButton'>预览</div>
<div className='upButton'>确认修改</div>
<Button
size='large'
type="default"
className='seeButton' onClick={() => {
nav(-1)
}}>返回</Button>
<Button
type="primary"
size='large'
className='upButton' onClick={() => {
setIsEditModalOpen(true)
}}>确认修改</Button>
</div>
</div>
@ -148,169 +202,293 @@ export default function ProjConfigLoginpage() {
</Col>
<Col span={8}>
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
style={{ background: 'red' }}
>
<Form.Item label="副标题"
name="subTitle"
rules={[{ required: false, message: '请输入副标题' }]}>
<Input placeholder="请输入副标题" onChange={() => {
preview()
}} />
</Form.Item>
<Form.Item>
<Space.Compact>
<Form.Item label="版权时间"
name="copyrightDate"
rules={[{ required: false, message: '请输入版权时间' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权时间" onChange={() => {
preview()
}} />
</Form.Item>
<Form.Item label="版权人"
name="copyrightOwner"
rules={[{ required: false, message: '请输入版权人' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权人" onChange={() => {
preview()
}} />
</Form.Item>
</Space.Compact>
</Form.Item>
<Form.Item>
<Space.Compact>
<Form.Item label="用户名"
name="adminUsername"
rules={[{ required: true, message: '请输入用户名' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item label="密码"
name="adminPassword"
rules={[{ required: true, message: '请输入密码' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入密码" />
</Form.Item>
</Space.Compact>
</Form.Item>
<Form.Item label="LOGO">
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={logoImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
logoImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'logo.png',
status: 'done',
url: url,
thumbUrl: url,
})
setLogoImgArray([
...logoImgArray
])
preview()
return;
}
}}
onRemove={() => {
logoImgArray.splice(0)
setLogoImgArray([
...logoImgArray
])
preview()
<div style={{ height: `${height}px`, overflow: 'auto', }}>
<div className='setloginpage-right' >
<div className='setloginpage-title'>登陆页面设置</div>
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
// style={{ background: 'red' }}
>
<Button size="small" type="primary"
style={{ backgroundColor: 'var(--color-primary)' }}
disabled={logoImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
<Form.Item label="背景">
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={bgImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
bgImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'bg.png',
status: 'done',
url: url,
thumbUrl: url,
})
setBgImgArray([
...bgImgArray
])
preview()
return;
}
}}
onRemove={() => {
bgImgArray.splice(0)
setBgImgArray([
...bgImgArray
])
preview()
}}
>
<Button size="small" type="primary"
style={{ backgroundColor: 'var(--color-primary)' }}
disabled={bgImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>副标题:</div>
<Form.Item
// label="副标题"
name="subTitle"
rules={[{ required: false, message: '请输入副标题' }]}
>
<Input placeholder="请输入副标题"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
<Form.Item wrapperCol={{ span: 24 }}>
<div style={{ paddingTop: '15px' }}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{ backgroundColor: 'var(--color-primary)' }}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
<Form.Item>
{/* <Space.Compact> */}
<div style={{ display: 'flex' }}>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>版权时间:</div>
<Form.Item
// label="版权时间"
name="copyrightDate"
rules={[{ required: false, message: '请输入版权时间' }]}
style={{ display: 'inline-block', marginBottom: '0' }}
>
<Input placeholder="请输入版权时间"
style={{
width: '142px',
height: '38px',
background: '#F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title right-formitem-title'>版权人:</div>
<Form.Item
// label="版权人"
name="copyrightOwner"
rules={[{ required: false, message: '请输入版权人' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权人"
style={{
width: '142px',
height: '38px',
background: '#F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
</div>
{/* </Space.Compact> */}
</Form.Item>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>Logo:</div>
<Form.Item
// label="LOGO"
>
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={logoImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
logoImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'logo.png',
status: 'done',
url: url,
thumbUrl: url,
})
setLogoImgArray([
...logoImgArray
])
preview()
return;
}
}}
onRemove={() => {
logoImgArray.splice(0)
setLogoImgArray([
...logoImgArray
])
preview()
}}
>
<Button size="small" type="primary"
style={{
width: '81px',
height: '28px',
background: '#135BD4',
color: 'white'
}}
disabled={logoImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
</div>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>背景:</div>
<Form.Item >
<Upload
style={{
// background:'red'
}}
name="image"
listType="picture"
maxCount={1}
defaultFileList={bgImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
bgImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'bg.png',
status: 'done',
url: url,
thumbUrl: url,
})
setBgImgArray([
...bgImgArray
])
preview()
return;
}
}}
onRemove={() => {
bgImgArray.splice(0)
setBgImgArray([
...bgImgArray
])
preview()
}}
>
<Button size="small" type="primary"
style={{
width: '81px',
height: '28px',
background: '#135BD4',
color: 'white'
}}
disabled={bgImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
</div>
<div className='username-uerpassword'>
<div className='setloginpage-formitem' >
<div className='setloginpage-formitem-title'>用户名:</div>
<Form.Item
// label="用户名"
name="adminUsername"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem' style={{ marginTop: '-10px' }}>
<div className='setloginpage-formitem-title'>密码:</div>
<Form.Item
// label="密码"
name="adminPassword"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
}} />
</Form.Item>
</div>
</div>
{/* <Form.Item wrapperCol={{ span: 24 }}>
<div style={{ paddingTop: '15px' }}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{ backgroundColor: 'var(--color-primary)' }}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
</div>
</Form.Item> */}
</Form>
<div className='select-loginPage'>
<div className='select-loginPage-title'>选择登陆页面</div>
<div className='select-loginPage-imgs'>
{
loginpageArray.map((item) => {
return (
// <div>
// <img src={downloadUrl(item.bgImgs)} alt="" />
// </div>
<CardImgSelect
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
selected={item.loginpageId == selectedLoginpageId}
handleClick={() => {
setSelectedLoginpageId(item.loginpageId);
// loginpageArray.forEach(loginpage => {
// loginpage.selected = loginpage.id == item.id;
// })
// setLoginpageArray([
// ...loginpageArray
// ])
console.log('选择的id', item.loginpageId);
upLoginPage(item.loginpageId)
}}
/>
)
})
}
</div>
</div>
</Form.Item>
</Form>
</div>
</div>
</Col>
</Row>
@ -321,6 +499,8 @@ export default function ProjConfigLoginpage() {
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
// console.log('发起球球的id',selectedLoginpageId);
setIsEditModalOpen(false);
console.log(logoImgArray)
put({
@ -334,6 +514,7 @@ export default function ProjConfigLoginpage() {
copyrightDate: form.getFieldValue('copyrightDate'),
adminUsername: form.getFieldValue('adminUsername'),
adminPassword: form.getFieldValue('adminPassword'),
loginpageId: selectedLoginpageId
},
onBefore() {
setLoading(true);

542
src/route/proj/edit/ProjConfigLoginpageShow.tsx
View File

@ -1,21 +1,24 @@
import './proj-edit-step.css';
import './proj-config-loginpage.css';
import {
Breadcrumb,
Button,
Col,
Form,
// Flex,
GetProp,
Input,
message,
Modal,
Row,
Space,
// Space,
Spin,
Upload,
UploadFile,
UploadProps
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {DevUserId, downloadUrl, get, post, uploadImageUrl} from "../../../util/AjaxUtils.ts";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { DevUserId, get, downloadUrl, put, uploadImageUrl, post } from "../../../util/AjaxUtils.ts";
import { Button, Form } from 'antd';
import CardImgSelect, { } from "../../../components/card/CardImgSelect.tsx";
type FormFieldType = {
loginpageId: string;
@ -30,16 +33,21 @@ type FormFieldType = {
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
export default function ProjConfigLoginpageShow() {
export default function ProjConfigLoginpage() {
const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FormFieldType>();
const [loading, setLoading] = useState<boolean>(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [logoImgArray, setLogoImgArray] = useState<UploadFile[]>([]);
const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]);
const [iframeSrcDoc, setIframeSrcDoc] = useState();
const height = window.innerHeight - 210;
const height = window.innerHeight - 180;
const [loginpageArray, setloginpageArray] = useState<any[]>([])
const [selectedLoginpageId, setSelectedLoginpageId] = useState('');
// 若无选择的背景 默认的第一个图片的背景
// const [defaultId, setDefaultId] = useState('')
const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
@ -51,27 +59,61 @@ export default function ProjConfigLoginpageShow() {
const preview = () => {
post<any>({
messageApi,
url: '/api/proj/preview',
url: `/api/proj/preview/${pathParams.projId}`,
body: {
projId: pathParams.projId,
loginpageId: form.getFieldValue('loginpageId'),
// projId: pathParams.projId,
loginpageId: selectedLoginpageId,
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'),
copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'),
},
onSuccess({data}) {
onSuccess({ data }) {
setIframeSrcDoc(data.data);
console.log(data);
}
})
}
const getlistLoginpage = () => {
get<any>({
messageApi,
url: '/api/loginpage/list',
onSuccess({ data }) {
console.log('登录页图片列表', data);
setloginpageArray(data)
// setDefaultId(data[0].loginpageId)
upLoginPage(data[0].loginpageId)
}
})
}
const upLoginPage = (id: string) => {
post<any>({
messageApi,
url: `/api/proj/preview/${pathParams.projId}`,
body: {
// projId: pathParams.projId,
loginpageId: id,
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'),
copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'),
},
onSuccess({ data }) {
setIframeSrcDoc(data.data);
}
})
}
useEffect(() => {
getlistLoginpage()
get<any>({
messageApi,
url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
onSuccess({data}) {
onSuccess({ data }) {
console.log('寻找被选中id', data);
setSelectedLoginpageId(data.loginpageId);
form.setFieldValue('loginpageId', data.loginpageId);
form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner);
@ -80,7 +122,7 @@ export default function ProjConfigLoginpageShow() {
form.setFieldValue('adminPassword', data.adminPassword);
if (data.logo) {
const url = downloadUrl(data.logo);
logoImgArray.push({
logoImgArray.splice(0, 1, {
uid: data.logo,
name: 'logo.png',
status: 'done',
@ -93,7 +135,7 @@ export default function ProjConfigLoginpageShow() {
}
if (data.bgImgs) {
const url = downloadUrl(data.bgImgs);
bgImgArray.push({
bgImgArray.splice(0, 1, {
uid: data.bgImgs,
name: 'bg.png',
status: 'done',
@ -104,7 +146,13 @@ export default function ProjConfigLoginpageShow() {
...bgImgArray
])
}
preview();
// preview()
if (data.loginpageId) {
upLoginPage(data.loginpageId)
}else{
getlistLoginpage();
}
}
})
@ -113,112 +161,378 @@ export default function ProjConfigLoginpageShow() {
return (
<>
{contextHolder}
<Breadcrumb
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '登录界面设置'},
]}
/>
<div className="form-container" style={{height: `${height}px`}}>
<div className="loginpage-body">
/> */}
<div className="form-container" style={{ height: `${height}px`, overflow: 'hidden', marginTop: '18px', padding: '0', background: '#EFEFEF' }}>
<div className="loginpage-body" style={{}}>
<Row gutter={15}>
<Col span={6}>
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{span: 8}}
wrapperCol={{span: 24}}
disabled={true}
autoComplete="off"
>
<Form.Item label="副标题"
name="subTitle"
rules={[{required: false, message: '请输入副标题'}]}>
<Input placeholder="请输入副标题" onChange={() => {
preview()
}}/>
</Form.Item>
<Form.Item>
<Space.Compact>
<Form.Item label="版权时间"
name="copyrightDate"
rules={[{required: false, message: '请输入版权时间'}]}
style={{display: 'inline-block', marginBottom: '0'}}>
<Input placeholder="请输入版权时间" onChange={() => {
preview()
}}/>
</Form.Item>
<Form.Item label="版权人"
name="copyrightOwner"
rules={[{required: false, message: '请输入版权人'}]}
style={{display: 'inline-block', marginBottom: '0'}}>
<Input placeholder="请输入版权人" onChange={() => {
preview()
}}/>
</Form.Item>
</Space.Compact>
</Form.Item>
<Form.Item>
<Space.Compact>
<Form.Item label="用户名"
name="adminUsername"
rules={[{required: true, message: '请输入用户名'}]}
style={{display: 'inline-block', marginBottom: '0'}}>
<Input placeholder="请输入用户名"/>
</Form.Item>
<Form.Item label="密码"
name="adminPassword"
rules={[{required: true, message: '请输入密码'}]}
style={{display: 'inline-block', marginBottom: '0'}}>
<Input placeholder="请输入密码"/>
</Form.Item>
</Space.Compact>
</Form.Item>
<Form.Item label="LOGO">
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={logoImgArray}
action={uploadImageUrl()}
headers={{'X-USER-ID': DevUserId}}
beforeUpload={beforeUpload}
>
<Button size="small" type="primary"
style={{backgroundColor: 'var(--color-primary)'}}
disabled={logoImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
<Form.Item label="背景">
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={bgImgArray}
action={uploadImageUrl()}
headers={{'X-USER-ID': DevUserId}}
beforeUpload={beforeUpload}
>
<Button size="small" type="primary"
style={{backgroundColor: 'var(--color-primary)'}}
disabled={bgImgArray.length > 0}>上传</Button>
</Upload>
</Form.Item>
</Form>
<Col span={16}>
<div className='loginpage-bodyL' >
<iframe srcDoc={iframeSrcDoc} style={{
width: '1038px',
height: `613px`,
border: '1px solid var(--color-border)',
// background: 'pink',
marginTop: '18px'
}} />
<div className='loginpage-bodyL-btn'>
<Button
size='large'
type="default"
className='seeButton' onClick={() => {
nav(-1)
}}>返回</Button>
{/* <div className='upButton' onClick={() => {
setIsEditModalOpen(true)
}}>确认修改</div> */}
</div>
</div>
</Col>
<Col span={18}>
<iframe srcDoc={iframeSrcDoc} style={{
width: '100%',
height: `${height - 10}px`,
border: '1px solid var(--color-border)'
}}/>
<Col span={8}>
<div style={{ height: `${height}px`, overflow: 'auto', }}>
<div className='setloginpage-right' >
<div className='setloginpage-title'>登陆页面设置</div>
<Form
disabled
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
// style={{ background: 'red' }}
>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>副标题:</div>
<Form.Item
// label="副标题"
name="subTitle"
rules={[{ required: false, message: '请输入副标题' }]}
>
<Input placeholder="请输入副标题"
style={{
width: '375px',
height: '38px',
background: ' #F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
<Form.Item>
{/* <Space.Compact> */}
<div style={{ display: 'flex' }}>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>版权时间:</div>
<Form.Item
// label="版权时间"
name="copyrightDate"
rules={[{ required: false, message: '请输入版权时间' }]}
style={{ display: 'inline-block', marginBottom: '0' }}
>
<Input placeholder="请输入版权时间"
style={{
width: '142px',
height: '38px',
background: '#F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title right-formitem-title'>版权人:</div>
<Form.Item
// label="版权人"
name="copyrightOwner"
rules={[{ required: false, message: '请输入版权人' }]}
style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权人"
style={{
width: '142px',
height: '38px',
background: '#F8F8F8'
}}
onChange={() => {
preview()
}} />
</Form.Item>
</div>
</div>
{/* </Space.Compact> */}
</Form.Item>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>Logo:</div>
<Form.Item
// label="LOGO"
>
<Upload
name="image"
listType="picture"
maxCount={1}
defaultFileList={logoImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
logoImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'logo.png',
status: 'done',
url: url,
thumbUrl: url,
})
setLogoImgArray([
...logoImgArray
])
preview()
return;
}
}}
onRemove={() => {
logoImgArray.splice(0)
setLogoImgArray([
...logoImgArray
])
preview()
}}
>
{/* <Button size="small" type="primary"
style={{
width: '81px',
height: '28px',
background: '#135BD4',
color: 'white'
}}
disabled={logoImgArray.length > 0}>上传</Button> */}
</Upload>
</Form.Item>
</div>
<div className='setloginpage-formitem'>
<div className='setloginpage-formitem-title'>背景:</div>
<Form.Item >
<Upload
style={{
// background:'red'
}}
name="image"
listType="picture"
maxCount={1}
defaultFileList={bgImgArray}
action={uploadImageUrl()}
headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload}
onChange={(info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
setLoading(false);
const fileId = info.file.response.data.fileId;
const url = downloadUrl(fileId);
bgImgArray.splice(0, 1, {
uid: info.file.response.data.fileId,
name: 'bg.png',
status: 'done',
url: url,
thumbUrl: url,
})
setBgImgArray([
...bgImgArray
])
preview()
return;
}
}}
onRemove={() => {
bgImgArray.splice(0)
setBgImgArray([
...bgImgArray
])
preview()
}}
>
{/* <Button size="small" type="primary"
style={{
width: '81px',
height: '28px',
background: '#135BD4',
color: 'white'
}}
disabled={bgImgArray.length > 0}>上传</Button> */}
</Upload>
</Form.Item>
</div>
<div className='username-uerpassword'>
<div className='setloginpage-formitem' >
<div className='setloginpage-formitem-title'>用户名:</div>
<Form.Item
// label="用户名"
name="adminUsername"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
}} />
</Form.Item>
</div>
<div className='setloginpage-formitem' style={{ marginTop: '-10px' }}>
<div className='setloginpage-formitem-title'>密码:</div>
<Form.Item
// label="密码"
name="adminPassword"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码"
style={{
width: '330px',
height: '34px',
background: ' #FFFFFF'
}} />
</Form.Item>
</div>
</div>
{/* <Form.Item wrapperCol={{ span: 24 }}>
<div style={{ paddingTop: '15px' }}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{ backgroundColor: 'var(--color-primary)' }}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
</div>
</Form.Item> */}
</Form>
<div className='select-loginPage'>
<div className='select-loginPage-title'>选择登陆页面</div>
{
loginpageArray.map((item) => {
return (
// <div>
// <img src={downloadUrl(item.bgImgs)} alt="" />
// </div>
<CardImgSelect
key={item.loginpageId}
id={item.loginpageId}
title={item.mainTitle}
imgs={item.bgImgs}
selected={item.loginpageId == selectedLoginpageId}
handleClick={() => {
setSelectedLoginpageId(item.loginpageId);
// loginpageArray.forEach(loginpage => {
// loginpage.selected = loginpage.id == item.id;
// })
// setLoginpageArray([
// ...loginpageArray
// ])
console.log('选择的id', item.loginpageId);
upLoginPage(item.loginpageId)
}}
/>
)
})
}
</div>
</div>
</div>
</Col>
</Row>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
// console.log('发起球球的id',selectedLoginpageId);
setIsEditModalOpen(false);
console.log(logoImgArray)
put({
messageApi,
url: `/api/proj/update/config-loginpage/${pathParams.projId}`,
body: {
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'),
copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'),
adminUsername: form.getFieldValue('adminUsername'),
adminPassword: form.getFieldValue('adminPassword'),
loginpageId: selectedLoginpageId
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.open({
type: 'success',
content: '编辑成功'
})
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen />
</>
)

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

@ -1,11 +1,11 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, InputNumber,
InputNumber,
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 {get, put} from "../../../util/AjaxUtils.ts";
@ -20,12 +20,12 @@ interface DataType {
}
export default function ProjConfigMenuList() {
const nav = useNavigate();
// const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [dataArray, setDataArray] = useState<DataType[]>();
const height = window.innerHeight - 165;
const height = window.innerHeight - 190;
const renderData = () => {
get<DataType[]>({
@ -84,16 +84,16 @@ export default function ProjConfigMenuList() {
}, [])
return (
<>
<div style={{marginTop:'17px'}}>
{contextHolder}
<Breadcrumb
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '系统菜单顺序'},
]}
/>
/> */}
<div className="mod-list-container" style={{height: `${height}px`}}>
<Alert message="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/>
<div className="mod-list" style={{marginTop: '15px'}}>
@ -101,7 +101,7 @@ export default function ProjConfigMenuList() {
scroll={{y: height - 160}} size="middle" bordered key="dataTable" rowKey="projModId"/>
</div>
</div>
</>
</div>
)
}

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

@ -1,10 +1,10 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, Button, Col, Flex, Form, Input,
Button, Col, Flex, Form, Input,
message, Modal, Row, Spin,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import { useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
@ -36,7 +36,7 @@ export default function ProjConfigModEdit(props: PropsType) {
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 - 180;
const height = window.innerHeight - 205;
useEffect(() => {
get<any>({
@ -59,7 +59,7 @@ export default function ProjConfigModEdit(props: PropsType) {
return (
<>
{contextHolder}
<Breadcrumb
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
@ -79,8 +79,8 @@ export default function ProjConfigModEdit(props: PropsType) {
},
{title: '编辑菜单'},
]}
/>
<div className="mod-edit-container" style={{height: `${height}px`}}>
/> */}
<div className="mod-edit-container" style={{height: `${height}px`,marginTop:'17px',overflow:'auto'}}>
<Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info"/>
<div className="mod-content">
<Form

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

@ -38,7 +38,7 @@ export default function ProjConfigModList(props: PropType) {
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 - 165;
const height = window.innerHeight - 190;
const renderData = () => {
get<DataType[]>({
@ -149,7 +149,7 @@ export default function ProjConfigModList(props: PropType) {
return (
<>
{contextHolder}
<Breadcrumb
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
@ -160,8 +160,8 @@ export default function ProjConfigModList(props: PropType) {
},
{title: '系统菜单管理'},
]}
/>
<div className="mod-list-container" style={{height: `${height}px`}}>
/> */}
<div className="mod-list-container" style={{height: `${height}px`, marginTop:'17px'}}>
<Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info"/>
<div className="mod-list">
<div className="table-btn-group">

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

@ -1,10 +1,10 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, Button, Col, Flex, Form, Input,
Button, Col, Flex, Form, Input,
message, Modal, Row, Spin,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import { useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
@ -34,7 +34,7 @@ export default function ProjConfigModSave(props: PropsType) {
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 - 180;
const height = window.innerHeight - 210;
useEffect(() => {
form.setFieldsValue({
@ -45,7 +45,7 @@ export default function ProjConfigModSave(props: PropsType) {
return (
<>
{contextHolder}
<Breadcrumb
{/* <Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
@ -65,8 +65,8 @@ export default function ProjConfigModSave(props: PropsType) {
},
{title: '添加菜单'},
]}
/>
<div className="mod-edit-container" style={{height: `${height}px`}}>
/> */}
<div className="mod-edit-container" style={{height: `${height}px`,marginTop:'18px'}}>
<Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} type="info"/>
<div className="mod-content">
<Form

238
src/route/proj/edit/ProjEditStep1.tsx
View File

@ -42,7 +42,7 @@ export default function ProjEditStep1() {
}, [])
return (
<div style={{ height: `${height}px`, overflow: 'auto',marginTop:'18px' }}>
<div style={{ height: `${height}px`, overflow: 'auto', marginTop: '18px' }}>
{contextHolder}
{/* <Breadcrumb
items={[
@ -53,108 +53,108 @@ export default function ProjEditStep1() {
]}
/> */}
{/* <div className="form-container" style={{ height: `${height}px` }}> */}
<div style={{ }}>
<div className="form-container" >
<div className="form-container" style={{ paddingBottom: '13px' }}>
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>标题简介</div>
</div>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
// style={{ width: '600px' }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
>
<Row gutter={15}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
<Form.Item<FieldType>
// label="项目名称"
name="projName"
rules={[{ required: true, message: '请输入项目名称' }]}
>
<Input
style={{ height: '50px', width: '300px', fontSize: '16px' }}
/>
</Form.Item>
</div>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
<Form.Item<FieldType>
// label="样式类型"
name="projStyleType"
rules={[{ required: true, message: '请选择样式类型' }]}
>
<Select
style={{ height: '50px', width: '300px', fontSize: '16px' }}
placeholder="请选择样式类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'DEFAULT', label: '默认(WEB)' },
]}
/>
</Form.Item>
</div>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
<Form.Item<FieldType>
// label="代码类型"
name="projCodeType"
rules={[{ required: true, message: '请选择代码类型' }]}
>
<Select
style={{ height: '50px', width: '300px', fontSize: '16px' }}
placeholder="请选择代码类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'code1', label: '默认类型' },
]}
/>
</Form.Item>
</div>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
<div style={{ width: '1250px' }}>
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>标题简介</div>
</div>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
// style={{ width: '600px' }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
<Form.Item<FieldType>
// label="项目名称"
name="projName"
rules={[{ required: true, message: '请输入项目名称' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
<Form.Item<FieldType>
// label="项目简介"
name="projIntroduction"
rules={[{ required: true, message: '请输入项目简介' }]}
>
<TextArea
style={{ resize: 'none', width: "411px", height: '105px', fontSize: '14px' }}
rows={3} placeholder="请用一段话简单描述系统"
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
<Form.Item<FieldType>
// label="样式类型"
name="projStyleType"
rules={[{ required: true, message: '请选择样式类型' }]}
>
<Select
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请选择样式类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'DEFAULT', label: '默认(WEB)' },
]}
/>
</Form.Item>
</div>
</Col>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
<Form.Item<FieldType>
// label="代码类型"
name="projCodeType"
rules={[{ required: true, message: '请选择代码类型' }]}
>
<Select
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请选择代码类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'code1', label: '默认类型' },
]}
<TextArea
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
rows={3} placeholder="请用一段话简单描述系统"
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
</div>
</Col>
</Row>
<Row gutter={15}>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt' >
<div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
<div style={{ width: '1250px' }}>
<Form.Item<FieldType>
// label="项目详细介绍"
name="projDesc"
@ -162,39 +162,41 @@ export default function ProjEditStep1() {
rules={[{ required: true, message: '请输入项目详细介绍' }]}
>
<TextArea
style={{ resize: 'none', width: "411px", height: '125px', fontSize: '14px' }}
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
rows={8} placeholder="请输入项目详细介绍" />
</Form.Item>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<div className='setProBtn'>
<Form.Item wrapperCol={{ span: 24 }}>
<Flex align="center" justify="center" gap="large">
<Button type="default" htmlType="button"
style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
onClick={() => {
nav(-1);
}}>
返回
</Button>
<Button type="primary"
htmlType="submit"
style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
>
保存
</Button>
<div className='setProBtn'>
<Form.Item wrapperCol={{ span: 24 }}>
<Flex align="center" justify="center" gap="large">
<Button type="default" htmlType="button"
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
size='large'
onClick={() => {
nav(-1);
}}>
返回
</Button>
<Button type="primary"
htmlType="submit"
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
size='large'
>
保存
</Button>
</Flex>
</Form.Item>
</div>
</Form>
</div>
</Flex>
</Form.Item>
</div>
</Form>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"

272
src/route/proj/edit/ProjEditStep1Show.tsx
View File

@ -1,9 +1,9 @@
import './proj-edit-step.css';
import { Col, message, Row, Select } from "antd";
import { useParams } from "react-router-dom";
import { useEffect } from "react";
import { get } from "../../../util/AjaxUtils.ts";
import { Form, Input } from 'antd';
import { Col, message, Modal, Row, Select, Spin } from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put } from "../../../util/AjaxUtils.ts";
import { Form, Input } from 'antd';
import { AxiosResponse } from "axios";
const { TextArea } = Input;
@ -16,12 +16,14 @@ type FieldType = {
projDesc: string;
};
export default function ProjEditStep1Show() {
export default function ProjEditStep1() {
// const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FieldType>();
const height = window.innerHeight - 160;
const [loading, setLoading] = useState<boolean>(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const height = window.innerHeight - 180
useEffect(() => {
get({
@ -40,7 +42,7 @@ export default function ProjEditStep1Show() {
}, [])
return (
<div style={{ height: `${height}px`, overflow: 'auto',marginTop: '18px'}}>
<div style={{ height: `${height}px`, overflow: 'auto', marginTop: '18px' }}>
{contextHolder}
{/* <Breadcrumb
items={[
@ -50,46 +52,85 @@ export default function ProjEditStep1Show() {
{title: '标题简介'},
]}
/> */}
<div style={{ }}>
{/* <div className="form-container" style={{ height: `${height}px` }}> */}
<div className="form-container" style={{ paddingBottom: '110px' }}>
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>标题简介</div>
</div>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
wrapperCol={{ span: 24 }}
// style={{ width: '600px' }}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
disabled
>
<Row gutter={15}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
<Form.Item<FieldType>
// label="项目名称"
name="projName"
rules={[{ required: true, message: '请输入项目名称' }]}
>
<Input
style={{ height: '50px', width: '300px', fontSize: '16px' }}
/>
</Form.Item>
</div>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
<Form.Item<FieldType>
// label="样式类型"
name="projStyleType"
rules={[{ required: true, message: '请选择样式类型' }]}
>
<Select
style={{ height: '50px', width: '300px', fontSize: '16px' }}
placeholder="请选择样式类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'DEFAULT', label: '默认(WEB)' },
]}
/>
</Form.Item>
</div>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
<Form.Item<FieldType>
// label="代码类型"
name="projCodeType"
rules={[{ required: true, message: '请选择代码类型' }]}
>
<Select
style={{ height: '50px', width: '300px', fontSize: '16px' }}
placeholder="请选择代码类型"
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'code1', label: '默认类型' },
]}
/>
</Form.Item>
</div>
<div className="form-container">
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>标题简介</div>
</div>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{ span: 8 }}
disabled={true}
wrapperCol={{ span: 24 }}
style={{ width: '600px' }}
autoComplete="off"
>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
<Form.Item<FieldType>
// label="项目名称"
name="projName"
rules={[{ required: true, message: '请输入项目名称' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
<div style={{ width: '1250px' }}>
<Form.Item<FieldType>
// label="项目简介"
@ -97,68 +138,24 @@ export default function ProjEditStep1Show() {
rules={[{ required: true, message: '请输入项目简介' }]}
>
<TextArea
style={{ resize: 'none', width: "411px", minHeight: '105px', fontSize: '14px' }}
rows={3} placeholder="请用一段话简单描述系统" />
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
<Form.Item<FieldType>
// label="样式类型"
name="projStyleType"
rules={[{ required: true, message: '请选择样式类型' }]}
>
<Select
placeholder="请选择样式类型"
style={{ height: '50px', width: '411px', fontSize: '16px' }}
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'DEFAULT', label: '默认(WEB)' },
]}
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
rows={3} placeholder="请用一段话简单描述系统"
/>
</Form.Item>
</div>
</Col>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
</div>
</Col>
</Row>
<Row gutter={15}>
<Form.Item<FieldType>
// label="代码类型"
name="projCodeType"
rules={[{ required: true, message: '请选择代码类型' }]}
>
<Select
placeholder="请选择代码类型"
style={{ height: '50px', width: '411px', fontSize: '16px' }}
onChange={(value: string) => {
console.log(`selected ${value}`);
}}
options={[
{ value: 'code1', label: '默认类型' },
]}
/>
</Form.Item>
</div>
</Col>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt'>
<div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
</Row>
<Row gutter={15}>
<Col span={24}>
<div className='projNameInt' >
<div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
<div style={{ width: '1250px' }}>
<Form.Item<FieldType>
// label="项目详细介绍"
name="projDesc"
@ -166,20 +163,79 @@ export default function ProjEditStep1Show() {
rules={[{ required: true, message: '请输入项目详细介绍' }]}
>
<TextArea
style={{ resize: 'none', width: "411px", minHeight: '125px',fontSize: '14px' }}
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
rows={8} placeholder="请输入项目详细介绍" />
</Form.Item>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Form>
</div>
{/* <div className='setProBtn'>
<Form.Item wrapperCol={{ span: 24 }}>
<Flex align="center" justify="center" gap="large">
<Button type="default" htmlType="button"
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
size='large'
onClick={() => {
nav(-1);
}}>
返回
</Button>
<Button type="primary"
htmlType="submit"
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
size='large'
>
保存
</Button>
</Flex>
</Form.Item>
</div> */}
</Form>
</div>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
setIsEditModalOpen(false);
put({
messageApi,
url: `/api/proj/update/edit-step1/${pathParams.projId}`,
body: {
projName: form.getFieldValue('projName'),
projIntroduction: form.getFieldValue('projIntroduction'),
projStyleType: form.getFieldValue('projStyleType'),
projCodeType: form.getFieldValue('projCodeType'),
projDesc: form.getFieldValue('projDesc'),
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.open({
type: 'success',
content: '编辑成功'
})
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen />
</div>
)
}

11
src/route/proj/edit/ProjEditStep2.tsx
View File

@ -72,7 +72,7 @@ export default function ProjEditStep2() {
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [isNewBelongOpen, setIsNewBelongOpen] = useState(false)
const [isContantOpen, steIsContantOpen] = useState(false)
const height = window.innerHeight - 220;
const height = window.innerHeight - 180;
const dateFormat = 'YYYY年MM月DD日';
// 页面显示的所属者信息
@ -481,7 +481,7 @@ export default function ProjEditStep2() {
return (
<>
<div style={{ marginTop: '26px', height: `${height}px`, overflow: 'auto', background: 'var(--color-light)', position: 'relative' }}>
<div style={{ marginTop: '17px', height: `${height}px`, overflow: 'auto', background: 'var(--color-light)', position: 'relative' }}>
{contextHolder}
@ -890,12 +890,15 @@ export default function ProjEditStep2() {
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}
style={{ height: '49px', width: '104px', color: '#4B4B4B', background: '#D1D1D1', fontSize: '16px' }}>
// style={{ height: '49px', width: '104px', color: '#4B4B4B', background: '#D1D1D1', fontSize: '16px' }}
size='large'
>
返回
</Button>
<Button type="primary"
htmlType="submit"
style={{ height: '49px', width: '104px', color: '#FDFDF2', background: '#1564ED', fontSize: '16px' }}
// style={{ height: '49px', width: '104px', color: '#FDFDF2', background: '#1564ED', fontSize: '16px' }}
size='large'
onClick={() => {
formInfo.validateFields().then(() => {
// 如果验证通过，则执行确认操作

1463
src/route/proj/edit/ProjEditStep2Show.tsx
View File

File diff suppressed because it is too large Load Diff

580
src/route/proj/edit/ProjEditStep3.tsx
View File

@ -1,310 +1,334 @@
import './proj-edit-step.css';
import {Breadcrumb, Col, Flex, message, Modal, Row, Spin, Checkbox, Divider} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get, put} from "../../../util/AjaxUtils.ts";
import {Button, Form, Input} from 'antd';
import {AxiosResponse} from "axios";
import {IEnvHard, IEnvLang, IEnvSoft, IEnvTechnical} from "../../../interfaces/proj/IEnv.ts";
import { message, Modal, Spin ,Button} from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put } from "../../../util/AjaxUtils.ts";
// import {Button, Form, Input} from 'antd';
import { AxiosResponse } from "axios";
import { useNavigate } from 'react-router-dom';
const {TextArea} = Input;
type FieldType = {
envHard: string;
envHardCustom: string;
envSoft: string;
envSoftCustom: string;
envLang: string;
envLangCustom: string;
envTechnical: string;
envTechnicalCustom: string;
};
type FormFieldType = {
envHard: string[];
envHardCustom: string;
envSoft: string[];
envSoftCustom: string;
envLang: string[];
envLangCustom: string;
envTechnical: string[];
envTechnicalCustom: string;
};
export default function ProjEditStep3() {
const nav = useNavigate();
const navigate = useNavigate()
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FormFieldType>();
const [loading, setLoading] = useState<boolean>(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [envHardArray, setEnvHardArray] = useState<IEnvHard[]>([]);
const [envSoftArray, setEnvSoftArray] = useState<IEnvSoft[]>([]);
const [envLangArray, setEnvLangArray] = useState<IEnvLang[]>([]);
const [envTechnicalArray, setEnvTechnicalArray] = useState<IEnvTechnical[]>([]);
const height = window.innerHeight - 180;
const listEnvHard = () => {
return new Promise<IEnvHard[]>((resolve) => {
get<IEnvHard[]>({
messageApi,
url: '/api/proj-env-hard/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvSoft = () => {
return new Promise<IEnvSoft[]>((resolve) => {
get<IEnvSoft[]>({
messageApi,
url: '/api/proj-env-soft/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvLang = () => {
return new Promise<IEnvLang[]>((resolve) => {
get<IEnvLang[]>({
messageApi,
url: '/api/proj/env/lang/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvTechnical = () => {
return new Promise<IEnvTechnical[]>((resolve) => {
get<IEnvTechnical[]>({
messageApi,
url: '/api/proj/env/technical/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const [envHardDev, setenvHardDev] = useState('')
const [envHardProd, setenvHardProd] = useState('')
const [envIndustry, setenvIndustry] = useState('')
// const [envLang, setenvLang] = useState('')
const [envSoftDev, setenvSoftDev] = useState('')
const [envSoftProd, setenvSoftProd] = useState('')
const [envSystemDev, setenvSystemDev] = useState('')
const [envSystemProd, seenvSystemProd] = useState('')
const [envTechnical, setenvTechnical] = useState('')
const height = window.innerHeight - 180;
// const [defaultData, setDefaultData] = useState<any[]>([])
//
const getData = () => {
return new Promise<FieldType>((resolve) => {
get({
messageApi,
url: `/api/proj/get/edit-step3/${pathParams.projId}`,
onSuccess({data}: AxiosResponse) {
resolve(data);
}
})
get({
messageApi,
url: `/api/proj/get/edit-step3/${pathParams.projId}`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
console.log('获取页面信息', data);
setenvHardDev(data.envHardDev)
setenvHardProd(data.envHardProd)
setenvIndustry(data.envIndustry)
setenvSoftDev(data.envSoftDev)
setenvSoftProd(data.envSoftProd)
setenvSystemDev(data.envSystemDev)
seenvSystemProd(data.envSystemProd)
setenvTechnical(data.envTechnical)
}
})
}
// 硬件开发环境
const getEnvHardDev = () => {
get({
messageApi,
url: `/api/proj/dict/get-env-hard-dev`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('硬件开发环境', data);
setenvHardDev(data.data)
}
})
}
// 硬件运行环境
const getEnvHardProd = () => {
get({
messageApi,
url: `/api/proj/dict/get-env-hard-proj`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('硬件运行环境', data);
setenvHardProd(data.data)
}
})
}
const render = async () => {
const envHards = await listEnvHard();
const envSofts = await listEnvSoft();
const envLangs = await listEnvLang();
const envTechnicals = await listEnvTechnical();
const data = await getData();
setEnvHardArray(envHards);
setEnvSoftArray(envSofts);
setEnvLangArray(envLangs);
setEnvTechnicalArray(envTechnicals);
form.setFieldsValue({
envHard: data.envHard.split(','),
envHardCustom: data.envHardCustom,
envSoft: data.envSoft.split(','),
envSoftCustom: data.envSoftCustom,
envLang: data.envLang.split(','),
envLangCustom: data.envLangCustom,
envTechnical: data.envTechnical.split(','),
envTechnicalCustom: data.envTechnicalCustom,
// 软件环境 开发
const getEnvsoftDev = () => {
get({
messageApi,
url: `/api/proj/dict/get-env-soft`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('软件环境', data);
setenvSoftDev(data.data[0])
}
})
}
// 软件环境 运行
const getEnvsoftProd = () => {
get({
messageApi,
url: `/api/proj/dict/get-env-soft`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('软件环境', data);
setenvSoftProd(data.data[1])
}
})
}
// 开发系统 api/proj/dict/get-system-dev
const getSystemdev = () => {
get({
messageApi,
url: `/api/proj/dict/get-system-dev`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('开发系统', data);
setenvSystemDev(data.data)
}
})
}
// 运行系统 api/proj/dict/get-system-prod
const getSystemprod = () => {
get({
messageApi,
url: `/api/proj/dict/get-system-prod`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('运行系统', data);
seenvSystemProd(data.data)
}
})
}
// 技术特点 api/proj/dict/get-technical
const getTechnical = () => {
get({
messageApi,
url: `/api/proj/dict/get-technical`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
// console.log('技术特点', data);
setenvTechnical(data.data)
}
})
}
// 面向领域 api/proj/dict/get-industry
const getIndustry = () => {
get({
messageApi,
url: `/api/proj/dict/get-industry`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
console.log('面向领域', data);
setenvIndustry(data.data)
}
})
}
useEffect(() => {
render();
// render();
getData()
}, [])
return (
<>
<div style={{ height: `${height}px`, overflow: 'auto', marginTop: '18px' }}>
{contextHolder}
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '软件功能特点'},
]}
/>
<div className="form-container" style={{height: `${height}px`}}>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{span: 8}}
wrapperCol={{span: 24}}
style={{width: '1000px'}}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
>
<Form.Item<FormFieldType>
label="硬件环境"
name="envHard"
rules={[{required: true, message: '请选择硬件环境'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envHardArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvHardId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envHardCustom"
rules={[{required: false, message: '请输入其他硬件环境'}]}
>
<TextArea rows={3} placeholder="请输入其他硬件环境"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="软件环境"
name="envSoft"
rules={[{required: true, message: '请选择软件环境'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envSoftArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvSoftId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envSoftCustom"
rules={[{required: false, message: '请输入其他软件环境'}]}
>
<TextArea rows={3} placeholder="请输入其他软件环境"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="编程语言"
name="envLang"
rules={[{required: true, message: '请选择编程语言'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envLangArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvLangId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envLangCustom"
rules={[{required: false, message: '请输入其他编程语言'}]}
>
<TextArea rows={3} placeholder="请输入其他编程语言"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="技术特点"
name="envTechnical"
rules={[{required: true, message: '请选择编程语言'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envTechnicalArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvTechnicalId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envTechnicalCustom"
rules={[{required: false, message: '请输入其他技术特点'}]}
>
<TextArea rows={3} placeholder="请输入其他技术特点"/>
</Form.Item>
<Divider dashed />
<Form.Item wrapperCol={{span: 24}}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{backgroundColor: 'var(--color-primary)'}}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
</Form.Item>
</Form>
<div className="form-container" style={{height: `${height}px`,overflow: 'auto',paddingBottom:'10px'}}>
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>软件功能特点</div>
</div>
<div className='step-software'>
<div className='step-software-context'>
<div className='step-software-title'>
开发的硬件环境
</div>
<div className='step-software-text'>
{envHardDev}
</div>
<div className='step-software-btn' onClick={()=>{getEnvHardDev()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
运行的硬件环境
</div>
<div className='step-software-text'>
{envHardProd}
</div>
<div className='step-software-btn' onClick={()=>{getEnvHardProd()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
开发软件的操作系统
</div>
<div className='step-software-text'>
{envSystemDev}
</div>
<div className='step-software-btn' onClick={()=>{getSystemdev()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
该软件的运行平台/操作系统
</div>
<div className='step-software-text'>
{envSystemProd}
</div>
<div className='step-software-btn' onClick={()=>{getSystemprod()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
软件开发环境/开发工具
</div>
<div className='step-software-text'>
{envSoftDev}
</div>
<div className='step-software-btn' onClick={()=>{getEnvsoftDev()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
软件运行支撑环境/支持软件
</div>
<div className='step-software-text'>
{envSoftProd}
</div>
<div className='step-software-btn' onClick={()=>{getEnvsoftProd()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
编程语言
</div>
<div className='step-software-text'>
Java
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
面向领域/行业
</div>
<div className='step-software-text'>
{envIndustry}
</div>
<div className='step-software-btn' onClick={()=>{getIndustry()}}>
生成
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
技术特点
</div>
<div className='step-software-text'>
{envTechnical}
</div>
<div className='step-software-btn' onClick={()=>{getTechnical()}}>
生成
</div>
</div>
</div>
<div className='software-btn'>
<Button className='software-back'
type="default"
size='large'
onClick={()=>{navigate(-1)}}>
返回
</Button>
<Button className='software-up'
size='large'
type="primary"
onClick={()=>{
setIsEditModalOpen(true)
}}>
上传
</Button>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
setIsEditModalOpen(false);
put({
messageApi,
url: `/api/proj/update/edit-step3/${pathParams.projId}`,
body: {
envHard: form.getFieldValue('envHard').join(','),
envHardCustom: form.getFieldValue('envHardCustom'),
envSoft: form.getFieldValue('envSoft').join(','),
envSoftCustom: form.getFieldValue('envSoftCustom'),
envLang: form.getFieldValue('envLang').join(','),
envLangCustom: form.getFieldValue('envLangCustom'),
envTechnical: form.getFieldValue('envTechnical').join(','),
envTechnicalCustom: form.getFieldValue('envTechnicalCustom'),
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.open({
type: 'success',
content: '编辑成功'
})
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
setIsEditModalOpen(false);
put({
messageApi,
url: `/api/proj/update/edit-step3/${pathParams.projId}`,
body: {
envHardDev: envHardDev,
envHardProd:envHardProd ,
envIndustry: envIndustry,
envLang: "Java",
envSoftDev: envSoftDev,
envSoftProd: envSoftProd,
envSystemDev: envSystemDev,
envSystemProd:envSystemProd,
envTechnical: envTechnical
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.open({
type: 'success',
content: '编辑成功'
})
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen/>
</>
<Spin tip="正在提交..." spinning={loading} fullscreen />
</div>
)
}

381
src/route/proj/edit/ProjEditStep3Show.tsx
View File

@ -1,252 +1,173 @@
import './proj-edit-step.css';
import {Breadcrumb, Col, message, Row, Checkbox, Divider} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get} from "../../../util/AjaxUtils.ts";
import {Form, Input} from 'antd';
import {AxiosResponse} from "axios";
import {IEnvHard, IEnvLang, IEnvSoft, IEnvTechnical} from "../../../interfaces/proj/IEnv.ts";
import { message,Button } from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get } from "../../../util/AjaxUtils.ts";
// import {Button, Form, Input} from 'antd';
import { AxiosResponse } from "axios";
import { useNavigate } from 'react-router-dom';
const {TextArea} = Input;
type FieldType = {
envHard: string;
envHardCustom: string;
envSoft: string;
envSoftCustom: string;
envLang: string;
envLangCustom: string;
envTechnical: string;
envTechnicalCustom: string;
};
type FormFieldType = {
envHard: string[];
envHardCustom: string;
envSoft: string[];
envSoftCustom: string;
envLang: string[];
envLangCustom: string;
envTechnical: string[];
envTechnicalCustom: string;
};
export default function ProjEditStep3Show() {
const nav = useNavigate();
export default function ProjEditStep3() {
const navigate = useNavigate()
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FormFieldType>();
const [envHardArray, setEnvHardArray] = useState<IEnvHard[]>([]);
const [envSoftArray, setEnvSoftArray] = useState<IEnvSoft[]>([]);
const [envLangArray, setEnvLangArray] = useState<IEnvLang[]>([]);
const [envTechnicalArray, setEnvTechnicalArray] = useState<IEnvTechnical[]>([]);
const height = window.innerHeight - 180;
const listEnvHard = () => {
return new Promise<IEnvHard[]>((resolve) => {
get<IEnvHard[]>({
messageApi,
url: '/api/proj-env-hard/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvSoft = () => {
return new Promise<IEnvSoft[]>((resolve) => {
get<IEnvSoft[]>({
messageApi,
url: '/api/proj-env-soft/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvLang = () => {
return new Promise<IEnvLang[]>((resolve) => {
get<IEnvLang[]>({
messageApi,
url: '/api/proj/env/lang/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const listEnvTechnical = () => {
return new Promise<IEnvTechnical[]>((resolve) => {
get<IEnvTechnical[]>({
messageApi,
url: '/api/proj/env/technical/list',
onSuccess({data}) {
resolve(data);
}
})
})
}
const [envHardDev, setenvHardDev] = useState('')
const [envHardProd, setenvHardProd] = useState('')
const [envIndustry, setenvIndustry] = useState('')
// const [envLang, setenvLang] = useState('')
const [envSoftDev, setenvSoftDev] = useState('')
const [envSoftProd, setenvSoftProd] = useState('')
const [envSystemDev, setenvSystemDev] = useState('')
const [envSystemProd, seenvSystemProd] = useState('')
const [envTechnical, setenvTechnical] = useState('')
const height = window.innerHeight - 180;
// const [defaultData, setDefaultData] = useState<any[]>([])
//
const getData = () => {
return new Promise<FieldType>((resolve) => {
get({
messageApi,
url: `/api/proj/get/edit-step3/${pathParams.projId}`,
onSuccess({data}: AxiosResponse) {
resolve(data);
}
})
get({
messageApi,
url: `/api/proj/get/edit-step3/${pathParams.projId}`,
onSuccess({ data }: AxiosResponse) {
// resolve(data);
console.log('获取页面信息', data);
setenvHardDev(data.envHardDev)
setenvHardProd(data.envHardProd)
setenvIndustry(data.envIndustry)
setenvSoftDev(data.envSoftDev)
setenvSoftProd(data.envSoftProd)
setenvSystemDev(data.envSystemDev)
seenvSystemProd(data.envSystemProd)
setenvTechnical(data.envTechnical)
}
})
}
const render = async () => {
const envHards = await listEnvHard();
const envSofts = await listEnvSoft();
const envLangs = await listEnvLang();
const envTechnicals = await listEnvTechnical();
const data = await getData();
setEnvHardArray(envHards);
setEnvSoftArray(envSofts);
setEnvLangArray(envLangs);
setEnvTechnicalArray(envTechnicals);
form.setFieldsValue({
envHard: data.envHard.split(','),
envHardCustom: data.envHardCustom,
envSoft: data.envSoft.split(','),
envSoftCustom: data.envSoftCustom,
envLang: data.envLang.split(','),
envLangCustom: data.envLangCustom,
envTechnical: data.envTechnical.split(','),
envTechnicalCustom: data.envTechnicalCustom,
})
}
useEffect(() => {
render();
// render();
getData()
}, [])
return (
<>
<div style={{ height: `${height}px`, overflow: 'auto', marginTop: '18px' }}>
{contextHolder}
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '软件功能特点'},
]}
/>
<div className="form-container" style={{height: `${height}px`}}>
<div className="form-body">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{span: 8}}
wrapperCol={{span: 24}}
style={{width: '1000px'}}
disabled={true}
autoComplete="off"
>
<Form.Item<FormFieldType>
label="硬件环境"
name="envHard"
rules={[{required: true, message: '请选择硬件环境'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envHardArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvHardId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envHardCustom"
rules={[{required: false, message: '请输入其他硬件环境'}]}
>
<TextArea rows={3} placeholder="请输入其他硬件环境"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="软件环境"
name="envSoft"
rules={[{required: true, message: '请选择软件环境'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envSoftArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvSoftId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envSoftCustom"
rules={[{required: false, message: '请输入其他软件环境'}]}
>
<TextArea rows={3} placeholder="请输入其他软件环境"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="编程语言"
name="envLang"
rules={[{required: true, message: '请选择编程语言'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envLangArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvLangId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envLangCustom"
rules={[{required: false, message: '请输入其他编程语言'}]}
>
<TextArea rows={3} placeholder="请输入其他编程语言"/>
</Form.Item>
<Divider dashed />
<Form.Item<FormFieldType>
label="技术特点"
name="envTechnical"
rules={[{required: true, message: '请选择编程语言'}]}
>
<Checkbox.Group style={{width: '100%'}}>
<Row>{envTechnicalArray.map((item, index) => {
return (
<Col span={4} key={`envHard-${index}`}>
<Checkbox value={item.projEnvTechnicalId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
</Col>
)
})}</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item<FormFieldType>
label="其他"
name="envTechnicalCustom"
rules={[{required: false, message: '请输入其他技术特点'}]}
>
<TextArea rows={3} placeholder="请输入其他技术特点"/>
</Form.Item>
</Form>
<div className='Step-title'>
<div className='Step-titlel'></div>
<div className='Step-titler'>软件功能特点</div>
</div>
<div className='step-software'>
<div className='step-software-context'>
<div className='step-software-title'>
开发的硬件环境
</div>
<div className='step-software-text'>
{envHardDev}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
运行的硬件环境
</div>
<div className='step-software-text'>
{envHardProd}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
开发软件的操作系统
</div>
<div className='step-software-text'>
{envSystemDev}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
该软件的运行平台/操作系统
</div>
<div className='step-software-text'>
{envSystemProd}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
软件开发环境/开发工具
</div>
<div className='step-software-text'>
{envSoftDev}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
软件运行支撑环境/支持软件
</div>
<div className='step-software-text'>
{envSoftProd}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
编程语言
</div>
<div className='step-software-text'>
Java
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
面向领域/行业
</div>
<div className='step-software-text'>
{envIndustry}
</div>
</div>
<div className='step-software-context'>
<div className='step-software-title'>
技术特点
</div>
<div className='step-software-text'>
{envTechnical}
</div>
</div>
</div>
<div className='software-btn'>
<Button className='software-back'
type="default"
size='large'
onClick={()=>{navigate(-1)}}>
返回
</Button>
</div>
</div>
</>
</div>
)
}

98
src/route/proj/edit/proj-config-loginpage.css
View File

@ -1,6 +1,8 @@
.loginpage-body {
/* display: flex; */
/* height: 975px; */
/* height: 975px; */
}
.loginpage-bodyL {
@ -8,22 +10,25 @@
display: flex;
flex-direction: column;
align-items: center;
/* height: 975px; */
/* height: 1500px; */
padding: 0;
}
.loginpage-bodyR {
background: white;
/* background: white; */
}
.loginpage-bodyL-btn {
display: flex;
margin-top: 65px;
margin-bottom: 192px;
margin-top: 35px;
/* margin-bottom: 192px; */
}
.seeButton {
width: 107px;
/* width: 107px;
height: 37px;
background: #F2F2F2;
border: 1px solid #EDEDED;
@ -32,16 +37,95 @@
align-items: center;
font-size: 16px;
color: #65615C;
cursor: pointer; */
}
.upButton {
width: 132px;
/* width: 132px;
height: 37px;
background: #FF9F08;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #FFFFFF;
color: #FFFFFF; */
margin-left: 19px;
/* cursor: pointer; */
}
.setloginpage-right {
background-color: white;
padding: 22px 15px 19px 19px;
/* height: 1500px; */
box-sizing: border-box;
/* overflow: auto; */
}
.setloginpage-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 20px;
color: #323232;
margin-left: 7px;
margin-bottom: 23px;
}
.setloginpage-formitem {
display: flex;
/* margin-top: 23px; */
/* margin-top: -10px; */
}
.setloginpage-formitem-title {
width: 70px;
height: 38px;
line-height: 38px;
/* background-color: red; */
margin-right: 9px;
font-family: PingFang SC;
font-weight: 400;
font-size: 16px;
color: #5C6065;
margin-left: 21px;
}
.right-formitem-title {
margin-left: 10px;
}
.username-uerpassword {
width: 452px;
height: 109px;
background: #F7F8FA;
padding-top: 17px;
margin-left: 17px;
}
.select-loginPage {
width: 491px;
/* height: 547px; */
background: #FFFFFF;
box-shadow: 0px 0px 16px 0px rgba(151, 151, 151, 0.18);
border-radius: 3px;
border: 1px solid #F1F1F1;
margin-top: 58px;
padding:24px 0 24px 20px;
box-sizing: border-box;
}
.select-loginPage-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 20px;
color: #323232;
margin-bottom: 32px;
}
.select-loginPage-imgs{
/* border: 1px solid red; */
max-height: 362px;
overflow: auto;
}

72
src/route/proj/edit/proj-edit-step.css
View File

@ -23,9 +23,10 @@
background-color: var(--color-light);
padding-top: 30px;
padding-left: 30px;
/* padding-bottom: 35px; */
box-sizing: border-box;
/* overflow: auto; */
height: 842px;
/* height: 842px; */
}
.form-container .form-body {
@ -230,4 +231,73 @@
color: #FFC484;
/* background-color: red; */
margin-top: 26px;
}
.step-software {
margin-top: 38px;
}
.step-software-context {
display: flex;
margin-bottom: 20px;
}
.step-software-title {
width: 230px;
/* background-color: pink; */
font-weight: 700;
font-size: 16px;
color: #555555;
text-align: end;
}
.step-software-text {
/* background-color: pink; */
max-width: 1000px;
/* background-color: pink; */
font-weight: 700;
font-size: 16px;
color: #555555;
margin-left: 44px;
overflow-wrap: break-word
}
.step-software-btn {
margin-left: 27px;
/* font-weight: 700; */
font-size: 16px;
color: #5980B5;
text-decoration: underline;
cursor: pointer;
}
.software-btn {
display: flex;
margin-top: 150px;
}
.software-back {
/* width: 152px;
height: 52px;
background: #E5E5E5;
font-size: 18px;
color: #555555;
line-height: 52px;
text-align: center; */
margin-left: 660px;
/* cursor: pointer; */
}
.software-up {
/* width: 152px;
height: 52px;
background: #0355EB;
font-size: 18px;
color: #FFFFFF;
line-height: 52px;
text-align: center; */
margin-left: 61px;
/* cursor: pointer; */
}

1
src/route/proj/proj-create.css
View File

@ -6,6 +6,7 @@
flex-wrap: wrap;
align-items: center;
padding-bottom: 26px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
margin-top: 18px;
background-image: url('../../static/buyback.png');

31
src/route/router.tsx
View File

@ -1,5 +1,10 @@
import { createHashRouter } from "react-router-dom";
import Home from '../route/Home/Home.tsx'
// import ProductRelease from '../route/ProductRelease/ProductRelease.tsx'
// import TransactionOrder from '../route/TransactionOrder/TransactionOrder.tsx'
// import CopyrightGgoods from '../route/CopyrightGgoods/CopyrightGgoods.tsx'
// import TradingGoods from '../route/TradingGoods/TradingGoods.tsx'
import Index from "../route/index/Index.tsx";
// import Search from "../route/SearchList/SearchList.tsx";
@ -185,19 +190,39 @@ export const router = createHashRouter(
path: '/',
element: <Index />,
children: [
{
path: '/',
element: <Home/>
element: <Home/>,
},
{
path:'/home',
element:<Home/>
element:<Home/>,
children:[
]
},
// {
// path:'/search',
// element:<Search/>
// },
// {
// path:'/product-release',
// element:<ProductRelease/>
// },
// {
// path:'/transaction-order',
// element:<TransactionOrder/>
// },
// {
// path:'/copyright-goods',
// element:<CopyrightGgoods/>
// },
// {
// path:'/trading-goods',
// element:<TradingGoods/>
// },
{
path: '/proj-create',
element: <ProjCreate />