feat(src/views/reagent/database): 化学品数据库添加翻页功能

src/utils/request.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
+import router from '@/router'
 
 // create an axios instance
 const service = axios.create({
@@ -70,6 +71,7 @@ service.interceptors.response.use(
           type: 'warning'
         }).then(() => {
           store.commit('user/RESET_STATE')
+          router.push('/login')
         })
       }
       return Promise.reject(new Error(res.msg || 'Error'))

src/views/reagent/database/index.vue

@@ -6,11 +6,11 @@
         <el-input v-model="value" clearable placeholder="请输入内容" />
         <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
       </div>
-      <div class="kws-title">最近搜索</div>
+      <!--      <div class="kws-title">最近搜索</div>-->
-      <el-divider />
+      <!--      <el-divider />-->
-      <div class="kws">
+      <!--      <div class="kws">-->
-        <span v-for="(item,index) in searchKWs" :key="index" class="kw">{{ item }}</span>
+      <!--        <span v-for="(item,index) in searchKWs" :key="index" class="kw">{{ item }}</span>-->
-      </div>
+      <!--      </div>-->
       <div class="kws-title">搜索结果</div>
       <el-divider />
       <div
@@ -29,6 +29,17 @@
           </div>
         </div>
       </div>
+      <div class="my-pagination" style="text-align: center">
+        <el-pagination
+          background
+          :disabled="loading"
+          layout="prev, pager, next"
+          :current-page.sync="page"
+          :total="total"
+          :page-size.sync="page_size"
+          @current-change="pageChange"
+        />
+      </div>
     </div>
     <div v-else class="main-container-text">
       <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
@@ -53,7 +64,8 @@
           <template slot="label">
             存储禁忌 <i class="el-icon-warning-outline" />
           </template>
-          {{ currentItem.storage_taboo }}</el-descriptions-item>
+          {{ currentItem.storage_taboo }}
+        </el-descriptions-item>
         <el-descriptions-item :label-style="{'background': '#ffcc99','width':'120px'}" label="储存方法">{{ currentItem.storage_method }}</el-descriptions-item>
         <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="柜体储存要求">{{ currentItem.client_storage_require }}</el-descriptions-item>
         <el-descriptions-item :label-style="{'background': '#ffcc99'}" label="领用归还规定">{{ currentItem.provision }}</el-descriptions-item>
@@ -69,12 +81,9 @@ export default {
   name: 'Database',
   data() {
     return {
-      searchItem: [],
+      searchItem: [
-      total: 0,
-      searchKWs: [
-        '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
-        '甲醛', '乙醇'
       ],
+      total: 0,
       value: '',
       currentItem: {},
       show: true,
@@ -115,6 +124,10 @@ export default {
           this.total = res.data.total_cout
         }).finally(() => { this.loading = false })
       }
+    },
+    pageChange(page) {
+      this.page = page
+      this.getList()
     }
   }
 }
@@ -164,7 +177,7 @@ export default {
   }
   .search-item-container{
     overflow-y: scroll;
-    max-height: 30%;
+    height: 60vh;
     .search-item{
       display: flex;
       align-items: center;