今天做查询相关的东西
<template> <div> <div> <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center"> <img src="@/assets/12.png" alt="" style="width: 40px; height: 40px"> <br> <span style="color: black;">科技政策查询系统</span> </div> <div class="card" style="margin-bottom: 10px;"> <el-input id="searchname" style="width: 300px; margin-right: 10px" placeholder="输入政策名称" v-model="plicy.name"> <el-select slot="append" v-model="plicy.nameOption" placeholder="选择" style="width: 100px"> <el-option label="精确" value="1"></el-option> <el-option label="模糊" value="2"></el-option> </el-select> <el-select slot="append" v-model="plicy.nameLogic" placeholder="选择" style="width: 100px"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> </el-select> </el-input> <el-input id="searchdocument" style="width: 300px; margin-right: 10px" placeholder="请输入发文字号" v-model="plicy.document"> <el-select slot="append" v-model="plicy.documentOption" placeholder="选择" style="width: 100px"> <el-option label="精确" value="1"></el-option> <el-option label="模糊" value="2"></el-option> </el-select> <el-select slot="append" v-model="plicy.documentLogic" placeholder="选择" style="width: 100px"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> </el-select> </el-input> <el-input id="searchorgan" style="width: 300px; margin-right: 10px" placeholder="输入发文机构" v-model="plicy.organ"> <el-select slot="append" v-model="plicy.organOption" placeholder="选择" style="width: 100px"> <el-option label="精确" value="1"></el-option> <el-option label="模糊" value="2"></el-option> </el-select> <el-select slot="append" v-model="plicy.organLogic" placeholder="选择" style="width: 100px"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> </el-select> </el-input> <el-input id="searchtext" style="width: 300px; margin-right: 10px" placeholder="输入全文检索" v-model="plicy.text"> <el-select slot="append" v-model="plicy.textOption" placeholder="选择" style="width: 100px"> <el-option label="精确" value="1"></el-option> <el-option label="模糊" value="2"></el-option> </el-select> <el-select slot="append" v-model="plicy.textLogic" placeholder="选择" style="width: 100px"> <el-option label="AND" value="AND"></el-option> <el-option label="OR" value="OR"></el-option> </el-select> </el-input> <el-button type="primary" @click="select">高级检索</el-button> <!-- <el-button type="primary" @click="select1">高亮检索</el-button> --> <!-- <el-button type="success" @click="load">重置</el-button> --> </div> </div> <el-dialog title="详情" :visible.sync="visl" width="30%" center> <span slot="footer" class="dialog-footer"> <div v-html="show.text"></div> <el-button @click="visl = false">取 消</el-button> <el-button type="primary" @click="visl = false">确 定</el-button> </span> </el-dialog> <div style="width: 80%; display: flex;margin-left: 160px;"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="name" label="政策名称：" width="500"> <!-- <span v-html="highlightedText(scope.row.name, plicy.name)"></span> --> </el-table-column> <el-table-column prop="organ" label="发文机构" width="300"> <!-- <span v-html="highlightedText(scope.row.name, plicy.organ)"></span> --> </el-table-column> <el-table-column prop="pubdata" label="颁布日期" width="300"> <!-- 使用 formatter 自定义日期显示格式 --> <template slot-scope="scope"> {{ formatDate(scope.row.pubdata) }} </template> </el-table-column> <el-table-column prop="type" label="政策分类" width="300"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> </template> </el-table-column> </el-table> </div> <div> <!-- 分页组件 --> <el-pagination background layout="prev, pager, next" :total="totalItems" :current-page.sync="pageNum" :page-size="pageSize" @current-change="handlePageChange"> </el-pagination> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { totalItems: 1000, // 总数据量 pageNum: 1, // 当前页码 pageSize: 10, // 每页显示的条数 tableData: [], plicy: { name: '', nameOption: '1', // 默认精确查询document: '', document: '', documentOption: '1', organ: '', organOption: '1', text: '', textOption: '1', nameLogic: 'AND', documentLogic: 'AND', organLogic: 'AND', textLogic: 'AND' }, visl: false, show: {}, // searchName:this.plicy.name, // searchDocument:this.plicy.document, // searchOrgan:this.plicy.organ, // searchText:this.plicy.text }; }, created() { this.load() }, methods: { /** * 页面变化时触发 * @param newPage 新的页码 */ handlePageChange(newPage) { console.log('当前页:', newPage); this.pageNum = newPage; this.load() // 在这里执行数据获取操作，例如发送 AJAX 请求获取新的数据 }, load() { axios.get("http://localhost:9090/policy", { params: { pageNum: this.pageNum, pageSize: this.pageSize } }).then(res => { this.tableData = res.data.data.list; this.totalItems = res.data.data.total console.log(this.totalItems); }) }, // 自定义日期格式化方法 formatDate(dateString) { // const dateTime = new Date(dateString); // const options = { year: 'numeric', month: '2-digit', day: '2-digit' }; // return dateTime.toLocaleDateString('en-US', options); const dateTime = new Date(dateString); const year = dateTime.getFullYear(); const month = ('0' + (dateTime.getMonth() + 1)).slice(-2); const day = ('0' + dateTime.getDate()).slice(-2); return `${year}/${month}/${day}`; }, handleClick(row) { console.log(row); this.visl = true; this.show = row; }, select() { // 构建 SQL 查询 let query = "SELECT * FROM policy WHERE 1=1"; let conditions = []; if (this.plicy.name) { const condition = this.plicy.nameOption === '1' ? `name = '${this.plicy.name}'` : `name LIKE '%${this.plicy.name}%'`; conditions.push({ condition, logic: this.plicy.nameLogic }); } if (this.plicy.document) { const condition = this.plicy.documentOption === '1' ? `document = '${this.plicy.document}'` : `document LIKE '%${this.plicy.document}%'`; conditions.push({ condition, logic: this.plicy.documentLogic }); } if (this.plicy.organ) { const condition = this.plicy.organOption === '1' ? `organ = '${this.plicy.organ}'` : `organ LIKE '%${this.plicy.organ}%'`; conditions.push({ condition, logic: this.plicy.organLogic }); } if (this.plicy.text) { const condition = this.plicy.textOption === '1' ? `text = '${this.plicy.text}'` : `text LIKE '%${this.plicy.text}%'`; conditions.push({ condition, logic: this.plicy.textLogic }); } if (conditions.length > 0) { query += ' AND (' + conditions.map((c, index) => { return (index > 0 ? c.logic + ' ' : '') + c.condition; }).join(' ') + ')'; } console.log("Constructed SQL Query:", query); // 执行查询操作，例如通过API将查询发送到服务器 axios.get("http://localhost:9090/policy/select1", { params: { pageNum: this.pageNum, pageSize: this.pageSize, sql: query } }).then(res => { this.tableData = res.data.data.list; this.totalItems = res.data.data.total console.log(this.tableData); }) }, highlightedText(text, keyword) { // 高亮显示匹配的关键词 if (!keyword) return text; const regex = new RegExp(`(${keyword})`, 'gi'); return text.replace(regex, '<span class="highlight">$1</span>'); } } } </script> <style scoped> .logo-title { margin-left: 5px; font-size: 15px; transition: all .3s; } .highlight { background-color: yellow; } </style>
