完成代理服务选择和列表

src/components/card/CardAgent.tsx

@@ -2,6 +2,7 @@ import './card-agent.css';
 import {Image} from "antd";
 import {errorImage} from "../../util/CommonUtil.ts";
 import {AgentMedalEnum, IAgent} from "../../interfaces/card/ICardProj.ts";
+import {downloadUrl} from "../../util/AjaxUtils.ts";
 
 export default function CardAgent(props: IAgent) {
 
@@ -23,12 +24,12 @@ export default function CardAgent(props: IAgent) {
             props.handleSelect();
         }}>
             <div className="card-agent-head">
-                {props.logo ? <Image width={30} src={props.logo} fallback={errorImage}/> : <></>}
+                {props.logo ? <Image width={30} src={downloadUrl(props.logo.split(',')[0], false)} fallback={errorImage}/> : <></>}
                 <span className="card-agent-title">{props.name}</span>
                 {renderMedal()}
             </div>
             <div className="card-agent-body">
-                <div className="card-agent-body-content">{props.desc}</div>
+                <div className="card-agent-body-content" dangerouslySetInnerHTML={{__html: props.desc}}></div>
                 <Image width={140} height={100} src={props.certificateImg} fallback={errorImage}/>
             </div>
         </div>

src/components/card/CardProjAgent.tsx

@@ -1,27 +1,74 @@
 import './card-proj-agent.css'
 import {OrderedListOutlined, NumberOutlined, SearchOutlined} from "@ant-design/icons";
 import { Tag } from 'antd';
