You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
16 KiB
563 lines
16 KiB
<template>
|
|
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
|
|
<div class="site-navbar__header">
|
|
<!-- @click="$router.push({ name: 'home' })"-->
|
|
<h1 class="site-navbar__brand">
|
|
<el-menu
|
|
class="site-navbar__menu"
|
|
mode="horizontal">
|
|
<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
|
|
<icon-svg name="zhedie"></icon-svg>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
<a class="site-navbar__brand-lg" href="javascript:;">WMS</a>
|
|
<a class="site-navbar__brand-mini" href="javascript:;">{{ pageLanguage.abbreviation }}</a>
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<div class="site-navbar__body clearfix">
|
|
|
|
<el-menu
|
|
class="site-navbar__menu site-navbar__menu--right"
|
|
mode="horizontal">
|
|
<el-menu-item class="site-navbar__factory" index="0.5" v-if="siteList.length > 0">
|
|
<div class="factory-selector">
|
|
<i class="el-icon-office-building factory-icon"></i>
|
|
<el-select
|
|
v-model="selectedSite"
|
|
@change="handleSiteChange"
|
|
placeholder="选择工厂"
|
|
class="factory-select"
|
|
popper-class="factory-select-dropdown"
|
|
size="small">
|
|
<el-option
|
|
v-for="item in siteList"
|
|
:key="item.siteCode"
|
|
:label="item.siteName"
|
|
:value="item.siteCode">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</el-menu-item>
|
|
<el-menu-item class="site-navbar__avatar" index="1">
|
|
<span class="el-dropdown-link" @click="userSetting">
|
|
<icon-svg name="editTable" style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>
|
|
</span>
|
|
</el-menu-item>
|
|
<el-menu-item v-if="isAuth('review:show')" class="site-navbar__avatar" index="1">
|
|
<span class="el-dropdown-link">
|
|
<router-link :to="{path:'purchaseorder-procurementReview',query:{'': ''}}">
|
|
工具待审核
|
|
</router-link>
|
|
<el-badge isAuth :value="pending.pendingReview" class="item" style="margin-top: 10px"/>
|
|
</span>
|
|
</el-menu-item>
|
|
<el-menu-item class="site-navbar__avatar" index="2">
|
|
<span style=" color: #909399;" @click="helpFileList()">
|
|
帮助
|
|
<!-- <icon-svg name="help" style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>-->
|
|
</span>
|
|
</el-menu-item>
|
|
<el-submenu index="3">
|
|
<template slot="title">{{ pageLanguage.setting }}</template>
|
|
<el-submenu index="2-1">
|
|
<template slot="title">{{ pageLanguage.languageSetting }}</template>
|
|
<el-menu-item index="2-1-1" :key="index" :value="item.languageCode" v-for="(item,index) in languageList "
|
|
@click.native="switch_the_language(item.languageCode)">{{ item.languageName }}
|
|
</el-menu-item>
|
|
</el-submenu>
|
|
<el-submenu index="2-2">
|
|
<template slot="title">{{ pageLanguage.userSetting }}</template>
|
|
<el-menu-item index="2-2-1" @click.native="updatePasswordHandle()">{{ pageLanguage.updatePassword }}
|
|
</el-menu-item>
|
|
<el-menu-item index="2-2-2" @click.native="updateLanguageHandle()">{{ pageLanguage.updateDefaultLanguage }}
|
|
</el-menu-item>
|
|
</el-submenu>
|
|
<el-menu-item index="2-3" @click="$router.push({ name: 'theme' })">{{ pageLanguage.cssSetting }}
|
|
</el-menu-item>
|
|
<el-menu-item index="2-4" @click="printList()">{{ pageLanguage.printSetting }}</el-menu-item>
|
|
</el-submenu>
|
|
<el-menu-item class="site-navbar__avatar" index="4">
|
|
<el-dropdown :show-timeout="0" placement="bottom">
|
|
<span class="el-dropdown-link">
|
|
<img src="~@/assets/img/ccl.png" :alt="userName">{{ userName }}
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
</div>
|
|
<!-- 弹窗, 修改密码 -->
|
|
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
|
|
<!-- 弹窗, 修改默认语言 -->
|
|
<update-language v-if="updateLanguageVisible" ref="updateLanguage"></update-language>
|
|
<!-- 文件列表 -->
|
|
<FileListView ref="fileListView" v-if="helpFileVisible"></FileListView>
|
|
<!-- 打印机列表 -->
|
|
<UserPrintList ref="userPrintList" v-if="printListVisible"></UserPrintList>
|
|
|
|
<!-- 动态列 -->
|
|
<column v-if="visible" ref="column" @refreshData="getTableUserColumn" v-drag></column>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import UpdatePassword from './main-navbar-update-password'
|
|
import UpdateLanguage from './main-navbar-update-language'
|
|
import {clearLoginInfo} from '@/utils'
|
|
import FileListView from './modules/common/file-list-view'
|
|
import UserPrintList from './modules/common/user-print-list'
|
|
import column from "./modules/common/column";
|
|
import {
|
|
searchFunctionButtonList,
|
|
saveButtonList,
|
|
searchSysLanguage,
|
|
} from "@/api/sysLanguage.js"
|
|
import {getUserAuthorizedSites} from '@/api/factory/accessSite.js'
|
|
|
|
export default {
|
|
inject: ['refresh'],
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
updatePassowrdVisible: false,
|
|
updateLanguageVisible: false,
|
|
helpFileVisible: false,
|
|
printListVisible: false,
|
|
message: this.$t('language.name'),
|
|
languageList: [],
|
|
siteList: [],
|
|
selectedSite: '',
|
|
pageLanguage: {
|
|
XjSysManage: '旭捷管理系统',
|
|
abbreviation: '旭捷',
|
|
setting: '设置',
|
|
languageSetting: '语言设置',
|
|
userSetting: '用户设置',
|
|
updatePassword: '修改密码',
|
|
updateDefaultLanguage: '修改默认语言',
|
|
cssSetting: '主提设置',
|
|
printSetting: '打印设置',
|
|
},
|
|
// 导出 end
|
|
pageLanguageList: [
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '旭捷管理系统',
|
|
objectId: 'XjSysManage',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '首页',
|
|
objectId: 'homePage',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '旭捷',
|
|
objectId: 'abbreviation',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '设置',
|
|
objectId: 'setting',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '语言设置',
|
|
objectId: 'languageSetting',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '用户设置',
|
|
objectId: 'userSetting',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '修改密码',
|
|
objectId: 'updatePassword',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '修改用户语言',
|
|
objectId: 'updateDefaultLanguage',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '主题设置',
|
|
objectId: 'cssSetting',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
},
|
|
{
|
|
functionId: "systemInformation",
|
|
languageValue: '打印设置',
|
|
objectId: 'printSetting',
|
|
objectType: "label",
|
|
tableId: "systemInformation"
|
|
}
|
|
],
|
|
pending: {
|
|
pendingReview: 0,
|
|
pendingSum: 0,
|
|
},
|
|
queryToolReview: {
|
|
site: this.$store.state.user.site,
|
|
userId: this.$store.state.user.name,
|
|
strUserId: this.$store.state.user.id,
|
|
},
|
|
toolReviewTimer: null,
|
|
}
|
|
},
|
|
watch: {
|
|
pending: {
|
|
deep: true,
|
|
handler: function (newV, oldV) {
|
|
this.pending.pendingSum = this.pending.pendingReview
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
UpdatePassword,
|
|
UpdateLanguage,
|
|
FileListView,
|
|
UserPrintList,
|
|
column,
|
|
},
|
|
computed: {
|
|
navbarLayoutType: {
|
|
get() {
|
|
return this.$store.state.common.navbarLayoutType
|
|
}
|
|
},
|
|
sidebarFold: {
|
|
get() {
|
|
return this.$store.state.common.sidebarFold
|
|
},
|
|
set(val) {
|
|
this.$store.commit('common/updateSidebarFold', val)
|
|
}
|
|
},
|
|
mainTabs: {
|
|
get() {
|
|
return this.$store.state.common.mainTabs
|
|
},
|
|
set(val) {
|
|
this.$store.commit('common/updateMainTabs', val)
|
|
}
|
|
},
|
|
userName: {
|
|
get() {
|
|
return this.$store.state.user.userDisplay
|
|
}
|
|
}
|
|
},
|
|
activated() {
|
|
|
|
},
|
|
mounted() {
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.toolReviewTimer);
|
|
},
|
|
methods: {
|
|
// 打开页面设置
|
|
userSetting() {
|
|
this.visible = true;
|
|
let queryTable = {
|
|
userId: this.$store.state.user.name,
|
|
functionId: this.$route.meta.menuId,
|
|
languageCode: this.$i18n.locale,
|
|
tableId: '',
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.column.init(queryTable);
|
|
})
|
|
},
|
|
getTableUserColumn() {
|
|
this.$nextTick(() => {
|
|
this.refresh()
|
|
})
|
|
},
|
|
// 打印机列表
|
|
printList() {
|
|
this.printListVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.userPrintList.init()
|
|
})
|
|
},
|
|
// 帮助文档列表
|
|
helpFileList() {
|
|
let fileMappingDto = {
|
|
fileId: '',
|
|
fileType: '功能帮助文档',
|
|
orderRef1: this.$route.meta.menuId,
|
|
orderRef2: '',
|
|
orderRef3: '',
|
|
}
|
|
this.helpFileVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.fileListView.init(fileMappingDto)
|
|
})
|
|
},
|
|
// 获取多语言列表
|
|
getLanguageList() {
|
|
searchSysLanguage({languageCode: this.$i18n.locale}).then(({data}) => {
|
|
this.languageList = data.rows
|
|
})
|
|
},
|
|
// 获取页面多语言数据
|
|
getFunctionButtonList() {
|
|
let queryButton = {
|
|
functionId: 'systemInformation',
|
|
tableId: 'systemInformation',
|
|
languageCode: this.$i18n.locale,
|
|
objectType: 'label'
|
|
}
|
|
searchFunctionButtonList(queryButton).then(({data}) => {
|
|
if (data.code === 0) {
|
|
this.pageLanguage = data.data
|
|
}
|
|
})
|
|
},
|
|
// 注3：增加语言切换函数
|
|
switch_the_language(val) {
|
|
localStorage.setItem('locale', val)
|
|
this.$i18n.locale = val; // 修改当前语言
|
|
location.reload()
|
|
},
|
|
// 修改密码
|
|
updatePasswordHandle() {
|
|
this.updatePassowrdVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.updatePassowrd.init()
|
|
})
|
|
},
|
|
// 修改用户默认语言
|
|
updateLanguageHandle() {
|
|
this.updateLanguageVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.updateLanguage.init()
|
|
})
|
|
},
|
|
// 退出
|
|
logoutHandle() {
|
|
this.$confirm(`确定进行[退出]操作?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$http({
|
|
url: this.$http.adornUrl('/sys/logout'),
|
|
method: 'post',
|
|
data: this.$http.adornData()
|
|
}).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
clearLoginInfo()
|
|
this.$router.push({name: 'login'})
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
// 初始化工厂选择
|
|
initSiteSelection() {
|
|
// 从localStorage获取当前选择的工厂
|
|
this.selectedSite = localStorage.getItem('site') || '';
|
|
|
|
// 获取当前用户的工厂列表
|
|
const userName = localStorage.getItem('userName');
|
|
if (userName) {
|
|
this.getUserSiteList(userName);
|
|
}
|
|
},
|
|
// 获取用户授权的工厂列表
|
|
getUserSiteList(userName) {
|
|
if (!userName || !userName.trim()) {
|
|
this.siteList = [];
|
|
return;
|
|
}
|
|
|
|
getUserAuthorizedSites({ userName: userName.trim() }).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
this.siteList = data.data || data.list || [];
|
|
|
|
// 如果当前选择的工厂不在列表中，清空选择
|
|
if (this.selectedSite && !this.siteList.find(site => site.siteCode === this.selectedSite)) {
|
|
this.selectedSite = '';
|
|
localStorage.removeItem('site');
|
|
}
|
|
|
|
// 如果没有选择工厂但有工厂列表，选择第一个
|
|
if (!this.selectedSite && this.siteList.length > 0) {
|
|
this.selectedSite = this.siteList[0].siteCode;
|
|
localStorage.setItem('site', this.selectedSite);
|
|
}
|
|
} else {
|
|
this.siteList = [];
|
|
console.error('获取工厂列表失败:', data.msg);
|
|
}
|
|
}).catch(error => {
|
|
this.siteList = [];
|
|
console.error('获取工厂列表失败:', error);
|
|
})
|
|
},
|
|
// 工厂选择变更处理
|
|
handleSiteChange(siteCode) {
|
|
const selectedSite = this.siteList.find(site => site.siteCode === siteCode);
|
|
const siteName = selectedSite ? selectedSite.siteName : siteCode;
|
|
|
|
localStorage.setItem('site', siteCode);
|
|
|
|
this.$message({
|
|
message: `已切换到工厂：${siteName}`,
|
|
type: 'success',
|
|
duration: 2000,
|
|
showClose: true
|
|
});
|
|
|
|
// 添加切换动画效果
|
|
const factorySelect = document.querySelector('.factory-select');
|
|
if (factorySelect) {
|
|
factorySelect.style.transform = 'scale(1.05)';
|
|
setTimeout(() => {
|
|
factorySelect.style.transform = 'scale(1)';
|
|
}, 200);
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getLanguageList()
|
|
this.getFunctionButtonList()
|
|
this.initSiteSelection()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.icon-svg {
|
|
width: 2em;
|
|
}
|
|
|
|
.el-menu--collapse .el-menu .el-submenu, .el-menu--popup, .el-menu-item {
|
|
min-width: 50px !important;
|
|
}
|
|
|
|
.site-navbar__brand-lg, .site-navbar__brand-mini {
|
|
margin: 0 5px;
|
|
color: #fff;
|
|
margin-left: -45px;
|
|
}
|
|
|
|
// 工厂选择器样式
|
|
.site-navbar__factory {
|
|
padding: 0 15px !important;
|
|
|
|
.factory-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.factory-icon {
|
|
color: #409EFF;
|
|
font-size: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.factory-select {
|
|
width: 140px;
|
|
transition: transform 0.2s ease;
|
|
|
|
.el-input__inner {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
border: 1px solid rgba(64, 158, 255, 0.3);
|
|
border-radius: 20px;
|
|
color: #409EFF;
|
|
font-size: 13px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: rgba(64, 158, 255, 0.15);
|
|
border-color: #409EFF;
|
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
&:focus {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
border-color: #409EFF;
|
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.el-input__suffix {
|
|
.el-input__suffix-inner {
|
|
.el-select__caret {
|
|
color: #409EFF;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-focus {
|
|
.el-input__suffix-inner .el-select__caret {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(64, 158, 255, 0.05) !important;
|
|
}
|
|
}
|
|
|
|
// 工厂选择下拉选项样式 - 使用popper-class限制作用域，避免影响全局下拉框
|
|
.factory-select-dropdown {
|
|
.el-select-dropdown__item {
|
|
&:hover {
|
|
background-color: rgba(64, 158, 255, 0.1);
|
|
color: #409EFF;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: #409EFF;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
|
|
&::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
right: 15px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-menu--horizontal > .el-menu-item {
|
|
color: #3b4249;
|
|
}
|
|
|
|
</style>
|
|
|