2024/05/01（2024春季）

学习时长：3小时

代码行数：200行

博客数量：1篇

由于昨天的科技政策查询的页面很多瑕疵，毕竟使用vue不熟练，所以今天还是使用vue花了一个科技政策查询的页面。

<style scoped>

.layout-container-demo .el-header {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 180px;
}
</style>
<template>
  <el-container class="layout-container-demo" style="height: 1000px;background-color:rgba(0, 0, 0, 2%)">
    <el-header style="text-align: right; font-size: 10px; padding: 10px;">
      <div style="display: flex; align-items: center;">
        <img src="../assets/LOGO.png" style="height: 45px; margin-right: 20px;">
        <h1 style="font-size: 30px; color: lightskyblue; margin: 0;">科技政策查询系统</h1>
      </div>
    </el-header>
    <el-divider></el-divider>

    <el-container>
      <el-aside width="200px" style="background-color:rgba(108, 128, 148, 75%);border-radius: 10px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']" style="background-color: slategrey;border-radius: 10px">
            <el-sub-menu index="1" style="border-radius: 10px;border-bottom:2px solid rgba(0, 0, 0, 30%)">
              <template #title>
                <el-icon>
                  <message />
                </el-icon>科技文档管理
              </template>
            </el-sub-menu>
            <el-sub-menu index="2" style="border-radius: 10px;border-bottom:2px solid rgba(0, 0, 0, 30%)">
              <template #title>
                <el-icon><icon-menu /></el-icon>系统设置
              </template>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <el-form :inline="true" :model="mesg" class="demo-form-inline" style="margin-left: 20px;">
          <el-form-item label="政策名称">
            <el-input v-model="mesg.name" placeholder="请输入政策名称" clearable />
          </el-form-item>
          <el-form-item label="发文字号">
            <el-input v-model="mesg.range" placeholder="请输入发文字号" clearable />
          </el-form-item>
          <el-form-item label="发文机构">
            <el-input v-model="mesg.document" placeholder="请输入发文机构" clearable />
          </el-form-item>
          <el-form-item label="全文检索">
            <el-input v-model="mesg.text" placeholder="请输入文章关键词" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
          </el-form-item>
        </el-form>
        <el-scrollbar style="margin-left: 10px; height: auto;">
          <el-table :data="policies">
            <!-- @row - click=" handleRowClick" 行点击事件-->
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="name" label="政策名称" align="center" width="400">
              <template v-slot="{ row }">
                <span v-html="row.name"> </span>
              </template>
            </el-table-column>
            <el-table-column prop="document" label="发文机构" align="center" >
              <template v-slot="{ row }">
                <span v-html="row.document"> </span>
              </template>
            </el-table-column>
            <el-table-column prop="viadata" label="颁布日期" align="center" >
            </el-table-column>
            <el-table-column prop="type" label="政策分类" align="center" />
            <el-table-column label="操作" align="center" v-slot="scoped">
              <el-button type="primary" @click="searhById(scoped.row.id)">
                查看详情
              </el-button>
            </el-table-column>
          </el-table>
        </el-scrollbar>

        <div class="demo-pagination-block">
          <div class="demonstration " style="margin-left: 20%; margin-top: 20px;">
            <el-pagination @size-change=handleSizeChange @current-change=handleCurrentChange
              :current-page.sync=currentPage :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :background="true"
              layout="total, sizes, prev, pager, next, jumper" :total="totalitem">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { policyGetService } from '@/api/policys';
import { useRouter } from 'vue-router';
const currentPage = ref(1);

//每页显示条目个数
const pageSize = ref(10);
const policies = ref([])
const mesg = ref({
  name: '',
  range: '',
  document: '',
  text: ''
})
const totalitem = ref()
const freash = async (currentPage, pageSize, mesg) => {
  let result = await policyGetService(currentPage.value, pageSize.value, mesg.value);
  policies.value = result.data.policys;
  highligth(policies)
  totalitem.value = result.data.total;
  console.info(policies.value)
  console.info(totalitem.value)
}
const query = async () => {
  freash(currentPage, pageSize, mesg);
}
freash(currentPage, pageSize, mesg);

const highligth = (list) => {
  if (list.value && mesg.value && mesg.value.name && mesg.value.name.length > 0) {
    const replaceReg = new RegExp(mesg.value.name, 'g');
    list.value.forEach((item) => {
      const replaceString = '<span style=\'color:red\'>' + mesg.value.name + '</span>';
      item.name = item.name.replace(replaceReg, replaceString);
    });
  }
  if (list.value && mesg.value && mesg.value.document && mesg.value.document.length > 0) {
    const replaceReg = new RegExp(mesg.value.document, 'g');
    list.value.forEach((item) => {
      const replaceString = '<span style=\'color:red\'>' + mesg.value.document + '</span>';
      item.document = item.document.replace(replaceReg, replaceString);
    });
  }
};

const router = useRouter()
const searhById = (row) => {
  const href = router.resolve({
    path: '/policy',
    query: {
      id: row
    }
    // 多个参数这样的写法
    // query:{Shuju}
  })
  window.open(href.href)//打开新页面显示
  // let result=await policySearchByIdService(row);
  // console.info(result.data.text);
}


// 行点击事件
// const handleRowClick = (row) => {
//   // console.info(row);
//   // id.value = row.id;
// }

const handleCurrentChange = async (val) => {
  currentPage.value = val;
  console.info(currentPage)
  freash(currentPage, pageSize, mesg);
}

const handleSizeChange = (val) => {
  pageSize.value = val;
  console.info(pageSize)
  freash(currentPage, pageSize, mesg);
}
</script>

相关js

//导入request.js工具
import request from '@/util/request.js'

//提供调用注册接口的函数
export const policyGetService=(currentPage,pageSize,mesg)=>{
    //借助urlsearchParams完成传递
    const params=new URLSearchParams
    params.append("page",currentPage);
    params.append("pageSize",pageSize);
    
    for(let key in mesg){
        params.append(key,mesg[key]);
    }
    return request.get('/policy?'+params);
}
export const  policySearchByIdService=(id)=>
{
    return request.get('/policy/'+id);
}

//定制请求的实例

//导入axios npm install axios
import axios  from 'axios';
//定义一个变量，记录公共的前缀
const baseURL='http://localhost:8080';
const instance=axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);
    }
)
export default instance;

import { createRouter,createWebHistory } from "vue-router";
import Main from '@/components/Main.vue';
import PolicyMes from "@/components/PolicyMes.vue";
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/',
            component:Main,
        },{
          path:'/policy',
          component: PolicyMes
        }
    ]
})
export default router;

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{//获取路径中包含了/api请求的请求
        target:'http://localhost:8080',//后台服务器所在的源
        changeOrigin:true,//修改源,
        rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
      }
    }
  }
})