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

css修改及登陆界面

Browse Source
This commit is contained in:
xixi 2024-05-16 18:00:57 +08:00
parent 7a885cec8e
commit 9b4de12e03
25 changed files with 353 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/card/CardProjType.tsx
View File

@ -3,7 +3,7 @@ import { ICardProj, ICardProjChargeLine } from "../../interfaces/proj/ICardProj.
import { Checkbox } from 'antd'; import { Checkbox } from 'antd';
import { useState } from "react"; import { useState } from "react";
import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts"; import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts";
// import ProjCardHeadBg from '../../assets/proj-card-head-bg.png'; // import ProjCardHeadBg from '../../assets/proj-card-head-bg.png1';
import serveImg from '../../static/serve.png' import serveImg from '../../static/serve.png'
import useImg from '../../static/use.png' import useImg from '../../static/use.png'
import leftImg from '../../static/createPro/left.png' import leftImg from '../../static/createPro/left.png'

12
src/components/card/card-proj-type.css
View File

@ -3,6 +3,7 @@
/* height: 842px; */ /* height: 842px; */
/* position: relative; */ /* position: relative; */
/* background-color: rgb(255, 255, 255); */ /* background-color: rgb(255, 255, 255); */
margin-left: 28px;
} }
.seruseImg { .seruseImg {
@ -13,6 +14,9 @@
.projTop { .projTop {
height: 745px; height: 745px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
box-shadow: 0px 7px 7px 0px rgba(30, 30, 30, 0.18);
border-radius: 13px;
border: 1px solid #F3F3F3;
} }
.proj .proj-head { .proj .proj-head {
@ -27,6 +31,7 @@
width: 100%; width: 100%;
height: 132px; height: 132px;
line-height: 132px; line-height: 132px;
/* left: 38px; */ /* left: 38px; */
/* top: -4px; */ /* top: -4px; */
/* background-color: aqua; */ /* background-color: aqua; */
@ -148,7 +153,7 @@
width: 375px; width: 375px;
height: 94px; height: 94px;
/* background-color: pink; */ /* background-color: pink; */
} }
.proj .proj-foot .buy-btn { .proj .proj-foot .buy-btn {
@ -157,7 +162,7 @@
padding: 0 10px; padding: 0 10px;
background: url(../../static/createPro/buyBack.png); background: url(../../static/createPro/buyBack.png);
background-size: 100% 100%; background-size: 100% 100%;
box-shadow: 0px 7px 7px 0px rgba(30,30,30,0.18);
/* text-align: center; /* text-align: center;
margin: 0 5px; margin: 0 5px;
padding: 10px 0; padding: 10px 0;
@ -201,7 +206,8 @@
font-size: 18px; font-size: 18px;
color: #696969; color: #696969;
} }
.proj-foot .buy-btn:nth-child(2){
.proj-foot .buy-btn:nth-child(2) {
/* background-color: red; */ /* background-color: red; */
margin-left: 9px; margin-left: 9px;
} }

2
src/components/list/ListProj.tsx
View File

@ -35,7 +35,7 @@ export default function ListProj() {
const [projs, setProjs] = useState<IProj[]>([]); const [projs, setProjs] = useState<IProj[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
// const [keywords, setKeywords] = useState(''); // const [keywords, setKeywords] = useState('');
const domHeight = window.innerHeight - 280; const domHeight = window.innerHeight - 250;
// const navigate = useNavigate() // const navigate = useNavigate()
const reqData = (currentPage: number) => { const reqData = (currentPage: number) => {
get<IListPage<IProj>>({ get<IListPage<IProj>>({

2
src/components/list/list-proj.css
View File

@ -2,7 +2,7 @@
width: 100%; width: 100%;
/* padding-top: 26px; */ /* padding-top: 26px; */
/* padding-right: 33px; */ /* padding-right: 33px; */
margin-top: 10px; /* margin-top: 10px; */
} }
.projListBox{ .projListBox{
margin-bottom: 25px; margin-bottom: 25px;

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

@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
// import newImg from '../../static/left/new.png' // import newImg from '../../static/left/new.png'
// import { // import {
// RightOutlined // RightOutlined1
// } from '@ant-design/icons'; // } from '@ant-design/icons';
export default function MenuWithTopButton(props: IMenuWithTopButton) { export default function MenuWithTopButton(props: IMenuWithTopButton) {
const navugate = useNavigate() const navugate = useNavigate()

8
src/components/menu/menu-tree-with-top-button.css
View File

@ -6,7 +6,7 @@
width: 100%; width: 100%;
} }
.btn-cennter{ .btn-cennter{
width: 268px; width: 231px;
height: 56px; height: 56px;
font-size: 18px; font-size: 18px;
background: #FFFBEF; background: #FFFBEF;
@ -27,8 +27,8 @@
.center-top-lift img{ .center-top-lift img{
width: 19px; width: 19px;
height: 15px; height: 15px;
margin-left: 30px; margin-left: 14px;
margin-right: 14px; margin-right: 13px;
} }
.center-top-right{ .center-top-right{
display: flex; display: flex;
@ -36,7 +36,7 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
width: 53px; width: 53px;
margin-left: 96px; margin-left: 82px;
} }
.center-top-right img{ .center-top-right img{
margin-right: 10px; margin-right: 10px;

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

@ -3,7 +3,7 @@
} }
.bot { .bot {
width: 268px; width: 230px;
height: 56px; height: 56px;
font-size: 18px; font-size: 18px;
/* color: #FFAF22; */ /* color: #FFAF22; */

20
src/components/menu/menu-with-top-button.css
View File

@ -3,7 +3,7 @@
} }
.menu-with-top-button .top { .menu-with-top-button .top {
width: 268px; width: 231px;
height: 56px; height: 56px;
font-size: 18px; font-size: 18px;
/* color: #FFAF22; */ /* color: #FFAF22; */
@ -25,8 +25,8 @@
.menu-with-top-button .top .top-lift img { .menu-with-top-button .top .top-lift img {
width: 19px; width: 19px;
height: 19px; height: 19px;
margin-left: 30px; margin-left: 14px;
margin-right: 14px; margin-right: 13px;
} }
.menu-with-top-button .top .top-right { .menu-with-top-button .top .top-right {
@ -36,7 +36,7 @@
cursor: pointer; cursor: pointer;
width: 53px; width: 53px;
/* background-color: red; */ /* background-color: red; */
margin-left: 96px; margin-left: 82px;
} }
@ -50,29 +50,33 @@
.menu-with-top-button ul { .menu-with-top-button ul {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
width: 231px;
/* background-color:pink; */
} }
.menu-with-top-button ul li { .menu-with-top-button ul li {
height: 50px; height: 50px;
margin-left: 66px; margin-left: 35px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #313131; color: #313131;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
/* background-color: red; */
text-indent: 32px;
} }
.menu-with-top-button ul li.active { .menu-with-top-button ul li.active {
width: 223px; width: 213px;
height: 50px; height: 50px;
background: #FF9F08; background: #FF9F08;
border-radius: 25px; border-radius: 25px;
color: white; color: white;
text-indent: 26px; text-indent: 59px;
} }
.topIcon{ .topIcon{
color: white; color: white;
margin-left: 101px; margin-left: 68px;
} }

1
src/layout/Type/statedata.d.ts vendored
View File

@ -19,4 +19,5 @@ interface ContactDataType {
name: string name: string
phone: string phone: string
projContactId: string projContactId: string
email:string
} }

6
src/layout/head/head.css
View File

@ -1,7 +1,7 @@
.head { .head {
width: 100vw; width: 100vw;
height: 84px; height: 69px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -29,8 +29,8 @@
height: 41px; height: 41px;
/* background-color: red; /* background-color: red;
*/ */
margin-left: 176px; margin-left: 15px;
margin-top: 21px; margin-top: 12px;
} }
.head .center .right { .head .center .right {

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

@ -153,7 +153,7 @@ export default function Index() {
setNow('创建项目') setNow('创建项目')
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }]) setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }])
// //
} else if (location.pathname.includes('/proj-edit') && !location.pathname.includes('/step')) { } else if (location.pathname.includes('/proj-edit') && !location.pathname.includes('/step') &&!location.pathname.includes('/config-loginpage') ) {
setNow('编辑项目') setNow('编辑项目')
// setEditname(location.pathname) // setEditname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }]) setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
@ -177,9 +177,12 @@ export default function Index() {
setNow('标题简介') setNow('标题简介')
// setNewname(location.pathname) // setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '基本信息' }]) 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')) {
setNow('登录界面设置')
// setNewname(location.pathname)
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '登录界面设置' }])
} }
// /proj-edit/step1
}, [location.pathname]) }, [location.pathname])
useEffect(() => { useEffect(() => {
@ -220,6 +223,7 @@ export default function Index() {
<IndexListDispatchContext.Provider value={dispatch}> <IndexListDispatchContext.Provider value={dispatch}>
<div className="index"> <div className="index">
<div className="left"> <div className="left">
<div style={{height:'15px',width:'230px',background:'white'}}></div>
<MenuWithTopButton <MenuWithTopButton
button={projMenu.button} button={projMenu.button}
list={projMenu.list} list={projMenu.list}

11
src/route/index/index.css
View File

@ -6,24 +6,25 @@
.index .left { .index .left {
position: fixed; position: fixed;
width: 267px; /* width: 267px; */
width: 230px;
height: 100%; height: 100%;
/* overflow: auto; */ /* overflow: auto; */
top: 80px; top: 65px;
left: 0; left: 0;
background-color: var(--color-light); background-color: var(--color-light);
} }
.index .right { .index .right {
margin-left: 300px; margin-left: 250px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
position: fixed; position: fixed;
width:calc(100vw - 330px); width:calc(100vw - 270px);
/* width: 1575px; */ /* width: 1575px; */
} }
.index .right .top{ .index .right .top{
margin-top: 26px; /* margin-top: 11px; */
box-sizing: border-box; box-sizing: border-box;
height: 62px; height: 62px;
display: flex; display: flex;

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

@ -23,8 +23,7 @@ export default function ProjCreate() {
} }
}); });
const nav = useNavigate(); const nav = useNavigate();
const height = window.innerHeight - 150; const height = window.innerHeight - 140;
useEffect(() => { useEffect(() => {
get<any>({ get<any>({
messageApi: messageApi, messageApi: messageApi,
@ -40,7 +39,7 @@ export default function ProjCreate() {
}, []) }, [])
return ( return (
<> < >
{contextHolder} {contextHolder}
{/* <Breadcrumb {/* <Breadcrumb
items={[ items={[

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

@ -29,6 +29,7 @@ type ProjModType = {
} }
export default function ProjEdit() { export default function ProjEdit() {
const height = window.innerHeight - 180;
const nav = useNavigate(); const nav = useNavigate();
const pathParams = useParams(); const pathParams = useParams();
@ -230,13 +231,13 @@ export default function ProjEdit() {
} }
}) })
} }
useEffect(() => { useEffect(() => {
renderData(); renderData();
}, []) }, [])
return ( return (
<div className='proj-edit-box'> <div className='proj-edit-box' style={{height: `${height}px`,overflow:'auto'}}>
{contextHolder} {contextHolder}
{/* <Breadcrumb {/* <Breadcrumb
items={[ items={[

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

@ -1,6 +1,6 @@
import './proj-edit-step.css'; import './proj-config-loginpage.css';
import { import {
Breadcrumb,
Col, Col,
Flex, Flex,
GetProp, GetProp,
@ -14,10 +14,10 @@ import {
UploadFile, UploadFile,
UploadProps UploadProps
} from "antd"; } from "antd";
import {Link, useNavigate, useParams} from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import {DevUserId, get, downloadUrl, put, uploadImageUrl, post} from "../../../util/AjaxUtils.ts"; import { DevUserId, get, downloadUrl, put, uploadImageUrl, post } from "../../../util/AjaxUtils.ts";
import {Button, Form} from 'antd'; import { Button, Form } from 'antd';
type FormFieldType = { type FormFieldType = {
loginpageId: string; loginpageId: string;
@ -42,7 +42,7 @@ export default function ProjConfigLoginpage() {
const [logoImgArray, setLogoImgArray] = useState<UploadFile[]>([]); const [logoImgArray, setLogoImgArray] = useState<UploadFile[]>([]);
const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]); const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]);
const [iframeSrcDoc, setIframeSrcDoc] = useState(); const [iframeSrcDoc, setIframeSrcDoc] = useState();
const height = window.innerHeight - 210; const height = window.innerHeight - 180;
const beforeUpload = (file: FileType) => { const beforeUpload = (file: FileType) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
@ -65,7 +65,7 @@ export default function ProjConfigLoginpage() {
copyrightOwner: form.getFieldValue('copyrightOwner'), copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'), copyrightDate: form.getFieldValue('copyrightDate'),
}, },
onSuccess({data}) { onSuccess({ data }) {
setIframeSrcDoc(data.data); setIframeSrcDoc(data.data);
} }
}) })
@ -75,7 +75,7 @@ export default function ProjConfigLoginpage() {
get<any>({ get<any>({
messageApi, messageApi,
url: `/api/proj/get/config-loginpage/${pathParams.projId}`, url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
onSuccess({data}) { onSuccess({ data }) {
form.setFieldValue('loginpageId', data.loginpageId); form.setFieldValue('loginpageId', data.loginpageId);
form.setFieldValue('subTitle', data.subTitle); form.setFieldValue('subTitle', data.subTitle);
form.setFieldValue('copyrightOwner', data.copyrightOwner); form.setFieldValue('copyrightOwner', data.copyrightOwner);
@ -117,69 +117,89 @@ export default function ProjConfigLoginpage() {
return ( return (
<> <>
{contextHolder} {contextHolder}
<Breadcrumb {/* <Breadcrumb
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>}, {title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
{title: '登录界面设置'}, {title: '登录界面设置'},
]} ]}
/> /> */}
<div className="form-container" style={{height: `${height}px`}}> <div className="form-container" style={{ height: `${height}px`, marginTop: '18px', overflow: 'auto', padding: '0', background: '#EFEFEF' }}>
<div className="loginpage-body"> <div className="loginpage-body">
<Row gutter={15}> <Row gutter={15}>
<Col span={6}>
<Col span={16}>
<div className='loginpage-bodyL' >
<iframe srcDoc={iframeSrcDoc} style={{
width: '93%',
height: `${height - 150}px`,
border: '1px solid var(--color-border)',
// background: 'pink',
marginTop:'68px'
}} />
<div className='loginpage-bodyL-btn'>
<div className='seeButton'>预览</div>
<div className='upButton'>确认修改</div>
</div>
</div>
</Col>
<Col span={8}>
<Form <Form
name="basic" name="basic"
form={form} form={form}
layout="vertical" layout="vertical"
labelCol={{span: 8}} labelCol={{ span: 8 }}
wrapperCol={{span: 24}} wrapperCol={{ span: 24 }}
onFinish={() => { onFinish={() => {
setIsEditModalOpen(true); setIsEditModalOpen(true);
}} }}
autoComplete="off" autoComplete="off"
style={{ background: 'red' }}
> >
<Form.Item label="副标题" <Form.Item label="副标题"
name="subTitle" name="subTitle"
rules={[{required: false, message: '请输入副标题'}]}> rules={[{ required: false, message: '请输入副标题' }]}>
<Input placeholder="请输入副标题" onChange={() => { <Input placeholder="请输入副标题" onChange={() => {
preview() preview()
}}/> }} />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Space.Compact> <Space.Compact>
<Form.Item label="版权时间" <Form.Item label="版权时间"
name="copyrightDate" name="copyrightDate"
rules={[{required: false, message: '请输入版权时间'}]} rules={[{ required: false, message: '请输入版权时间' }]}
style={{display: 'inline-block', marginBottom: '0'}}> style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权时间" onChange={() => { <Input placeholder="请输入版权时间" onChange={() => {
preview() preview()
}}/> }} />
</Form.Item> </Form.Item>
<Form.Item label="版权人" <Form.Item label="版权人"
name="copyrightOwner" name="copyrightOwner"
rules={[{required: false, message: '请输入版权人'}]} rules={[{ required: false, message: '请输入版权人' }]}
style={{display: 'inline-block', marginBottom: '0'}}> style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入版权人" onChange={() => { <Input placeholder="请输入版权人" onChange={() => {
preview() preview()
}}/> }} />
</Form.Item> </Form.Item>
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Space.Compact> <Space.Compact>
<Form.Item label="用户名" <Form.Item label="用户名"
name="adminUsername" name="adminUsername"
rules={[{required: true, message: '请输入用户名'}]} rules={[{ required: true, message: '请输入用户名' }]}
style={{display: 'inline-block', marginBottom: '0'}}> style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入用户名"/> <Input placeholder="请输入用户名" />
</Form.Item> </Form.Item>
<Form.Item label="密码" <Form.Item label="密码"
name="adminPassword" name="adminPassword"
rules={[{required: true, message: '请输入密码'}]} rules={[{ required: true, message: '请输入密码' }]}
style={{display: 'inline-block', marginBottom: '0'}}> style={{ display: 'inline-block', marginBottom: '0' }}>
<Input placeholder="请输入密码"/> <Input placeholder="请输入密码" />
</Form.Item> </Form.Item>
</Space.Compact> </Space.Compact>
</Form.Item> </Form.Item>
@ -190,7 +210,7 @@ export default function ProjConfigLoginpage() {
maxCount={1} maxCount={1}
defaultFileList={logoImgArray} defaultFileList={logoImgArray}
action={uploadImageUrl()} action={uploadImageUrl()}
headers={{'X-USER-ID': DevUserId}} headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
onChange={(info) => { onChange={(info) => {
if (info.file.status === 'uploading') { if (info.file.status === 'uploading') {
@ -224,8 +244,8 @@ export default function ProjConfigLoginpage() {
}} }}
> >
<Button size="small" type="primary" <Button size="small" type="primary"
style={{backgroundColor: 'var(--color-primary)'}} style={{ backgroundColor: 'var(--color-primary)' }}
disabled={logoImgArray.length > 0}>上传</Button> disabled={logoImgArray.length > 0}>上传</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
<Form.Item label="背景"> <Form.Item label="背景">
@ -235,7 +255,7 @@ export default function ProjConfigLoginpage() {
maxCount={1} maxCount={1}
defaultFileList={bgImgArray} defaultFileList={bgImgArray}
action={uploadImageUrl()} action={uploadImageUrl()}
headers={{'X-USER-ID': DevUserId}} headers={{ 'X-USER-ID': DevUserId }}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
onChange={(info) => { onChange={(info) => {
if (info.file.status === 'uploading') { if (info.file.status === 'uploading') {
@ -269,17 +289,17 @@ export default function ProjConfigLoginpage() {
}} }}
> >
<Button size="small" type="primary" <Button size="small" type="primary"
style={{backgroundColor: 'var(--color-primary)'}} style={{ backgroundColor: 'var(--color-primary)' }}
disabled={bgImgArray.length > 0}>上传</Button> disabled={bgImgArray.length > 0}>上传</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{span: 24}}> <Form.Item wrapperCol={{ span: 24 }}>
<div style={{paddingTop: '15px'}}> <div style={{ paddingTop: '15px' }}>
<Flex align="center" justify="center" gap="large"> <Flex align="center" justify="center" gap="large">
<Button type="primary" <Button type="primary"
htmlType="submit" htmlType="submit"
style={{backgroundColor: 'var(--color-primary)'}}> style={{ backgroundColor: 'var(--color-primary)' }}>
保存 保存
</Button> </Button>
<Button type="default" htmlType="button" onClick={() => { <Button type="default" htmlType="button" onClick={() => {
@ -292,55 +312,49 @@ export default function ProjConfigLoginpage() {
</Form.Item> </Form.Item>
</Form> </Form>
</Col> </Col>
<Col span={18}>
<iframe srcDoc={iframeSrcDoc} style={{
width: '100%',
height: `${height - 10}px`,
border: '1px solid var(--color-border)'
}}/>
</Col>
</Row> </Row>
</div> </div>
</div> </div>
<Modal title="提示" <Modal title="提示"
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
open={isEditModalOpen} open={isEditModalOpen}
onOk={() => { onOk={() => {
setIsEditModalOpen(false); setIsEditModalOpen(false);
console.log(logoImgArray) console.log(logoImgArray)
put({ put({
messageApi, messageApi,
url: `/api/proj/update/config-loginpage/${pathParams.projId}`, url: `/api/proj/update/config-loginpage/${pathParams.projId}`,
body: { body: {
logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '', logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '', bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
subTitle: form.getFieldValue('subTitle'), subTitle: form.getFieldValue('subTitle'),
copyrightOwner: form.getFieldValue('copyrightOwner'), copyrightOwner: form.getFieldValue('copyrightOwner'),
copyrightDate: form.getFieldValue('copyrightDate'), copyrightDate: form.getFieldValue('copyrightDate'),
adminUsername: form.getFieldValue('adminUsername'), adminUsername: form.getFieldValue('adminUsername'),
adminPassword: form.getFieldValue('adminPassword'), adminPassword: form.getFieldValue('adminPassword'),
}, },
onBefore() { onBefore() {
setLoading(true); setLoading(true);
}, },
onSuccess() { onSuccess() {
messageApi.open({ messageApi.open({
type: 'success', type: 'success',
content: '编辑成功' content: '编辑成功'
}) })
}, },
onFinally() { onFinally() {
setLoading(false); setLoading(false);
} }
}) })
}} }}
onCancel={() => { onCancel={() => {
setIsEditModalOpen(false); setIsEditModalOpen(false);
}}> }}>
<div>确定提交吗？</div> <div>确定提交吗？</div>
</Modal> </Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen/> <Spin tip="正在提交..." spinning={loading} fullscreen />
</> </>
) )

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

@ -23,7 +23,7 @@ export default function ProjEditStep1() {
const [form] = Form.useForm<FieldType>(); const [form] = Form.useForm<FieldType>();
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const height = window.innerHeight - 150 const height = window.innerHeight - 180
useEffect(() => { useEffect(() => {
get({ get({
@ -42,7 +42,7 @@ export default function ProjEditStep1() {
}, []) }, [])
return ( return (
<div style={{ height: `${height}px`, overflow: 'auto' }}> <div style={{ height: `${height}px`, overflow: 'auto',marginTop:'18px' }}>
{contextHolder} {contextHolder}
{/* <Breadcrumb {/* <Breadcrumb
items={[ items={[
@ -53,7 +53,7 @@ export default function ProjEditStep1() {
]} ]}
/> */} /> */}
{/* <div className="form-container" style={{ height: `${height}px` }}> */} {/* <div className="form-container" style={{ height: `${height}px` }}> */}
<div style={{ marginTop: '26px', height: '842px', marginBottom: '40px' }}> <div style={{ }}>
<div className="form-container" > <div className="form-container" >
<div className='Step-title'> <div className='Step-title'>

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

@ -21,7 +21,7 @@ export default function ProjEditStep1Show() {
const pathParams = useParams(); const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FieldType>(); const [form] = Form.useForm<FieldType>();
const height = window.innerHeight - 180; const height = window.innerHeight - 160;
useEffect(() => { useEffect(() => {
get({ get({
@ -40,7 +40,7 @@ export default function ProjEditStep1Show() {
}, []) }, [])
return ( return (
<div style={{ height: `${height}px`, overflow: 'auto' }}> <div style={{ height: `${height}px`, overflow: 'auto',marginTop: '18px'}}>
{contextHolder} {contextHolder}
{/* <Breadcrumb {/* <Breadcrumb
items={[ items={[
@ -50,7 +50,7 @@ export default function ProjEditStep1Show() {
{title: '标题简介'}, {title: '标题简介'},
]} ]}
/> */} /> */}
<div style={{ marginTop: '26px', marginBottom: '40px' }}> <div style={{ }}>
<div className="form-container"> <div className="form-container">
<div className='Step-title'> <div className='Step-title'>

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

@ -1,8 +1,8 @@
import './proj-edit-step.css'; import './proj-edit-step.css';
import { Breadcrumb, Radio, Cascader, Col, DatePicker, Flex, message, Modal, Row, Spin, Select, Table, Space } from "antd"; import { Radio, Cascader, Col, DatePicker, Flex, message, Modal, Row, Spin, Select, Table, Space } from "antd";
import { FolderAddOutlined } from '@ant-design/icons'; import { FolderAddOutlined } from '@ant-design/icons';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import { Link, useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { get, put, post, del, downloadUrl } from "../../../util/AjaxUtils.ts"; import { get, put, post, del, downloadUrl } from "../../../util/AjaxUtils.ts";
import { Button, Form, Input } from 'antd'; import { Button, Form, Input } from 'antd';
@ -76,19 +76,34 @@ export default function ProjEditStep2() {
const dateFormat = 'YYYY年MM月DD日'; const dateFormat = 'YYYY年MM月DD日';
// 页面显示的所属者信息 // 页面显示的所属者信息
const [authorName,setauthorName] = useState('') const [authorName, setauthorName] = useState('') //所属人姓名
const [authorIdCardType,setauthorIdCardType]= useState('') const [authorIdCardType, setauthorIdCardType] = useState('') //所属人证件类型
const [authorIdCard,setauthorIdCard]= useState('') const [authorIdCard, setauthorIdCard] = useState('') //所属人证件号
const [authorType,setauthorType] = useState('') const [authorType, setauthorType] = useState('') //所属人类型
const [authorNameEn, setauthorNameEn] = useState('') //所属人英文名
const [authorProvinceCity, setauthorProvinceCity] = useState('') //所属人省市
const [authorCrcAccount, setauthorCrcAccount] = useState(0) //是否给账号 0 给 1 不给
const [authorCrcAccountPassword, setauthorCrcAccountPassword] = useState('') //密码
const [authorCrcAccountUsername, setauthorCrcAccountUsername] = useState('') //账号
// 从基本信息中获取到的两个表格默认选择的id 所属者id 联系人id
const [authorId, setAuthorId] = useState('') //所属人id
const [applyConcatId, setApplyConcatId] = useState('') //联系人id
const [applyContactCsaNo, setapplyContactCsaNo] = useState('') //客服编号
const [applyContactEmail, setapplyContactEmail] = useState('') //联系人邮箱
const [applyContactName, setapplyContactName] = useState('') //联系人姓名
const [applyContactPhone, setapplyContactPhone] = useState('') //联系人手机
// 设置所属者more你选中的行
// const [selectedRowKeys, setSelectedRowKeys] = useState<BelongDataType[]>([]);
// 所属者搜索关键字 // 所属者搜索关键字
// const [keywords, setKeyWords] = useState('') const [keywords, setKeyWords] = useState('')
const [type, setType] = useState('') const [type, setType] = useState('')
// 表格第几行数据 // 表格第几行数据
// const [clom, setClom] = useState('') // const [clom, setClom] = useState('')
// 著作人搜索 // 著作人搜索
const belongPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => ( const belongPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
console.log(info?.source, value), console.log(info?.source, value),
// setKeyWords(value), setKeyWords(value),
getSearchProjOwnerList(value, type) getSearchProjOwnerList(value, type)
); );
// 申请人信息搜索 applicantPeopleSearch // 申请人信息搜索 applicantPeopleSearch
@ -105,6 +120,16 @@ export default function ProjEditStep2() {
// selectedRowKeys: React.Key[] // selectedRowKeys: React.Key[]
onChange: (selectedRowKeys: React.Key[], selectedRows: BelongDataType[]) => { onChange: (selectedRowKeys: React.Key[], selectedRows: BelongDataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
setauthorName(selectedRows[0].name)
setauthorIdCardType(selectedRows[0].idCardType)
setauthorIdCard(selectedRows[0].idCardNo)
setauthorType(selectedRows[0].type)
setauthorNameEn(selectedRows[0].nameEn)
setauthorProvinceCity(selectedRows[0].provinceCity)
setauthorCrcAccount(selectedRows[0].isCrcAccount)
setauthorCrcAccountPassword(selectedRows[0].crcAccountPassword)
setauthorCrcAccountUsername(selectedRows[0].crcAccountUsername)
setAuthorId(selectedRows[0].projOwnerId)
// setClom(String(selectedRowKeys)) // setClom(String(selectedRowKeys))
// setbelongselectedKeys(selectedRowKeys) // setbelongselectedKeys(selectedRowKeys)
}, },
@ -115,12 +140,15 @@ export default function ProjEditStep2() {
// selectedRowKeys: React.Key[] // selectedRowKeys: React.Key[]
onChange: (selectedRowKeys: React.Key[], selectedRows: ContactDataType[]) => { onChange: (selectedRowKeys: React.Key[], selectedRows: ContactDataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// setClom(String(selectedRowKeys)) setApplyConcatId(selectedRows[0].projContactId)
// setSelectedKeyst(selectedRowKeys) setapplyContactCsaNo(selectedRows[0].csaNo)
setapplyContactEmail(selectedRows[0].email)
setapplyContactName(selectedRows[0].name)
setapplyContactPhone(selectedRows[0].phone)
}, },
}; };
const datanew = []
// 所属人表格数据 // 所属人表格数据
const [tableBelongData, setTableBelongData] = useState<BelongDataType[]>([]) const [tableBelongData, setTableBelongData] = useState<BelongDataType[]>([])
// 联系人表格数据 // 联系人表格数据
@ -200,9 +228,7 @@ export default function ProjEditStep2() {
// (errorInfo); // (errorInfo);
}); });
}; };
// 从基本信息中获取到的两个表格默认选择的id 所属者id 联系人id
const [authorId, setAuthorId] = useState('')
const [applyConcatId, setApplyConcatId] = useState('')
// const [belongselectedKeys,setbelongselectedKeys] = useState(tableBelongData.filter(item => item.projOwnerId === authorId).map(item => item.projOwnerId)); // const [belongselectedKeys,setbelongselectedKeys] = useState(tableBelongData.filter(item => item.projOwnerId === authorId).map(item => item.projOwnerId));
// 获取页面基本信息信息 // 获取页面基本信息信息
const getEditstep = () => { const getEditstep = () => {
@ -212,13 +238,26 @@ export default function ProjEditStep2() {
onSuccess({ data }: AxiosResponse) { onSuccess({ data }: AxiosResponse) {
// 获取默认所属人信息 // 获取默认所属人信息
setauthorName(data.authorName) setauthorName(data.authorName)
setauthorIdCardType(data.authorIdCardType) setauthorIdCardType(data.authorIdCardType)
setauthorIdCard(data.authorIdCard) setauthorIdCard(data.authorIdCard)
setauthorType(data.authorType) setauthorType(data.authorType)
setauthorNameEn(data.authorNameEn)
setauthorProvinceCity(data.authorProvinceCity)
setauthorCrcAccount(data.authorCrcAccount)
setauthorCrcAccountPassword(data.authorCrcAccountPassword)
setauthorCrcAccountUsername(data.authorCrcAccountUsername)
setAuthorId(data.authorId)
// 默认联系人信息
setApplyConcatId(data.applyContactId)
setapplyContactName(data.applyContactName)
setapplyContactPhone(data.applyContactPhone)
setapplyContactCsaNo(data.applyContactCsaNo)
setapplyContactEmail(data.applyContactEmail)
console.log('基本信息', data); console.log('基本信息', data);
setAuthorId(data.authorId) setAuthorId(data.authorId)
setApplyConcatId(data.applyConcatId) setApplyConcatId(data.applyContactId)
formInfo.setFieldsValue({ formInfo.setFieldsValue({
projSubName: data.projSubName, projSubName: data.projSubName,
projVersion: data.projVersion, projVersion: data.projVersion,
@ -237,6 +276,10 @@ export default function ProjEditStep2() {
onSuccess({ data }: AxiosResponse) { onSuccess({ data }: AxiosResponse) {
console.log('所属者表格', data); console.log('所属者表格', data);
setTableBelongData(data) setTableBelongData(data)
// const selectBelongArray = data.filter(item => item.name === authorName)
// console.log('嘻嘻',selectBelongArray);
// setSelectedRowKeys(selectBelongArray)
} }
}) })
} }
@ -526,39 +569,27 @@ export default function ProjEditStep2() {
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<div className='projTitle ' style={{ marginLeft: '112px' }}><span className='redicon'>*</span> 公司名称:</div> <div className='projTitle ' style={{ marginLeft: '112px' }}>姓名或公司名称:</div>
<Input
<Form.Item<FieldType> readOnly
// label="公司名称" style={{ height: '50px', width: '411px', fontSize: '16px' }}
name="companyName" value={authorName}
// extra="公司名称在操作手册中引用" // placeholder="请输入公司名称"
rules={[{ required: true, message: '请输入公司名称' }]} />
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请输入公司名称" />
</Form.Item>
</div> </div>
</Row> </Row>
<Row gutter={15}> <Row gutter={15}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<div className='projTitle '><span className='redicon'>*</span> 公司英文名称:</div> <div className='projTitle '><span className='redicon'>*</span> 英文名称:</div>
<Input
readOnly
style={{ height: '50px', width: '411px', fontSize: '16px' }}
value={authorNameEn}
// placeholder="请输入公司英文名称"
/>
<Form.Item<FieldType>
// label="公司英文名称"
name="companyNameEn"
// extra="公司英文名称在操作手册中引用"
rules={[{ required: true, message: '请输入公司英文名称' }]}
>
<Input
style={{ height: '50px', width: '411px', fontSize: '16px' }}
placeholder="请输入公司英文名称" />
</Form.Item>
</div> </div>
</Row> </Row>
@ -619,8 +650,11 @@ export default function ProjEditStep2() {
</div> */} </div> */}
</div> </div>
<div className='showInfo'> <div className='showInfo'>
<div>当前所属者:</div> <div style={{ marginRight: '22px' }}>当前所属者:</div>
<div>{authorName}/{authorIdCardType}/{authorIdCard}</div> <div style={{ display: authorName == '' ? 'block' : 'none' }}>请选择所属者</div>
<div style={{ display: authorName == '' ? 'none' : 'block' }}>
{authorName}/{authorType == 'PERSONAL' ? '自然人' : '企业-组织'}/{authorIdCardType == 'ID_CARD' ? '身份证' : '营业执照'}/{authorIdCard}
</div>
</div> </div>
<div className='belongPeople-bot'> <div className='belongPeople-bot'>
{/* 表格 */} {/* 表格 */}
@ -767,6 +801,13 @@ export default function ProjEditStep2() {
<Search placeholder="请输入持有者名称搜索对应信息" onSearch={applicantPeopleSearch} style={{ width: '353px', height: '43px' }} /> <Search placeholder="请输入持有者名称搜索对应信息" onSearch={applicantPeopleSearch} style={{ width: '353px', height: '43px' }} />
</div> </div>
</div> </div>
<div className='showInfo'>
<div style={{ marginRight: '22px' }}>当前申请人:</div>
<div style={{ display: applyContactName == '' ? 'block' : 'none' }}>请选择申请人</div>
<div style={{ display: applyContactName == '' ? 'none' : 'block' }}>
{applyContactName}/{applyContactPhone}/{applyContactEmail}
</div>
</div>
<div className='belongPeople-bot'> <div className='belongPeople-bot'>
{/* 表格 lyp*/} {/* 表格 lyp*/}
<Table <Table
@ -854,7 +895,22 @@ export default function ProjEditStep2() {
</Button> </Button>
<Button type="primary" <Button type="primary"
htmlType="submit" htmlType="submit"
style={{ height: '49px', width: '104px', color: '#FDFDF2', background: '#1564ED', fontSize: '16px' }}> style={{ height: '49px', width: '104px', color: '#FDFDF2', background: '#1564ED', fontSize: '16px' }}
onClick={() => {
formInfo.validateFields().then(() => {
// 如果验证通过，则执行确认操作
// 这里可以放置你的确认操作逻辑
setIsEditModalOpen(true)
}).catch(() => {
// 如果验证不通过，可以根据需要处理错误信息
messageApi.open({
type: 'error',
content: '带*的内容为必填'
})
});
}}
>
保存 保存
</Button> </Button>
@ -876,19 +932,19 @@ export default function ProjEditStep2() {
open={isEditModalOpen} open={isEditModalOpen}
onOk={() => { onOk={() => {
// 美哟u创建所属者 应该还得判断一下没选中所属者 // 美哟u创建所属者 应该还得判断一下没选中所属者
if (tableBelongData.length == 0) { if (authorName == '') {
// alert('所属者不能为空') // alert('所属者不能为空')
messageApi.open({ messageApi.open({
type: 'error', type: 'error',
content: '所属者不能为空' content: '请选择所属者'
}) })
setIsEditModalOpen(false); setIsEditModalOpen(false);
// 没有申请人 应该还得判断一下没选中申请人 // 没有申请人 应该还得判断一下没选中申请人
} else if (datanew.length == 0) { } else if (applyContactName == '') {
// alert('申请人不能为空') // alert('申请人不能为空')
messageApi.open({ messageApi.open({
type: 'error', type: 'error',
content: '申请人不能为空' content: '请选择申请人'
}) })
setIsEditModalOpen(false); setIsEditModalOpen(false);
} }
@ -901,6 +957,7 @@ export default function ProjEditStep2() {
// } // }
else { else {
// alert(authorName)
setIsEditModalOpen(false); setIsEditModalOpen(false);
put({ put({
messageApi, messageApi,
@ -909,8 +966,24 @@ export default function ProjEditStep2() {
projSubName: formInfo.getFieldValue('projSubName'), projSubName: formInfo.getFieldValue('projSubName'),
projVersion: formInfo.getFieldValue('projVersion'), projVersion: formInfo.getFieldValue('projVersion'),
projDevCompleteDate: dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat), projDevCompleteDate: dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
companyName: formInfo.getFieldValue('companyName'), // companyName: formInfo.getFieldValue('companyName'),
companyNameEn: formInfo.getFieldValue('companyNameEn'), // companyNameEn: formInfo.getFieldValue('companyNameEn'),
authorName,
authorIdCardType,
authorIdCard,
authorType,
authorNameEn,
authorProvinceCity,
authorCrcAccount,
authorCrcAccountPassword,
authorCrcAccountUsername,
authorId,
applyContactId: applyConcatId,
applyContactCsaNo,
applyContactEmail,
applyContactName,
applyContactPhone
}, },
onBefore() { onBefore() {
setLoading(true); setLoading(true);

47
src/route/proj/edit/proj-config-loginpage.css Normal file
View File

@ -0,0 +1,47 @@
.loginpage-body {
/* display: flex; */
/* height: 975px; */
}
.loginpage-bodyL {
background: white;
display: flex;
flex-direction: column;
align-items: center;
}
.loginpage-bodyR {
background: white;
}
.loginpage-bodyL-btn {
display: flex;
margin-top: 65px;
margin-bottom: 192px;
}
.seeButton {
width: 107px;
height: 37px;
background: #F2F2F2;
border: 1px solid #EDEDED;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #65615C;
}
.upButton {
width: 132px;
height: 37px;
background: #FF9F08;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #FFFFFF;
margin-left: 19px;
}

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

@ -220,4 +220,14 @@
text-align: center; text-align: center;
}
.showInfo {
display: flex;
font-family: Microsoft YaHei UI;
font-weight: 700;
font-size: 16px;
color: #FFC484;
/* background-color: red; */
margin-top: 26px;
} }

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

@ -2,17 +2,22 @@
/* min-height: 100%; */ /* min-height: 100%; */
/* background-color: var(--color-light); */ /* background-color: var(--color-light); */
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding-bottom: 50px; padding-bottom: 26px;
background-color: rgb(255, 255, 255);
margin-top: 18px;
background-image: url('../../static/buyback.png');
background-size: 100% 100%;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.proj-create .proj { .proj-create .proj {
margin-top: 23px; margin-top: 33px;
} }
.proj-create .test{ .proj-create .test{
/* height: 30p; */ /* height: 30p; */

8
src/route/proj/proj-edit.css
View File

@ -1,6 +1,10 @@
.proj-edit-box{ .proj-edit-box{
margin-top: 21px; margin-top: 18px;
overflow: auto; /* overflow: auto; */
/* background-color: red; */
background-color: var(--color-light);
} }
.proj-edit { .proj-edit {

2
src/route/proj/proj-new.css
View File

@ -1,6 +1,6 @@
.projNew { .projNew {
height: calc(100vh - 220px); height: calc(100vh - 220px);
margin-top: 26px; margin-top: 18px;
overflow: auto; overflow: auto;
} }

BIN
src/static/buyback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

BIN
src/static/head/background.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 119 KiB