323 lines
8.2 KiB
Vue
323 lines
8.2 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<div class="navbar-left">
|
|
<div class="top-left-logo">
|
|
<img style="height: 25px" src="@/assets/images/sdklogo.png" alt="">
|
|
<img style="margin-left:10px;height: 24px" src="@/assets/images/wms.png" alt="">
|
|
</div>
|
|
<div class="top-left-split" v-if="menuMode === 'horizontal'"></div>
|
|
<!--菜单上下结构时显示-->
|
|
<div class="top-left-menu" v-if="menuMode === 'horizontal'">
|
|
<!-- <Sidebar />-->
|
|
<Menu />
|
|
</div>
|
|
</div>
|
|
<div class="navbar-right">
|
|
<lang-select class="navbar-lang" />
|
|
<!-- 布局选择 -->
|
|
<el-dropdown
|
|
popper-class="mode-select-popper"
|
|
class="mode-select"
|
|
@command="changeMenuMode"
|
|
>
|
|
<svg-icon icon-class="mode" width="22px" height="22px"/>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="(item,index) of naviModes"
|
|
:key="index"
|
|
:command="item.value"
|
|
>
|
|
<svg-icon
|
|
:icon-class="menuMode === item.value?item.icon+'-select':item.icon+'-default'"
|
|
:width="'20px'"
|
|
:height="'20px'"
|
|
></svg-icon>
|
|
<span>{{item.label}}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<el-dropdown popper-class="navbar-user" @command="changeSysOpe">
|
|
<div class="navbar-use-show">
|
|
<svg-icon icon-class="head_pic" :width="'24px'" :height="'24px'"></svg-icon>
|
|
<span class="userName" style="font-size: 13px;">{{ userName || "" }}</span>
|
|
</div>
|
|
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="sop">
|
|
<svg-icon icon-class="sys_sop" width="16px" height="16px"></svg-icon>
|
|
<span>操作手册</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item command="pwdDrawer">
|
|
<svg-icon icon-class="modify_pwd" width="16px" height="16px"></svg-icon>
|
|
<span>修改密码</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item command="logout">
|
|
<svg-icon icon-class="logout" width="16px" height="16px"></svg-icon>
|
|
<span>退出</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<!-- 修改密码的抽屉 -->
|
|
<el-drawer title="修改密码" v-model="pwdVisible" @close="pwdVisible = false" @opened="pwdOpend">
|
|
<el-form ref="formDataRef" :model="formData" :rules="rules" label-position="top">
|
|
<el-form-item label="原密码" prop="oripwd">
|
|
<el-input show-password v-model="formData.oripwd" placeholder="请确认密码" />
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="pwd">
|
|
<el-input show-password v-model="formData.pwd" placeholder="请输入密码" />
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="pwdConfirm">
|
|
<el-input show-password v-model="formData.pwdConfirm" placeholder="请确认密码" />
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button @click="pwdVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { ElForm, ElMessageBox } from 'element-plus';
|
|
import useStore from '@/store';
|
|
import Menu from './Menu.vue';
|
|
|
|
// 组件依赖
|
|
import LangSelect from '@/components/LangSelect/index.vue';
|
|
import { changePssword, getRSAPublic } from "@/api/auth";
|
|
import { JSEncrypt } from "jsencrypt";
|
|
|
|
const { app, tagsView } = useStore();
|
|
const router = useRouter();
|
|
const menuMode = computed(() => app.menuMode);
|
|
const formDataRef = ref(ElForm);
|
|
const { proxy }: any = getCurrentInstance();
|
|
const state = reactive({
|
|
naviModes: [{
|
|
value: 'horizontal',
|
|
label: '上下布局',
|
|
icon: 'top-bottom'
|
|
}, {
|
|
value: 'vertical',
|
|
label: '左右布局',
|
|
icon: 'left-right'
|
|
}],
|
|
name: '' as any,
|
|
userN: '' as any,
|
|
pwdVisible: false,
|
|
formData: {
|
|
pwd: '',
|
|
pwdConfirm: '',
|
|
oripwd: ''
|
|
},
|
|
rules: {
|
|
pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
oripwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
|
pwdConfirm: [
|
|
{ required: true, message: '请确认密码', trigger: 'blur' },
|
|
{ validator: validatePassword, trigger: 'blur' }
|
|
],
|
|
},
|
|
rsa: '',
|
|
userName: '' as any,
|
|
});
|
|
|
|
const {
|
|
naviModes,
|
|
userName,
|
|
pwdVisible,
|
|
formData,
|
|
rules,
|
|
rsa,
|
|
name
|
|
} = toRefs(state);
|
|
onMounted(() => {
|
|
state.userName = localStorage.getItem('userName') ? localStorage.getItem('userName') : '';
|
|
});
|
|
function changeMenuMode(item: any) {
|
|
app.changeMenuMode(item);
|
|
}
|
|
function changeSysOpe(item: any) {
|
|
switch (item) {
|
|
case 'sop':
|
|
break;
|
|
case 'pwdDrawer':
|
|
state.pwdVisible = true;
|
|
break;
|
|
case 'logout':
|
|
logout();
|
|
break;
|
|
}
|
|
}
|
|
function validatePassword(rule: any, value: any, callback: any) {
|
|
if (value != state.formData.pwd) {
|
|
callback(new Error('密码输入不一致'));
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
function pwdOpend() {
|
|
state.formData = {
|
|
pwd: '',
|
|
pwdConfirm: '',
|
|
oripwd: ''
|
|
}
|
|
getRSAPublic().then((res: any) => {
|
|
state.rsa = res.data;
|
|
}).catch((error: any) => {
|
|
//报错内容
|
|
});
|
|
}
|
|
function submitForm() {
|
|
formDataRef.value.validate((valid: boolean) => {
|
|
if (valid) {
|
|
// let encrypt = new JSEncrypt(); // 新建JSEncrypt对象
|
|
// encrypt.setPublicKey(state.rsa); // 设置公钥
|
|
// let encrypted = encrypt.encrypt(state.formData.pwd); // 对密码进行加密
|
|
// state.formData.pwd = encrypted;
|
|
let params = {
|
|
userId: localStorage.getItem('userId'),
|
|
oldPassword: state.formData.oripwd,
|
|
newPassword: state.formData.pwd
|
|
}
|
|
changePssword(params).then((res: any) => {
|
|
proxy.$ElMessage.success('修改密码成功');
|
|
state.pwdVisible = false;
|
|
})
|
|
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
function logout() {
|
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
tagsView.delAllViews();
|
|
router.push(`/login`);
|
|
// localStorage.clear();
|
|
localStorage.removeItem('ut');
|
|
localStorage.removeItem('userId');
|
|
localStorage.removeItem('userName');
|
|
localStorage.removeItem('orgNo');
|
|
localStorage.removeItem('session');
|
|
localStorage.removeItem('token');
|
|
location.reload();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar-lang {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.navbar {
|
|
width: 100%;
|
|
padding: 0 15px;
|
|
height: 40px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1010;
|
|
|
|
.navbar-use-show {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.userName {
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
|
|
.hamburger-container {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar-left {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.top-left-logo {
|
|
margin-left: 16px;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
display: flex;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.top-left-split {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: #D9DFEF;
|
|
margin: 2px 30px 0 40px;
|
|
}
|
|
|
|
.top-left-menu {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.navbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
min-width: 90px;
|
|
|
|
.mode-select {
|
|
cursor: pointer;
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.navbar-user {
|
|
.el-dropdown-menu {
|
|
padding: 8px 0;
|
|
|
|
.el-dropdown-menu__item {
|
|
margin-bottom: 4px;
|
|
|
|
svg {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mode-select-popper {
|
|
.el-dropdown-menu {
|
|
padding: 8px 0;
|
|
|
|
.el-dropdown-menu__item {
|
|
margin-bottom: 4px;
|
|
|
|
svg {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|