+import {IAgent} from "../../interfaces/agent/IAgent.ts";
+
+export default function CardProjAgent(props: IAgent) {
+
+    /**
+     * 接单状态
+     */
+    const renderTakeStatus = () => {
+        if(props.isTake == 0) {
+            return <Tag color="default">待结单</Tag>;
+        }
+        if(props.isTake == 1) {
+            return <Tag color="success">已接单</Tag>;
+        }
+        if(props.isTake == 2) {
+            return <Tag color="error">未接单</Tag>;
+        }
+        return <></>;
+    }
+
+    /**
+     * 签订状态
+     */
+    const renderAgreementStatus = () => {
+        if(props.isAgreement == 0) {
+            return <Tag color="error">未签署协议</Tag>;
+        }
+        if(props.isAgreement == 1) {
+            return <Tag color="success">已签署协议</Tag>;
+        }
+        return <></>;
+    }
+
+    /**
+     * 结束状态
+     */
+    const renderOverStatus = () => {
+        if(props.isOver == 0) {
+            return <Tag color="default">进行中</Tag>;
+        }
+        if(props.isOver == 1) {
+            return <Tag color="success">完成</Tag>;
+        }
+        if(props.isOver == 2) {
+            return <Tag color="error">终止</Tag>
+        }
+        return <></>;
+    }
 
-export default function CardProjAgent() {
     return (
         <div className="card-proj-agent">
             <div className="title">
                 <div className="left">
-                    <a href="/#">项目名称</a>
+                    <a href="/#">{props.projName}</a>
                 </div>
                 <div className="right">
-                    <span className="agent">代理商：SDFSDF</span>
+                    <span className="agent">代理商：{props.basicsName}</span>
-                    <span className="orderNo">订单号：XXXXXXXXXXXXX</span>
+                    <span className="orderNo">订单号：{props.orderNumber}</span>
                 </div>
             </div>
             <hr/>
             <div className="body">
                 <div className="line">
                     <div className="left">
-                        <span>金额￥：500</span>
+                        <span>金额￥：{props.orderShoppingAmount / 100}</span>
                     </div>
                     <div className="right">
-                        <span>2024-03-05 17:22:02</span>
+                        <span>{props.gmtCreate}</span>
                     </div>
                 </div>
                 <div className="line">
@@ -32,7 +79,7 @@ export default function CardProjAgent() {
                         </span>
                         <span>
                             <NumberOutlined />
-                            <a href="/#">补正数量</a>
+                            <a href="/#">补正数量({props.materialAmendApplyCount})</a>
                         </span>
                     </div>
                     <div className="right">
@@ -45,20 +92,9 @@ export default function CardProjAgent() {
             </div>
             <hr/>
             <div className="tail">
-                <span className="status order-status">
+                <span className="status order-status">{renderTakeStatus()}</span>
-                    <Tag color="default">待结单</Tag>
+                <span className="status agreement-status">{renderAgreementStatus()}</span>
-                    <Tag color="success">已接单</Tag>
+                <span className="status process-status">{renderOverStatus()}</span>
-                    <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>
     )

src/components/card/card-agent.css

@@ -63,10 +63,10 @@
 
 .card-agent .card-agent-body .card-agent-body-content {
     width: 200px;
-    height: 100px;
+    height: 93px;
     overflow: hidden;
     display: -webkit-box;
     text-overflow: ellipsis;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 5;
+    -webkit-line-clamp: 4;
 }

src/components/list/ListProj.tsx

@@ -1,42 +1,50 @@
 import './list-proj.css'
 import CardProj from "../card/CardProj.tsx";
-import {useRef, MutableRefObject, useState, useEffect} from "react";
+import {useRef, MutableRefObject, useState, useEffect, useContext} from "react";
-import {Input, Pagination, message} from 'antd';
+import {Input, Pagination, message, Spin} from 'antd';
-import type {SearchProps} from 'antd/es/input/Search';
 import {get} from "../../util/AjaxUtils.ts";
+import {IndexListContext} from "../../context/IndexListContext.ts";
+import {IListPage} from "../../interfaces/listpage/IListPage.ts";
+import {IProj} from "../../interfaces/proj/IProj.ts";
 
 const {Search} = Input;
 
-const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
-    console.log(info?.source, value)
-};
-
 export default function ListProj() {
-
+    const indexListContext = useContext(IndexListContext);
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
     const [messageApi, contextHolder] = message.useMessage();
     const [page, setPage] = useState(1);
     const [total, setTotal] = useState(0);
-    const [projs, setProjs] = useState([]);
+    const [projs, setProjs] = useState<IProj[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [keywords, setKeywords] = useState('');
 
     const domHeight = window.innerHeight - 280;
 
     const reqData = (currentPage: number) => {
-        get({
+        get<IListPage<IProj>>({
             messageApi: messageApi,
             url: '/api/proj/listpage/self',
             config: {
                 params: {
                     page: currentPage,
-                    rows: 20
+                    rows: 20,
+                    keywords: keywords,
+                    status: indexListContext.status ? indexListContext.status : ''
                 }
             },
+            onBefore() {
+                setIsLoading(true);
+            },
             onSuccess({data}) {
-                setProjs(data.page);
+                setPage(data.page);
                 setTotal(data.total);
                 setProjs(data.rows);
+            },
+            onFinally() {
+                setIsLoading(false);
             }
         })
     }
@@ -47,25 +55,28 @@ export default function ListProj() {
 
     useEffect(() => {
         reqData(page);
-    }, [])
+    }, [indexListContext.status, keywords, page])
 
     return (
         <>
             {contextHolder}
             <div className="list-proj" ref={listProjRef}>
                 <div className="top">
-                    <Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
+                    <Search placeholder="按项目名搜索" onSearch={(value) => {
+                        setKeywords(value)
+                    }} style={{width: 200}}/>
                 </div>
                 <div className="body">
-                    <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
+                    <Spin tip="加载中..." spinning={isLoading}>
-                        {renderList()}
+                        <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
-                    </div>
+                            {renderList()}
-                    <div className="page">
+                        </div>
-                        <Pagination defaultCurrent={page} total={total} onChange={(page) => {
+                        <div className="page">
-                            setPage(page);
+                            <Pagination defaultCurrent={page} total={total} onChange={(page) => {
-                            reqData(page);
+                                setPage(page);
-                        }}/>
+                            }}/>
-                    </div>
+                        </div>
+                    </Spin>
                 </div>
             </div>
         </>

src/components/list/ListProjAgent.tsx

@@ -1,40 +1,99 @@
 import './list-proj-agent.css';
 import CardProjAgent from "../card/CardProjAgent.tsx";
-import {useRef, MutableRefObject} from "react";
+import {useRef, MutableRefObject, useEffect, useState, useContext} from "react";
-import {Input, Pagination} from 'antd';
+import {Input, Pagination, Spin} from 'antd';
-import type {SearchProps} from 'antd/es/input/Search';
+import {get} from "../../util/AjaxUtils.ts";
+import useMessage from "antd/es/message/useMessage";
+import {IListPage} from "../../interfaces/listpage/IListPage.ts";
+import {IndexListContext} from "../../context/IndexListContext.ts";
+import {IAgent} from "../../interfaces/agent/IAgent.ts";
 
 const {Search} = Input;
 
-const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
-    console.log(info?.source, value)
-};
-
 export default function ListProjAgent() {
+    const indexListContext = useContext(IndexListContext);
 
+    const [messageApi, messageApiHolder] = useMessage();
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
-    const domHeight = window.innerHeight - 301;
+
+    const [page, setPage] = useState(1);
+    const [total, setTotal] = useState(0);
+    const [agents, setAgents] = useState<IAgent[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [keywords, setKeywords] = useState('');
+    const domHeight = window.innerHeight - 280;
+
+    useEffect(() => {
+        get<IListPage<IAgent>>({
+            messageApi,
+            url: `/api/agent/order/listpage`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 20,
+                    keywords: keywords,
+                    status: indexListContext.status ? indexListContext.status : ''
+                }
+            },
+            onBefore() {
+                setIsLoading(true);
+            },
+            onSuccess({data}) {
+                setPage(data.page);
+                setTotal(data.total);
+                setAgents(data.rows);
+            },
+            onFinally() {
+                setIsLoading(false);
+            }
+        })
+    }, [indexListContext.status, keywords, page])
+
 
     return (
-        <div className="list-proj-agent" ref={listProjRef}>
+        <>
-            <div className="top">
+            <div className="list-proj-agent" ref={listProjRef}>
-                <Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
+                <div className="top">
-            </div>
+                    <Search placeholder="按项目名搜索" onSearch={(value) => {
-            <div className="body">
+                        setKeywords(value)
-                <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
+                    }} style={{width: 200}}/>
-                    <CardProjAgent />
-                    <CardProjAgent />
-                    <CardProjAgent />
-                    <CardProjAgent />
-                    <CardProjAgent />
-                    <CardProjAgent />
                 </div>
-                <div className="page">
+                <div className="body">
-                    <Pagination defaultCurrent={1} total={50}/>
+                    <Spin tip="加载中..." spinning={isLoading}>
+                        <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
+                            {
+                                agents.map(item => <CardProjAgent key={item.orderNumber}
+                                                                  projId={item.projId}
+                                                                  projName={item.projName}
+                                                                  projOrderNo={item.projOrderNo}
+                                                                  agentBasicsId={item.agentBasicsId}
+                                                                  basicsName={item.basicsName}
+                                                                  isAgreement={item.isAgreement}
+                                                                  isOver={item.isOver}
+                                                                  isResult={item.isResult}
+                                                                  isTake={item.isTake}
+                                                                  materialAmendApplyCount={item.materialAmendApplyCount}
+                                                                  orderId={item.orderId}
+                                                                  orderNote={item.orderNote}
+                                                                  orderNumber={item.orderNumber}
+                                                                  orderShoppingAmount={item.orderShoppingAmount}
+                                                                  orderType={item.orderType}
+                                                                  orderTypeAmount={item.orderTypeAmount}
+                                                                  orderTypeName={item.orderTypeName}
+                                                                  overTime={item.overTime}
+                                                                  gmtCreate={item.gmtCreate}
+                                                            />)
+                            }
+                        </div>
+                    </Spin>
+                    <div className="page">
+                        <Pagination defaultCurrent={page} total={total}/>
+                    </div>
                 </div>
             </div>
-        </div>
+            {messageApiHolder}
+        </>
     )
 }

src/context/GlobalContext.ts

@@ -15,8 +15,6 @@ export interface GlobalData {
     user: User;
 }
 
-
-
 export interface GlobalDataAction {
     type: number;
     user?: User;

src/context/IndexListContext.ts

@@ -0,0 +1,22 @@
+import {createContext, Dispatch} from "react";
+
+export enum IndexListDataType {
+    PROJ,
+    AGENT,
+}
+
+export interface ListData {
+    type: IndexListDataType;
+    status?: string;
+}
+
+export interface ListAction {
+    type: IndexListDataType;
+    value: string;
+}
+
+export const IndexListContext = createContext<ListData>({
+    type: IndexListDataType.PROJ
+})
+
+export const IndexListDispatchContext = createContext<Dispatch<ListAction>>(() => {})

src/interfaces/agent/IAgent.ts

@@ -0,0 +1,21 @@
+export interface IAgent {
+    projId: string;
+    projName: string;
+    projOrderNo: string;
+    agentBasicsId: string;
+    basicsName: string;
+    isAgreement: number;
+    isOver: number;
+    isResult: number;
+    isTake: number;
+    materialAmendApplyCount: number;
+    orderId: string;
+    orderNote: string;
+    orderNumber: string;
+    orderShoppingAmount: number;
+    orderType: string;
+    orderTypeAmount: number;
+    orderTypeName: string;
+    overTime: string;
+    gmtCreate: string;
+}

src/interfaces/listpage/IListPage.ts

@@ -0,0 +1,5 @@
+export interface IListPage<T> {
+    page: number;
+    total: number;
+    rows: T[]
+}

src/layout/body/Body.tsx

@@ -1,139 +1,6 @@
 import './body.css'
-import {createBrowserRouter, RouterProvider} from 'react-router-dom';
+import {RouterProvider} from 'react-router-dom';
-import Index from '../../route/index';
+import {router} from "../../route/router.tsx";
-import ProjCreate from "../../route/proj/ProjCreate.tsx";
-import ProjNew from "../../route/proj/ProjNew.tsx";
-import ProjEdit from "../../route/proj/ProjEdit.tsx";
-import AgentSelect from "../../route/agent/AgentSelect.tsx";
-import ProjEditStep1 from "../../route/proj/edit/ProjEditStep1.tsx";
-import ProjEditStep2 from "../../route/proj/edit/ProjEditStep2.tsx";
-import ProjEditStep3 from "../../route/proj/edit/ProjEditStep3.tsx";
-import ProjEditStep4 from "../../route/proj/edit/ProjEditStep4.tsx";
-import ProjEditStep5 from "../../route/proj/edit/ProjEditStep5.tsx";
-import ProjEditStep6 from "../../route/proj/edit/ProjEditStep6.tsx";
-import ProjConfigLoginpage from "../../route/proj/edit/ProjConfigLoginpage.tsx";
-import ProjConfigModList from "../../route/proj/edit/ProjConfigModList.tsx";
-import ProjConfigModSave from "../../route/proj/edit/ProjConfigModSave.tsx";
-import ProjConfigModEdit from "../../route/proj/edit/ProjConfigModEdit.tsx";
-import ProjConfigModShow from "../../route/proj/edit/ProjConfigModShow.tsx";
-import ProjConfigMenuList from "../../route/proj/edit/ProjConfigMenuList.tsx";
-import ProjEditStep1Show from "../../route/proj/edit/ProjEditStep1Show.tsx";
-import ProjEditStep2Show from "../../route/proj/edit/ProjEditStep2Show.tsx";
-import ProjEditStep3Show from "../../route/proj/edit/ProjEditStep3Show.tsx";
-import ProjEditStep4Show from "../../route/proj/edit/ProjEditStep4Show.tsx";
-import ProjEditStep5Show from "../../route/proj/edit/ProjEditStep5Show.tsx";
-import ProjEditStep6Show from "../../route/proj/edit/ProjEditStep6Show.tsx";
-import ProjConfigLoginpageShow from "../../route/proj/edit/ProjConfigLoginpageShow.tsx";
-import ProjConfigMenuListShow from "../../route/proj/edit/ProjConfigMenuListShow.tsx";
-import ProjConfigModListShow from "../../route/proj/edit/ProjConfigModListShow.tsx";
-
-
-const router = createBrowserRouter([
-    {
-        path: '/',
-        element: <Index/>
-    },
-    {
-        path: '/proj-create',
-        element: <ProjCreate/>
-    },
-    {
-        path: '/proj-new/:projChargeType',
-        element: <ProjNew/>
-    },
-    {
-        path: '/proj-edit/:projId',
-        element: <ProjEdit/>
-    },
-    {
-        path: '/proj-edit/step1/:projId',
-        element: <ProjEditStep1/>
-    },
-    {
-        path: '/proj-edit/step1-show/:projId',
-        element: <ProjEditStep1Show/>
-    },
-    {
-        path: '/proj-edit/step2/:projId',
-        element: <ProjEditStep2/>
-    },
-    {
-        path: '/proj-edit/step2-show/:projId',
-        element: <ProjEditStep2Show/>
-    },
-    {
-        path: '/proj-edit/step3/:projId',
-        element: <ProjEditStep3/>
-    },
-    {
-        path: '/proj-edit/step3-show/:projId',
-        element: <ProjEditStep3Show/>
-    },
-    {
-        path: '/proj-edit/step4/:projId',
-        element: <ProjEditStep4/>
-    },
-    {
-        path: '/proj-edit/step4-show/:projId',
-        element: <ProjEditStep4Show/>
-    },
-    {
-        path: '/proj-edit/step5/:projId',
-        element: <ProjEditStep5/>
-    },
-    {
-        path: '/proj-edit/step5-show/:projId',
-        element: <ProjEditStep5Show/>
-    },
-    {
-        path: '/proj-edit/step6/:projId',
-        element: <ProjEditStep6/>
-    },
-    {
-        path: '/proj-edit/step6-show/:projId',
-        element: <ProjEditStep6Show/>
-    },
-    {
-        path: '/proj-edit/config-loginpage/:projId',
-        element: <ProjConfigLoginpage/>
-    },
-    {
-        path: '/proj-edit/config-loginpage-show/:projId',
-        element: <ProjConfigLoginpageShow/>
-    },
-    {
-        path: '/proj-edit/config-mod-list/:projId',
-        element: <ProjConfigModList/>
-    },
-    {
-        path: '/proj-edit/config-mod-list-show/:projId',
-        element: <ProjConfigModListShow/>
-    },
-    {
-        path: '/proj-edit/config-mod-save/:projId',
-        element: <ProjConfigModSave/>
-    },
-    {
-        path: '/proj-edit/config-mod-edit/:projId/:projModId',
-        element: <ProjConfigModEdit/>
-    },
-    {
-        path: '/proj-edit/config-mod-show/:projId/:projModId',
-        element: <ProjConfigModShow/>
-    },
-    {
-        path: '/proj-edit/config-menu-list/:projId',
-        element: <ProjConfigMenuList/>
-    },
-    {
-        path: '/proj-edit/config-menu-list-show/:projId',
-        element: <ProjConfigMenuListShow/>
-    },
-    {
-        path: '/agent-select/:projId',
-        element: <AgentSelect/>
-    }
-])
 
 export default function Body() {
     const winHeight: number = window.innerHeight

src/layout/head/Head.tsx

@@ -19,7 +19,7 @@ export default function Head() {
     const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
 
     useEffect(() => {
-        get({
+        get<any>({
             messageApi,
             url: '/api/user-info/get-user-self',
             onSuccess({data}) {

src/route/agent/AgentSelect.tsx

@@ -1,39 +1,124 @@
 import './agent-select.css';
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate, useParams} from "react-router-dom";
-import {Breadcrumb, Button, Divider, Image, Radio, RadioChangeEvent} from "antd";
+import {Breadcrumb, Button, Divider, Image, message, Modal, Radio, RadioChangeEvent, Spin} from "antd";
 import CardAgent from "../../components/card/CardAgent.tsx";
 import {errorImage} from "../../util/CommonUtil.ts";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {AgentMedalEnum} from "../../interfaces/card/ICardProj.ts";
 import NoData from '../../assets/no-data.png';
+import {get, downloadUrl, post} from "../../util/AjaxUtils.ts";
+import {IListPage} from "../../interfaces/listpage/IListPage.ts";
+
+enum AgentPriceType {
+    NORMAL = 'NORMAL',
+    URGENT = 'URGENT'
+}
+
+type AgentPrice = {
+    priceType: AgentPriceType;
+    priceTypeText: string;
+    typePrice: number;
+}
+
+type AgentDTO = {
+    basicsAddresss: string;
+    basicsCertification: string;
+    basicsContactNumber: string;
+    basicsContactPerson: string;
+    basicsId: string;
+    basicsIntro: string;
+    basicsLogo: string;
+    basicsName: string;
+    priceDTOS: AgentPrice[];
+}
+
+type Agent = {
+    id: string,
+    logo: string,
+    name: string,
+    desc: string,
+    medal: AgentMedalEnum,
+    certificateImg: string,
+    selected: false
+}
+
 
 export default function AgentSelect() {
-    const [value, setValue] = useState(1);
+
+    const [messageApi, contextHolder] = message.useMessage();
     const nav = useNavigate();
-    // const params = useParams();
+    const pathParams = useParams();
     const height = window.innerHeight - 150;
 
+    const [modal, modalHolder] = Modal.useModal();
+    const [page, setPage] = useState(1);
+    const [agentList, setAgentList] = useState<Agent[]>([]);
     const [selectedAgentId, setSelectedAgentId] = useState('0');
-    const [selectedAgent, setSelectedAgent] = useState({});
+    const [showAgentMoreBtn, setShowAgentMoreBtn] = useState(true);
+    const [isAgentListLoading, setIsAgentListLoading] = useState(false);
+    const [selectedAgent, setSelectedAgent] = useState<AgentDTO>();
+    const [isAgentLoading, setIsAgentLoading] = useState(false);
+    const [selectedPriceValue, setSelectedPriceValue] = useState('');
+    const [isConfirmLoading, setIsConfirmLoading] = useState(false);
 
-    // 列表
+
-    const [agentList, setAgentList] = useState([{
+    const getSelectedAgentData = (basicsId: string) => {
-        id: '1',
+        get<AgentDTO>({
-        logo: '1',
+            messageApi,
-        name: '标题1',
+            url: `/api/agent/get/${basicsId}`,
-        desc: '描述1',
+            onBefore() {
-        medal: AgentMedalEnum.GOLD,
+                setIsAgentLoading(true);
-        certificateImg: '1',
+            },
-        selected: false
+            onSuccess({data}) {
-    }, {
+                setSelectedAgent({
-        id: '2',
+                    ...data
-        logo: '2',
+                });
-        name: '标题2',
+                setSelectedPriceValue(`${data.priceDTOS[0].priceType}:${data.priceDTOS[0].typePrice}`)
-        desc: '描述2',
+            },
-        medal: AgentMedalEnum.GOLD,
+            onFinally() {
-        certificateImg: '1',
+                setIsAgentLoading(false);
-        selected: false
+            }
-    }]);
+        })
+    }
+
+    useEffect(() => {
+        get<IListPage<AgentDTO>>({
+            messageApi,
+            url: `/api/agent/listpage`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 10
+                }
+            },
+            onBefore() {
+                setIsAgentListLoading(true);
+            },
+            onSuccess({data}) {
+                if (data.rows.length == 0) {
+                    setShowAgentMoreBtn(false);
+                    return;
+                }
+                data.rows.forEach((item) => {
+                    agentList.push({
+                        id: item.basicsId,
+                        logo: item.basicsLogo,
+                        name: item.basicsName,
+                        desc: item.basicsIntro,
+                        medal: AgentMedalEnum.NORMAL,
+                        certificateImg: item.basicsCertification,
+                        selected: false
+                    })
+                })
+                setAgentList([
+                    ...agentList
+                ])
+            },
+            onFinally() {
+                setIsAgentListLoading(false);
+            }
+        })
+    }, [page])
 
     const renderAgent = () => {
         return agentList.map((item, index) => {
@@ -46,22 +131,45 @@ export default function AgentSelect() {
                            selected={selectedAgentId == item.id}
                            handleSelect={() => {
                                setSelectedAgentId(item.id);
-                               setSelectedAgent(item);
+                               getSelectedAgentData(item.id);
                            }}
                 />
             )
         })
     }
 
+    /**
+     * 证书
+     * @param certification
+     */
+    const renderCertifications = (certification: string) => {
+        if (certification) {
+            return <></>
+        }
+        return certification.split(',').map(id => (
+            <Image width={270}
+                   height={170}
+                   src={downloadUrl(id, false)}
+                   fallback={errorImage}
+            />
+        ))
+    }
+
+    const renderPrice = (prices: AgentPrice[]) => {
+        if (!prices) {
+            return <></>
+        }
+        return prices.map((price, index) => <Radio value={`${price.priceType}:${price.typePrice}`}
+                                                   key={`p${index}`}>{price.priceTypeText}￥：{(price.typePrice / 100)}</Radio>)
+    }
+
     const renderSelectedAgent = () => {
-        if (Object.keys(selectedAgent).length == 0) {
+        if (!selectedAgent) {
             return (
-                <>
+                <div className="no-data">
-                    <div className="no-data">
+                    <Image src={NoData}/>
-                        <Image src={NoData}/>
+                    <span>请选择左侧机构</span>
-                        <span>请选择左侧机构</span>
+                </div>
-                    </div>
-                </>
             )
         }
         return (
@@ -69,44 +177,25 @@ export default function AgentSelect() {
                 <div className="agent-info">
                     <div className="agent-title">机构信息</div>
                     <div className="agent-body">
-                        <div className="agent-name">北京九思恒源科技有限公司</div>
+                        <div className="agent-name">{selectedAgent.basicsName}</div>
-                        <div className="agent-desc">
+                        <div className="agent-desc" dangerouslySetInnerHTML={{__html: selectedAgent.basicsIntro}}></div>
-                            雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。
-                        </div>
                         <Divider dashed style={{
                             marginTop: '10px',
                             marginBottom: '10px'
                         }}/>
                         <div className="agent-img-title">机构证书</div>
-                        <div className="agent-img-list">
+                        <div className="agent-img-list">{renderCertifications(selectedAgent.basicsId)}</div>
-                            <Image width={270}
-                                   height={170}
-                                   fallback={errorImage}
-                            />
-                            <Image width={270}
-                                   height={170}
-                                   fallback={errorImage}
-                            />
-                            <Image width={270}
-                                   height={170}
-                                   fallback={errorImage}
-                            />
-                            <Image width={270}
-                                   height={170}
-                                   fallback={errorImage}
-                            />
-                        </div>
                         <Divider dashed style={{
                             marginTop: '10px',
                             marginBottom: '10px'
                         }}/>
                         <div className="agent-contact">
                             <div className="line">
-                                <span>联系人：XXXXXX</span>
+                                <span>联系人：{selectedAgent.basicsContactPerson}</span>
-                                <span>联系电话：13888888888</span>
+                                <span>联系电话：{selectedAgent.basicsContactNumber}</span>
                             </div>
                             <div className="line">
-                                <span>联系地址：内蒙古呼和浩特新城区XXXXXX</span>
+                                <span>联系地址：{selectedAgent.basicsAddresss}</span>
                             </div>
                         </div>
                     </div>
@@ -114,15 +203,51 @@ export default function AgentSelect() {
                 <div className="agent-price">
                     <span className="label">价格种类：</span>
                     <Radio.Group onChange={(e: RadioChangeEvent) => {
-                        console.log('radio checked', e.target.value);
+                        setSelectedPriceValue(e.target.value);
-                        setValue(e.target.value);
+                    }} defaultValue={selectedPriceValue}>{renderPrice(selectedAgent.priceDTOS)}</Radio.Group>
-                    }} value={value}>
-                        <Radio value={1}>普通件：200</Radio>
-                        <Radio value={2}>加急件：400</Radio>
-                    </Radio.Group>
                 </div>
                 <div style={{marginTop: '15px', textAlign: 'center'}}>
-                    <Button type="primary" style={{backgroundColor: 'var(--color-primary)'}}>选择</Button>
+                    <Button type="primary" style={{backgroundColor: 'var(--color-primary)'}} onClick={() => {
+                        if (!selectedPriceValue) {
+                            messageApi.error('请选择价格种类');
+                            return;
+                        }
+                        modal.confirm({
+                            title: '提示',
+                            content: '确定选择此代理商吗？确认后，会扣除相应金额。',
+                            okText: '确认',
+                            cancelText: '取消',
+                            okButtonProps: {
+                                style: {
+                                    backgroundColor: 'var(--color-primary)'
+                                }
+                            },
+                            onOk: () => {
+                                const priceArray = selectedPriceValue.split(':');
+                                post({
+                                    messageApi,
+                                    url: `api/proj/save-agent-order/proj-id/${pathParams.projId}`,
+                                    body: {
+                                        basicsId: selectedAgent.basicsId,
+                                        basicsName: selectedAgent.basicsName,
+                                        priceType: priceArray[0],
+                                        price: priceArray[1]
+                                    },
+                                    onBefore() {
+                                        setIsConfirmLoading(true);
+                                    },
+                                    onSuccess() {
+                                        messageApi.success('提交成功', 1000, () => {
+                                            nav(-1);
+                                        });
+                                    },
+                                    onFinally() {
+                                        setIsConfirmLoading(false);
+                                    }
+                                })
+                            }
+                        });
+                    }}>选择</Button>
                 </div>
             </>
         )
@@ -134,42 +259,38 @@ export default function AgentSelect() {
                 items={[
                     {title: <Link to="/">首页</Link>},
                     {title: <Link to="/proj-create">创建项目</Link>},
-                    {
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
-                        title: <a href="/#" onClick={(e) => {
-                            e.preventDefault();
-                            nav(-1)
-                        }}>编辑项目</a>
-                    },
                     {title: '找代理'},
                 ]}
             />
             <div className="agent-select" style={{height: `${height}px`}}>
                 <div className="agent-select-left">
                     <div className="list">
-                        <div className="list-item">
+                        <Spin tip="正在加载" spinning={isAgentListLoading}>
-                            {renderAgent()}
+                            <div className="list-item">
-                        </div>
+                                {renderAgent()}
-                        <div className="load">
+                            </div>
-                            <Button type="text" onClick={() => {
+                            {
-                                setAgentList([
+                                showAgentMoreBtn ? (
-                                    ...agentList,
+                                    <div className="load">
-                                    {
+                                        <Button type="text" onClick={() => {
-                                        id: '3',
+                                            setPage(page + 1);
-                                        logo: '3',
+                                        }}>加载更多...</Button>
-                                        name: '标题3',
+                                    </div>
-                                        desc: '描述3',
+                                ) : <></>
-                                        medal: AgentMedalEnum.SILVER,
+                            }
-                                        certificateImg: '3',
+                        </Spin>
-                                        selected: false
-                                    }
-                                ])
-                            }}>加载更多...</Button>
-                        </div>
                     </div>
                 </div>
-                <div className="agent-select-right">{renderSelectedAgent()}</div>
+                <Spin tip="正在加载" spinning={isAgentLoading}>
+                    <div className="agent-select-right" style={{height: `${height - 30}px`}}>
+                        {renderSelectedAgent()}
+                    </div>
+                </Spin>
             </div>
+            <Spin tip="正在提交" spinning={isConfirmLoading}/>
+            {contextHolder}
+            {modalHolder}
         </>
-
     )
 }

src/route/index/Index.tsx

@@ -0,0 +1,113 @@
+import './index.css';
+import {MouseEvent, Reducer, useReducer} from "react";
+import {Link, useNavigate} from "react-router-dom";
+import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
+import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
+import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
+import ListProj from "../../components/list/ListProj.tsx";
+import ListProjAgent from "../../components/list/ListProjAgent.tsx";
+import {Breadcrumb} from 'antd';
+import {
+    IndexListContext,
+    IndexListDataType,
+    IndexListDispatchContext,
+    ListAction,
+    ListData
+} from "../../context/IndexListContext.ts";
+
+export default function Index() {
+    const nav = useNavigate();
+
+    const listReducer = (state: ListData, action: ListAction) => {
+        if(action.type == IndexListDataType.PROJ) {
+            state.type = IndexListDataType.PROJ;
+            state.status = action.value;
+        } else if(action.type == IndexListDataType.AGENT) {
+            state.type = IndexListDataType.AGENT;
+            state.status = action.value;
+        }
+        return {
+            ...state
+        };
+    }
+
+    const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
+        type: IndexListDataType.PROJ
+    });
+
+    const projMenu: IMenuWithTopButton = {
+        button: {
+            name: '创建项目',
+            handle() {
+                nav('/proj-create')
+            }
+        },
+        list: [
+            {id: 'ALL', name: '全部项目'},
+            {id: 'PROCESSING', name: '进行中的'},
+            {id: 'COMPLETE', name: '已完成的'}
+        ],
+        handleListItem(_e, _index,item: IMenuListItem) {
+            dispatch({
+                type: IndexListDataType.PROJ,
+                value: item.id
+            })
+        }
+    }
+
+    const agentMenu: IMenuWithTopButton = {
+        button: {
+            name: '代理服务',
+            handle() {
+
+            }
+        },
+        list: [
+            {id: 'ALL', name: '全部项目'},
+            {id: 'PROCESSING', name: '进行中的'},
+            {id: 'COMPLETE', name: '已完成的'},
+        ],
+        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
+            dispatch({
+                type: IndexListDataType.AGENT,
+                value: item.id
+            })
+        }
+    }
+
+    return (
+        <>
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>}
+                ]}
+            />
+            <IndexListContext.Provider value={listData}>
+                <IndexListDispatchContext.Provider value={dispatch}>
+                    <div className="index">
+                        <div className="left">
+                            <MenuWithTopButton
+                                button={projMenu.button}
+                                list={projMenu.list}
+                                handleListItem={projMenu.handleListItem}
+                            />
+                            <MenuTreeWithTopButton/>
+                            <MenuWithTopButton
+                                button={agentMenu.button}
+                                list={agentMenu.list}
+                                handleListItem={agentMenu.handleListItem}
+                            />
+                        </div>
+                        <div className="right">
+                            {
+                                listData.type === IndexListDataType.PROJ ? <ListProj/> : (
+                                    listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
+                                )
+                            }
+                        </div>
+                    </div>
+                </IndexListDispatchContext.Provider>
+            </IndexListContext.Provider>
+        </>
+    )
+}

src/route/index/index.tsx

@@ -1,79 +0,0 @@
-import './index.css';
-import {MouseEvent, useState} from "react";
-import {Link, useNavigate} from "react-router-dom";
-import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
-import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
-import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
-import ListProj from "../../components/list/ListProj.tsx";
-import ListProjAgent from "../../components/list/ListProjAgent.tsx";
-import {Breadcrumb} from 'antd';
-
-export default function Index() {
-    const [listType, setListType] = useState('proj');
-    const nav = useNavigate();
-    const projMenu: IMenuWithTopButton = {
-        button: {
-            name: '创建项目',
-            handle() {
-                nav('/proj-create')
-            }
-        },
-        list: [
-            {id: 'proj1', name: '全部项目'},
-            {id: 'proj2', name: '进行中的'},
-            {id: 'proj3', 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', name: '全部项目'},
-            {id: 'agent2', name: '进行中的'},
-            {id: 'agent3', name: '已完成的'},
-        ],
-        handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
-            console.log(e);
-            console.log(index);
-            console.log(item)
-            setListType('projAgent');
-        }
-    }
-
-    return (
-        <>
-            <Breadcrumb
-                items={[
-                    {title: <Link to={'/'}>首页</Link>}
-                ]}
-            />
-            <div className="index">
-                <div className="left">
-                    <MenuWithTopButton
-                        button={projMenu.button}
-                        list={projMenu.list}
-                        handleListItem={projMenu.handleListItem}
-                    />
-                    <MenuTreeWithTopButton/>
-                    <MenuWithTopButton
-                        button={agentMenu.button}
-                        list={agentMenu.list}
-                        handleListItem={agentMenu.handleListItem}
-                    />
-                </div>
-                <div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
-            </div>
-        </>
-    )
-}

src/route/proj/ProjEdit.tsx

@@ -175,7 +175,7 @@ export default function ProjEdit() {
     }
 
     const renderData = () => {
-        get({
+        get<any>({
             messageApi: messageApi,
             url: `/api/proj/get/${pathParams.projId}`,
             onSuccess({data}) {
@@ -346,10 +346,10 @@ export default function ProjEdit() {
                                           window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${pathParams.projId}`)
                                       }}
                     />
-                    <CardProjJump title="跳转"
+                    <CardProjJump title="找代理"
-                                  desc="请完善软件的介绍，详细介绍等基本信息"
+                                  desc="到软著代理完成软著申请"
                                   handleJump={() => {
-                                      nav('/agent-select/2');
+                                      nav(`/agent-select/${pathParams.projId}`);
                                   }}
                     />
                 </StepProjEdit>

src/route/router.tsx

@@ -0,0 +1,134 @@
+import {createBrowserRouter} from "react-router-dom";
+import Index from "../route/index/Index.tsx";
+import ProjCreate from "./proj/ProjCreate.tsx";
+import ProjNew from "./proj/ProjNew.tsx";
+import ProjEdit from "./proj/ProjEdit.tsx";
+import ProjEditStep1 from "./proj/edit/ProjEditStep1.tsx";
+import ProjEditStep1Show from "./proj/edit/ProjEditStep1Show.tsx";
+import ProjEditStep2 from "./proj/edit/ProjEditStep2.tsx";
+import ProjEditStep2Show from "./proj/edit/ProjEditStep2Show.tsx";
+import ProjEditStep3 from "./proj/edit/ProjEditStep3.tsx";
+import ProjEditStep3Show from "./proj/edit/ProjEditStep3Show.tsx";
+import ProjEditStep4 from "./proj/edit/ProjEditStep4.tsx";
+import ProjEditStep4Show from "./proj/edit/ProjEditStep4Show.tsx";
+import ProjEditStep5 from "./proj/edit/ProjEditStep5.tsx";
+import ProjEditStep5Show from "./proj/edit/ProjEditStep5Show.tsx";
+import ProjEditStep6 from "./proj/edit/ProjEditStep6.tsx";
+import ProjEditStep6Show from "./proj/edit/ProjEditStep6Show.tsx";
+import ProjConfigLoginpage from "./proj/edit/ProjConfigLoginpage.tsx";
+import ProjConfigLoginpageShow from "./proj/edit/ProjConfigLoginpageShow.tsx";
+import ProjConfigModList from "./proj/edit/ProjConfigModList.tsx";
+import ProjConfigModListShow from "./proj/edit/ProjConfigModListShow.tsx";
+import ProjConfigModSave from "./proj/edit/ProjConfigModSave.tsx";
+import ProjConfigModEdit from "./proj/edit/ProjConfigModEdit.tsx";
+import ProjConfigModShow from "./proj/edit/ProjConfigModShow.tsx";
+import ProjConfigMenuList from "./proj/edit/ProjConfigMenuList.tsx";
+import ProjConfigMenuListShow from "./proj/edit/ProjConfigMenuListShow.tsx";
+import AgentSelect from "./agent/AgentSelect.tsx";
+
+export const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <Index />
+    },
+    {
+        path: '/proj-create',
+        element: <ProjCreate />
+    },
+    {
+        path: '/proj-new/:projChargeType',
+        element: <ProjNew/>
+    },
+    {
+        path: '/proj-edit/:projId',
+        element: <ProjEdit/>
+    },
+    {
+        path: '/proj-edit/step1/:projId',
+        element: <ProjEditStep1/>
+    },
+    {
+        path: '/proj-edit/step1-show/:projId',
+        element: <ProjEditStep1Show/>
+    },
+    {
+        path: '/proj-edit/step2/:projId',
+        element: <ProjEditStep2/>
+    },
+    {
+        path: '/proj-edit/step2-show/:projId',
+        element: <ProjEditStep2Show/>
+    },
+    {
+        path: '/proj-edit/step3/:projId',
+        element: <ProjEditStep3/>
+    },
+    {
+        path: '/proj-edit/step3-show/:projId',
+        element: <ProjEditStep3Show/>
+    },
+    {
+        path: '/proj-edit/step4/:projId',
+        element: <ProjEditStep4/>
+    },
+    {
+        path: '/proj-edit/step4-show/:projId',
+        element: <ProjEditStep4Show/>
+    },
+    {
+        path: '/proj-edit/step5/:projId',
+        element: <ProjEditStep5/>
+    },
+    {
+        path: '/proj-edit/step5-show/:projId',
+        element: <ProjEditStep5Show/>
+    },
+    {
+        path: '/proj-edit/step6/:projId',
+        element: <ProjEditStep6/>
+    },
+    {
+        path: '/proj-edit/step6-show/:projId',
+        element: <ProjEditStep6Show/>
+    },
+    {
+        path: '/proj-edit/config-loginpage/:projId',
+        element: <ProjConfigLoginpage/>
+    },
+    {
+        path: '/proj-edit/config-loginpage-show/:projId',
+        element: <ProjConfigLoginpageShow/>
+    },
+    {
+        path: '/proj-edit/config-mod-list/:projId',
+        element: <ProjConfigModList/>
+    },
+    {
+        path: '/proj-edit/config-mod-list-show/:projId',
+        element: <ProjConfigModListShow/>
+    },
+    {
+        path: '/proj-edit/config-mod-save/:projId',
+        element: <ProjConfigModSave/>
+    },
+    {
+        path: '/proj-edit/config-mod-edit/:projId/:projModId',
+        element: <ProjConfigModEdit/>
+    },
+    {
+        path: '/proj-edit/config-mod-show/:projId/:projModId',
+        element: <ProjConfigModShow/>
+    },
+    {
+        path: '/proj-edit/config-menu-list/:projId',
+        element: <ProjConfigMenuList/>
+    },
+    {
+        path: '/proj-edit/config-menu-list-show/:projId',
+        element: <ProjConfigMenuListShow/>
+    },
+    {
+        path: '/agent-select/:projId',
+        element: <AgentSelect/>
+    }
+])

src/util/AjaxUtils.ts

@@ -4,13 +4,13 @@ import type {MessageInstance} from "antd/es/message/interface";
 export const Axios = axios;
 export const DevUserId: string = '80d3365e-0597-4988-979e-18ef1c3ec671';
 
-type Req = {
+type Req<T> = {
     messageApi: MessageInstance;
     url: string;
     body?: any;
     config?: AxiosRequestConfig;
     onBefore?(): void;
-    onSuccess(data: AxiosResponse): void;
+    onSuccess(data: AxiosResponse<T>): void;
     onFinally?(): void;
 }
 
@@ -37,7 +37,7 @@ export function uploadFileUrl() {
     return `${Axios.defaults?.baseURL}/api/file/v2/upload-file`;
 }
 
-export function get<T>(req: Req) {
+export function get<T>(req: Req<T>) {
     req.onBefore?.();
     Axios.get<T>(req.url, req.config).then(res => {
         req.onSuccess(res);
@@ -56,7 +56,7 @@ export function get<T>(req: Req) {
     })
 }
 
-export function post<T>(req: Req) {
+export function post<T>(req: Req<T>) {
     req.onBefore?.();
     Axios.post<T>(req.url, req.body, req.config).then(res => {
         req.onSuccess(res);
@@ -75,7 +75,7 @@ export function post<T>(req: Req) {
     })
 }
 
-export function put<T>(req: Req) {
+export function put<T>(req: Req<T>) {
     req.onBefore?.();
     Axios.put<T>(req.url, req.body, req.config).then(res => {
         req.onSuccess(res);
@@ -94,7 +94,7 @@ export function put<T>(req: Req) {
     })
 }
 
-export function del<T>(req: Req) {
+export function del<T>(req: Req<T>) {
     req.onBefore?.();
     Axios.delete<T>(req.url, req.config).then(res => {
         req.onSuccess(res);