From 9160a37bbe5e9ec2c55839464cb86d728dba37f6 Mon Sep 17 00:00:00 2001 From: WenC <450292408@qq.com> Date: Tue, 19 Mar 2024 19:19:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/card/CardProj.tsx | 100 ++++++++++++++++++++++++------ src/components/card/card-proj.css | 7 ++- src/components/list/ListProj.tsx | 40 +++++++++--- src/interfaces/proj/IProj.ts | 37 +++++++++++ src/main.tsx | 7 ++- src/util/AjaxUtils.ts | 6 ++ 6 files changed, 165 insertions(+), 32 deletions(-) create mode 100644 src/interfaces/proj/IProj.ts create mode 100644 src/util/AjaxUtils.ts diff --git a/src/components/card/CardProj.tsx b/src/components/card/CardProj.tsx index a5c3937..a924012 100644 --- a/src/components/card/CardProj.tsx +++ b/src/components/card/CardProj.tsx @@ -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 等待生成 + } + if (data.generateStatus == GenerateStatus.GENERATING) { + return 正在生成 + } + if (data.generateStatus == GenerateStatus.SUCCESS) { + return 生成成功 + } + if (data.generateStatus == GenerateStatus.FAILED) { + return 生成失败 + } + if (data.generateStatus == GenerateStatus.NONE) { + return 未生成 + } + return 错误 + } + + const renderOption = () => { + if(data.payStatus == PayStatus.UNPAID) { + return ( + <> +
+ +
+ + ) + } + return ( + <> +
+ + + +
+ { + data.generateStatus == GenerateStatus.SUCCESS ? ( +
+ + + + +
+ ) : <> + } + + ) + } -export default function CardProj() { return (
- 项目名称 + {data.projName}
- 上下文：SDFSDF - 未生成 - 2024-03-02 11:15:35 + 上下文：{data.projContext} + {data.gmtCreate} + {renderGenerateStatus()}
- 金额￥：500 + 金额￥：{data.payment / 100}
@@ -32,7 +101,10 @@ export default function CardProj() { - 预览 + { + e.stopPropagation(); + window.open(data.previewUrl, '_blank') + }}>预览
@@ -55,17 +127,7 @@ export default function CardProj() { } } }}> -
- - - -
-
- - - - -
+ {renderOption()}
diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css index 74d0aed..3f5530d 100644 --- a/src/components/card/card-proj.css +++ b/src/components/card/card-proj.css @@ -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 { diff --git a/src/components/list/ListProj.tsx b/src/components/list/ListProj.tsx index d90d132..031735f 100644 --- a/src/components/list/ListProj.tsx +++ b/src/components/list/ListProj.tsx @@ -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 = useRef(null); const listRef: MutableRefObject = 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) => ); + } + + useEffect(() => { + renderData(); + }, []) + return (
@@ -25,15 +54,10 @@ export default function ListProj() {
- - - - - - + {renderList()}
- +
diff --git a/src/interfaces/proj/IProj.ts b/src/interfaces/proj/IProj.ts new file mode 100644 index 0000000..b4490d3 --- /dev/null +++ b/src/interfaces/proj/IProj.ts @@ -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 + + +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 0475b4a..8224efa 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,7 +4,8 @@ import App from './App.tsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( - - - , + + // + // + // , ) diff --git a/src/util/AjaxUtils.ts b/src/util/AjaxUtils.ts new file mode 100644 index 0000000..5cc39ce --- /dev/null +++ b/src/util/AjaxUtils.ts @@ -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; \ No newline at end of file