forked from BaoKaiWms/202501-Wms-Kate-Wuxi
修复一些路由跳转问题
This commit is contained in:
parent
ab65f82cf4
commit
64f1067a8d
18905
dev_wms_client/package-lock.json
generated
18905
dev_wms_client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -1,92 +1,91 @@
|
|||
<template>
|
||||
<el-scrollbar ref="scrollbar" :wrap-style="{ 'align-content': 'center' }">
|
||||
<div class="app-tag">
|
||||
<el-tag closable size="default" v-for="(tag, index) in tags" :key="tag.labelName"
|
||||
:disable-transitions="true" :effect="$route.path === tag.path ? 'dark' : 'plain'"
|
||||
@close="handleClose(tag, index)" @click="handleClick(tag, index)">
|
||||
<el-tooltip effect="light" :content="tag.labelName" placement="top">
|
||||
{{ tag.labelName.length > 4 ? tag.labelName.substring(0, 4) + '..' : tag.labelName }}
|
||||
</el-tooltip>
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar ref="scrollbar" :wrap-style="{ 'align-content': 'center' }">
|
||||
<div class="app-tag">
|
||||
<el-tag closable size="default" v-for="(tag, index) in tags" :key="tag.labelName"
|
||||
:disable-transitions="true" :effect="$route.path === tag.path ? 'dark' : 'plain'"
|
||||
@close="handleClose(tag, index)" @click="handleClick(tag, index)">
|
||||
<el-tooltip effect="light" :content="tag.labelName" placement="top">
|
||||
{{ tag.labelName.length > 4 ? tag.labelName.substring(0, 4) + '..' : tag.labelName }}
|
||||
</el-tooltip>
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import store from '@/store'
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
import { onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {nextTick, ref, watch} from 'vue'
|
||||
import {onMounted} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
const router = useRouter()
|
||||
let tags = ref([])
|
||||
const scrollbar = ref()
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
tags.value = store.getters.getStateTagsList
|
||||
nextTick(() => {
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
})
|
||||
tags.value = store.getters.getStateTagsList
|
||||
nextTick(() => {
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
})
|
||||
})
|
||||
// 根据路由变化更新标签
|
||||
watch(() => router.currentRoute.value.path, (newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
// 找到path对应的tag
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
}
|
||||
if (newVal !== oldVal) {
|
||||
// 找到path对应的tag
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
}
|
||||
})
|
||||
// 关闭标签
|
||||
const closeTag = (tag) => {
|
||||
store.commit('mutationCloseTag', tag)
|
||||
store.commit('mutationCloseTag', tag)
|
||||
}
|
||||
// 处理关闭
|
||||
const handleClose = (tag, index) => {
|
||||
if (tags.value.length === 1) { // 如果只有一个标签则不能关闭
|
||||
return
|
||||
}
|
||||
closeTag(tag) // 删除当前tag
|
||||
if (router.path !== tag.path) {
|
||||
if (index === (tags.value.length - 1)) { // 关闭最后一个标签,则路由跳转至最后一个
|
||||
router.push(this.tags[index].path)
|
||||
} else { // 路由跳转至下一个标签页
|
||||
if (index === 0) {
|
||||
router.push(tags.value[0].path)
|
||||
} else {
|
||||
router.push(tags.value[index - 1].path)
|
||||
}
|
||||
}
|
||||
// 处理跳转
|
||||
if (router.currentRoute.value.path === tag.path) {
|
||||
console.log(index + ':' + tags.value.length)
|
||||
if (index === (tags.value.length - 1)) { // 关闭最后一个标签,则路由跳转至最后一个
|
||||
router.push('/home')
|
||||
} else { // 路由跳转至下一个标签页
|
||||
if (index === 0) {
|
||||
router.push(tags.value[index + 1].path)
|
||||
} else {
|
||||
router.push(tags.value[index - 1].path)
|
||||
}
|
||||
}
|
||||
}
|
||||
closeTag(tag) // 删除当前tag
|
||||
}
|
||||
// 点击tags具体标签
|
||||
const handleClick = (tag) => {
|
||||
router.push(tag.path)
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
router.push(tag.path)
|
||||
autoScroll(router.currentRoute.value.path)
|
||||
}
|
||||
// 设置滚动
|
||||
const autoScroll = (path) => {
|
||||
// 找到path对应的tag
|
||||
tags.value.forEach((item, index) => {
|
||||
if (item.path === path) {
|
||||
scrollbar.value.setScrollLeft(index * 80)
|
||||
}
|
||||
})
|
||||
// 找到path对应的tag
|
||||
tags.value.forEach((item, index) => {
|
||||
if (item.path === path) {
|
||||
scrollbar.value.setScrollLeft(index * 80)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-tag {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-tag .el-tag {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
margin-right: 2px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.app-tag .el-tag:hover {
|
||||
color: #000;
|
||||
background-color: #5A9CF8;
|
||||
color: #000;
|
||||
background-color: #5A9CF8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
<template>
|
||||
<div class="menu-title">主菜单</div>
|
||||
<!-- 侧边栏菜单区域 -->
|
||||
<el-menu :default-active="route.path" active-text-color="#409Eff" background-color="#fff" text-color="#000" :router="true" unique-opened>
|
||||
<!-- 一级菜单 -->
|
||||
<el-sub-menu :index="item.id" v-for="item in menuList" :key="item.id">
|
||||
<!-- 一级菜单模板区域 -->
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="item.iconValue"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.labelName }}</span>
|
||||
</template>
|
||||
<!-- 二级菜单 -->
|
||||
<el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
|
||||
@click="clickMenu(subItem)">
|
||||
<template #title>
|
||||
<span>{{ subItem.labelName }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
<div class="menu-title">主菜单</div>
|
||||
<!-- 侧边栏菜单区域 -->
|
||||
<el-menu :default-active="route.path" active-text-color="#409Eff" background-color="#fff" text-color="#000"
|
||||
:router="true" unique-opened>
|
||||
<!-- 一级菜单 -->
|
||||
<el-sub-menu :index="item.id" v-for="item in menuList" :key="item.id">
|
||||
<!-- 一级菜单模板区域 -->
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="item.iconValue"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.labelName }}</span>
|
||||
</template>
|
||||
<!-- 二级菜单 -->
|
||||
<el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
|
||||
@click="clickMenu(subItem)">
|
||||
<template #title>
|
||||
<span>{{ subItem.labelName }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import store from '@/store'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {useRoute} from 'vue-router'
|
||||
|
||||
const menuList = store.getters.getMenuList
|
||||
const route = useRoute()
|
||||
// 点击菜单
|
||||
const clickMenu = (item) => {
|
||||
store.commit('mutationSelectTags', item)
|
||||
store.commit('mutationSelectTags', item)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.menu-title {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="work-area">
|
||||
<fieldset class="search-area">
|
||||
<el-form ref="stockQueryFormRef" :model="stockQuery" :label-position="labelPosition"
|
||||
label-width="158px" style="max-width: 100%" status-icon>
|
||||
label-width="auto" style="max-width: 100%" status-icon>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<el-row>
|
||||
<el-form-item label="箱号">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@
|
|||
<script setup>
|
||||
import store from '@/store'
|
||||
import router from '@/router'
|
||||
const user = store.getters.getUserNam// 用户名
|
||||
|
||||
const user = store.getters.getUserName// 用户名
|
||||
const token = store.getters.getToken// 密码
|
||||
// 登录到WMS系统
|
||||
const loginToWms = () => {
|
||||
|
|
@ -50,12 +51,10 @@ const loginToScanImage = () => {
|
|||
}
|
||||
// 登录到WCS系统
|
||||
const loginToWcs = () => {
|
||||
const wcsUrl = `https://cxlasrs.ecorp.cat.com/wcs/#/login?user=user&pwd=user`
|
||||
window.location.href = wcsUrl// 打开新窗口
|
||||
window.location.href = `https://cxlasrs.ecorp.cat.com/wcs/#/login?user=user&pwd=user`// 打开新窗口
|
||||
}
|
||||
const loginToMonitor = () => {
|
||||
const mpnitorUrl = `https://cxlasrs.ecorp.cat.com?user=${user}&token=${token}`
|
||||
window.location.href = mpnitorUrl// 当前窗口跳转
|
||||
window.location.href = `https://cxlasrs.ecorp.cat.com?user=${user}&token=${token}`// 当前窗口跳转
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user