6.9
<template>
<div class="about">
<el-container>
<el-aside width="200px">导航栏</el-aside>
<el-container>
<el-header><img src="../assets/logo.png" height="30px" width="30px" > 河北科技政策查询系统</el-header>
<el-main>
<el-form :inline="true" :model="formInline" style="height: 10%; width: 100%;" class="demo-form-inline">
<el-form-item >
<el-select v-model="formInline.isname" style="width:70%;">
<el-option label="and" value="and"></el-option>
<el-option label="or" value="or"></el-option>
</el-select></el-form-item>
<el-form-item >
<el-input placeholder="政策名称" v-model="formInline.name" class="input-with-select">
<el-select v-model="formInline.namec" slot="prepend" placeholder="请选择" style="width: auto;">
<el-option label="精确" value="精确"></el-option>
<el-option label="模糊" value="模糊"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item >
<el-select v-model="formInline.isdocument" style="width:70%;">
<el-option label="and" value="and"></el-option>
<el-option label="or" value="or"></el-option>
</el-select></el-form-item>
<el-form-item >
<el-input placeholder="发文字号" v-model="formInline.document" class="input-with-select">
<el-select v-model="formInline.documentc" slot="prepend" placeholder="请选择" style="width: auto;">
<el-option label="精确" value="精确"></el-option>
<el-option label="模糊" value="模糊"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item >
<el-select v-model="formInline.organ" placeholder="发文机构">
<el-option label="" value=""></el-option>
<el-option label="国务院" value="国务院"></el-option>
<el-option label="国务院办公厅" value="国务院办公厅"></el-option>
<el-option label="科技部" value="科技部"></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-input placeholder="全文检索" v-model="formInline.text" class="input-with-select">
<el-select v-model="formInline.textc" slot="prepend" placeholder="请选择" style="width: 60px;">
<el-option label="精确" value="精确"></el-option>
<el-option label="模糊" value="模糊"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<div style="padding: 0;">
<el-table
:data="tableData"
style="width: 100%;
"
:default-sort="{prop: 'date', order: 'descending'}">
<el-table-column
prop="name"
label="政策名称"
width="360">
</el-table-column>
<el-table-column
prop="organ"
label="发文机构"
width="180">
</el-table-column>
<el-table-column
prop="pubdata"
label="颁布日期"
width="360"
sortable
:formatter="dateformatter">
</el-table-column>
<el-table-column
prop="type"
label="政策分类"
sortable
width="100">
</el-table-column>
<el-table-column label="操作"> <template slot-scope="scope">
<el-button size="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import dayjs from "dayjs";
import axios from 'axios';
export default {
data() {
return {
formInline: {
name: '',
isname: '',
namec:'',
isorgan: '',
organ: '',
organc: '',
istext: '',
text:'',
textc:'',
isdocument: '',
document:'',
documentc:''
},
tableData: [],
currentPage: 1, // 假设默认是第一页
pageSize: 10, // 假设每页10条数据
total: 0, // 用于显示总记录数（可选）
// ... 其他可能需要的分页相关变量
}
},
methods: {
onSubmit() {
this.fetchData();
},
handleEdit(index, row) {
this.$router.push({ name: 'Detail', params: { text: row.text } });
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData(); // 重新获取数据
},
// 当前页改变时的处理
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData(); // 重新获取数据
},
// 根据是否带条件调用不同的后端接口
fetchData() {
let params = {
pageNum: this.currentPage - 1, // Vue中currentPage通常从1开始，后端从0开始
pageSize: this.pageSize
};
if (Object.keys(this.formInline).some(key => this.formInline[key])) {
// 如果表单中有值，执行带条件的分页查询
axios.post('http://localhost:8080/selectByConditionAndPage', this.formInline, { params })
.then(response => {
this.tableData =response.data.content;
this.total = response.data.total;
})
.catch(error => {
console.error('Error fetching data:', error);
});
} else {
// 否则，执行无条件的分页查询
axios.get('http://localhost:8080/selectByPage', { params })
.then(response => {
this.tableData = response.data.content
this.total = response.data.length; // 或者根据实际情况调整total获取方式
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
},
// 格式化日期
dateformatter(row) {
return this.formatDate(row.pubdata, "YYYY-MM-DD ");
},
formatDate(date, format) {
return dayjs(date).format(format);
}
},
created() {
this.fetchData();
},
}
</script>
<style>
.el-form-item {
margin-bottom: 10px; /* 增加表单项之间的间距 */
}
.el-select .el-input {
width: 100px;
margin-left: 0%;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
/* 输入框聚焦样式 */
.el-input__inner:focus {
border-color: #409EFF; /* 蓝色高亮 */
}
/* 表格标题样式调整 */
.el-table th {
font-weight: bold; /* 加粗表头文字 */
background-color: rgba(0, 0, 0, .05); /* 轻微背景色 */
color: #333;
}
/* 查看按钮样式 */
.el-button--primary {
background-color: #409EFF !important; /* 更改主要按钮颜色 */
border-color: #409EFF !important;
}
/* 分页组件样式调整 */
.el-pagination {
display: flex;
justify-content: center; /* 居中显示分页 */
margin-top: 20px; /* 分页与表格之间的间距 */
}
.el-header, .el-footer {
background-color: #051e3e;
color: #fafafa;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #20528a;
color: #ffffff;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 150px;
}
body > .el-container {
margin-bottom: 10px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
