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:
WenC 2024-03-19 19:19:07 +08:00
parent ba054a7448
commit 9160a37bbe
6 changed files with 165 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/card/CardProj.tsx
View File

@ -1,25 +1,94 @@
import './card-proj.css';
import {EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined, SettingOutlined, DownloadOutlined} from '@ant-design/icons';
import {
DownloadOutlined,
EditOutlined,
EyeOutlined,
FolderOutlined,
SearchOutlined,
SettingOutlined,
ClockCircleOutlined,
LoadingOutlined,
CheckOutlined,
WarningOutlined,
CloseCircleOutlined,
CreditCardOutlined
} from '@ant-design/icons';
import {Button, ConfigProvider, Tag} from 'antd';
import {GenerateStatus, IProj, PayStatus} from "../../interfaces/proj/IProj.ts";
export default function CardProj(props: { item: IProj }) {
const data = props.item;
/**
* 生成状态
*/
const renderGenerateStatus = () => {
if (data.generateStatus == GenerateStatus.PENDING) {
return <Tag color="cyan"><ClockCircleOutlined/> 等待生成</Tag>
}
if (data.generateStatus == GenerateStatus.GENERATING) {
return <Tag color="magenta"><LoadingOutlined/> 正在生成</Tag>
}
if (data.generateStatus == GenerateStatus.SUCCESS) {
return <Tag color="green"><CheckOutlined/> 生成成功</Tag>
}
if (data.generateStatus == GenerateStatus.FAILED) {
return <Tag color="red"><WarningOutlined/> 生成失败</Tag>
}
if (data.generateStatus == GenerateStatus.NONE) {
return <Tag color="cyan">未生成</Tag>
}
return <Tag color="red"><CloseCircleOutlined/> 错误</Tag>
}
const renderOption = () => {
if(data.payStatus == PayStatus.UNPAID) {
return (
<>
<div className="option">
<Button size="small" type="text"><CreditCardOutlined /> 待付款</Button>
</div>
</>
)
}
return (
<>
<div className="option">
<Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
<Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
<Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
</div>
{
data.generateStatus == GenerateStatus.SUCCESS ? (
<div className="option">
<Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
<Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
<Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
<Button size="small" type="text"><DownloadOutlined/> 代码文档</Button>
</div>
) : <></>
}
</>
)
}
export default function CardProj() {
return (
<div className="card-proj">
<div className="title">
<div className="left">
<a href="/#">项目名称</a>
<a href="/#">{data.projName}</a>
</div>
<div className="right">
<span className="context">上下文：SDFSDF</span>
<span className="status">未生成</span>
<span className="date">2024-03-02 11:15:35</span>
<span className="context">上下文：{data.projContext}</span>
<span className="date">{data.gmtCreate}</span>
<span className="status">{renderGenerateStatus()}</span>
</div>
</div>
<hr/>
<div className="body">
<div className="line">
<div className="left">
<span>金额￥：500</span>
<span>金额￥：{data.payment / 100}</span>
</div>
<div className="right">
<span>
@ -32,7 +101,10 @@ export default function CardProj() {
</span>
<span>
<EyeOutlined/>
<a href="/#">预览</a>
<a href="/#" onClick={(e) => {
e.stopPropagation();
window.open(data.previewUrl, '_blank')
}}>预览</a>
</span>
</div>
</div>
@ -55,17 +127,7 @@ export default function CardProj() {
}
}
}}>
<div className="option">
<Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
<Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
<Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
</div>
<div className="option">
<Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
<Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
<Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
<Button size="small" type="text"><DownloadOutlined /> 代码文档</Button>
</div>
{renderOption()}
</ConfigProvider>
</div>
</div>

7
src/components/card/card-proj.css
View File

@ -35,14 +35,17 @@
.card-proj .title .right {
padding: 5px;
width: 380px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-proj .title .right span {
margin-left: 10px;
margin-inline-end: 0;
}
.card-proj .title .right span:first-child {
margin-left: 0;
}
.card-proj .body {

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

@ -1,8 +1,9 @@
import './list-proj.css'
import CardProj from "../card/CardProj.tsx";
import {useRef, MutableRefObject} from "react";
import {useRef, MutableRefObject, useState, useEffect} from "react";
import {Input, Pagination} from 'antd';
import type {SearchProps} from 'antd/es/input/Search';
import {Axios} from "../../util/AjaxUtils.ts";
const {Search} = Input;
@ -16,8 +17,36 @@ export default function ListProj() {
const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
const [page, _setPage] = useState(1);
const [total, _setTotal] = useState(0);
const [projs, _setProjs] = useState([]);
const domHeight = window.innerHeight - 280;
const renderData = () => {
Axios.get('/api/proj/listpage/self', {
params: {
page: page,
rows: 20
}
}).then(res => {
const data = res.data;
_setProjs(data.page);
_setTotal(data.total);
_setProjs(data.rows);
}).catch(res => {
console.log(res);
})
}
const renderList = () => {
return projs.map((item, index) => <CardProj item={item} key={`proj${index}`}/>);
}
useEffect(() => {
renderData();
}, [])
return (
<div className="list-proj" ref={listProjRef}>
<div className="top">
@ -25,15 +54,10 @@ export default function ListProj() {
</div>
<div className="body">
<div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
<CardProj/>
<CardProj/>
<CardProj/>
<CardProj/>
<CardProj/>
<CardProj/>
{renderList()}
</div>
<div className="page">
<Pagination defaultCurrent={1} total={50} />
<Pagination defaultCurrent={page} total={total}/>
</div>
</div>
</div>

37
src/interfaces/proj/IProj.ts Normal file
View File

@ -0,0 +1,37 @@
export enum ProjCodeType {
CODE1 = 'CODE1'
}
export enum PayStatus {
PAID = 'PAID',
UNPAID = 'UNPAID'
}
export enum ProjStyleType {
DEFAULT = 'DEFAULT'
}
export enum GenerateStatus {
PENDING = 'PENDING',
GENERATING = 'GENERATING',
SUCCESS = 'SUCCESS',
FAILED = 'FAILED',
NONE = 'NONE',
ERROR = 'ERROR'
}
export interface IProj {
projId: string,
projName: string;
projContext: string;
projCodeType: ProjCodeType,
payStatus: PayStatus,
payment: number,
projStyleType: ProjStyleType,
previewUrl: string,
gmtCreate: string,
generateStatus: GenerateStatus
}

7
src/main.tsx
View File

@ -4,7 +4,8 @@ import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App/>
</React.StrictMode>,
<App/>
// <React.StrictMode>
// <App/>
// </React.StrictMode>,
)

6
src/util/AjaxUtils.ts Normal file
View File

@ -0,0 +1,6 @@
import axios from "axios";
axios.defaults.baseURL = 'http://127.0.0.1:7025/copyright';
axios.defaults.headers['X-USER-ID'] = '80d3365e-0597-4988-979e-18ef1c3ec671';
export const Axios = axios;