ojk_dtb_manage_ui/src/views/HomeView.vue

<template>
  <div id="home">
    <div id="Header">
      <div class="loginForm" v-if="isLogin">
        <span style="color: white">用户名：</span>
        <span style="color: white">{{ $store.getters.getUserName || '未登录' }}</span>
        <el-link type="warning" :underline="false" class="logout" @click="logout"> 退出登录</el-link>
      </div>
      <div class="loginForm" v-else>
        <span class="formLabel">用户名：</span>
        <input class="formInput" type="text" v-model="loginForm.userName" placeholder="请输入用户名"/>
        &nbsp;&nbsp;
        <span class="formLabel">密&nbsp;&nbsp;码：</span>
        <input class="formInput" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        &nbsp;&nbsp;
        <el-button type="warning" @click="login" size="small">登录</el-button>
      </div>
      <div class="title">
        <img :src="titleImg"/>
      </div>
    </div>
    <div id="Menu" :style="{height: contentHeight+'px'}">
      <div id="Tags">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#6162f2"
            text-color="white"
            active-text-color="#ffc01c"
            @select="handleMenuClick"
        >
          <el-menu-item index="1" >综合展示</el-menu-item>
          <el-menu-item index="2" v-if="isLogin && pageShow['DTB-DATAMANAGE']">数据管理</el-menu-item>
          <el-menu-item index="3" v-if="isLogin && pageShow['DTB-DATAPUBLISH']">数据发布</el-menu-item>
          <el-menu-item index="4" v-if="isLogin && pageShow['DTB-PLUGINMANAGE']">插件管理</el-menu-item>
          <el-menu-item index="5" v-if="isLogin && pageShow['DTB-SYSTEMMANAGE']">系统管理</el-menu-item>
        </el-menu>
      </div>
      <div class="content">
        <!--<HomeIndex :auth="pageShow['DTB-HOMEINDEX']" v-if="activeIndex==1"/>-->
        <HomeIndex :auth="true" v-if="activeIndex==1"/>
        <DataManage v-if="activeIndex==2"/>
        <DataPublish v-if="activeIndex==3"/>
        <PluginManage v-if="activeIndex==4"/>
        <SystemManage v-if="activeIndex==5"/>
      </div>
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent} from "vue";
import loginApi from "@/api/login";
import elementResizeDetectorMaker from "element-resize-detector";

import titleImg from "@/assets/img/title.png"


export default {
  name: 'homeIndex',
  components: {
    HomeIndex: defineAsyncComponent(() => import("@/components/home/HomeIndex.vue")),
    DataManage: defineAsyncComponent(() => import("@/components/home/DataManage.vue")),
    DataPublish: defineAsyncComponent(() => import("@/components/home/DataPublish.vue")),
    PluginManage: defineAsyncComponent(() => import("@/components/home/PluginManage.vue")),
    SystemManage: defineAsyncComponent(() => import("@/components/home/SystemManage.vue")),
  },
  data() {
    return {
      titleImg,
      activeIndex: '1',
      fullscreenLoading: null,
      contentHeight: '',
      isLogin: false,
      loginForm: {
        userName: '',
        password: '',
        clientId: this.$constant.serviceId,
      },
      pageShow: {
        "DTB-HOMEINDEX": false, // 综合展示
        "DTB-DATAMANAGE": false, // 数据管理
        "DTB-DATAPUBLISH": false, // 数据发布
        "DTB-PLUGINMANAGE": false, // 插件管理
        "DTB-SYSTEMMANAGE": false, // 系统管理
      }
    }
  },
  created() {
    this.$root.$.appContext.config.globalProperties.judgeLogin = this.judgeLogin;
  },
  mounted() {
    this.judgeLogin();
  },
  methods: {
    judgeLogin() {
      let token = this.$store.getters.getToken;
      this.isLogin = token && token !== '';
      this.activeIndex = 1;
      if (this.isLogin) {
        this.updateAuth();
      }
    },
    updateAuth() {
      let app = this;
      let params = {
        serviceId: this.$constant.serviceId,
        type: app.$constant.authType
      }
      let keys = Object.keys(app.pageShow);
      loginApi.getUserPermissions(params).then(res=>{
        if (res.code === 200) {
          res.content.forEach(item => {
            if (keys.indexOf(item.permissionName)>-1) {
              app.pageShow[item.permissionName] = true;
            }
          })
        }
      })
    },
    handleMenuClick(val) {
      this.activeIndex = val;
    },
    login() {
      let app = this;
      if (!app.loginForm.userName || app.loginForm.userName==='') {
        app.$message({message: '请输入用户名', type: 'warning'});
        return;
      } else if (!app.loginForm.password || app.loginForm.password==='') {
        app.$message({message: '请输入密码', type: 'warning'});
        return;
      }
      app.$util.loading.handleLoading(true)
      loginApi.userLogin(app.loginForm).then(res => {
        app.$store.state.token = res.message
        app.$store.commit('setUserInfo', res.content);
        app.$store.commit('setToken', res.message);
        app.$util.loading.handleLoading(false);
        app.judgeLogin()
      }).catch(err => {
        app.$util.loading.handleLoading(false);
        app.judgeLogin();
      })

    },
    logout() {
      this.$util.loading.handleLoading(true);
      this.$store.state.token = '';
      this.$store.state.userInfo = {};
      this.loginForm = {
        userName: '',
        password: '',
        clientId: this.$constant.serviceId,
      };
      localStorage.clear();
      this.$store.commit('resetState', {});
      this.$util.loading.handleLoading(false);
      this.judgeLogin();
    },
  }
}
</script>

<style scoped>
.custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}

.custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}

#home {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#Header {
  /* background-image: linear-gradient(#90e2fc, white); */
  background-image: url('@/assets/img/header.png');
  background-size: 100% 100%;
  height: 18%;
}

#Header .title {
  height: 100%;
  padding: 3.5% 0 0 10%;
}

#Header .title img {
  width: 12%;
}

#Header .loginForm {
  float: right;
  /*width: 30%;*/
  /*float: right;*/
  margin-top: 1%;
  margin-right: 3%;
  /*color: white;*/
}

.loginForm .formLabel {
  display: inline-block;
}

.loginForm .formInput {
  margin-right: 5px;
  border-color: transparent;
  border-radius: 3px;
  height: 20px;
  color: white;
  padding-left: 6px;
  background: rgba(255, 255, 255, 0.3);
}

.loginForm .formInput:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.loginForm .formInput:focus {
  outline: 1px solid rgba(255, 255, 255, 0.6);
}


.logout {
  color: #e1e1e1;
  padding: 0 15px 5px
}

.logout:hover {
  color: orange;
}

.formLabel {
  color: white;
}

#Menu {
  height: 76%;
  overflow: visible;
}

#Tags {
  width: 100%;
}

.content {
  width: 80%;
  margin: 0 auto;
  /*padding-top: 1%;*/
  height: 95%;
  /*overflow: visible;*/
}

.el-menu-demo {
  align-items: center;
  justify-content: center;
}

.el-menu-item {
  font-size: 20px;
  font-weight: 600;
  margin: 0 5% !important;
}

.el-menu-item:focus {
  background-color: #6162f2 !important;
}


</style>

<style>
.el-dialog__body {
  padding-top: 10px;
}
</style>