From 3067b27c3b540fa24f571dca4e02ac1a59695a92 Mon Sep 17 00:00:00 2001
From: luobinjie <lbj123>
Date: Tue, 23 Dec 2025 19:18:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CommonTab.vue   | 243 ++++++++++++++++++++++++++
 src/components/common/LocalConfig.vue |   8 +-
 src/main.js                           |  12 +-
 src/router/index.js                   |  36 ++--
 src/store/index.js                    |  34 +++-
 src/views/Home.vue                    |  24 ++-
 6 files changed, 326 insertions(+), 31 deletions(-)
 create mode 100644 src/components/common/CommonTab.vue

diff --git a/src/components/common/CommonTab.vue b/src/components/common/CommonTab.vue
new file mode 100644
index 0000000..590f169
--- /dev/null
+++ b/src/components/common/CommonTab.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="tags-list" ref="totalLists">
+    <div
+      class="arrow-icon"
+      @click="arrowBack"
+      style="position: fixed; left: 4px"
+    >
+      <el-button
+        size="medium"
+        icon="el-icon-arrow-left"
+        :disabled="isLeftDisabled"
+      ></el-button>
+    </div>
+    <div class="tag-style" ref="tagBox">
+      <div class="scrollWrapper" ref="scrollWrapper" id="nav">
+        <el-tag
+          :key="tag.displayName"
+          size="medium"
+          v-for="(tag, index) in tags"
+          :closable="true"
+          :disable-transitions="false"
+          @close="handleClose(tag, index)"
+          @click="changeMenu(tag)"
+          :effect="$route.name === tag.displayName ? 'dark' : 'plain'"
+        >
+          {{ tag.displayName }}
+        </el-tag>
+      </div>
+    </div>
+    <div
+      class="arrow-icon"
+      @click="arrowForward"
+      style="position: fixed; right: 4px"
+    >
+      <el-button
+        size="medium"
+        icon="el-icon-arrow-right"
+        :disabled="isRightDisabled"
+      ></el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      scrollWrapper: null,
+      isLeftDisabled: false,
+      isRightDisabled: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      tags: (state) => state.tabsList,
+    }),
+  },
+  watch: {
+    $route: {
+      handler(val) {
+        this.updateButtonStates();
+        this.scrollToActiveTag();
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  mounted() {
+    this.scrollWrapper = this.$refs.scrollWrapper;
+    this.$nextTick(() => {
+      this.updateButtonStates();
+    });
+    this.scrollWrapper.addEventListener("scroll", this.handleScroll);
+    window.addEventListener("resize", this.updateButtonStates);
+  },
+  beforeDestroy() {
+    // 移除事件监听器
+    if (this.scrollWrapper) {
+      this.scrollWrapper.removeEventListener("scroll", this.handleScroll);
+    }
+    window.removeEventListener("resize", this.updateButtonStates);
+  },
+  methods: {
+    ...mapMutations({
+      close: "closeTab",
+    }),
+    handleScroll() {
+      // 使用 setTimeout 确保获取到最新的滚动位置
+      setTimeout(() => {
+        this.updateButtonStates();
+      }, 50);
+    },
+    // 标签向左切换
+    arrowBack() {
+      this.$refs.scrollWrapper.scrollBy({ left: -300, behavior: "smooth" });
+    },
+    // 标签向右切换
+    arrowForward() {
+      this.$refs.scrollWrapper.scrollBy({ left: 300, behavior: "smooth" });
+    },
+    updateButtonStates() {
+      const { scrollLeft, scrollWidth, clientWidth } = this.scrollWrapper;
+      this.isLeftDisabled = scrollLeft <= 0;
+      this.isRightDisabled = scrollLeft + clientWidth >= scrollWidth - 1;
+    },
+    scrollToActiveTag() {
+      this.$nextTick(() => {
+        // 查找当前激活的标签（effect为'dark'的标签）
+        const scrollWrapper = this.$refs.scrollWrapper;
+        const tagElements = scrollWrapper.querySelectorAll('.el-tag');
+        
+        // 遍历标签元素，找到与当前路由匹配的标签
+        let activeTag = null;
+        for (let i = 0; i < tagElements.length; i++) {
+          const tagElement = tagElements[i];
+          // 获取标签内的文本内容
+          const tagText = tagElement.textContent ? tagElement.textContent.trim() : '';
+          
+          // 检查标签文本是否与当前路由名称匹配
+          if (tagText === this.$route.name) {
+            activeTag = tagElement;
+            break;
+          }
+        }
+        if (activeTag) {
+          const tagPosition = activeTag.offsetLeft;
+          const tagWidth = activeTag.offsetWidth;
+          
+          // 无论如何都滚动到使标签居中的位置
+          const scrollTo = tagPosition - (scrollWrapper.clientWidth - tagWidth) / 2;
+          scrollWrapper.scrollTo({
+            left: scrollTo,
+            behavior: 'smooth'
+          });
+          
+          // 滚动后更新按钮状态
+          setTimeout(() => {
+            this.updateButtonStates();
+          }, 150);
+        }
+      });
+    },
+    handleClose(tag, index) {
+      let length = this.tags.length - 1;
+      this.close(tag);
+      // 如果关闭的标签不是当前路由的话，就不跳转
+      if (tag.displayName !== this.$route.name) {
+        this.handleScroll();
+        return;
+      }
+      // 关闭的标签是最右边的话，往左边跳转一个
+      if (index === length) {
+        if (this.tags[index - 1]) {
+          this.$router.push({ path: this.tags[index - 1].routeUrl });
+        } else {
+          this.$router.push({ path: "/home" });
+        }
+      } else {
+        // 否则往右边跳转
+        this.$router.push({ path: this.tags[index].routeUrl });
+      }
+      this.handleScroll();
+    },
+    changeMenu(item) {
+      if (item.displayName !== this.$route.name) {
+        this.$router.push({ path: item.routeUrl });
+      } else {
+        // this.$message({
+        // 	message: '请不要重复选择',
+        // 	type: 'error'
+        // });
+      }
+      this.$nextTick(() => {
+        this.scrollToActiveTag();
+      });
+    },
+    async clearControlLabel() {
+      await this.$store.commit("clearMenuTab");
+      this.$router.push({ path: "/home" });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../assets/css/global_button.css';
+.tags-list {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 50px;
+  width: 100%;
+  height: 36px;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  padding-bottom: 0;
+}
+.tag-style {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: all;
+  cursor: pointer;
+  position: relative;
+  margin: 0 64px;
+}
+.scrollWrapper {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  transition: all 500ms linear;
+}
+.scrollWrapper::-webkit-scrollbar {
+  height: 0;
+}
+.el-tag {
+  margin: 0 5px;
+  cursor: pointer;
+  padding: 0 0px 0 10px;
+}
+.el-tag .el-tag--info {
+  background: #fff;
+}
+::v-deep .el-tag .el-icon-close {
+  right: 0px;
+}
+.arrow-icon {
+  pointer-events: all;
+  cursor: pointer;
+}
+.arrow-style {
+  font-size: 16px;
+  padding: 0 8px;
+  position: relative;
+  top: 8px;
+}
+.arrow-icon .el-button {
+  padding: 0px 5px;
+  height: 28px;
+}
+</style>
diff --git a/src/components/common/LocalConfig.vue b/src/components/common/LocalConfig.vue
index 4266174..95bfdeb 100644
--- a/src/components/common/LocalConfig.vue
+++ b/src/components/common/LocalConfig.vue
@@ -7,11 +7,16 @@
       <el-tab-pane label="常规设置">
         <el-form label-width="140px" size="size">
           <el-row>
-            <el-col :span="12">
+            <el-col :span="6">
               <el-form-item label="显示调试工具">
                 <el-checkbox v-model="LocalConfig.normal.isDevTool" size="small" />
               </el-form-item>
             </el-col>
+            <el-col :span="6">
+              <el-form-item label="显示标签页">
+                <el-checkbox v-model="LocalConfig.normal.displayTab" size="small" />
+              </el-form-item>
+            </el-col>
             <el-col :span="12">
               <el-form-item label="分页时单页记录数">
                 <el-input type="number" v-model="LocalConfig.normal.maxResultCount" size="small" />
@@ -248,6 +253,7 @@ export default {
           maxResultCount: 100, //分页时单页记录数
           PatientRegisterEdit: 'standard', //standard/qztl 人员登记组件版本
           PatientRegisterEditHeight: 0,  // 相较与标准版，选组合项目组件，减少高度
+          displayTab:false // 是否显示标签页
         },
         patientRegister: {
           edit: 'standard', //standard/qztl 人员登记组件版本
diff --git a/src/main.js b/src/main.js
index 5da432c..6347787 100644
--- a/src/main.js
+++ b/src/main.js
@@ -111,8 +111,16 @@ new Vue({
 window.addEventListener('resize', onResize);
 
 function onResize() {
-    //console.log(document.body.clientHeight,'-document.body.clientHeight-',window.innerHeight)
-    store.commit('setData', { key: 'window.pageHeight', value: window.innerHeight })
+    let LocalConfig = JSON.parse(window.localStorage.getItem("LocalConfig")) || null
+    try {
+      if(LocalConfig.normal.displayTab){
+        store.commit('setData', { key: 'window.pageHeight', value: window.innerHeight-36 })
+      }else{
+        store.commit('setData', { key: 'window.pageHeight', value: window.innerHeight })
+      }
+    } catch (error) {
+      console.log('window.localStorage.getItem("LocalConfig")', error)
+    }
     store.commit('setData', { key: 'window.pageWidth', value: window.innerWidth })
 }
 onResize();
diff --git a/src/router/index.js b/src/router/index.js
index 5c85e56..e11c04b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import vuex from "vuex"
+import store from "../store";
 // import HomeView from "../views/HomeView.vue";
 
 import login from "@/views/login/Login.vue";
@@ -293,7 +294,7 @@ const routes = [{
             },
             {
                 path: "/cardBill",
-                name: "会员卡记账",
+                name: "会员卡记账记录",
                 component: () =>
                     import ("../views/fee-settings/cardBill.vue"),
             },
@@ -423,7 +424,7 @@ const routes = [{
             },
             {
                 path: "/customerOrgGroup",
-                name: "单位分组设置",
+                name: "体检单位分组",
                 component: () =>
                     import ("../views/customerOrg/customerOrgGroup.vue"),
             },
@@ -441,7 +442,7 @@ const routes = [{
             },
             {
                 path: "/patientRegisterBatch",
-                name: "人员批量登记",
+                name: "人员批量预登记",
                 component: () =>
                     import ("../views/customerOrg/patientRegisterImport.vue"), //../views/doctorCheck/personnelBatch.vue
             },
@@ -471,7 +472,7 @@ const routes = [{
             },
             {
                 path: "/patientLis",
-                name: "检验条码打印",
+                name: "条码打印",
                 component: () =>
                     import ("../views/customerOrg/patientLis.vue"),
             },
@@ -583,7 +584,7 @@ const routes = [{
             },
             {
                 path: "/recoverQuery",
-                name: "回收表查询",
+                name: "回收表格查询",
                 component: () =>
                     import ("../components/patientRegister/patientRegisterRecoverListQuery.vue"),
             },
@@ -612,7 +613,7 @@ const routes = [{
             },
             {
                 path: "/positiveResultsList",
-                name: "阳性结果清单",
+                name: "阳性结果人员",
                 component: () =>
                     import ("../views/customerReport/positiveResultsList.vue"),
             },
@@ -654,7 +655,7 @@ const routes = [{
             },
             {
                 path: "/unitStatistics",
-                name: "单位体检统计",
+                name: "单位费用汇总",
                 component: () =>
                     import ("../views/customerReport/unitStatistics.vue")
             },
@@ -667,49 +668,49 @@ const routes = [{
             //----------------------  工作量登记  ----------------------
             {
                 path: "/registrar",
-                name: "登记员工作量",
+                name: "登记员工作量统计",
                 component: () =>
                     import ("../views/workload/registrar.vue"),
             },
             {
                 path: "/doctorstaionworkload",
-                name: "医生站工作量",
+                name: "医生工作量统计",
                 component: () =>
                     import ("../views/workload/doctorstaionworkload.vue"),
             },
             {
                 path: "/directordoctor",
-                name: "总检医生工作量",
+                name: "总检医生工作量统计",
                 component: () =>
                     import ("../views/workload/directordoctor.vue"),
             },
             {
                 path: "/examinedoctor",
-                name: "审核医生工作量",
+                name: "审核医生工作量统计",
                 component: () =>
                     import ("../views/workload/examinedoctor.vue"),
             },
             {
                 path: "/peisworkload",
-                name: "体检工作量",
+                name: "体检工作量统计",
                 component: () =>
                     import ("../views/workload/peisworkload.vue"),
             },
             {
                 path: "/deskwork",
-                name: "科室工作量",
+                name: "科室工作量统计",
                 component: () =>
                     import ("../views/workload/deskwork.vue"),
             },
             {
                 path: "/collectionbloodnurse",
-                name: "采血护士工作量",
+                name: "采血护士工作量统计",
                 component: () =>
                     import ("../views/workload/collectionbloodnurse.vue"),
             },
             {
                 path: "/tollcollector",
-                name: "收费员",
+                name: "收费员报表",
                 component: () =>
                     import ("../views/workload/tollcollector.vue"),
             },
@@ -751,7 +752,7 @@ const routes = [{
             },
             {
                 path: "/membershipcard",
-                name: "会员卡分类统计",
+                name: "会员卡收费统计",
                 component: () =>
                     import ("../views/workload/membershipcard.vue"),
             },
@@ -771,7 +772,7 @@ const routes = [{
             },
             {
                 path: "/ResultTemplate",
-                name: "词条模板",
+                name: "词条模版",
                 component: () =>
                     import ("../views/fee-settings/BigtextResultTemplate.vue"),
             },
@@ -792,6 +793,7 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
+    store.commit('getMenu')
     let token = window.sessionStorage.getItem("token");
     let tokentype = window.sessionStorage.getItem("tokentype");
     if (to.path == "/login") {
diff --git a/src/store/index.js b/src/store/index.js
index eaa1933..e6f113d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,10 +3,12 @@ import Vuex from "vuex";
 // import { getapi, postapi, putapi, deletapi } from "@/api/api";
 // import { arrayReduce } from "@/utlis/proFunc";
 
-Vue.use(Vuex);
+Vue.use(Vuex); 
 
-export default new Vuex.Store({
+export default new Vuex.Store({ 
     state: {
+        tabsList: [
+        ],
         sysConfig: { apiurl: '' }, // 
         pickerOptions: {
             disabledDate(time) {
@@ -213,7 +215,6 @@ export default new Vuex.Store({
                 patientName: '', //姓名
                 sex: '', //性别
                 idCardNo: '', //身份证号
-                phone:'', // 手机号
                 isReportPrint:'', // 报告是否打印
                 isSeries: 'N',
                 isSmsComplete: "N",
@@ -550,8 +551,6 @@ export default new Vuex.Store({
                 asbItemAll: [],   //所有未选组合项目
             },
 
-            copyGroupAsbitem:[],  //单位设置 复制/粘贴 用
-
             doctorCutPics:[],  // 医生诊台剪切图片用
             sumCutRows:[],  // 总检剪切诊断用
 
@@ -648,6 +647,27 @@ export default new Vuex.Store({
                     patientId: '', //人员档案ID
                 } //人员体检登记显示基本信息
         },
+        selectMenu(state, val) {
+            let result = state.tabsList.findIndex(item => item.displayName === val.displayName)
+            result === -1 ? state.tabsList.push(val) : ''
+            sessionStorage.setItem('tagList', JSON.stringify(state.tabsList))
+        },
+        closeTab(state, val) {
+            let result = state.tabsList.findIndex(item => item.displayName === val.displayName)
+            state.tabsList.splice(result, 1)
+            sessionStorage.setItem('tagList', JSON.stringify(state.tabsList))
+        },
+        getMenu(state) {
+            if (sessionStorage.getItem('tagList')) {
+                let tagList = JSON.parse(sessionStorage.getItem('tagList'))
+                state.tabsList = tagList
+            }
+        },
+        clearMenuTab(state) {
+            //清除标签
+            state.tabsList = []
+            sessionStorage.removeItem('tagList')
+        },
     },
 
     actions: {
@@ -718,5 +738,7 @@ export default new Vuex.Store({
         //         });
         // },
     },
-    modules: {},
+    modules: {
+        
+    },
 });
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 259f35f..339c691 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -143,8 +143,16 @@
             <el-button type="primary" @click="determine">确 定</el-button>
           </span>
         </el-dialog>
-        <el-container>
-          <el-main>
+        <el-container v-if="LocalConfig.normal.displayTab">
+          <common-tab></common-tab>
+          <el-main style="margin-top: 84px;">
+            <keep-alive>
+              <router-view></router-view>
+            </keep-alive>
+          </el-main>
+        </el-container>
+        <el-container v-else>
+          <el-main style="margin-top: 50px;">
             <router-view></router-view>
           </el-main>
         </el-container>
@@ -169,10 +177,12 @@ import { getTreeNode, madeTree } from "../utlis/tree";
 import { deepCopy } from "@/utlis/proFunc";
 import LocalConfig from "../components/common/LocalConfig.vue";;
 import { setDBCom, getDBCom, clearDBCom } from "../utlis/indexedDB";
+import CommonTab from '../components/common/CommonTab.vue'
 
 export default {
   components: {
     LocalConfig,
+    CommonTab
   },
   data() {
     return {
@@ -200,6 +210,7 @@ export default {
       LocalConfig: {
         normal: { // 常规参数
           isDevTool: false, // 壳端是否显示打开调试工具的按钮
+          displayTab:false// 是否显示标签页
         }
       },
       LocalConfigInit: {},
@@ -267,7 +278,10 @@ export default {
       // console.log(key, keyPath);
       // tree: any, childNodeName: any, idName: any, idVal: any
       let node = getTreeNode(this.menuPriv, "treeChildren", "id", key);
-      if (node && this.$route.path !== '/' + node.routeUrl) this.$router.push({ path: node.routeUrl });
+      if (node && this.$route.path !== '/' + node.routeUrl){
+        this.$store.commit('selectMenu', node)
+        this.$router.push({ path: node.routeUrl });
+      }
     },
     //获取用户所有权限
     getUserAllPriv() {
@@ -582,6 +596,7 @@ export default {
 .el-container {
   /* position: fixed; */
   width: 100%;
+  flex-direction: column;
 }
 
 .el-menu {
@@ -638,8 +653,7 @@ export default {
 }
 
 .el-main {
-  margin-top: 50px;
-  height: calc(100vh, -70px);
+  height: calc(100vh -200px);
 }
 
 .el-menu-vertical-demo .el-menu {