冲刺9
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>
