团队冲刺(2)
今日完善高级检索:
<template> <div class="show" style="background-color: white"> <el-row style="flex-direction: column"> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword1" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type1" slot="prepend" placeholder="请选择" @change="typeChange" > <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> <el-option label="篇名" value="name"></el-option> <el-option label="参考文献" value="look"></el-option> <el-option label="关键词" value="word"></el-option> </el-select> <el-select v-model="range1" slot="append" placeholder="请选择" @change="typeChange" > <el-option label="精确" value="precise"></el-option> <el-option label="模糊" value="dim"></el-option> </el-select> </el-input> </el-col> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword2" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type2" slot="prepend" placeholder="请选择" @change="typeChange" > <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> <el-option label="篇名" value="name"></el-option> <el-option label="参考文献" value="look"></el-option> <el-option label="关键词" value="word"></el-option> </el-select> <el-select v-model="range2" slot="append" placeholder="请选择" @change="typeChange" > <el-option label="精确" value="precise"></el-option> <el-option label="模糊" value="dim"></el-option> </el-select> </el-input> </el-col> <el-col :span="1" :offset="1" style="margin-top: 35px"> <el-select v-model="AND3" placeholder="AND" @change="typeChange"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> <el-option label="NOT" value="NOT"></el-option> </el-select> </el-col> <el-col :span="12" :offset="6" style="margin-top: 35px"> <el-input placeholder="请输入内容" v-model="keyword3" class="input-with-select" @keyup.enter.native="search" > <el-select v-model="type3" slot="prepend" placeholder="请选择" @change="typeChange" > <el-option label="主题" value="title"></el-option> <el-option label="作者" value="auther"></el-option> <el-option label="文献来源" value="rouse"></el-option> <el-option label="篇名" value="name"></el-option> <el-option label="参考文献" value="look"></el-option> <el-option label="关键词" value="word"></el-option> </el-select> <el-select v-model="range3" slot="append" placeholder="请选择" @change="typeChange" > <el-option label="精确" value="precise"></el-option> <el-option label="模糊" value="dim"></el-option> </el-select> </el-input> </el-col> <el-col :span="1" :offset="1" style="margin-top: 35px"> <el-select v-model="AND2" placeholder="AND" @change="typeChange"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> <el-option label="NOT" value="NOT"></el-option> </el-select> </el-col> </el-row> <div class="block" style="margin-top: 35px"> <span class="demonstration">时间范围:</span> <el-date-picker v-model="time1" type="date" placeholder="选择日期"></el-date-picker> <span class="demonstration"> ----- </span> <el-date-picker v-model="time2" type="date" placeholder="选择日期"></el-date-picker> </div> <div style="margin-top: 35px"> <el-button slot="append" type="primary" @click.native.prevent="search" icon="el-icon-search" >高级检索 </el-button> </div> </div> </template> <script>
data() {
return {
currentPage: 1, // 初始页码
pageSize: 2, // 每页的数据
total: 0, // 总记录数
contents: [], //查询结果
keyword1: "", // 关键词
keyword2: "", // 关键词
keyword3: "", // 关键词
type1: "主题", //查询方式
type2: "作者", //查询方式
type3: "文献来源", //查询方式
range1: "精准",
range2: "精准",
range3: "精准",
AND2: "AND",
AND3: "AND",
time1: "",
time2: "",
};
},
methods: {
async search() {
//解构出参数
const { keyword1, keyword2, keyword3,type1, type2,type3, range1, range2, range3, AND2,AND3,time1, time2 } = this;
try {
//注册成功
//await this.$store.dispatch("getHighSearchList", { keyword1, keyword2, keyword3,type1, type2,type3, range1, range2, range3, AND2,AND3,time1, time2 });
await this.$store.dispatch("getBookList");
} catch (error) {
//注册失败
alert(error.message);
}
},
handleSizeChange: function (size) {
this.pageSize = size;
console.log("每页大小:" + this.pageSize); //每页下拉显示数据
},
// 页码变更处理函数
handleCurrentChange: function (page) {
this.pageNum = page;
console.log("当前页码:" + this.pageNum); //点击第几页
},
},
computed: {
...mapState({
bookList: (state) => state.book.bookList,
//bookList: (state) => state.booktext.bookList,
}),
},
};
</script> <style> .show { margin: 100px auto; width: 80%; height: 450px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); border-radius: 10px; font-size: 20px; } /* .show:hover { box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4); margin-top: 90px; } */ </style>
预计明日完城:用户登录的修改,
遇到问题:
搜搜功能的传参,最终结果的展示。