CVDEMCSUI/src/layouts/MainLayout.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>