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-10 11:33:40 +08:00
parent e707975095
commit a20fd793aa
15 changed files with 355 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/card/CardProjAgent.tsx
View File

@ -1,8 +1,8 @@
import './card-proj-agent.css' import './card-proj-agent.css'
import {OrderedListOutlined, BarsOutlined, SearchOutlined} from "@ant-design/icons"; import { OrderedListOutlined, BarsOutlined, SearchOutlined } from "@ant-design/icons";
import {Badge, Tag} from 'antd'; import { Badge, Tag } from 'antd';
import {IAgent} from "../../interfaces/agent/IAgent.ts"; import { IAgent } from "../../interfaces/agent/IAgent.ts";
import {useNavigate} from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function CardProjAgent(props: IAgent) { export default function CardProjAgent(props: IAgent) {
@ -55,7 +55,61 @@ export default function CardProjAgent(props: IAgent) {
return ( return (
<div className="card-proj-agent"> <div className="card-proj-agent">
<div className="title"> <div className='cardpro-agent-top'>
<div className='cardpro-agent-tlift'>
<a href="/#">{props.projName}</a>
</div>
<div className='cardpro-agent-tright'>
<span className="agent">代理商：{props.basicsName}</span>
<span className="orderNo">订单号：{props.orderNumber}</span>
</div>
</div>
<hr />
<div className='cardpro-agent-center'>
<div className='cardpro-agent-cTop'>
<div><span>金额￥：{props.orderShoppingAmount / 100}</span></div>
<div><span>{props.gmtCreate}</span></div>
</div>
<div className='cardpro-agent-cBot'>
<div className='cardpro-agent-cBot-left'>
<span>
<OrderedListOutlined />
<Badge dot count={props.orderAgreementStatus == 'AWAIT_SURE' ? 1 : 0}>
<a href="/#" onClick={(e) => {
e.preventDefault();
nav(`/agent-agreement/${props.orderId}`);
}}>协议清单</a>
</Badge>
</span>
<span style={{ marginLeft: '15px' }}>
<BarsOutlined />
<Badge size="small" count={props.isOver == 0 && props.materialAmendApplyCount ? props.materialAmendApplyCount : 0}>
<a href="/#" onClick={(e) => {
e.preventDefault();
nav(`/agent-correction/${props.orderId}`);
}}>代办列表</a>
</Badge>
</span>
</div>
<div className='cardpro-agent-cBot-right'>
{
props.isResult ? (
<div >
<span>
<SearchOutlined />
<a href="/#" onClick={(e) => {
e.preventDefault();
nav(`/agent-result/${props.orderId}`);
}}>查看结果</a>
</span>
</div>
) : <></>
}
</div>
</div>
</div>
{/* <div className="title">
<div className="left"> <div className="left">
<a href="/#">{props.projName}</a> <a href="/#">{props.projName}</a>
</div> </div>
@ -110,8 +164,8 @@ export default function CardProjAgent(props: IAgent) {
} }
</div> </div>
</div> </div> */}
<hr/> <hr />
<div className="tail"> <div className="tail">
<div className="tail-left"> <div className="tail-left">
<span className="status order-status">{renderTakeStatus()}</span> <span className="status order-status">{renderTakeStatus()}</span>

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

@ -1,20 +1,22 @@
import './card-proj-download.css'; import './card-proj-download.css';
import {IProjDownload} from "../../interfaces/card/ICardProj.ts"; import { IProjDownload } from "../../interfaces/card/ICardProj.ts";
export default function CardProjDownload(props: IProjDownload) { export default function CardProjDownload(props: IProjDownload) {
return ( return (
<div className="card-proj-download"> // <div className="card-proj-download">
<div className="title">{props.title}</div> <div className={props.canBtnClick ? 'card-proj-download' : 'card-proj-nodownload'}>
<div className="desc">{props.desc}</div> <div className="cpDown-title">{props.title}</div>
<div className="option"> <div className='cpDown-bot'>
<div className="cpDown-desc">{props.desc}</div>
<div className="cpDown-option">
{ {
props.canBtnClick ? ( props.canBtnClick ? (
<a href="/#" className="edit" onClick={(e) => { <a href="/#" className="cpDown-edit" onClick={(e) => {
e.preventDefault(); e.preventDefault();
props.handleDownload(); props.handleDownload();
}}>下载</a> }}>下载</a>
) : ( ) : (
<a href="/#" className="edit" style={{color: 'var(--color-border)'}} onClick={(e) => { <a href="/#" className="cpDown-noedit" style={{ color: '#c2c2c2' }} onClick={(e) => {
e.preventDefault(); e.preventDefault();
}}>下载</a> }}>下载</a>
) )
@ -22,5 +24,6 @@ export default function CardProjDownload(props: IProjDownload) {
</div> </div>
</div> </div>
</div>
) )
} }

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

@ -15,6 +15,8 @@ export default function CardProjJump(props: IProjJump) {
<ExportOutlined style={{color: 'var(--color-note)'}}/> <ExportOutlined style={{color: 'var(--color-note)'}}/>
</div> </div>
<div className="desc">{props.desc}</div> <div className="desc">{props.desc}</div>
<div className='downBoxx'></div>
</div> </div>
) )
} }

37
src/components/card/card-proj-agent.css
View File

@ -2,8 +2,41 @@
background-color: var(--color-light); background-color: var(--color-light);
padding: 5px 15px; padding: 5px 15px;
} }
.orderNo{margin-left: 20px;}
.cardpro-agent-top{
display: flex;
justify-content: space-between;
}
.card-proj-agent .left { .cardpro-agent-cTop{
display: flex;
justify-content: space-between;
}
.cardpro-agent-cBot{
display: flex;
justify-content: space-between;
}
.card-proj-agent .tail {
padding: 5px 0;
display: flex;
justify-content: space-between;
}
.card-proj-agent .tail .tail-left {
margin-right: 0;
}
hr {
border-color: var(--color-border);
border-style: dashed;
border-left: 0;
border-bottom: 0;
border-right: 0;
margin-block-start: 5px;
margin-block-end: 5px;
}
/* .card-proj-agent .left {
position: unset; position: unset;
} }
@ -82,4 +115,4 @@
.card-proj-agent .tail .tail-left { .card-proj-agent .tail .tail-left {
margin-right: 0; margin-right: 0;
} }
*/

47
src/components/card/card-proj-download.css
View File

@ -1,25 +1,48 @@
.card-proj-download { .card-proj-download {
width: 224px; width: 309px;
padding: 10px 15px; padding: 20px 25px;
} box-sizing: border-box;
.card-proj-download .title { background-color: #FFFBF5;
font-size: 18px; margin-bottom: 27px;
box-shadow: 0px 3px 0px 0px #EBDFD5;
border-radius: 4px;
}
.card-proj-nodownload{
width: 309px;
padding: 20px 25px;
box-sizing: border-box;
background-color: #f3f3f3;
margin-bottom: 27px;
border-radius: 4px;
}
.cpDown-bot{
display: flex;
justify-content: space-between;
/* background-color: aqua; */
margin-top: 16px;
}
.cpDown-title {
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.card-proj-download .desc { .cpDown-desc {
margin: 5px 0 10px 0; font-weight: 300;
max-height: 36px; font-size: 14px;
line-height: 18px; color: #8B919D;
color: var(--color-note);
} }
.card-proj-download .option { .cpDown-option {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.card-proj-download .option .edit { .cpDown-edit {
color: var(--color-blue); color: var(--color-blue);
text-decoration: underline;
}
.cpDown-noedit:hover{
cursor: not-allowed;
} }

1
src/components/card/card-proj-edit.css
View File

@ -2,7 +2,6 @@
width: 309px; width: 309px;
padding: 20px 25px; padding: 20px 25px;
box-sizing: border-box; box-sizing: border-box;
background-color: pink;
margin-bottom: 27px; margin-bottom: 27px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

24
src/components/card/card-proj-jump.css
View File

@ -1,11 +1,16 @@
.card-proj-jump { .card-proj-jump {
width: 224px; width: 317px;
padding: 10px 15px; padding: 20px 25px;
box-sizing: border-box;
cursor: pointer; cursor: pointer;
background-color: #F5FEFA;
box-shadow:0px 3px 0px 0px rgba(55,215,138,0.18) ;
position: relative;
} }
.card-proj-jump .title { .card-proj-jump .title {
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -13,8 +18,13 @@
} }
.card-proj-jump .desc { .card-proj-jump .desc {
margin: 15px 0 5px 0; margin-top: 18px;
max-height: 36px;
line-height: 18px; /* margin: 15px 0 5px 0; */
color: var(--color-note); /* max-height: 36px; */
/* line-height: 18px; */
/* color: var(--color-note); */
color: #8B919D;
font-weight: 300;
font-size: 14px;
} }

17
src/components/card/card-proj-loading.css
View File

@ -1,11 +1,15 @@
.card-proj-loading { .card-proj-loading {
width: 224px; width: 317px;
padding: 10px 15px; padding: 20px 25px;
box-sizing: border-box;
background-color: #F5FAFE;
box-shadow:0px 3px 0px 0px rgba(55,144,215,0.18) ;
cursor: pointer; cursor: pointer;
} }
.card-proj-loading .title { .card-proj-loading .title {
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@ -14,10 +18,13 @@
} }
.card-proj-loading .desc { .card-proj-loading .desc {
margin-top: 5px; /* margin-top: 5px; */
max-height: 36px; max-height: 36px;
line-height: 18px; line-height: 18px;
color: var(--color-note); /* color: var(--color-note); */
margin-top: 18px;
color: #8B919D;
} }
.card-proj-loading .option { .card-proj-loading .option {

15
src/components/card/card-proj-result.css
View File

@ -1,10 +1,18 @@
.card-proj-result { .card-proj-result {
width: 224px; width: 317px;
padding: 10px 15px; min-height: 97px;
padding: 20px 25px;
box-sizing: border-box;
background-color: #F5FAFE;
box-shadow:0px 3px 0px 0px rgba(55,144,215,0.18) ;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 4px;
} }
.card-proj-result .title { .card-proj-result .title {
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -57,4 +65,5 @@
.card-proj-result .option .edit { .card-proj-result .option .edit {
color: var(--color-blue); color: var(--color-blue);
margin-top: 16px;
} }

30
src/components/list/ListProjAgent.tsx
View File

@ -1,7 +1,8 @@
import './list-proj-agent.css'; import './list-proj-agent.css';
import CardProjAgent from "../card/CardProjAgent.tsx"; import CardProjAgent from "../card/CardProjAgent.tsx";
import {useRef, MutableRefObject, useEffect, useState, useContext} from "react"; import {useRef, MutableRefObject, useEffect, useState, useContext} from "react";
import {Image, Input, Pagination, Spin, Tag} from 'antd'; // import {Image, Pagination, Spin, Tag} from 'antd';
import {Image, Pagination, Spin} from 'antd';
import {get} from "../../util/AjaxUtils.ts"; import {get} from "../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage"; import useMessage from "antd/es/message/useMessage";
import {IListPage} from "../../interfaces/listpage/IListPage.ts"; import {IListPage} from "../../interfaces/listpage/IListPage.ts";
@ -9,7 +10,7 @@ import {IndexListContext} from "../../context/IndexListContext.ts";
import {IAgent} from "../../interfaces/agent/IAgent.ts"; import {IAgent} from "../../interfaces/agent/IAgent.ts";
import NoData from "../../assets/no-data.png"; import NoData from "../../assets/no-data.png";
const {Search} = Input; // const {Search} = Input;
export default function ListProjAgent() { export default function ListProjAgent() {
const indexListContext = useContext(IndexListContext); const indexListContext = useContext(IndexListContext);
@ -24,6 +25,7 @@ export default function ListProjAgent() {
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [agents, setAgents] = useState<IAgent[]>([]); const [agents, setAgents] = useState<IAgent[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [keywords, setKeywords] = useState(''); const [keywords, setKeywords] = useState('');
const domHeight = window.innerHeight - 280; const domHeight = window.innerHeight - 280;
@ -53,16 +55,16 @@ export default function ListProjAgent() {
}) })
}, [indexListContext.status, keywords, page]) }, [indexListContext.status, keywords, page])
const renderStatus = () => { // const renderStatus = () => {
if (indexListContext.status == 'ALL') { // if (indexListContext.status == 'ALL') {
return <Tag color="blue">代理：全部项目</Tag> // return <Tag color="blue">代理：全部项目</Tag>
} else if (indexListContext.status == 'PROCESSING') { // } else if (indexListContext.status == 'PROCESSING') {
return <Tag color="blue">代理：进行中的</Tag> // return <Tag color="blue">代理：进行中的</Tag>
} else if (indexListContext.status == 'COMPLETE') { // } else if (indexListContext.status == 'COMPLETE') {
return <Tag color="blue">代理：已完成的</Tag> // return <Tag color="blue">代理：已完成的</Tag>
} // }
return <></> // return <></>
} // }
const renderList = () => { const renderList = () => {
if(agents.length == 0) { if(agents.length == 0) {
@ -101,12 +103,12 @@ export default function ListProjAgent() {
return ( return (
<> <>
<div className="list-proj-agent" ref={listProjRef}> <div className="list-proj-agent" ref={listProjRef}>
<div className="top"> {/* <div className="top">
{renderStatus()} {renderStatus()}
<Search placeholder="按项目名搜索" onSearch={(value) => { <Search placeholder="按项目名搜索" onSearch={(value) => {
setKeywords(value) setKeywords(value)
}} style={{width: 200}}/> }} style={{width: 200}}/>
</div> </div> */}
<div className="body"> <div className="body">
<Spin tip="加载中..." spinning={isLoading}> <Spin tip="加载中..." spinning={isLoading}>
<div className="list" ref={listRef} style={{height: `${domHeight}px`}}>{renderList()}</div> <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>{renderList()}</div>

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

@ -2,7 +2,7 @@ import { useContext } from "react";
import { IndexListContext } from "../../context/IndexListContext.ts"; import { IndexListContext } from "../../context/IndexListContext.ts";
import ListProj from "../../components/list/ListProj.tsx"; import ListProj from "../../components/list/ListProj.tsx";
import ListProjAgent from "../../components/list/ListProjAgent.tsx"; import ListProjAgent from "../../components/list/ListProjAgent.tsx";
import { useLocation } from "react-router-dom"; // import { useLocation } from "react-router-dom";
// import { useLocation } from 'react-router-dom'; // import { useLocation } from 'react-router-dom';
export default function Home() { export default function Home() {

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

@ -1,19 +1,19 @@
import './proj-edit.css'; import './proj-edit.css';
// import {Link, useNavigate, useParams} from "react-router-dom"; // import {Link, useNavigate, useParams} from "react-router-dom";
import { useNavigate, useParams} from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { Button, FloatButton, message, Modal} from "antd"; import { Button, FloatButton, message, Modal } from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx"; import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx"; import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import {Process} from "../../interfaces/step/IStepProj.ts"; import { Process } from "../../interfaces/step/IStepProj.ts";
import CardProjLoading from "../../components/card/CardProjLoading.tsx"; import CardProjLoading from "../../components/card/CardProjLoading.tsx";
import CardProjResult from "../../components/card/CardProjResult.tsx"; import CardProjResult from "../../components/card/CardProjResult.tsx";
import CardProjDownload from "../../components/card/CardProjDownload.tsx"; import CardProjDownload from "../../components/card/CardProjDownload.tsx";
import CardProjJump from "../../components/card/CardProjJump.tsx"; import CardProjJump from "../../components/card/CardProjJump.tsx";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import {Axios, get, post} from "../../util/AjaxUtils.ts"; import { Axios, get, post } from "../../util/AjaxUtils.ts";
import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts"; import { EditStepEnum, IProjEdit } from "../../interfaces/card/ICardProj.ts";
import {MIN_MOD_SIZE} from "./edit/ProjConfigModList.tsx"; import { MIN_MOD_SIZE } from "./edit/ProjConfigModList.tsx";
import {GenerateStatus} from "../../interfaces/proj/IProj.ts"; import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import AiHelper from "../../components/ai/AiHelper.tsx"; import AiHelper from "../../components/ai/AiHelper.tsx";
type AiHelperType = { type AiHelperType = {
@ -201,7 +201,7 @@ export default function ProjEdit() {
get<any>({ get<any>({
messageApi: messageApi, messageApi: messageApi,
url: `/api/proj/get/${pathParams.projId}`, url: `/api/proj/get/${pathParams.projId}`,
onSuccess({data}) { onSuccess({ data }) {
const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED
&& data.editSteps[1].editStatus == EditStepEnum.EDITED && data.editSteps[1].editStatus == EditStepEnum.EDITED
&& data.editSteps[2].editStatus == EditStepEnum.EDITED && data.editSteps[2].editStatus == EditStepEnum.EDITED
@ -258,8 +258,8 @@ export default function ProjEdit() {
status={item.status} status={item.status}
btnName={item.btnName} btnName={item.btnName}
handleEdit={item.handleEdit} handleEdit={item.handleEdit}
background = {item.status == EditStepEnum.EDITED?'#F5FAFE':'#f3f3f3'} background={item.status == EditStepEnum.EDITED ? '#F5FAFE' : '#f3f3f3'}
shadow = {item.status == EditStepEnum.EDITED?'0px 3px 0px 0px rgba(55,144,215,0.18)':''} shadow={item.status == EditStepEnum.EDITED ? '0px 3px 0px 0px rgba(55,144,215,0.18)' : ''}
/> />
}) })
} }
@ -279,8 +279,8 @@ export default function ProjEdit() {
canBtnClick={item.status == EditStepEnum.EDITED} canBtnClick={item.status == EditStepEnum.EDITED}
status={item.status} status={item.status}
handleEdit={item.handleEdit} handleEdit={item.handleEdit}
background = {item.status == EditStepEnum.EDITED?'#F5FEFA':'#f3f3f3'} background={item.status == EditStepEnum.EDITED ? '#F5FEFA' : '#f3f3f3'}
shadow = {item.status == EditStepEnum.EDITED?' 0px 3px 0px 0px rgba(55,215,138,0.18)':''} shadow={item.status == EditStepEnum.EDITED ? ' 0px 3px 0px 0px rgba(55,215,138,0.18)' : ''}
/> />
}) })
@ -316,7 +316,7 @@ export default function ProjEdit() {
}} }}
// background = {status == EditStepEnum.EDITED?'#F5FAFE':'#f3f3f3'} // background = {status == EditStepEnum.EDITED?'#F5FAFE':'#f3f3f3'}
// shadow = {status == EditStepEnum.EDITED?'0px 3px 0px 0px rgba(55,144,215,0.18)':''} // shadow = {status == EditStepEnum.EDITED?'0px 3px 0px 0px rgba(55,144,215,0.18)':''}
background = '#f3f3f3' background='#f3f3f3'
/> />
) : <></> ) : <></>
} }
@ -409,17 +409,19 @@ export default function ProjEdit() {
<div className="btn-container"> <div className="btn-container">
<Button size="large" style={{ <Button size="large" style={{
width: '200px', width: '200px',
fontSize: '14px', height:'40px',
backgroundColor: 'var(--color-primary)', fontSize: '16px',
color: 'var(--color-light)' backgroundColor: '#e9e7e7',
color: '#A0A0A0',
border:'none',
}} onClick={() => { }} onClick={() => {
nav(-1); nav(-1);
}}>返回</Button> }}>返回</Button>
</div> </div>
<FloatButton.Group> <FloatButton.Group>
<FloatButton <FloatButton
onClick={() => {setAiHelperModalOpen(true)}} onClick={() => { setAiHelperModalOpen(true) }}
description={<span style={{fontWeight: 'bold'}}>AI</span>} description={<span style={{ fontWeight: 'bold' }}>AI</span>}
>AI助手</FloatButton> >AI助手</FloatButton>
</FloatButton.Group> </FloatButton.Group>
@ -458,7 +460,7 @@ export default function ProjEdit() {
setGenerateErrorModal(false) setGenerateErrorModal(false)
}} }}
> >
<p style={{color: 'var(--color-red)'}}>{generateErrorMsg}</p> <p style={{ color: 'var(--color-red)' }}>{generateErrorMsg}</p>
</Modal> </Modal>
<Modal open={aiHelperModalOpen} <Modal open={aiHelperModalOpen}
title="AI助手" title="AI助手"

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

@ -15,5 +15,4 @@
padding: 5px 0 15px 0; padding: 5px 0 15px 0;
text-align: center; text-align: center;
background-color: var(--color-light); background-color: var(--color-light);
} }

3
src/util/AjaxUtils.ts
View File

@ -3,7 +3,8 @@ import type {MessageInstance} from "antd/es/message/interface";
export const Axios = axios; export const Axios = axios;
axios.defaults.baseURL = 'http://192.168.0.163:7025/copyright'; // axios.defaults.baseURL = 'http://192.168.0.163:7025/copyright';
axios.defaults.baseURL = 'http://192.168.0.15:7025/copyright';
// axios.defaults.baseURL = '/copyright'; // axios.defaults.baseURL = '/copyright';
export const WebSocketBaseUrl: string = 'ws://192.168.0.163:7025/copyright'; export const WebSocketBaseUrl: string = 'ws://192.168.0.163:7025/copyright';
// export const WebSocketBaseUrl: string = '/copyright'; // export const WebSocketBaseUrl: string = '/copyright';