名医名方: 使用 <keep-alive> 路由跳转保留页面 useScroll 记录滚动位置

src/api/knowledge.js

@@ -94,11 +94,11 @@ export function getSymptomsPain(data) {
 };
 
 // 获取疾病 查询列表
-export function getDiseaseList(data) {
+export function getDiseaseList(data, signal) {
     return request({
         url: '/basis/knowlib/diseaseQuery',
         method: 'post',
-        data
+        data, signal,
     })
 };
 
@@ -167,11 +167,11 @@ export function getDoctorCaseL(data) {
 }
 
 // 获取名医验案前置页面数据
-export function getDoctorCaseIndexL(data) {
+export function getDoctorCaseIndexL(data, signal) {
     return request({
         url: '/basis/knowlib/verifyIndexQuery',
         method: 'post',
-        data
+        data, signal,
     })
 }
 
@@ -203,11 +203,11 @@ export function getMedList(data) {
 }
 
 // 获取方剂列表 
-export function getPrescriptionsList(data) {
+export function getPrescriptionsList(data, signal) {
     return request({
         url: '/basis/knowlib/prescriptionQuery?effected=' + data.effected,
         method: 'post',
-        data
+        data, signal,
     })
 };
 

src/mixins/useScroll.js

@@ -0,0 +1,54 @@
+const useScroll = {
+  data() {
+    return {
+      scrollableValue: 20,
+      scrollableElement: null,
+      scrollTop: void 0,
+      __activated__: false,
+    };
+  },
+  activated() {
+    if (!this.__activated__) this.onActivated();
+    this.scroll(this.scrollTop, 'instant');
+  },
+  deactivated() { this.onDeactivated(); },
+  beforeRouteLeave(to, from, next) {
+    this.scrollableElement = this.findScrollableElement();
+    this.scrollTop = this.scrollableElement ? this.scrollableElement.scrollTop : void 0;
+    next();
+  },
+  methods: {
+    /* activated 生命周期调用 */
+    onActivated() { this.__activated__ = true; },
+    /* deactivated 生命周期调用 */
+    onDeactivated() { this.__activated__ = false; },
+    findScrollableElement(el) {
+      if (this.$refs.scrollableElement) return this.unrefElement();
+      if (el == null) el = this.$el;
+      if (el && el.scrollHeight - el.clientHeight > this.scrollableValue) return el;
+      else if (el) {
+        for (const child of el.children) {
+          const scrollable = this.findScrollableElement(child);
+          if (scrollable) return scrollable;
+        }
+      }
+      return null;
+    },
+    unrefElement(element) {
+      if (!element) element = this.$refs.scrollableElement;
+      return element && element._isVue ? element.$el : element;
+    },
+    /**
+     * 滚动容器滚动
+     * @param {number} top
+     * @param {'instant' | 'smooth'} behavior
+     */
+    scroll(top, behavior = 'smooth') {
+      const element = this.unrefElement() || this.scrollableElement;
+      if (top == null) top = this.scrollTop;
+      if (element != null && top != null) element.scrollTo({ top, behavior });
+    },
+  },
+};
+
+export default useScroll;

src/router/business.js

@@ -132,6 +132,7 @@ export default [{
     name: 'tcmmore',
     component: () => import('@/views/knowledge/TcmMore.vue'),
     meta: {
+        keeplive: true,
         title: '中药查询',
         pftitle: '知识学习'
     }

src/router/knowledge.js

@@ -3,6 +3,7 @@ export default [{
         name: 'prescription',
         component: () => import('@/views/knowledge/Prescription.vue'),
         meta: {
+            keeplive: true,
             title: '方剂查询',
             pftitle: '名医名方'
         }
@@ -19,6 +20,7 @@ export default [{
         name: 'xuewei',
         component: () => import('@/views/knowledge/Xuewei.vue'),
         meta: {
+            keeplive: true,
             title: '经络穴位查询',
             pftitle: '名医名方'
         }
@@ -37,6 +39,7 @@ export default [{
         name: 'disease',
         component: () => import('@/views/knowledge/Disease.vue'),
         meta: {
+            keeplive: true,
             title: '疾病查询',
             pftitle: '名医名方'
         }
@@ -56,6 +59,7 @@ export default [{
         name: 'doctorcaseBefore',
         component: () => import('@/views/knowledge/DoctorCaseBefore.vue'),
         meta: {
+            keeplive: true,
             title: '名医医案',
             pftitle: '名医名方'
         }
@@ -65,6 +69,7 @@ export default [{
         name: 'doctorcase',
         component: () => import('@/views/knowledge/DoctorCase.vue'),
         meta: {
+            keeplive: true,
             title: '名医医案',
             pftitle: '名医名方'
         }
@@ -83,6 +88,7 @@ export default [{
         name: 'tcm',
         component: () => import('@/views/knowledge/Tcm.vue'),
         meta: {
+            keeplive: true,
             title: '中药查询',
             pftitle: '名医名方'
         }
@@ -101,6 +107,7 @@ export default [{
         name: 'knowledgeBook',
         component: () => import('@/views/knowledge/Book.vue'),
         meta: {
+            keeplive: true,
             title: '经典医书',
             pftitle: '知识学习'
         }

src/utils/request1.js

@@ -68,7 +68,7 @@ service.interceptors.response.use(
         }
     },
     error => {
-
+        if (error && error.message !== 'canceled')
         Vue.prototype.$message({
             message: error.message,
             type: 'error'

src/views/knowledge/Book.vue

@@ -1,8 +1,10 @@
 <script>
+import useScroll from '@/mixins/useScroll';
 import {getBookCategories, getBookList, getBookListOfMy} from '@/api/knowledge';
 
 export default {
   name: 'KnowledgeBook',
+  mixins: [useScroll],
   data() {
     return {
       categories: [],
@@ -27,8 +29,16 @@ export default {
     setTimeout(() => {
       try { this.containerHeight = `${this.$el.parentElement.getBoundingClientRect().height - 10}px`; } catch (e) { }
     }, 500);
+    this.onActivated();
   },
   methods: {
+    onActivated() {
+      this.__activated__ = true;
+      const menus = this.$refs.menus.$el;
+      if (menus) {
+        menus.querySelector('.el-menu-item.is-active').scrollIntoView({behavior: 'smooth', block: 'center'});
+      }
+    },
     async getCategories() {
       const categories = await getBookCategories().catch(() => []);
       this.categories = [{label: '我的书架', value: -1}, ...categories];
@@ -58,7 +68,7 @@ export default {
       } catch (error) {}
       this.loading = false;
       if (loading) loading.close();
-      if (this.query.page === 1) { setTimeout(() => { this.$refs.scroller.$el.scrollTo({top: 0, behavior: 'smooth'}); }, 200); }
+      if (this.query.page === 1) { setTimeout(() => { this.scroll(0); }, 200); }
     },
     load() {
       if (this.books.length >= this.query.total) return;
@@ -89,7 +99,7 @@ export default {
   <div class="knowledge-book-list" :style="{height: containerHeight}">
     <el-row style="height: 100%;overflow: hidden;">
       <el-col style="height: 100%;overflow: hidden;" :sm="4" :xl="3">
-        <el-menu style="height: 100%;overflow-y: auto" :default-active="query.index">
+        <el-menu ref="menus" style="height: 100%;overflow-y: auto" :default-active="query.index">
           <el-menu-item v-for="(item, index) in categories" :key="item.value" :index="index + ''"
                         style="font-size: 18px;"
                         @click="onselect(index)">
@@ -104,7 +114,7 @@ export default {
                     @keyup.enter.native="onSearch()"></el-input>
           <el-button type="primary" @click="onSearch()">查询</el-button>
         </div>
-        <el-row ref="scroller" class="books-wrapper" style="flex: auto;" v-infinite-scroll="load">
+        <el-row ref="scrollableElement" class="books-wrapper" style="flex: auto;" v-infinite-scroll="load">
           <el-empty v-if="!books.length" description="暂无数据"></el-empty>
           <el-col v-for="(book, index) in books" :key="book.id" :sm="8" :xl="6">
             <div class="book-wrapper" @click="onPreview(book)">

src/views/knowledge/BookD.vue

@@ -17,6 +17,7 @@ export default {
       containerHeight: 0,
 
       selected: {},
+      routerPushCount: 1,
     };
   },
   computed: {
@@ -92,6 +93,7 @@ export default {
     async onPreview(book) {
       if (book) {
         await this.$router.push({path: `/index/knowledge/book/detail?id=${book.id}`});
+        this.routerPushCount +=1;
         this.book = book;
       }
       try {
@@ -135,9 +137,12 @@ export default {
             </div>
           </div>
           <div style="text-indent: 2em;">{{ book.briefIntroduction }}</div>
-          <el-button type="primary" plain round size="small" :icon="collection ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'" @click="collected()">
-            {{ collection ? '移出' : '加入' }}书架
-          </el-button>
+          <div style="display: flex; justify-content: space-between;">
+            <el-button type="primary" plain round size="small" :icon="collection ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'" @click="collected()">
+              {{ collection ? '移出' : '加入' }}书架
+            </el-button>
+            <el-button size="mini" @click="$router.go(-routerPushCount)">返回</el-button>
+          </div>
         </div>
       </div>
       <el-divider content-position="left">阅读<span v-if="book.readProgress">：{{ book.readProgress }}%</span>
@@ -194,6 +199,7 @@ export default {
     }
 
     .description-wrapper {
+      flex: auto;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;

src/views/knowledge/Disease.vue

@@ -8,7 +8,7 @@
                 <div class="screening-item flex-vertical-center-l">
                     <span>疾病名称：</span>
                     <div class="input">
-                        <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
+                        <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
                     </div>
 
                 </div>
@@ -32,20 +32,20 @@
         <!-- 主体部分 -->
         <div class="prescr-body">
             <!-- 顶部tab -->
-            <div class="p-tab flex-vertical-center-l">
+            <div class="p-tab flex-vertical-center-l flex-wrap">
                 <div :class="tab_current==index?'flex-center p-active':'flex-center'" v-for="(item,index) in tabs"
-                    :key="index" @click="tabCahnge(index);scroll($event)">
+                    :key="index" @click="tabCahnge(index);">
                     {{item.deptName}}
                 </div>
 
             </div>
             <!-- 底部数据表格 -->
-            <div class="table-data">
+            <div ref="scrollableElement" class="table-data" :date-loading="page === 1 && loading"  v-loading="page === 1 && loading">
 
                 <div class="flex-center table-name" v-for="(item,index) in list" :key="index" :title="item.disname"
                     @click="$router.push({path:'/index/diseased?disid='+item.disid})">{{item.disname}}</div>
 
-                <div class="flex-center findmore" @click="loadMoreData">
+                <div class="flex-center findmore" @click="!loading && loadMoreData()">
                     <span>更多</span>
                 </div>
             </div>
@@ -54,13 +54,19 @@
     </div>
 </template>
 <script>
+    import useScroll from '@/mixins/useScroll';
     import {
         getDiseaseList,
         getDiseaseClass
     } from '@/api/knowledge.js'
+
+    let controller;
+
     export default {
+        mixins: [useScroll],
         data() {
             return {
+                loading: false,
                 form: {
                     name: '',
 
@@ -80,21 +86,22 @@
         methods: {
             clearFilter() {
                 this.form.name = ''
-                this.getDiseaseList()
+                this.search()
             },
             search() {
                 this.page = 1
                 this.loadMore = true
+                this.tab_current = this.tabs.length - 1;
                 this.getDiseaseList()
             },
             tabCahnge(index) {
-                this.page = 1
-                this.loadMore = true
-                this.tab_current = index
-                this.getDiseaseList()
-            },
-            scroll(event) {
-              try { event.target.scrollIntoView({ behavior: 'smooth', inline: 'center' }); } catch (e) {}
+                if (this.tab_current === index) this.scroll(0);
+                else {
+                  this.tab_current = index
+                  this.page = 1
+                  this.loadMore = true
+                  this.getDiseaseList()
+                }
             },
             loadMoreData() {
                 this.getDiseaseList(this.loadMore)
@@ -105,6 +112,10 @@
                     this.$message.warning('没有更多数据')
                     return
                 }
+                if (controller) controller.abort();
+                controller = new AbortController();
+                if (this.page === 1) this.scroll(0, 'instant');
+                this.loading = true;
                 let params = {
                     keyword: this.form.name,
                     pageid: this.page,
@@ -113,7 +124,7 @@
                     deptid: this.tabs[this.tab_current].deptId
 
                 }
-                let res = await getDiseaseList(params)
+                let res = await getDiseaseList(params, controller.signal);
                 if (res.code == 0) {
                     if (this.page > 1) {
                         this.list = [...this.list, ...res.data.diseases]
@@ -129,12 +140,16 @@
                     }
 
                 }
+                this.loading = false;
             },
             // 获取疾病分类
             async getDiseaseClass() {
                 let res = await getDiseaseClass()
                 if (res.code == 0) {
                     this.tabs = res.data
+                    this.tabs.push({
+                      deptName: "检索结果",
+                    });
                     this.getDiseaseList()
                 }
 
@@ -163,9 +178,8 @@
         .prescr-body {
             margin-top: 10px;
             .p-tab {
-              flex-wrap: nowrap;
-              overflow-x: auto;
               > div {
+                margin-top: 2px;
                 flex-shrink: 0;
                 min-width: 70px;
                 width: auto;
@@ -180,6 +194,10 @@
             height: 65vh;
             overflow: auto;
 
+            &[date-loading="true"] {
+              overflow: hidden;
+            }
+
             div {
                 display: inline-block;
                 width: 90px;

src/views/knowledge/DiseaseD.vue

@@ -30,12 +30,6 @@
           <span>预防调护：</span>
           <div>{{info.disprevent}}</div>
         </div>
-        <div class="msg-item flex-plane-center-l">
-          <span>名家验案：</span>
-          <div>
-            <div>段富津 中国现代百名中医</div>
-          </div>
-        </div>
       </div>
     </div>
 

src/views/knowledge/DoctorCase.vue

@@ -10,19 +10,19 @@
         <div class="screening-item flex-vertical-center-l">
           <span>疾病：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
           <span>专家：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.doctor" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.doctor" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
           <span>来源：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.book" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.book" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
 
@@ -75,9 +75,11 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getDoctorCaseL } from "@/api/knowledge.js";
 
 export default {
+  mixins: [useScroll],
   data() {
     return {
       form: {
@@ -93,16 +95,20 @@ export default {
     };
   },
   created() {
-    let type = this.$route.query.type;
-    if (type === "0") {
-      this.form.doctor = this.$route.query.name;
-    }
-    if (type === "1") {
-      this.form.name = this.$route.query.name;
-    }
-    this.getDoctorCaseL();
+    this.onActivated()
   },
   methods: {
+    onActivated() {
+      this.__activated__ = true;
+      let type = this.$route.query.type;
+      if (type === "0") {
+        this.form.doctor = this.$route.query.name;
+      }
+      if (type === "1") {
+        this.form.name = this.$route.query.name;
+      }
+      this.getDoctorCaseL();
+    },
     sizeC(e) {
       this.page = e;
       this.getDoctorCaseL();
@@ -113,7 +119,7 @@ export default {
         doctor: "",
         book: ""
       };
-      this.getDoctorCaseL();
+      this.search();
     },
     search() {
       this.page = 1;

src/views/knowledge/DoctorCaseBefore.vue

@@ -9,7 +9,7 @@
         <el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
       </el-input>
     </form>
-    <div class="content" :class="{searchable: activeName === '1'}">
+    <div ref="scrollableElement" class="content" :class="{searchable: activeName === '1'}">
       <div class="content-item" v-for="(item,index) in list" :key="index">
         <div class="en">{{item.pyCode}}</div>
         <div class="list">
@@ -26,10 +26,13 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getDoctorCaseIndexL } from "@/api/knowledge.js";
 import {addRecipeFrom} from '@/api/dataAnalysis';
 
+let controller;
 export default {
+  mixins: [useScroll],
   data() {
     return {
       activeName: "0",
@@ -48,8 +51,11 @@ export default {
       this.initData();
     },
     handleTab(active) {
-      this.activeName = active;
-      this.initData();
+      if (this.activeName === active) this.scroll(0);
+      else {
+        this.activeName = active;
+        this.initData();
+      }
     },
     handleItem(item) {
       this.$router.push({
@@ -58,10 +64,13 @@ export default {
     },
     // 初始化数据
     async initData() {
+      if (controller) controller.abort();
+      controller = new AbortController();
+      this.scroll(0, 'instant');
       let res = await getDoctorCaseIndexL({
         indextype: this.activeName,
         keyWord: this.activeName === '1' ? this.keyword : '',
-      });
+      }, controller.signal);
       if (res.code == 0) {
         let isPy = /^[A-Za-z]/;
         let pinyinList = res.data.map(item => {

src/views/knowledge/Prescription.vue

@@ -6,14 +6,14 @@
         <div class="screening-item flex-vertical-center-l">
           <span>方剂名称：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
 
         <div class="screening-item flex-vertical-center-l">
           <span>功效：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
         <el-button size="mini" type="primary" @click="search">搜索</el-button>
@@ -37,7 +37,7 @@
         >{{item.name}}</div>
       </div>
       <!-- 底部数据表格 -->
-      <div class="table-data">
+      <div ref="scrollableElement" class="table-data" :date-loading="loading" v-loading="loading">
         <div
           class="flex-center ellipsis-line1"
           v-for="(item,index) in list"
@@ -49,12 +49,17 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getEffectQuery, getPrescriptionsList } from "@/api/knowledge.js";
-import { setTimeout } from "timers";
 import {addRecipeFrom} from '@/api/dataAnalysis';
+
+let controller;
+
 export default {
+  mixins: [useScroll],
   data() {
     return {
+      loading: false,
       form: {
         name: "",
 
@@ -80,18 +85,25 @@ export default {
 
         gongxiao: ""
       };
-      this.getPrescriptionsList();
+      this.search();
     },
     search() {
       this.tab_current = this.tabs.length - 1;
       this.getPrescriptionsList();
     },
     tabCahnge(index) {
-      this.tab_current = index;
-      this.getPrescriptionsList();
+      if (this.tab_current === index) this.scroll(0);
+      else {
+        this.tab_current = index;
+        this.getPrescriptionsList();
+      }
     },
     // 获取列表
     async getPrescriptionsList() {
+      if (controller) controller.abort();
+      controller = new AbortController();
+      this.scroll(0, 'instant');
+      this.loading = true;
       let params = {
         pageid: 1,
         pagesize: 9999,
@@ -100,11 +112,12 @@ export default {
         effected: this.tabs[this.tab_current] ? this.tabs[this.tab_current].effectid : null,
         effect: this.form.gongxiao
       };
-      let res = await getPrescriptionsList(params);
+      let res = await getPrescriptionsList(params, controller.signal);
       if (res.code == 0) {
         this.list = res.data.pres;
         this.totalNum = res.data.presnum;
       }
+      this.loading = false;
     },
     // 获取分类
     async getEffectQuery() {
@@ -160,6 +173,10 @@ export default {
     height: 57vh;
     overflow: auto;
 
+    &[date-loading="true"] {
+      overflow: hidden;
+    }
+
     div {
       display: inline-block;
       line-height: 44px;

src/views/knowledge/Tcm.vue

@@ -6,14 +6,14 @@
         <div class="screening-item flex-vertical-center-l">
           <span>中药名称：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
 
         <div class="screening-item flex-vertical-center-l">
           <span>功效：</span>
           <div class="input">
-            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入"></el-input>
+            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入" @keydown.enter.native="search()"></el-input>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
@@ -72,8 +72,11 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getEffectQuery, getMedList } from "@/api/knowledge.js";
+
 export default {
+  mixins: [useScroll],
   data() {
     return {
       form: {
@@ -113,7 +116,7 @@ export default {
         other: "",
         gongxiao: ""
       };
-      this.getEffectQuery(2);
+      this.search();
     },
     // 下一页
     nextPage(index) {

src/views/knowledge/TcmMore.vue

@@ -25,8 +25,11 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getEffectQuery, getMedList } from "@/api/knowledge.js";
+
 export default {
+  mixins: [useScroll],
   data() {
     return {
       form: {

src/views/knowledge/Xuewei.vue

@@ -7,7 +7,7 @@
           <div class="screening-item flex-vertical-center-l">
             <span>搜索经络：</span>
             <div class="input">
-              <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
+              <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
             </div>
           </div>
 
@@ -88,8 +88,11 @@
   </div>
 </template>
 <script>
+import useScroll from '@/mixins/useScroll';
 import { getAcupoint, collateralChannels, getMerD } from "@/api/knowledge.js";
+
 export default {
+  mixins: [useScroll],
   data() {
     return {
       form: {
@@ -127,7 +130,7 @@ export default {
   methods: {
     clearFilter() {
       this.form.name = "";
-      this.collateralChannels();
+      this.search();
     },
     search() {
       this.page = 1;