搜索

src/layout/components/Navbar.vue

@@ -3,7 +3,14 @@
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb class="breadcrumb-container" />
-
+    <div class="search-top">
+      <div>
+        <el-input style="width:300px" v-model="searchword" placeholder="请输入关键词查询"></el-input>
+      </div>
+      <div>
+        <el-button type="primary" size="small" @click="goRecord">查询</el-button>
+      </div>
+    </div>
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
@@ -48,6 +55,11 @@
         'avatar'
       ])
     },
+    data() {
+      return {
+        searchword: ''
+      }
+    },
     methods: {
       toggleSideBar() {
         this.$store.dispatch('app/toggleSideBar')
@@ -55,6 +67,15 @@
       async logout() {
         await this.$store.dispatch('user/logout')
         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      },
+      goRecord() {
+        if (!this.searchword) {
+          this.$Message.warning("请输入关键词")
+          return
+        } else {
+
+          this.$router.push('/record/index?searchTitle='+this.searchword)
+        }
       }
     }
   }
@@ -85,6 +106,19 @@
       float: left;
     }
 
+    .search-top {
+      float: left;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      line-height: 50px;
+      margin-left: 20px;
+
+      &>div {
+        margin-right: 10px;
+      }
+    }
+
     .right-menu {
       float: right;
       height: 100%;

src/router/index.js

@@ -58,6 +58,19 @@ export const constantRoutes = [{
       }
     }],
     hidden: true
+  },
+  {
+    path: '/record/index',
+    component: Layout,
+    children: [{
+      path: '/record/index',
+      component: () => import('@/views/record/index'),
+      name: '搜索',
+      meta: {
+        title: '搜索'
+      }
+    }],
+    hidden: true
   },
 
   {
@@ -72,7 +85,7 @@ export const constantRoutes = [{
         title: '系统首页',
         icon: 'dashboard'
       }
-    }, ]
+    }]
   }
 ]
 

src/views/record/index.vue

@@ -36,7 +36,7 @@
         <xy-table @getHeight="initHeight" :list="list" :total="total" @pageIndexChange="pageIndexChange"
           @pageSizeChange="pageSizeChange" :table-item="table_item">
           <template v-slot:catalog_name>
-            <el-table-column align='left' label="所属目录" width="120" header-align="center">
+            <el-table-column align='left' label="所属目录" width="240" header-align="center">
               <template slot-scope="scope">
                 <div v-if="scope.row.catalog_id_details && scope.row.catalog_id_details.length>0">
                   <el-tag style="margin-right:5px;margin-bottom:5px" v-for="item in scope.row.catalog_id_details">
@@ -130,13 +130,12 @@
             prop: 'title',
             label: '标题',
             align: 'left',
-            width: 360
           },
           {
             prop: 'catalog_name',
             label: '所属目录',
             align: 'center',
-            width: 120
+            width: 240
           },
           {
             prop: 'area_name',
@@ -168,6 +167,9 @@
       if (this.$route.path) {
         let path = this.$route.path.split("_")
         this.select.catalog_id = path[1]
+      }
+      if(this.$route.query.searchTitle){
+        this.select.title = this.$route.query.searchTitle
       }
       this.getList()
     },

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
-  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin',
+  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin_test',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项