|
|
|
@ -1,43 +1,20 @@ |
|
|
|
<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> |
|
|
|
<el-button icon="el-icon-delete" size="medium" :disabled="tags.length==0" @click="clearControlLabel"></el-button> |
|
|
|
<div class="arrow-icon" @click="arrowBack" style="position: fixed; left: 4px"> |
|
|
|
<el-button size="medium" icon="el-icon-arrow-left" :disabled="isLeftDisabled"></el-button> |
|
|
|
<el-button icon="el-icon-delete" size="medium" :disabled="tags.length == 0" @click="clearControlLabel"></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'" |
|
|
|
> |
|
|
|
<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 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> |
|
|
|
@ -138,14 +115,14 @@ export default { |
|
|
|
// 查找当前激活的标签（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; |
|
|
|
@ -155,14 +132,14 @@ export default { |
|
|
|
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.debouncedUpdateButtonStates(); |
|
|
|
@ -170,15 +147,34 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleClose(tag, index) { |
|
|
|
let length = this.tags.length - 1; |
|
|
|
this.close(tag); |
|
|
|
// 关闭医生诊台时，要关闭医生诊台的监听 add by pengj 2026-02-26 |
|
|
|
if (tag?.displayName == "体检医生诊台" && this.$peisAPI) { |
|
|
|
console.log("CommonTab.handleClose", tag) |
|
|
|
try { |
|
|
|
// 取消采图热键监听 |
|
|
|
this.$peisAPI.removeAllListeners("event-from-picture-hot-key-main") |
|
|
|
this.$peisAPI.removeAllListeners("event-from-picture-and-print-hot-key-main") |
|
|
|
this.$peisAPI.removeAllListeners("event-from-picture-print-hot-key-main") |
|
|
|
this.$peisAPI.removeAllListeners("event-from-picture-cancel-print-hot-key-main") |
|
|
|
this.$peisAPI.removeAllListeners("event-from-picture-delete-hot-key-main") |
|
|
|
|
|
|
|
// 取消 身高体重仪、血压仪 监听 |
|
|
|
this.$peisAPI.removeAllListeners("serial:data") |
|
|
|
} catch (error) { |
|
|
|
console.error(error) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 如果关闭的标签不是当前路由的话，就不跳转 |
|
|
|
if (tag.displayName !== this.$route.name) { |
|
|
|
this.handleScroll(); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 关闭的标签是最右边的话，往左边跳转一个 |
|
|
|
if (index === length) { |
|
|
|
if (this.tags[index - 1]) { |
|
|
|
@ -238,6 +234,7 @@ export default { |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
@import '../../assets/css/global_button.css'; |
|
|
|
|
|
|
|
.tags-list { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -250,6 +247,7 @@ export default { |
|
|
|
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; |
|
|
|
@ -259,36 +257,44 @@ export default { |
|
|
|
position: relative; |
|
|
|
margin: 0 64px 0 138px; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
|
pengjun
2 months ago