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>