You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
11 KiB
Vue
290 lines
11 KiB
Vue
<template>
|
|
<q-layout view="hHh LpR fFf" :style="{ height: $q.screen.height, width: $q.screen.width }">
|
|
<q-header reveal elevated class="bg-blue-grey text-white">
|
|
<!-- shadow-18 rounded-borders -->
|
|
<q-toolbar class="main-headers bg-blue-grey text-white ">
|
|
<!-- 收起菜單按鈕 -->
|
|
<transition appear enter-active-class="animated zoomIn">
|
|
<q-btn flat @click.capture="menuToggle" round :icon="drawer ? 'menu' : 'menu_open'" class="q-mr-sm">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[15, 15]"
|
|
content-style="font-size: 12px">{{
|
|
drawer ? "打开菜单" : "收起菜单" }}</q-tooltip>
|
|
</q-btn>
|
|
</transition>
|
|
<q-separator dark vertical inset />
|
|
<!-- 項目title -->
|
|
<q-btn flat no-caps no-wrap class="q-ml-xs" :to="{ name: 'web' }">
|
|
<!-- <transition appear enter-active-class="animated zoomIn"> -->
|
|
<!-- <q-icon name="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg" /> -->
|
|
<!-- <q-icon name="img:statics/icons/wms.png" /> -->
|
|
<q-toolbar-title shrink class="text-weight-bold">
|
|
<!-- <q-img src="statics/icons/wms.png" width='28px' height='28px' style="margin-top:-5px" /> -->
|
|
CVD炉设备运行状态监测
|
|
</q-toolbar-title>
|
|
</q-btn>
|
|
<!-- </transition> -->
|
|
<q-space />
|
|
<q-btn flat round dense class="q-mr-sm" :icon="AppFullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
|
|
@click="fullScreen">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[15, 15]" content-style="font-size: 12px">{{
|
|
AppFullscreen.isActive ? "退出全屏" : "全屏" }}</q-tooltip>
|
|
</q-btn>
|
|
<q-separator dark vertical inset />
|
|
<!-- 右上角个人中心 -->
|
|
<transition appear enter-active-class="animated zoomIn">
|
|
<q-btn-dropdown stretch flat color="white-8" icon="account_circle" transition-show="jump-down"
|
|
transition-hide="jump-up">
|
|
<div class="row no-wrap q-pa-md">
|
|
<div class="column items-center">
|
|
<!-- <q-avatar size="72px"><q-img src="statics/user/boy-avatar.png"></q-img></q-avatar> -->
|
|
<q-avatar size="72px"><q-img src="icons/favicon-128x128.png"></q-img></q-avatar>
|
|
<div class="text-subtitle2 q-mt-sm q-mb-sm">
|
|
Hi! {{ user.userName }}
|
|
</div>
|
|
<q-btn color="primary" label="修改密码" push v-close-popup icon="lock" @click="updatePasswordForm()">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
content-style="font-size: 12px">修改密码</q-tooltip>
|
|
</q-btn>
|
|
<q-btn style="margin-top: 5px" color="negative" label="退出登录" push v-close-popup icon="login"
|
|
@click="Logout()">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
content-style="font-size: 12px">退出登录</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-btn-dropdown>
|
|
</transition>
|
|
<!--
|
|
<q-btn stretch flat color="white-8" icon="account_circle">
|
|
<q-icon class="q-ml-sm" name="arrow_drop_down"></q-icon>
|
|
<q-menu anchor="bottom left" self="top left" transition-show="jump-down" transition-hide="jump-up">
|
|
<div class="row no-wrap q-pa-md">
|
|
<div class="column">
|
|
<div class="text-h6 q-mb-md">操作</div>
|
|
</div>
|
|
<q-separator vertical inset class="q-mx-lg" />
|
|
<div class="column items-center">
|
|
<q-avatar size="72px">
|
|
<img src="statics/user/stafftype.png">
|
|
</q-avatar>
|
|
|
|
<div class="text-subtitle1 q-mt-md q-mb-xs">{{ user.userName }}</div>
|
|
<q-btn color="primary" label="修改密码" push v-close-popup icon="lock" @click="updatePasswordForm()">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
content-style="font-size: 12px">修改密码</q-tooltip>
|
|
</q-btn>
|
|
<q-btn style="margin-top: 5px" color="negative" label="退出登录" push v-close-popup icon="login"
|
|
@click="Logout()">
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
content-style="font-size: 12px">退出登录</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-menu>
|
|
</q-btn> -->
|
|
|
|
</q-toolbar>
|
|
</q-header>
|
|
<!-- 侧边栏菜单 -->
|
|
<q-drawer v-model="drawerleft" :mini="!drawerleft || miniState" :mini-to-overlay="drawer" @mouseover="menuMouseover"
|
|
@mouseout="menuMouseout" elevated bordered show-if-above :width="200" :breakpoint="500"
|
|
content-class="bg-grey-3 shadow-24">
|
|
<q-scroll-area class="fit" style="overflow-y: auto">
|
|
<q-list>
|
|
<dynamic-menu :menu="(menuInfo as menuType)" />
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
<!-- 内容页面 -->
|
|
<q-page-container class="main-page" :style="{ height: container_height }">
|
|
<router-view />
|
|
</q-page-container>
|
|
<!-- 修改密码 -->
|
|
<q-dialog v-model="updatePasswordFormDialog" persistent>
|
|
<q-card class="shadow-24" style="max-width: 20vw">
|
|
<q-card-section class="no-padding">
|
|
<q-card-actions class="bg-light-blue-10 text-white">
|
|
<q-card-actions class="text-h6">修改密码</q-card-actions>
|
|
<q-space />
|
|
<q-btn round flat icon="close" v-close-popup>
|
|
<q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-card-section>
|
|
<q-card-section style="max-width: 20vw" class="scroll">
|
|
<q-form ref="updatePasswordFormRef">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-xl-12 col-lg-12 col-xs-12">
|
|
<q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.oldPassword" label="旧密码"
|
|
autofocus :rules="[(val) => (val !== undefined && val !== '') || '请输入旧密码']" />
|
|
</div>
|
|
<div class="col-xl-12 col-lg-12 col-xs-12">
|
|
<q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.password" label="新密码"
|
|
:rules="[(val) => (val !== undefined && val !== '') || '请输入新密码', (val) => passwordEqual || '两次密码不一致']"
|
|
@update:model-value="validatePassword" />
|
|
</div>
|
|
<div class="col-xl-12 col-lg-12 col-xs-12">
|
|
<q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.newPassword" label="确认新密码"
|
|
:rules="[(val) => (val !== undefined && val !== '') || '请再次输入新密码',
|
|
(val) => passwordEqual || '两次密码不一致']" @update:model-value="validatePassword" />
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn class="q-mr-md" @click="updatePasswordForm()">取消</q-btn>
|
|
<q-btn color="primary" @click="updatePasswordFormSubmit()">提交</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import index from 'src/pages/Index.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { AppFullscreen, LocalStorage, useQuasar, Notify } from 'quasar';
|
|
import { useMenuStore } from 'src/stores/useMenuStore';
|
|
import { computed, onMounted, reactive, ref } from 'vue';
|
|
import dynamicMenu from '../components/dynamic-menu.vue';
|
|
import { userApi } from 'src/api/userRole/userApi';
|
|
import { UpdatePasswordEneity } from 'src/api/userRole/model/userRole'
|
|
|
|
//公共数据
|
|
const $q = useQuasar();
|
|
const userRouter = useRouter();
|
|
let user = reactive({
|
|
userName: LocalStorage.getItem('userName'),
|
|
userId: '',
|
|
authin: '',
|
|
});
|
|
const drawer = ref(false);
|
|
const drawerleft = ref(false);
|
|
const miniState = ref(false);
|
|
|
|
// 全屏/退出全屏
|
|
const fullScreen = () => {
|
|
if (AppFullscreen.isActive) {
|
|
// 退出全屏模式：
|
|
AppFullscreen.exit().then(() => {
|
|
// v1.5.0+
|
|
// success!
|
|
}).catch(err => {
|
|
// eslint-disable-next-line handle-callback-err
|
|
// v1.5.0+
|
|
// oh, no!!!
|
|
})
|
|
} else {
|
|
// 请求全屏模式：
|
|
AppFullscreen.request().then(() => {
|
|
// v1.5.0+
|
|
// success!
|
|
}).catch(err => {
|
|
// eslint-disable-next-line handle-callback-err
|
|
// v1.5.0+
|
|
// oh, no!!!
|
|
})
|
|
}
|
|
}
|
|
|
|
// 左侧菜单栏切换事件
|
|
const menuToggle = (e: any) => {
|
|
drawer.value = !drawer.value
|
|
LocalStorage.set('menuState', drawer.value);
|
|
miniState.value = !miniState.value
|
|
e.stopPropagation()
|
|
}
|
|
|
|
// 左侧菜单栏 鼠标移入事件
|
|
const menuMouseover = () => {
|
|
if (drawer.value) {
|
|
miniState.value = false
|
|
}
|
|
}
|
|
// 左侧菜单栏 鼠标移出事件
|
|
const menuMouseout = () => {
|
|
if (drawer.value) {
|
|
miniState.value = true
|
|
}
|
|
}
|
|
|
|
let container_height = '100%';
|
|
|
|
// 菜单
|
|
const useMenu = useMenuStore();
|
|
const menuInfo = ref(LocalStorage.getItem('menuInfo') as menuType);
|
|
|
|
// 登出
|
|
const Logout = () => {
|
|
// LocalStorage.remove('userName');
|
|
LocalStorage.remove('token');
|
|
useMenu.$reset();
|
|
userRouter.push({ name: 'loginIndex' });
|
|
// Notify.create({
|
|
// message: '退出登录！',
|
|
// icon: 'emoji_emotions',
|
|
// color: 'positive',
|
|
// position: 'top'
|
|
// });
|
|
};
|
|
|
|
// 修改密码 弹窗标识
|
|
let updatePasswordFormDialog = ref(false);
|
|
let updatePasswordFormData = ref(new UpdatePasswordEneity());
|
|
|
|
// 修改密码
|
|
const updatePasswordFormRef = ref();
|
|
const updatePasswordFormSubmit = () => {
|
|
updatePasswordFormRef.value.validate().then((success: any) => {
|
|
if (success) {
|
|
userApi.updatePassword(updatePasswordFormData).then(() => {
|
|
updatePasswordForm();
|
|
Logout();
|
|
});
|
|
}
|
|
})
|
|
};
|
|
|
|
const validatePassword = () => {
|
|
updatePasswordFormRef.value.resetValidation()
|
|
}
|
|
|
|
// 校验两次密码是否输入的相同
|
|
const passwordEqual = computed<boolean>(() => {
|
|
let result = false;
|
|
updatePasswordFormData.value.password !== updatePasswordFormData.value.newPassword ? result = false : result = true
|
|
return result
|
|
})
|
|
|
|
// 关闭修改密码弹窗
|
|
const updatePasswordForm = () => {
|
|
updatePasswordFormData.value = new UpdatePasswordEneity();
|
|
updatePasswordFormDialog.value = !updatePasswordFormDialog.value;
|
|
};
|
|
|
|
//生命周期
|
|
onMounted(() => {
|
|
const menuState = LocalStorage.getItem('menuState') as boolean;
|
|
if (menuState) {
|
|
drawer.value = menuState
|
|
miniState.value = menuState
|
|
}
|
|
// menus.value = useMenu.menuInfos as menuType;
|
|
//userRouter.push({ path: '/index/home' });
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabs .q-tab__indicator {
|
|
width: 25%;
|
|
height: 1.5px;
|
|
margin: auto;
|
|
color: #d6d7d7;
|
|
}
|
|
|
|
.tabs .absolute-bottom {
|
|
bottom: 8px;
|
|
}
|
|
</style>
|