先看效果图
代码实现
<!-- -->
<template>
<div class="html">
<Headers></Headers>
<div class="container">
<!-- 搜索区域 -->
<div class="search">
<div class="input-box">
<div id="DBFieldBox" class="sort reopt">
<div class="sort-default" @click="toggleTypeShow">
<span>{{typeList[typeIndex-1].name}}</span>
<i class="sort-icon">▼</i>
</div>
<div id="DBFieldList" class="sort-list" v-show="isType">
<ul>
<li
v-for="(item,index) in typeList"
:key="index"
@click="toggleType(item.type)"
:class="typeIndex == item.type ?'active cur':'cur'"
>{{item.name}}</li>
</ul>
</div>
</div>
<input
id="txt_SearchText"
name="txt_SearchText"
type="text"
autocomplete="off"
placeholder="中文文献、外文文献"
@keyup.enter="search"
value
v-model="searchVal"
maxlength="100"
class="search-input"
style="color: rgb(125, 125, 125);"
/>
</div>
<div class="btns">
<button @click="search">搜索</button>
<button @click="resultSearch">在结果中搜索</button>
<button @click="goSenior">高级搜索</button>
</div>
</div>
<div class="radio">
<el-radio v-model="radio" label="1">标题</el-radio>
<el-radio v-model="radio" label="2">全文</el-radio>
<el-radio v-model="radio" label="3">标签</el-radio>|
<el-radio v-model="type" label="1">精确搜索</el-radio>
<el-radio v-model="type" label="2">模糊搜索</el-radio>
</div>
<!-- 搜索条件 -->
<div class="search_if">搜索条件</div>
</div>
<div class="banner" style="height:calc(100% - 250px);">
<div class="content">
<!-- 左侧导航栏 -->
<el-aside width="200px">
<div class="banner-left">
<!-- 每一个大分类 -->
<div class="headLine" v-for="(item,index) in list" :key="index">
<div @click="close(index)" class="box">
<i class="el-icon-circle-plus" v-show="!item.isOff"></i>
<i class="el-icon-remove" v-show="item.isOff"></i>
<span>{{item.name}}</span>
</div>
<ul v-show="item.isOff" v-for="(item1,index) in item.children" :key="index">
<li
:class="item1.id == cateIndex?'active':''"
@click="toggleCate(item1.id)"
>{{item1.name}}</li>
</ul>
</div>
</div>
</el-aside>
<!-- 右侧表格 -->
<el-main>
<div class="banner-right">
<el-card
class="box-card"
style="min-height:calc(100%-250px)"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.6)"
>
<div class="head-box">
<!-- 头部操作栏 -->
<div class="toolTip">
<!-- 重点 -->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
<!-- 重点 -->
<ul>
<li>
显示等级
<i class="el-icon-arrow-down"></i>
</li>
<li>
分组浏览
<i class="el-icon-arrow-down"></i>
</li>
<li>相关度</li>
<li>
效力级别
<i class="el-icon-bottom"></i>
</li>
<li @click="sort">
发布日期
<i class="el-icon-bottom" v-show="isSort"></i>
<i class="el-icon-top" v-show="!isSort"></i>
</li>
</ul>
</div>
<!-- 分类蓝 -->
<div class="title-box">
<span class="title" style="margin-right:20px">{{searchVal}}</span>
<span class="title" style="margin-right:20px">共{{recordsList.total}}篇</span>
<span class="more">查看更多</span>
</div>
</div>
<!-- 内容区域 -->
<div class="right_content">
<div class="bookList" v-for="(item,index) in recordsList.records" :key="index">
<div>
<!-- 重点 -->
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox :label="item.id"></el-checkbox>
</el-checkbox-group>
<!-- 重点 -->
</div>
<div style="display:inline-block" class="book_right">
<div class="bHead">
<div class="title" @click="goBook(item.url)">{{item.title}}</div>
<span>[{{item.createTime | dateformat('YYYY-MM-DD')}}]</span>
</div>
<div class="bContent">{{item.content}}</div>
<!-- 分类 -->
<div class="class">
<div class="class_item">太空战略</div>
<div class="class_item">太空战略</div>
<div class="class_item">太空战略</div>
<div class="class_item">太空战略</div>
</div>
<div class="bBottom">
<div class="left">
<span>等级:</span>
<img src="~@/assets/images/u60.png" alt />
<img src="~@/assets/images/u60.png" alt />
<img src="~@/assets/images/u60.png" alt />
<img src="~@/assets/images/u60.png" alt />
<img src="~@/assets/images/u60.png" alt />
</div>
<div class="right">
<ul>
<li>引用</li>
<li>收藏</li>
<li>下载</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fullPage">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="recordsList.total"
></el-pagination>
</div>
</el-card>
</div>
</el-main>
</div>
</div>
<Footers />
</div>
</template>
<script>
import { weChatList, weChatListIn } from "../../api/apis";
import Headers from "../../common/header";
import Footers from "../../common/footer";
export default {
components: {
Headers,
Footers,
},
data() {
return {
// loading效果
loading: false,
// 是否全选 ========================ss===================================================
checkAll: false,
// 下拉框的展示?
isOff: false,
radio: "1",
type: "1",
// 每页的条数
limit: 10,
// 输入框的value值
searchVal: "",
// 第一次查询保存的值,判断用户是直接搜索还是在结果中搜索
firstVal: "",
// 在结果中搜索
resultVal: "",
// 排序
isSort: true,
// 当前的页码
currentPage: 1,
// 内容区域
recordsList: {},
// 下拉框是否显示
isType: false,
// 左侧列表选中的id
cateIndex: 1,
// 分类下拉框的id
typeIndex: 1,
isIndeterminate: false,
// 当前所有数据的唯一标识集合
checkedCities: [],
multipleSelection: [],
// 当前选中的数据的集合
checkedGameId: [],
// 分类列表
typeList: [
{
type: 1,
name: "主题",
},
{
type: 2,
name: "篇关摘",
},
{
type: 3,
name: "关键词",
},
{
type: 4,
name: "篇名",
},
{
type: 5,
name: "全文",
},
{
type: 6,
name: "作者",
},
{
type: 7,
name: "第一作者",
},
{
type: 8,
name: "作者单位",
},
],
// 左侧尅表数据
list: [
{
name: "国别",
isOff: true,
children: [
{
name: "中国",
id: 1,
},
{
name: "美国",
id: 2,
},
],
},
{
name: "国别",
isOff: true,
children: [
{
name: "中国",
id: 3,
},
{
name: "美国",
id: 4,
},
],
},
],
};
},
//生命周期 - 创建完成(访问当前this实例)
created() {
// 获取query的search 值
this.getParams();
},
//生命周期 - 挂载完成(访问DOM元素)
mounted() {
// 根据search值获取文章列表
this.getDetail();
},
watch: {
$route: "getParams",
},
methods: {
// 全选和取消全选
handleCheckAllChange(val) {
console.log(val);
console.log(this.checkedGameId);
this.checkedCities = val ? this.checkedGameId : [];
console.log(this.checkedCities);
this.isIndeterminate = false;
},
// 单击多选框
handleCheckedCitiesChange(value) {
console.log(value);
let checkedCount = value.length;
this.checkAll = checkedCount === this.checkedGameId.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.checkedGameId.length;
},
// 搜索 == 第一次搜索
search() {
if (this.searchVal.trim() == "") {
return this.$message.error("内容不能为空");
}
var val = this.searchVal;
this.firstVal = val;
alert(val);
if (this.isSort) {
this.getDetail();
} else {
this.getDetailIn();
}
},
// 在结果中搜索
resultSearch() {
this.resultVal = this.searchVal;
alert("第一次搜索:" + this.firstVal + "第二次搜索:" + this.resultVal);
this.loading = true;
weChatList({
pageNo: this.currentPage,
pageSize: this.limit,
title1: this.firstVal,
title2: this.resultVal,
}).then((res) => {
this.loading = false;
var { data } = res;
var result = data.result;
this.recordsList = {
current: result.currentPage,
pages: result.totalPage,
records: result.dataList,
size: result.pageSize,
total: result.totals,
};
this.checkedGameId = [];
for (let i = 0; i < this.recordsList.records.length; i++) {
this.checkedGameId.push(this.recordsList.records[i].id);
this.multipleSelection = this.checkedGameId;
}
});
},
getParams() {
// 取到路由带过来的参数
const routerParams = this.$route.query.search;
// 将数据放在当前组件的数据内
this.searchVal = routerParams;
this.firstVal = routerParams;
},
// 排序
sort() {
this.isSort = !this.isSort;
if (this.isSort) {
this.getDetail();
} else {
this.getDetailIn();
}
},
// 分页
handleSizeChange(val) {
this.limit = val;
this.getDetail();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getDetail();
},
// 主题下拉框展示
toggleTypeShow() {
this.isType = !this.isType;
},
// 主题项的切换
toggleType(index) {
this.typeIndex = index;
this.isType = false;
},
// 左侧分类点击事件
toggleCate(index) {
this.cateIndex = index;
},
// 高级搜索
goSenior() {
this.$router.push({
path: "/senior",
});
},
close(index) {
this.list[index].isOff = !this.list[index].isOff;
},
// 获取文章 == 正序
getDetail() {
this.loading = true;
weChatList({
pageNo: this.currentPage,
pageSize: this.limit,
title: this.searchVal,
}).then((res) => {
this.loading = false;
var { data } = res;
var result = data.result;
this.recordsList = result;
this.checkedGameId = [];
for (let i = 0; i < this.recordsList.records.length; i++) {
this.checkedGameId.push(this.recordsList.records[i].id);
this.multipleSelection = this.checkedGameId;
}
});
},
// 获取文章 == 倒序
getDetailIn() {
this.loading = true;
weChatListIn({
pageNo: this.currentPage,
pageSize: this.limit,
title: this.searchVal,
}).then((res) => {
this.loading = false;
var { data } = res;
var result = data.result;
this.recordsList = result;
this.checkedGameId = [];
for (let i = 0; i < this.recordsList.records.length; i++) {
this.checkedGameId.push(this.recordsList.records[i].id);
this.multipleSelection = this.checkedGameId;
}
});
},
// 根据URL打开新窗口或者跳转到对应的文章页面
goBook(url) {
if (url) {
window.open(url, "_blank");
} else {
this.$router.push("hello");
}
},
},
};
</script>
<style scoped>
.container {
width: 1200px;
margin: 0 auto;
}
.sort-default {
cursor: pointer;
}
.el-card__body {
min-height: calc(100% - 250px) !important;
}
/* @import url(); 引入css类 */
/* 头部开始 */
header {
height: 60px;
background-color: #666;
width: 100%;
}
.box-card {
width: 100%;
overflow-y: scroll;
}
header ul {
display: inline-block;
}
header li {
display: inline-block;
height: 60px;
line-height: 60px;
margin-right: 20px;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #ffffff;
}
header .right {
float: right;
width: 100px;
height: 60px;
line-height: 60px;
}
header .right img {
display: inline-block;
line-height: 60px;
height: 30px;
width: 30px;
background-color: red;
border-radius: 50%;
vertical-align: middle;
}
/* 头部结束 */
/* 搜索开始 */
.search {
width: 100%;
height: 50px;
margin-top: 20px;
}
.input-box {
float: left;
height: 40px;
margin-bottom: 24px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #000;
}
.btns {
float: left;
margin-left: 20px;
display: inline-block;
}
.sort {
display: inline-block;
position: relative;
z-index: 1;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #072958;
}
.sort::before {
position: absolute;
content: "";
clear: both;
width: 1px;
height: 25px;
top: 8px;
right: 0;
background-color: #ccc;
}
.sort-list {
background-color: #fff;
}
.sort-list li {
color: #666;
cursor: pointer;
font-size: 14px;
}
.sort-list li.active {
color: #fff;
background-color: #6698fd;
}
.search-input {
outline: none;
float: left;
width: 227px;
height: 20px;
padding: 10px 0 10px 20px;
font-size: 14px;
color: rgb(125, 125, 125);
line-height: 20px;
border: none;
background-color: #fff;
margin-right: 20px;
}
.search button {
float: left;
cursor: pointer;
height: 40px;
line-height: 40px;
padding: 0 25px;
border: none;
background-color: #f2f2f2;
border: 1px solid rgba(121, 121, 121, 1);
margin-right: 20px;
outline: none;
}
/* 搜索结束 */
.radio {
height: 50px;
line-height: 50px;
text-align: left;
}
.search_if {
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background-color: #fff;
margin-bottom: 20px;
}
div {
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.el-main {
padding: 0 !important;
overflow: hidden;
margin-left: 40px;
}
.html {
background-color: #f2f2f2;
width: 100%;
height: 100%;
}
.banner {
width: 1200px;
overflow: hidden;
margin: 0 auto;
}
.content {
display: flex;
height: 100%;
}
.banner-left {
width: 200px;
background: #fff;
}
.banner-right {
flex: 1;
background: #fff;
height: 100%;
}
/deep/.el-card__body {
padding: 20px;
position: relative;
}
.head-box {
position: absolute;
width: 100%;
padding: 20px;
box-sizing: border-box;
top: 0;
left: 0;
background-color: #fff;
z-index: 99;
}
.box-card {
width: 100%;
height: 100%;
overflow: hidden;
}
/deep/.el-card__body {
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
.right_content {
box-sizing: border-box;
padding: 0 0 80px 0;
margin-top: 70px;
height: inherit;
overflow: scroll;
}
.headLine {
cursor: pointer;
padding: 5px;
}
.headLine .box {
padding: 5px 0;
}
.headLine i {
font-size: 17px;
vertical-align: middle;
}
.headLine span {
margin-left: 5px;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
}
.headLine li {
cursor: pointer;
padding-left: 20px;
height: 30px;
line-height: 30px;
font-family: "Arial Normal", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.headLine li.active {
color: #25b2ff;
}
.box-card {
width: 100%;
}
.toolTip ul {
display: inline-block;
margin-left: 20px;
}
.toolTip li {
cursor: pointer;
display: inline-block;
margin-right: 20px;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.title-box {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #333;
}
.title-box .title {
font-weight: 900;
}
.title-box .more {
float: right;
height: 40px;
line-height: 40px;
font-size: 12px;
font-weight: normal;
color: #333;
}
.bookList {
display: flex;
padding: 20px 0;
}
.book_right {
padding: 0 20px;
border-bottom: 1px dashed #bcbcbc;
}
.bHead span {
float: right;
font-size: 12px;
font-weight: normal;
}
.bHead .title {
display: inline-block;
cursor: pointer;
}
.bContent {
color: #333;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 17px;
margin-bottom: 10px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.class_item {
display: inline-block;
color: #999;
font-weight: normal;
font-size: 12px;
background: #e6e6e6;
border-radius: 10px;
padding: 5px 5px;
margin-right: 5px;
}
.bBottom {
padding: 5px 0;
height: 20px;
}
.bBottom .left {
float: left;
}
.bBottom .left span {
font-weight: normal;
font-size: 12px;
}
.bBottom .left img {
width: 10px;
height: 10px;
margin-right: 3px;
}
.bBottom .right {
float: right;
}
.bBottom .right li {
display: inline-block;
margin-right: 10px;
font-weight: 400;
font-style: normal;
font-size: 12px;
}
.right_content::-webkit-scrollbar {
width: 8px;
background-color: #f5f7f8;
}
.right_content::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #cdcdcd;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
}
.fullPage {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
text-align: right;
background-color: #fff;
}
/deep/.el-checkbox__label {
display: none;
}
</style>