diff --git a/src/App.js b/src/App.js index 556d5c4d..5105d3ec 100644 --- a/src/App.js +++ b/src/App.js @@ -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 { {/*404*/} + + {/* 查询 */} + + {/* 个人主页 */} { + const { list } = props; + + function itemClick(item) { + item.url && window.open(item.url); + } + + return ( + + list.map((item, i) => { + return ( +
+
+

{ itemClick(item) }}>

+ + {item.type == 1 &&

+ {item.watchersCount} + {item.praisesCount} + {item.forkedCount} +

} + +
+

+
{item.updateTime}
+
+ ) + }) + ) +} \ No newline at end of file diff --git a/src/modules/search/index.jsx b/src/modules/search/index.jsx new file mode 100644 index 00000000..a93d6f02 --- /dev/null +++ b/src/modules/search/index.jsx @@ -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 ( +
+
+ + + + + + +
+ + + + +
+

{`找到${totalType1}条结果`}

+ +
+ { + dataList.length ? + size} + onChange={(page) => { setPage(page) }} + current={page} + total={total} + showTotal={total => `共 ${total} 条`} + /> + : + } + + + +
+

{`找到${totalType2}条结果`}

+ +
+ { + dataList.length ? + size} + onChange={(page) => { setPage(page) }} + current={page} + total={total} + showTotal={total => `共 ${total} 条`} + /> : + } + + + +
+

{`找到${totalType3}条结果`}

+ +
+ { + dataList.length ? + size} + onChange={(page) => { setPage(page) }} + current={page} + total={total} + showTotal={total => `共 ${total} 条`} + /> : + } + + + +
+

{`找到${totalType4}条结果`}

+ +
+ { + dataList.length ? + size} + onChange={(page) => { setPage(page) }} + current={page} + total={total} + showTotal={total => `共 ${total} 条`} + /> : + } + + + +
+ ); + // } +} + +export default SnackbarHOC()(TPMIndexHOC(GlobalSearch)); diff --git a/src/modules/search/index.scss b/src/modules/search/index.scss new file mode 100644 index 00000000..3617ed6f --- /dev/null +++ b/src/modules/search/index.scss @@ -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; + } +}