Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

上传搜索的页面

This commit is contained in:
何童崇 2021-06-03 10:37:03 +08:00
parent 695d5e4f50
commit dd9c11dbd9
4 changed files with 325 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -73,6 +73,10 @@ const EducoderLogin = Loadable({
loader: () => import('./modules/login/EducoderLogin'),
loading: Loading,
})
const Search = Loadable({
loader: () => import('./modules/search/'),
loading: Loading,
})
class App extends Component {
constructor(props) {
@ -247,6 +251,10 @@ class App extends Component {
</Route>
{/*404*/}
<Route path="/nopage" component={Shixunnopage} />
{/* 查询 */}
<Route path="/search" component={Search} />
{/* 个人主页 */}
<Route path="/users/:username"
render={

31
src/modules/search/ItemList.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import './index.scss';
export default (props) => {
const { list } = props;
function itemClick(item) {
item.url && window.open(item.url);
}
return (
list.map((item, i) => {
return (
<div className="search-item" key={item.id}>
<div className="search-item-tit">
<h3 className="search-item-title" dangerouslySetInnerHTML={{ __html: item.title }} onClick={() => { itemClick(item) }}></h3>
{item.type == 1 && <p>
<span className="search-icon"><i className="iconfont icon-dianjiliang mr3 font-12" />{item.watchersCount}</span>
<span className="search-icon"><i className="iconfont icon-kongxing mr3 font-16" />{item.praisesCount}</span>
<span className="search-icon"><i className="iconfont icon-fork mr3 font-16" />{item.forkedCount}</span>
</p>}
</div >
<p className="search-item-content" dangerouslySetInnerHTML={{ __html: item.content }}></p>
<div>{item.updateTime}</div>
</div>
)
})
)
}

204
src/modules/search/index.jsx Normal file
View File

@ -0,0 +1,204 @@
import React, { useEffect, useState } from 'react';
import { Input, Row, Col, Tabs, Pagination } from 'antd';
import axios from 'axios';
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
import { SnackbarHOC } from 'educoder';
import ItemList from './ItemList';
import Nodata from '../../forge/Nodata';
import './index.scss';
const { Search } = Input;
const { TabPane } = Tabs;
// const https = 'http://192.168.0.77:8081'; //曾伟内网后台
// const https = 'http://192.168.31.104:8081'; //曾伟外网后台
const https='http://106.75.31.211:58081';
const GlobalSearch = ({ location, showNotification }) => {
const size = 10;
let defaultValue = decodeURI(location.search.split("=")[1] || "");
const [term, setTerm] = useState(defaultValue);
const [type, setType] = useState(1);
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [dataList, setDataList] = useState([]);
const [forcesearch, setForcesearch] = useState(false);
const [totalType1, setTotalType1] = useState(0);
const [totalType2, setTotalType2] = useState(0);
const [totalType3, setTotalType3] = useState(0);
const [totalType4, setTotalType4] = useState(0);
useEffect(() => {
setTerm(defaultValue);
}, defaultValue)
useEffect(() => {
searchDataList();
}, [type, page, term, forcesearch]);
function searchFun(val) {
setTerm(val);
setPage(1);
setForcesearch(!forcesearch);
}
function searchDataList() {
const url = https + '/search';
axios.defaults.withCredentials = true;
axios.get(url, {
params: {
page,
size,
term,
type,
}
}).then(res => {
if (res && res.status === 200 && res.data && res.data.code === '1') {
const data = res.data.data;
setDataList(data.rows);
setTotal(data.total);
for (const item of data.searchItemTypes) {
if (item.type == 1) {
setTotalType1(item.count);
} else if (item.type == 2) {
setTotalType2(item.count);
} else if (item.type == 3) {
setTotalType3(item.count);
} else if (item.type == 4) {
setTotalType4(item.count);
}
}
} else if (res && res.data) {
showNotification(res.data.data.message);
setDataList([]);
setTotal(0);
} else {
showNotification('查询失败！');
setDataList([]);
setTotal(0);
}
}).catch(err => {
showNotification('查询失败！返回错误');
setDataList([]);
setTotal(0);
})
}
function changeTab(type) {
setType(type);
setPage(1);
}
return (
<div className="suit-main clearfix">
<div className="search-head">
<Row className="search-box">
<Col xs={20} sm={16} lg={13} >
<Search
placeholder="输入关键字进行搜索"
enterButton="搜索"
size="large"
onSearch={searchFun}
className="global-search"
defaultValue={term}
/>
</Col>
</Row>
</div>
<Tabs defaultActiveKey="1" onChange={changeTab}>
<TabPane tab={`项目（${totalType1}）`} key={1}>
<div className="search-content">
<p>{`找到${totalType1}条结果`}</p>
<ItemList
list={dataList}
/>
</div>
{
dataList.length ?
<Pagination
showQuickJumper={dataList.length > size}
onChange={(page) => { setPage(page) }}
current={page}
total={total}
showTotal={total => `共 ${total} 条`}
/>
: <Nodata _html="暂无数据" className="no-data-box"/>
}
</TabPane>
<TabPane tab={`帖子（${totalType2}）`} key="2">
<div className="search-content">
<p>{`找到${totalType2}条结果`}</p>
<ItemList
list={dataList}
/>
</div>
{
dataList.length ?
<Pagination
showQuickJumper={dataList.length > size}
onChange={(page) => { setPage(page) }}
current={page}
total={total}
showTotal={total => `共 ${total} 条`}
/> : <Nodata _html="暂无数据" />
}
</TabPane>
<TabPane tab={`众包任务（${totalType3}）`} key={3}>
<div className="search-content">
<p>{`找到${totalType3}条结果`}</p>
<ItemList
list={dataList}
/>
</div>
{
dataList.length ?
<Pagination
showQuickJumper={dataList.length > size}
onChange={(page) => { setPage(page) }}
current={page}
total={total}
showTotal={total => `共 ${total} 条`}
/> : <Nodata _html="暂无数据" />
}
</TabPane>
<TabPane tab={`资源（${totalType4}）`} key="4">
<div className="search-content">
<p>{`找到${totalType4}条结果`}</p>
<ItemList
list={dataList}
/>
</div>
{
dataList.length ?
<Pagination
showQuickJumper={dataList.length > size}
onChange={(page) => { setPage(page) }}
current={page}
total={total}
showTotal={total => `共 ${total} 条`}
/> : <Nodata _html="暂无数据" />
}
</TabPane>
</Tabs>
</div>
);
// }
}
export default SnackbarHOC()(TPMIndexHOC(GlobalSearch));

82
src/modules/search/index.scss Normal file
View File

@ -0,0 +1,82 @@
.suit-main {
.search-head {
background: #eef2f5;
}
.search-box {
width: 1200px;
height: 110px;
margin: 0 auto;
}
.global-search {
margin-top: 40px;
}
.ant-tabs-top {
background: #eef2f5;
}
.ant-tabs-tabpane {
background: #fff;
}
.ant-tabs-bar {
width: 1200px;
margin: 0 auto;
}
.ant-tabs-tab-active {
color: #000;
font-weight: 600;
}
.ant-tabs-nav .ant-tabs-tab:hover {
color: #000;
font-weight: 600;
}
/* 列表 */
.search-content {
width: 1200px;
margin: 1.5vw auto;
p{
margin-bottom: .75em !important;
}
}
.search-item {
padding: .75em 0;
border-top:1px solid #e1e4e8;
.search-item-tit{
display: flex;
justify-content: space-between;
}
.search-item-title{
cursor: pointer;
&:hover{
color: #1890ff;
}
span{
color: #1890ff;
}
}
.search-item-content{
span{
color: #1890ff;
}
}
.search-icon{
margin-right: 2em;
color: #aaa;
}
}
.ant-pagination{
text-align: center;
margin-bottom: 3vw;
}
.none_panels{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
height: 40vh;
}
}