完善页面
This commit is contained in:
parent
82acef1ffa
commit
b790d30da3
65
src/components/card/CardProjAgent.tsx
Normal file
65
src/components/card/CardProjAgent.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import './card-proj-agent.css'
|
||||||
|
import {OrderedListOutlined, NumberOutlined, SearchOutlined} from "@ant-design/icons";
|
||||||
|
import { Tag } from 'antd';
|
||||||
|
|
||||||
|
export default function CardProjAgent() {
|
||||||
|
return (
|
||||||
|
<div className="card-proj-agent">
|
||||||
|
<div className="title">
|
||||||
|
<div className="left">
|
||||||
|
<a href="/#">项目名称</a>
|
||||||
|
</div>
|
||||||
|
<div className="right">
|
||||||
|
<span className="agent">代理商:SDFSDF</span>
|
||||||
|
<span className="orderNo">订单号:XXXXXXXXXXXXX</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div className="body">
|
||||||
|
<div className="line">
|
||||||
|
<div className="left">
|
||||||
|
<span>金额¥:500</span>
|
||||||
|
</div>
|
||||||
|
<div className="right">
|
||||||
|
<span>2024-03-05 17:22:02</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="line">
|
||||||
|
<div className="left">
|
||||||
|
<span>
|
||||||
|
<OrderedListOutlined/>
|
||||||
|
<a href="/#">协议清单</a>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<NumberOutlined />
|
||||||
|
<a href="/#">补正数量</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="right">
|
||||||
|
<span>
|
||||||
|
<SearchOutlined/>
|
||||||
|
<a href="/#">查看结果</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div className="tail">
|
||||||
|
<span className="status order-status">
|
||||||
|
<Tag color="default">待结单</Tag>
|
||||||
|
<Tag color="success">已接单</Tag>
|
||||||
|
<Tag color="error">未接单</Tag>
|
||||||
|
</span>
|
||||||
|
<span className="status agreement-status">
|
||||||
|
<Tag color="success">已签署协议</Tag>
|
||||||
|
<Tag color="error">未签署协议</Tag>
|
||||||
|
</span>
|
||||||
|
<span className="status process-status">
|
||||||
|
<Tag color="default">进行中</Tag>
|
||||||
|
<Tag color="success">完成</Tag>
|
||||||
|
<Tag color="error">终止</Tag>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
79
src/components/card/card-proj-agent.css
Normal file
79
src/components/card/card-proj-agent.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
.card-proj-agent {
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .left {
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .right {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent hr {
|
||||||
|
border-color: var(--color-border);
|
||||||
|
border-style: dashed;
|
||||||
|
border-left: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-right: 0;
|
||||||
|
margin-block-start: 10px;
|
||||||
|
margin-block-end: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .title .left {
|
||||||
|
padding: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .title .right {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .title .right span {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .title .right span:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body {
|
||||||
|
width: unset;
|
||||||
|
border: unset !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body .line {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body .line .left {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body .line .left > span {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body .line .anticon {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .body .line .right > span {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-proj-agent .tail {
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,9 @@ import type {SearchProps} from 'antd/es/input/Search';
|
|||||||
|
|
||||||
const {Search} = Input;
|
const {Search} = Input;
|
||||||
|
|
||||||
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
|
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
||||||
|
console.log(info?.source, value)
|
||||||
|
};
|
||||||
|
|
||||||
export default function ListProj() {
|
export default function ListProj() {
|
||||||
|
|
||||||
@ -14,7 +16,6 @@ export default function ListProj() {
|
|||||||
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||||
|
|
||||||
const domHeight = window.innerHeight - 301;
|
const domHeight = window.innerHeight - 301;
|
||||||
console.log(domHeight)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="list-proj" ref={listProjRef}>
|
<div className="list-proj" ref={listProjRef}>
|
||||||
|
40
src/components/list/ListProjAgent.tsx
Normal file
40
src/components/list/ListProjAgent.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import './list-proj-agent.css';
|
||||||
|
import CardProjAgent from "../card/CardProjAgent.tsx";
|
||||||
|
import {useRef, MutableRefObject} from "react";
|
||||||
|
import {Input, Pagination} from 'antd';
|
||||||
|
import type {SearchProps} from 'antd/es/input/Search';
|
||||||
|
|
||||||
|
const {Search} = Input;
|
||||||
|
|
||||||
|
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
||||||
|
console.log(info?.source, value)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ListProjAgent() {
|
||||||
|
|
||||||
|
const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||||
|
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||||
|
|
||||||
|
const domHeight = window.innerHeight - 301;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="list-proj-agent" ref={listProjRef}>
|
||||||
|
<div className="top">
|
||||||
|
<Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
|
||||||
|
</div>
|
||||||
|
<div className="body">
|
||||||
|
<div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
|
||||||
|
<CardProjAgent />
|
||||||
|
<CardProjAgent />
|
||||||
|
<CardProjAgent />
|
||||||
|
<CardProjAgent />
|
||||||
|
<CardProjAgent />
|
||||||
|
<CardProjAgent />
|
||||||
|
</div>
|
||||||
|
<div className="page">
|
||||||
|
<Pagination defaultCurrent={1} total={50}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
35
src/components/list/list-proj-agent.css
Normal file
35
src/components/list/list-proj-agent.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
.list-proj-agent {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-proj-agent .top {
|
||||||
|
padding: 0 15px 15px 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-proj-agent .body {
|
||||||
|
width: unset;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-proj-agent .list {
|
||||||
|
padding: 15px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-proj-agent .body .card-proj-agent {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.list-proj-agent .body .card-proj-agent:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-proj-agent .body .page {
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
@ -1,6 +0,0 @@
|
|||||||
import {createContext} from "react";
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
axios.defaults.baseURL = 'https://localhost:8080';
|
|
||||||
|
|
||||||
export const Axios = createContext(axios)
|
|
11
src/context/Context.tsx
Normal file
11
src/context/Context.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import {Context, createContext} from "react";
|
||||||
|
import axios from 'axios';
|
||||||
|
import {BreadcrumbItemType, BreadcrumbSeparatorType} from "antd/es/breadcrumb/Breadcrumb";
|
||||||
|
|
||||||
|
axios.defaults.baseURL = 'https://localhost:8080';
|
||||||
|
|
||||||
|
export const Axios = createContext(axios)
|
||||||
|
|
||||||
|
export const Navs:Context<BreadcrumbItemType[]> = createContext([{
|
||||||
|
title: <a href={'/'}>首页</a>
|
||||||
|
}])
|
@ -1,11 +1,16 @@
|
|||||||
import './body.css'
|
import './body.css'
|
||||||
import {createBrowserRouter, RouterProvider} from 'react-router-dom';
|
import {createBrowserRouter, RouterProvider} from 'react-router-dom';
|
||||||
import Index from '../../route/index';
|
import Index from '../../route/index';
|
||||||
|
import ProjType from "../../route/proj/ProjType.tsx";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
element: <Index />
|
element: <Index />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/proj-type',
|
||||||
|
element: <ProjType />
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
|
@ -1,19 +1,16 @@
|
|||||||
import './nav.css';
|
import './nav.css';
|
||||||
|
import {Breadcrumb } from 'antd';
|
||||||
|
import {useContext} from "react";
|
||||||
|
import {Navs} from '../../context/Context.tsx';
|
||||||
|
|
||||||
export default function Nav() {
|
export default function Nav() {
|
||||||
|
|
||||||
|
const [navs, _setNavs] = useContext(Navs)
|
||||||
|
console.log(navs)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="nav">
|
<div className="nav">
|
||||||
<ul>
|
<Breadcrumb items={navs}/>
|
||||||
<li>
|
|
||||||
<span>首页</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>首页</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>首页</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
@ -1,49 +1,58 @@
|
|||||||
import './index.css';
|
import './index.css';
|
||||||
import {MouseEvent} from "react";
|
import {MouseEvent, useState} from "react";
|
||||||
|
import {useNavigate} from "react-router-dom";
|
||||||
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
|
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
|
||||||
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
|
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
|
||||||
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
|
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
|
||||||
import ListProj from "../../components/list/ListProj.tsx";
|
import ListProj from "../../components/list/ListProj.tsx";
|
||||||
|
import ListProjAgent from "../../components/list/ListProjAgent.tsx";
|
||||||
const projMenu: IMenuWithTopButton = {
|
|
||||||
button: {
|
|
||||||
name: '创建项目',
|
|
||||||
handle(e: MouseEvent<HTMLButtonElement>) {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
list: [
|
|
||||||
{id: 'proj1', icon: './vite.svg', name: '全部项目'},
|
|
||||||
{id: 'proj2', icon: './vite.svg', name: '进行中的'},
|
|
||||||
{id: 'proj3', icon: './vite.svg', name: '已完成的'}
|
|
||||||
],
|
|
||||||
handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
|
|
||||||
console.log(e);
|
|
||||||
console.log(index);
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const agentMenu: IMenuWithTopButton = {
|
|
||||||
button: {
|
|
||||||
name: '代理服务',
|
|
||||||
handle(e: MouseEvent<HTMLButtonElement>) {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
list: [
|
|
||||||
{id: 'agent1', icon: './vite.svg', name: '全部项目'},
|
|
||||||
{id: 'agent2', icon: './vite.svg', name: '进行中的'},
|
|
||||||
{id: 'agent3', icon: './vite.svg', name: '已完成的'},
|
|
||||||
],
|
|
||||||
handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
|
|
||||||
console.log(e);
|
|
||||||
console.log(index);
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [listType, setListType] = useState('proj');
|
||||||
|
|
||||||
|
const projMenu: IMenuWithTopButton = {
|
||||||
|
button: {
|
||||||
|
name: '创建项目',
|
||||||
|
handle(e: MouseEvent<HTMLButtonElement>) {
|
||||||
|
console.log(e)
|
||||||
|
navigate('/proj-type')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list: [
|
||||||
|
{id: 'proj1', icon: './vite.svg', name: '全部项目'},
|
||||||
|
{id: 'proj2', icon: './vite.svg', name: '进行中的'},
|
||||||
|
{id: 'proj3', icon: './vite.svg', name: '已完成的'}
|
||||||
|
],
|
||||||
|
handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
|
||||||
|
console.log(e);
|
||||||
|
console.log(index);
|
||||||
|
console.log(item)
|
||||||
|
setListType('proj');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const agentMenu: IMenuWithTopButton = {
|
||||||
|
button: {
|
||||||
|
name: '代理服务',
|
||||||
|
handle(e: MouseEvent<HTMLButtonElement>) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list: [
|
||||||
|
{id: 'agent1', icon: './vite.svg', name: '全部项目'},
|
||||||
|
{id: 'agent2', icon: './vite.svg', name: '进行中的'},
|
||||||
|
{id: 'agent3', icon: './vite.svg', name: '已完成的'},
|
||||||
|
],
|
||||||
|
handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
|
||||||
|
console.log(e);
|
||||||
|
console.log(index);
|
||||||
|
console.log(item)
|
||||||
|
setListType('projAgent');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="index">
|
<div className="index">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
@ -59,9 +68,7 @@ export default function Index() {
|
|||||||
handleListItem={agentMenu.handleListItem}
|
handleListItem={agentMenu.handleListItem}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
|
||||||
<ListProj/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
9
src/route/proj/ProjType.tsx
Normal file
9
src/route/proj/ProjType.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import './proj-type.css'
|
||||||
|
|
||||||
|
export default function ProjType() {
|
||||||
|
return (
|
||||||
|
<div className="proj-type">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
0
src/route/proj/proj-type.css
Normal file
0
src/route/proj/proj-type.css
Normal file
Loading…
Reference in New Issue
Block a user