From c412ff3ec62d31765151371b665083910d0f2bc9 Mon Sep 17 00:00:00 2001 From: WenC <450292408@qq.com> Date: Wed, 27 Mar 2024 18:56:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BB=A3=E7=90=86=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1=E9=80=89=E6=8B=A9=E5=92=8C=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/card/CardAgent.tsx | 5 +- src/components/card/CardProjAgent.tsx | 78 +++++-- src/components/card/card-agent.css | 4 +- src/components/list/ListProj.tsx | 57 +++-- src/components/list/ListProjAgent.tsx | 105 +++++++-- src/context/GlobalContext.ts | 2 - src/context/IndexListContext.ts | 22 ++ src/interfaces/agent/IAgent.ts | 21 ++ src/interfaces/listpage/IListPage.ts | 5 + src/layout/body/Body.tsx | 137 +----------- src/layout/head/Head.tsx | 2 +- src/route/agent/AgentSelect.tsx | 303 ++++++++++++++++++-------- src/route/index/Index.tsx | 113 ++++++++++ src/route/index/index.tsx | 79 ------- src/route/proj/ProjEdit.tsx | 8 +- src/route/router.tsx | 134 ++++++++++++ src/util/AjaxUtils.ts | 12 +- 17 files changed, 698 insertions(+), 389 deletions(-) create mode 100644 src/context/IndexListContext.ts create mode 100644 src/interfaces/agent/IAgent.ts create mode 100644 src/interfaces/listpage/IListPage.ts create mode 100644 src/route/index/Index.tsx delete mode 100644 src/route/index/index.tsx create mode 100644 src/route/router.tsx diff --git a/src/components/card/CardAgent.tsx b/src/components/card/CardAgent.tsx index 39d81ef..812a72c 100644 --- a/src/components/card/CardAgent.tsx +++ b/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(); }}>
- {props.logo ? : <>} + {props.logo ? : <>} {props.name} {renderMedal()}
-
{props.desc}
+
diff --git a/src/components/card/CardProjAgent.tsx b/src/components/card/CardProjAgent.tsx index 4b6828d..81300ea 100644 --- a/src/components/card/CardProjAgent.tsx +++ b/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 待结单; + } + if(props.isTake == 1) { + return 已接单; + } + if(props.isTake == 2) { + return 未接单; + } + return <>; + } + + /** + * 签订状态 + */ + const renderAgreementStatus = () => { + if(props.isAgreement == 0) { + return 未签署协议; + } + if(props.isAgreement == 1) { + return 已签署协议; + } + return <>; + } + + /** + * 结束状态 + */ + const renderOverStatus = () => { + if(props.isOver == 0) { + return 进行中; + } + if(props.isOver == 1) { + return 完成; + } + if(props.isOver == 2) { + return 终止 + } + return <>; + } -export default function CardProjAgent() { return (
- 项目名称 + {props.projName}
- 代理商:SDFSDF - 订单号:XXXXXXXXXXXXX + 代理商:{props.basicsName} + 订单号:{props.orderNumber}

- 金额¥:500 + 金额¥:{props.orderShoppingAmount / 100}
- 2024-03-05 17:22:02 + {props.gmtCreate}
@@ -32,7 +79,7 @@ export default function CardProjAgent() { - 补正数量 + 补正数量({props.materialAmendApplyCount})
@@ -45,20 +92,9 @@ export default function CardProjAgent() {

- - 待结单 - 已接单 - 未接单 - - - 已签署协议 - 未签署协议 - - - 进行中 - 完成 - 终止 - + {renderTakeStatus()} + {renderAgreementStatus()} + {renderOverStatus()}
) diff --git a/src/components/card/card-agent.css b/src/components/card/card-agent.css index 60c4a27..d3b53a3 100644 --- a/src/components/card/card-agent.css +++ b/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; } \ No newline at end of file diff --git a/src/components/list/ListProj.tsx b/src/components/list/ListProj.tsx index 47aaa59..4ede2d8 100644 --- a/src/components/list/ListProj.tsx +++ b/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 {Input, Pagination, message} from 'antd'; -import type {SearchProps} from 'antd/es/input/Search'; +import {useRef, MutableRefObject, useState, useEffect, useContext} from "react"; +import {Input, Pagination, message, Spin} from 'antd'; 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 = useRef(null); const listRef: MutableRefObject = 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([]); + const [isLoading, setIsLoading] = useState(false); + const [keywords, setKeywords] = useState(''); const domHeight = window.innerHeight - 280; const reqData = (currentPage: number) => { - get({ + get>({ 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}
- + { + setKeywords(value) + }} style={{width: 200}}/>
-
- {renderList()} -
-
- { - setPage(page); - reqData(page); - }}/> -
+ +
+ {renderList()} +
+
+ { + setPage(page); + }}/> +
+
diff --git a/src/components/list/ListProjAgent.tsx b/src/components/list/ListProjAgent.tsx index a602fa1..400b01f 100644 --- a/src/components/list/ListProjAgent.tsx +++ b/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 {Input, Pagination} from 'antd'; -import type {SearchProps} from 'antd/es/input/Search'; +import {useRef, MutableRefObject, useEffect, useState, useContext} from "react"; +import {Input, Pagination, Spin} from 'antd'; +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 = useRef(null); const listRef: MutableRefObject = useRef(null); - const domHeight = window.innerHeight - 301; + + const [page, setPage] = useState(1); + const [total, setTotal] = useState(0); + const [agents, setAgents] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [keywords, setKeywords] = useState(''); + const domHeight = window.innerHeight - 280; + + useEffect(() => { + get>({ + 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 ( -
-
- -
-
-
- - - - - - + <> +
+
+ { + setKeywords(value) + }} style={{width: 200}}/>
-
- +
+ +
+ { + agents.map(item => ) + } +
+
+
+ +
-
+ {messageApiHolder} + ) } \ No newline at end of file diff --git a/src/context/GlobalContext.ts b/src/context/GlobalContext.ts index 025f8b7..27ec494 100644 --- a/src/context/GlobalContext.ts +++ b/src/context/GlobalContext.ts @@ -15,8 +15,6 @@ export interface GlobalData { user: User; } - - export interface GlobalDataAction { type: number; user?: User; diff --git a/src/context/IndexListContext.ts b/src/context/IndexListContext.ts new file mode 100644 index 0000000..b1b91b5 --- /dev/null +++ b/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({ + type: IndexListDataType.PROJ +}) + +export const IndexListDispatchContext = createContext>(() => {}) \ No newline at end of file diff --git a/src/interfaces/agent/IAgent.ts b/src/interfaces/agent/IAgent.ts new file mode 100644 index 0000000..f220a24 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/interfaces/listpage/IListPage.ts b/src/interfaces/listpage/IListPage.ts new file mode 100644 index 0000000..1764b05 --- /dev/null +++ b/src/interfaces/listpage/IListPage.ts @@ -0,0 +1,5 @@ +export interface IListPage { + page: number; + total: number; + rows: T[] +} \ No newline at end of file diff --git a/src/layout/body/Body.tsx b/src/layout/body/Body.tsx index e36e414..27f9274 100644 --- a/src/layout/body/Body.tsx +++ b/src/layout/body/Body.tsx @@ -1,139 +1,6 @@ import './body.css' -import {createBrowserRouter, RouterProvider} from 'react-router-dom'; -import Index from '../../route/index'; -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: - }, - { - path: '/proj-create', - element: - }, - { - path: '/proj-new/:projChargeType', - element: - }, - { - path: '/proj-edit/:projId', - element: - }, - { - path: '/proj-edit/step1/:projId', - element: - }, - { - path: '/proj-edit/step1-show/:projId', - element: - }, - { - path: '/proj-edit/step2/:projId', - element: - }, - { - path: '/proj-edit/step2-show/:projId', - element: - }, - { - path: '/proj-edit/step3/:projId', - element: - }, - { - path: '/proj-edit/step3-show/:projId', - element: - }, - { - path: '/proj-edit/step4/:projId', - element: - }, - { - path: '/proj-edit/step4-show/:projId', - element: - }, - { - path: '/proj-edit/step5/:projId', - element: - }, - { - path: '/proj-edit/step5-show/:projId', - element: - }, - { - path: '/proj-edit/step6/:projId', - element: - }, - { - path: '/proj-edit/step6-show/:projId', - element: - }, - { - path: '/proj-edit/config-loginpage/:projId', - element: - }, - { - path: '/proj-edit/config-loginpage-show/:projId', - element: - }, - { - path: '/proj-edit/config-mod-list/:projId', - element: - }, - { - path: '/proj-edit/config-mod-list-show/:projId', - element: - }, - { - path: '/proj-edit/config-mod-save/:projId', - element: - }, - { - path: '/proj-edit/config-mod-edit/:projId/:projModId', - element: - }, - { - path: '/proj-edit/config-mod-show/:projId/:projModId', - element: - }, - { - path: '/proj-edit/config-menu-list/:projId', - element: - }, - { - path: '/proj-edit/config-menu-list-show/:projId', - element: - }, - { - path: '/agent-select/:projId', - element: - } -]) +import {RouterProvider} from 'react-router-dom'; +import {router} from "../../route/router.tsx"; export default function Body() { const winHeight: number = window.innerHeight diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx index 43a3cdd..8bc17f6 100644 --- a/src/layout/head/Head.tsx +++ b/src/layout/head/Head.tsx @@ -19,7 +19,7 @@ export default function Head() { const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false); useEffect(() => { - get({ + get({ messageApi, url: '/api/user-info/get-user-self', onSuccess({data}) { diff --git a/src/route/agent/AgentSelect.tsx b/src/route/agent/AgentSelect.tsx index 6906923..1534181 100644 --- a/src/route/agent/AgentSelect.tsx +++ b/src/route/agent/AgentSelect.tsx @@ -1,39 +1,124 @@ import './agent-select.css'; -import {Link, useNavigate} from "react-router-dom"; -import {Breadcrumb, Button, Divider, Image, Radio, RadioChangeEvent} from "antd"; +import {Link, useNavigate, useParams} from "react-router-dom"; +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([]); const [selectedAgentId, setSelectedAgentId] = useState('0'); - const [selectedAgent, setSelectedAgent] = useState({}); + const [showAgentMoreBtn, setShowAgentMoreBtn] = useState(true); + const [isAgentListLoading, setIsAgentListLoading] = useState(false); + const [selectedAgent, setSelectedAgent] = useState(); + const [isAgentLoading, setIsAgentLoading] = useState(false); + const [selectedPriceValue, setSelectedPriceValue] = useState(''); + const [isConfirmLoading, setIsConfirmLoading] = useState(false); - // 列表 - const [agentList, setAgentList] = useState([{ - id: '1', - logo: '1', - name: '标题1', - desc: '描述1', - medal: AgentMedalEnum.GOLD, - certificateImg: '1', - selected: false - }, { - id: '2', - logo: '2', - name: '标题2', - desc: '描述2', - medal: AgentMedalEnum.GOLD, - certificateImg: '1', - selected: false - }]); + + const getSelectedAgentData = (basicsId: string) => { + get({ + messageApi, + url: `/api/agent/get/${basicsId}`, + onBefore() { + setIsAgentLoading(true); + }, + onSuccess({data}) { + setSelectedAgent({ + ...data + }); + setSelectedPriceValue(`${data.priceDTOS[0].priceType}:${data.priceDTOS[0].typePrice}`) + }, + onFinally() { + setIsAgentLoading(false); + } + }) + } + + useEffect(() => { + get>({ + 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 => ( + + )) + } + + const renderPrice = (prices: AgentPrice[]) => { + if (!prices) { + return <> + } + return prices.map((price, index) => {price.priceTypeText}¥:{(price.typePrice / 100)}) + } + const renderSelectedAgent = () => { - if (Object.keys(selectedAgent).length == 0) { + if (!selectedAgent) { return ( - <> -
- - 请选择左侧机构 -
- +
+ + 请选择左侧机构 +
) } return ( @@ -69,44 +177,25 @@ export default function AgentSelect() {
机构信息
-
北京九思恒源科技有限公司
-
- 雄厚的技术与人才实力,赢得了客户的深厚信赖,获得了政府部门的高度认可,公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时,公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程,缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。 -
+
{selectedAgent.basicsName}
+
机构证书
-
- - - - -
+
{renderCertifications(selectedAgent.basicsId)}
- 联系人:XXXXXX - 联系电话:13888888888 + 联系人:{selectedAgent.basicsContactPerson} + 联系电话:{selectedAgent.basicsContactNumber}
- 联系地址:内蒙古呼和浩特新城区XXXXXX + 联系地址:{selectedAgent.basicsAddresss}
@@ -114,15 +203,51 @@ export default function AgentSelect() {
价格种类: { - console.log('radio checked', e.target.value); - setValue(e.target.value); - }} value={value}> - 普通件:200 - 加急件:400 - + setSelectedPriceValue(e.target.value); + }} defaultValue={selectedPriceValue}>{renderPrice(selectedAgent.priceDTOS)}
- +
) @@ -134,42 +259,38 @@ export default function AgentSelect() { items={[ {title: 首页}, {title: 创建项目}, - { - title: { - e.preventDefault(); - nav(-1) - }}>编辑项目 - }, + {title: 编辑项目}, {title: '找代理'}, ]} />
-
- {renderAgent()} -
-
- -
+ +
+ {renderAgent()} +
+ { + showAgentMoreBtn ? ( +
+ +
+ ) : <> + } +
-
{renderSelectedAgent()}
+ +
+ {renderSelectedAgent()} +
+
+ + {contextHolder} + {modalHolder} - ) } \ No newline at end of file diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx new file mode 100644 index 0000000..38f37ac --- /dev/null +++ b/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>(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, _index: number, item: IMenuListItem) { + dispatch({ + type: IndexListDataType.AGENT, + value: item.id + }) + } + } + + return ( + <> + 首页} + ]} + /> + + +
+
+ + + +
+
+ { + listData.type === IndexListDataType.PROJ ? : ( + listData.type == IndexListDataType.AGENT ? : <> + ) + } +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/route/index/index.tsx b/src/route/index/index.tsx deleted file mode 100644 index ff03dc2..0000000 --- a/src/route/index/index.tsx +++ /dev/null @@ -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, index: number, item: IMenuListItem) { - console.log(e); - console.log(index); - console.log(item) - setListType('proj'); - } - } - - const agentMenu: IMenuWithTopButton = { - button: { - name: '代理服务', - handle(e: MouseEvent) { - console.log(e) - } - }, - list: [ - {id: 'agent1', name: '全部项目'}, - {id: 'agent2', name: '进行中的'}, - {id: 'agent3', name: '已完成的'}, - ], - handleListItem(e: MouseEvent, index: number, item: IMenuListItem) { - console.log(e); - console.log(index); - console.log(item) - setListType('projAgent'); - } - } - - return ( - <> - 首页} - ]} - /> -
-
- - - -
-
{listType === 'proj' ? : }
-
- - ) -} \ No newline at end of file diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx index 6502f51..507fc47 100644 --- a/src/route/proj/ProjEdit.tsx +++ b/src/route/proj/ProjEdit.tsx @@ -175,7 +175,7 @@ export default function ProjEdit() { } const renderData = () => { - get({ + get({ 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}`) }} /> - { - nav('/agent-select/2'); + nav(`/agent-select/${pathParams.projId}`); }} /> diff --git a/src/route/router.tsx b/src/route/router.tsx new file mode 100644 index 0000000..9279b9c --- /dev/null +++ b/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: + }, + { + path: '/proj-create', + element: + }, + { + path: '/proj-new/:projChargeType', + element: + }, + { + path: '/proj-edit/:projId', + element: + }, + { + path: '/proj-edit/step1/:projId', + element: + }, + { + path: '/proj-edit/step1-show/:projId', + element: + }, + { + path: '/proj-edit/step2/:projId', + element: + }, + { + path: '/proj-edit/step2-show/:projId', + element: + }, + { + path: '/proj-edit/step3/:projId', + element: + }, + { + path: '/proj-edit/step3-show/:projId', + element: + }, + { + path: '/proj-edit/step4/:projId', + element: + }, + { + path: '/proj-edit/step4-show/:projId', + element: + }, + { + path: '/proj-edit/step5/:projId', + element: + }, + { + path: '/proj-edit/step5-show/:projId', + element: + }, + { + path: '/proj-edit/step6/:projId', + element: + }, + { + path: '/proj-edit/step6-show/:projId', + element: + }, + { + path: '/proj-edit/config-loginpage/:projId', + element: + }, + { + path: '/proj-edit/config-loginpage-show/:projId', + element: + }, + { + path: '/proj-edit/config-mod-list/:projId', + element: + }, + { + path: '/proj-edit/config-mod-list-show/:projId', + element: + }, + { + path: '/proj-edit/config-mod-save/:projId', + element: + }, + { + path: '/proj-edit/config-mod-edit/:projId/:projModId', + element: + }, + { + path: '/proj-edit/config-mod-show/:projId/:projModId', + element: + }, + { + path: '/proj-edit/config-menu-list/:projId', + element: + }, + { + path: '/proj-edit/config-menu-list-show/:projId', + element: + }, + { + path: '/agent-select/:projId', + element: + } +]) \ No newline at end of file diff --git a/src/util/AjaxUtils.ts b/src/util/AjaxUtils.ts index 6e85f3c..1d35610 100644 --- a/src/util/AjaxUtils.ts +++ b/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 = { messageApi: MessageInstance; url: string; body?: any; config?: AxiosRequestConfig; onBefore?(): void; - onSuccess(data: AxiosResponse): void; + onSuccess(data: AxiosResponse): void; onFinally?(): void; } @@ -37,7 +37,7 @@ export function uploadFileUrl() { return `${Axios.defaults?.baseURL}/api/file/v2/upload-file`; } -export function get(req: Req) { +export function get(req: Req) { req.onBefore?.(); Axios.get(req.url, req.config).then(res => { req.onSuccess(res); @@ -56,7 +56,7 @@ export function get(req: Req) { }) } -export function post(req: Req) { +export function post(req: Req) { req.onBefore?.(); Axios.post(req.url, req.body, req.config).then(res => { req.onSuccess(res); @@ -75,7 +75,7 @@ export function post(req: Req) { }) } -export function put(req: Req) { +export function put(req: Req) { req.onBefore?.(); Axios.put(req.url, req.body, req.config).then(res => { req.onSuccess(res); @@ -94,7 +94,7 @@ export function put(req: Req) { }) } -export function del(req: Req) { +export function del(req: Req) { req.onBefore?.(); Axios.delete(req.url, req.config).then(res => { req.onSuccess(res);