286 lines
12 KiB
TypeScript
286 lines
12 KiB
TypeScript
import './index.css';
|
|
// import { MouseEvent, Reducer, useEffect, useReducer, useState, useContext } from "react";
|
|
import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
|
|
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";
|
|
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
|
|
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
|
|
import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
|
|
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
|
|
// import ListProj from "../../components/list/ListProj.tsx";
|
|
// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
|
|
import { MenuProps } from 'antd';
|
|
import {
|
|
IndexListContext,
|
|
IndexListDataType,
|
|
IndexListDispatchContext,
|
|
ListAction,
|
|
ListData,
|
|
} from "../../context/IndexListContext.ts";
|
|
|
|
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
import gpsImg from '../../static/right/gps.png'
|
|
import backImg from '../../static/right/back.png'
|
|
import { Link } from "react-router-dom";
|
|
import { Input, Breadcrumb } from 'antd';
|
|
const { Search } = Input;
|
|
|
|
|
|
|
|
export default function Index() {
|
|
|
|
// const [keywords, setKeywords] = useState('');
|
|
// const indexListContext = useContext(IndexListContext);
|
|
|
|
|
|
|
|
const nav = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const listReducer = (state: ListData, action: ListAction) => {
|
|
if (action.type == IndexListDataType.PROJ) {
|
|
state.type = IndexListDataType.PROJ;
|
|
state.status = action.value as string;
|
|
} else if (action.type == IndexListDataType.AGENT) {
|
|
state.type = IndexListDataType.AGENT;
|
|
state.status = action.value as string;
|
|
} else if (action.type == IndexListDataType.CATEGORY) {
|
|
state.categorys = action.value as MenuProps['items'];
|
|
state.categoryChangeCount++;
|
|
} else if (action.type == IndexListDataType.CATEGORY_CHANGE) {
|
|
state.category = action.value as string;
|
|
state.categoryChangeCount++;
|
|
} else if (action.type == IndexListDataType.CATEGORY_DELETE) {
|
|
state.categorys = action.value as MenuProps['items'];
|
|
state.category = '';
|
|
state.categoryChangeCount++;
|
|
}
|
|
return {
|
|
...state
|
|
};
|
|
}
|
|
|
|
const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
|
|
type: IndexListDataType.PROJ,
|
|
categoryChangeCount: 0
|
|
});
|
|
|
|
const [projMenu, setProjMenu] = useState<IMenuWithTopButton>({
|
|
button: {
|
|
name: '项目',
|
|
handle() {
|
|
nav('/proj-create')
|
|
}
|
|
},
|
|
list: [
|
|
{ id: 'ALL', name: '全部项目', active: true },
|
|
{ id: 'PROCESSING', name: '进行中的' },
|
|
{ id: 'COMPLETE', name: '已完成的' }
|
|
],
|
|
handleListItem(_e, _index, item: IMenuListItem) {
|
|
projMenu.list.forEach(item => item.active = false);
|
|
agentMenu.list.forEach(item => item.active = false);
|
|
item.active = true;
|
|
setProjMenu({
|
|
...projMenu
|
|
})
|
|
dispatch({
|
|
type: IndexListDataType.PROJ,
|
|
value: item.id,
|
|
// keywords: ''
|
|
|
|
})
|
|
// sessionStorage.setItem('listType', String(IndexListDataType.PROJ));
|
|
// sessionStorage.setItem('listType', String(IndexListDataType.AGENT));
|
|
// console.log(IndexListDataType.PROJ);
|
|
// console.log(sessionStorage.getItem('listType'));
|
|
|
|
|
|
// nav('/home', {
|
|
// state: {
|
|
// listType: '0',
|
|
// }
|
|
|
|
// })
|
|
},
|
|
|
|
});
|
|
const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
|
|
button: {
|
|
name: '代理服务',
|
|
handle() {
|
|
dispatch({
|
|
type: IndexListDataType.PROJ,
|
|
value: 'COMPLETE',
|
|
})
|
|
}
|
|
},
|
|
list: [
|
|
{ id: 'ALL', name: '全部项目' },
|
|
{ id: 'PROCESSING', name: '进行中的' },
|
|
{ id: 'COMPLETE', name: '已完成的' },
|
|
],
|
|
handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
|
|
projMenu.list.forEach(item => item.active = false);
|
|
agentMenu.list.forEach(item => item.active = false);
|
|
item.active = true;
|
|
setAgentMenu({
|
|
...agentMenu
|
|
})
|
|
dispatch({
|
|
type: IndexListDataType.AGENT,
|
|
value: item.id,
|
|
|
|
})
|
|
}
|
|
})
|
|
const location = useLocation()
|
|
const [now, setNow] = useState<string>('首页')
|
|
// 编辑项目路由名
|
|
// const [editname,setEditname] = useState('')
|
|
// 新建项目路由名字
|
|
// const [newname,setNewname] = useState('')
|
|
|
|
const [pathArray, setPathArray] = useState<any>([])
|
|
useEffect(() => {
|
|
// const nowname = sessionStorage.getItem('now')
|
|
console.log('路由名字', location.pathname);
|
|
if (location.pathname.includes('/home')) {
|
|
setNow('首页')
|
|
setPathArray([{ title: '首页' }])
|
|
} else if (location.pathname.includes('/proj-create')) {
|
|
setNow('创建项目')
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }])
|
|
//
|
|
} else if (location.pathname.includes('/proj-edit') && !location.pathname.includes('/step') &&!location.pathname.includes('/config-loginpage') ) {
|
|
setNow('编辑项目')
|
|
// setEditname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
|
|
} else if (location.pathname.includes('/proj-new')) {
|
|
setNow('新建项目')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '新建项目' }])
|
|
} else if (location.pathname.includes('/proj-efree')) {
|
|
setNow('编辑项目')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
|
|
} else if (location.pathname.includes('/proj-eall')) {
|
|
setNow('编辑项目')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
|
|
} else if (location.pathname.includes('/proj-edit/step1')) {
|
|
setNow('标题简介')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '标题简介' }])
|
|
} else if (location.pathname.includes('/proj-edit/step2')) {
|
|
setNow('标题简介')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '基本信息' }])
|
|
}else if (location.pathname.includes('/proj-edit/config-loginpage')) {
|
|
setNow('登录界面设置')
|
|
// setNewname(location.pathname)
|
|
setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '登录界面设置' }])
|
|
}
|
|
|
|
}, [location.pathname])
|
|
useEffect(() => {
|
|
|
|
sessionStorage.setItem('pathArray', JSON.stringify([{ title: <Link to={'/home'}>首页</Link> }]));
|
|
sessionStorage.setItem('now', '首页');
|
|
if (searchParams.get('type') == 'agent') {
|
|
dispatch({
|
|
type: IndexListDataType.AGENT,
|
|
value: 'ALL',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
}, []);
|
|
|
|
// useEffect(() => {
|
|
// console.log('监听',keywords);
|
|
// }, [keywords]);
|
|
|
|
const handleSearch = (value: string) => {
|
|
console.log(value);
|
|
nav('/home', {
|
|
state: {
|
|
keyword: value
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<>
|
|
{/* <Breadcrumb
|
|
items={[
|
|
{title: <Link to={'/'}>首页</Link>}
|
|
]}
|
|
/> */}
|
|
<IndexListContext.Provider value={listData} >
|
|
<IndexListDispatchContext.Provider value={dispatch}>
|
|
<div className="index">
|
|
<div className="left">
|
|
<div style={{height:'15px',width:'230px',background:'white'}}></div>
|
|
<MenuWithTopButton
|
|
button={projMenu.button}
|
|
list={projMenu.list}
|
|
handleListItem={projMenu.handleListItem}
|
|
/>
|
|
<MenuTreeWithTopButton />
|
|
<MenuWithBottomButtom
|
|
button={agentMenu.button}
|
|
list={agentMenu.list}
|
|
handleListItem={agentMenu.handleListItem}
|
|
/>
|
|
{/* <MenuWithBottomButtom
|
|
button={agentMenu.button}
|
|
list={agentMenu.list}
|
|
handleListItem={agentMenu.handleListItem}
|
|
/> */}
|
|
</div>
|
|
<div className="right">
|
|
<div>
|
|
<div className="top">
|
|
{/* 标签 */}
|
|
{/* {renderStatus()} */}
|
|
<div className='gps'>
|
|
<img src={gpsImg} alt="" />
|
|
<div>当前位置:{now}</div>
|
|
</div>
|
|
<div className='line'></div>
|
|
<Search placeholder="输入项目名称" onSearch={handleSearch} style={{
|
|
width: '253px',
|
|
height: '31px',
|
|
}} />
|
|
<div className='nowPosition'>
|
|
<img src={backImg} alt="" />
|
|
<div>
|
|
<Breadcrumb
|
|
separator="|"
|
|
// items={[
|
|
// { title: <Link to={'/home'}>首页</Link> },
|
|
// ]}
|
|
items={pathArray}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* {
|
|
listData.type === IndexListDataType.PROJ ? <ListProj/> : (
|
|
listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
|
|
)
|
|
} */}
|
|
<div>
|
|
<Outlet></Outlet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</IndexListDispatchContext.Provider>
|
|
</IndexListContext.Provider>
|
|
</>
|
|
)
|
|
} |