1.和前端对接接口。
2.前端有一些功能并未实现，所以还需要我和队员进行一下调试
3.和队员进行前端的调试。
5
<template>
<div >
<!-- 查询框部分 -->
<el-row>
<el-col :span="12" :offset="6" style="margin-top: 25px;">
<el-input type="text" placeholder="请输入标题" v-model="keyword" >
<el-button slot="prepend" type="primary" @click="gohighSearch">高级检索</el-button>
<el-button slot="append" type="primary" @click="search" >搜索</el-button>
</el-input>
</el-col>
</el-row>
<br />
<div class="showlist">
<!-- <el-row class="art-item" v-model="bookList" v-for="userblog in searchList.content"> -->
<el-row class="art-item" v-model="bookList" :key="userblog.id" v-for="userblog in bookList">
<el-card shadow="hover" style="height: 180px">
<el-row class="art-info d-flex align-items-center justify-content-start">
<div class="d-flex align-items-center">
<div class="art-title">
<span @click="viewPDF('view?url='+userblog.document.url+'&name='+userblog.document.title+'&type=inline')">{{userblog.document.title}}</span>
<!-- {{userblog.title}} -->
</div>
</div>
</el-row>
<el-row class="art-body">
<div class="side-abstract">
<div class="art-abstract">
{{userblog.document.Abstract}}
</div>
</div>
</el-row>
<el-row class="art-floor">
<div class="art-more">
<!--?url=userblog.document.url&name=userblog.document.title&type=inline <router-link :to="{name: 'view?url=Document . url&name=...', params:{'url':userblog.url} }" tag="span"> -->
<!-- <router-link :to="{name: 'bookMore2', params:{'title':userblog.title} }" tag="span"> -->
<!-- <button ><a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=inline'">查看文章</a></button> -->
<!-- <el-button style="border-radius: 200px; margin-top: 50px; margin-left: 500px" @click="toDown(userblog.url)">下载文章</el-button> -->
<!-- .document -->
<!-- <el-button style="border-radius: 200px; margin-top: 50px"><a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=inline'">查看文章</a></el-button> -->
<el-button style="border-radius: 200px;" @click="downloadPDF('view?url='+userblog.document.url+'&name='+userblog.document.title+'&type=attachment')"><span>下载文章</span></el-button>
</div>
<div class="art-time">
<i class="el-icon-apple">作者:</i>{{userblog.document.author}}
<i class="el-icon-time"></i>: {{ userblog.document.date }}
</div>
</el-row>
</el-card>
</el-row>
<!-- 分页插件部分 -->
<el-row>
<el-col :span="16" :offset="4">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 50, 100]"
:page-size="pageSize"
layout="total,sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
import axios from "axios";
export default {
data(){
return{
currentPage: 1, // 初始页码
pageSize: 1, // 每页的数据 searchList.size
total: 0, // 总记录数 searchList.totatotalElementslPages
keyword: "", // 关键词
bookList: [], // content:[]
userId: this.$store.state.user.userinfo.id,
}
},
mounted() {
this.search();
},
filters: {
ellipsis(userblog) {
if (!userblog) return "";
if (userblog.length > 30) {
return userblog.slice(0, 30) + "...";
}
return userblog;
}
},
methods: {
downloadPDF(url){
console.log('downloadPDF')
window.open('http://localhost:8080/'+url)
// axios.get('http://localhost:8080/'+url)
}
,
viewPDF(url){
console.log(url)
window.open('http://localhost:8080/'+url)
},
toDown(url) {
window.open(url);
},
//添加历史记录
addHistory(title, author) {
let userId = this.userId;
this.$store.dispatch("addHistory", {title,author,userId} );
},
gohighSearch() {
this.$router.push("/highSearch");
},
// 每页大小变更处理函数
handleSizeChange: function (size) {
this.pageSize = size;
console.log("每页大小:" + this.pageSize); //每页下拉显示数据
this.search();
},
// 页码变更处理函数
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log("当前页码:" + this.currentPage); //点击第几页
this.search();
},
search () {
const { keyword, currentPage ,pageSize} = this;
this.$store.dispatch("getSearchList", { keyword, currentPage ,pageSize} )
.then(() => {
var temp = this.$store.state.search.searchList;
// console.log(temp.searchList.content)
// console.log(temp)
let data=JSON.parse(JSON.stringify(temp.content))
// console.log(data)
// this.$store.dispatch("getBookList");
// let data=JSON.parse(JSON.stringify(this.$store.state.book.bookList))
// console.log(temp)
// console.log(data)
this.bookList = data.splice(
(this.currentPage - 1) * this.pageSize,
this.pageSize
)
//console.log(this.$store.state)
this.total=temp.content.length
//console.log(this.bookList)
console.log(this.bookList[0].document)
});
},
computed: {
...mapState({
searchList: (state) => state.item.searchList,
}),
},
},
// created() {
// this.search();
// },
};
</script>
<style scoped>
.showlist {
margin-left: 10%;
width: 80%;
}
/* 查询类型选择框宽度和背景色设置 */
.el-select .el-input {
width: 150px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
/*标题和内容的字体等设置*/
.title {
font-size: 24px;
cursor: pointer;
}
.content {
margin-bottom: 4px;
color: #8a8a8a;
font-size: 14px;
line-height: 24px;
}
.art-item {
margin-bottom: 1px;
position: relative;
}
.art-time {
margin-left: 30px;
font-size: 10px;
display: inline-block;
}
.art-more{
display: inline-block;
margin-top: 0px;
margin-right: 100px;
width: 15px;
}
.art-abstract {
flex: 1;
color: #aaa;
white-space: nowrap;
width: 800px;
height: .5rem;
/* overflow:hidden;
text-overflow: ellipsis; */
font-size: 10%;
}
.art-body {
display: flex;
padding: 10px 0;
}
.art-floor{
padding: 10px 0;
}
.side-abstract {
flex: 1;
display: flex;
flex-direction: column;
}
.art-title {
font-size: 30px;
color: #2267c7;
border-left: 3px solid #f56c6c;
padding-left: 5px;
cursor: pointer;
width: 600px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.art-title:hover {
padding-left: 10px;
color: #409eff;
}
</style>
标签：art,log,冲刺,console,currentPage,userblog,size From： https://www.cnblogs.com/lhk20213937/p/17348157.html