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 {OrderedListOutlined, BarsOutlined, SearchOutlined} from "@ant-design/icons";
import {Badge, Tag} from 'antd';
import {IAgent} from "../../interfaces/agent/IAgent.ts";
import {useNavigate} from "react-router-dom";
import { OrderedListOutlined, BarsOutlined, SearchOutlined } from "@ant-design/icons";
import { Badge, Tag } from 'antd';
import { IAgent } from "../../interfaces/agent/IAgent.ts";
import { useNavigate } from "react-router-dom";
export default function CardProjAgent(props: IAgent) {
@ -55,7 +55,61 @@ export default function CardProjAgent(props: IAgent) {
return (
<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">
<a href="/#">{props.projName}</a>
</div>
@ -110,8 +164,8 @@ export default function CardProjAgent(props: IAgent) {
}
</div>
</div>
<hr/>
</div> */}
<hr />
<div className="tail">
<div className="tail-left">
<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 {IProjDownload} from "../../interfaces/card/ICardProj.ts";
import { IProjDownload } from "../../interfaces/card/ICardProj.ts";
export default function CardProjDownload(props: IProjDownload) {
return (
<div className="card-proj-download">
<div className="title">{props.title}</div>
<div className="desc">{props.desc}</div>
<div className="option">
// <div className="card-proj-download">
<div className={props.canBtnClick ? 'card-proj-download' : 'card-proj-nodownload'}>
<div className="cpDown-title">{props.title}</div>
<div className='cpDown-bot'>
<div className="cpDown-desc">{props.desc}</div>
<div className="cpDown-option">
{
props.canBtnClick ? (
<a href="/#" className="edit" onClick={(e) => {
<a href="/#" className="cpDown-edit" onClick={(e) => {
e.preventDefault();
props.handleDownload();
}}>下载</a>
) : (
<a href="/#" className="edit" style={{color: 'var(--color-border)'}} onClick={(e) => {
<a href="/#" className="cpDown-noedit" style={{ color: '#c2c2c2' }} onClick={(e) => {
e.preventDefault();
}}>下载</a>
)
@ -22,5 +24,6 @@ export default function CardProjDownload(props: IProjDownload) {
</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)'}}/>
</div>
<div className="desc">{props.desc}</div>
<div className='downBoxx'></div>
</div>
)
}

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

@ -2,8 +2,41 @@
background-color: var(--color-light);
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;
}
@ -82,4 +115,4 @@
.card-proj-agent .tail .tail-left {
margin-right: 0;
}
*/

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

@ -1,25 +1,48 @@
.card-proj-download {
width: 224px;
padding: 10px 15px;
}
width: 309px;
padding: 20px 25px;
box-sizing: border-box;
.card-proj-download .title {
font-size: 18px;
background-color: #FFFBF5;
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;
}
.card-proj-download .desc {
margin: 5px 0 10px 0;
max-height: 36px;
line-height: 18px;
color: var(--color-note);
.cpDown-desc {
font-weight: 300;
font-size: 14px;
color: #8B919D;
}
.card-proj-download .option {
.cpDown-option {
display: flex;
justify-content: space-between;
}
.card-proj-download .option .edit {
.cpDown-edit {
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;
padding: 20px 25px;
box-sizing: border-box;
background-color: pink;
margin-bottom: 27px;
display: flex;
justify-content: space-between;

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

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

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

@ -1,10 +1,18 @@
.card-proj-result {
width: 224px;
padding: 10px 15px;
width: 317px;
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 {
font-size: 18px;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: space-between;
@ -57,4 +65,5 @@
.card-proj-result .option .edit {
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 CardProjAgent from "../card/CardProjAgent.tsx";
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 useMessage from "antd/es/message/useMessage";
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 NoData from "../../assets/no-data.png";
const {Search} = Input;
// const {Search} = Input;
export default function ListProjAgent() {
const indexListContext = useContext(IndexListContext);
@ -24,6 +25,7 @@ export default function ListProjAgent() {
const [total, setTotal] = useState(0);
const [agents, setAgents] = useState<IAgent[]>([]);
const [isLoading, setIsLoading] = useState(false);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [keywords, setKeywords] = useState('');
const domHeight = window.innerHeight - 280;
@ -53,16 +55,16 @@ export default function ListProjAgent() {
})
}, [indexListContext.status, keywords, page])
const renderStatus = () => {
if (indexListContext.status == 'ALL') {
return <Tag color="blue">代理：全部项目</Tag>
} else if (indexListContext.status == 'PROCESSING') {
return <Tag color="blue">代理：进行中的</Tag>
} else if (indexListContext.status == 'COMPLETE') {
return <Tag color="blue">代理：已完成的</Tag>
}
return <></>
}
// const renderStatus = () => {
// if (indexListContext.status == 'ALL') {
// return <Tag color="blue">代理：全部项目</Tag>
// } else if (indexListContext.status == 'PROCESSING') {
// return <Tag color="blue">代理：进行中的</Tag>
// } else if (indexListContext.status == 'COMPLETE') {
// return <Tag color="blue">代理：已完成的</Tag>
// }
// return <></>
// }
const renderList = () => {
if(agents.length == 0) {
@ -101,12 +103,12 @@ export default function ListProjAgent() {
return (
<>
<div className="list-proj-agent" ref={listProjRef}>
<div className="top">
{/* <div className="top">
{renderStatus()}
<Search placeholder="按项目名搜索" onSearch={(value) => {
setKeywords(value)
}} style={{width: 200}}/>
</div>
</div> */}
<div className="body">
<Spin tip="加载中..." spinning={isLoading}>
<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 ListProj from "../../components/list/ListProj.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';
export default function Home() {

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

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

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

@ -15,5 +15,4 @@
padding: 5px 0 15px 0;
text-align: center;
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;
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';
export const WebSocketBaseUrl: string = 'ws://192.168.0.163:7025/copyright';
// export const WebSocketBaseUrl: string = '/copyright';