From 081c2a9d9a4a4378dc4555f309d5b3a36a228b48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E5=AD=90=E6=9D=8E=C2=B7De?= <lide1202@hotmail.com>
Date: Sat, 17 Jul 2021 22:44:04 +0800
Subject: [PATCH] update login page

---
 report-ui/src/api/login.js                    |  13 +--
 report-ui/src/mixins/access.js                |  84 ++++----------
 .../src/views/layout/components/Navbar.vue    |  32 +++---
 report-ui/src/views/login.vue                 | 106 ++++++++++++------
 4 files changed, 117 insertions(+), 118 deletions(-)

diff --git a/report-ui/src/api/login.js b/report-ui/src/api/login.js
index 77622a07..7f4eaf5f 100644
--- a/report-ui/src/api/login.js
+++ b/report-ui/src/api/login.js
@@ -1,9 +1,8 @@
 import request from './axios'
 
 export function login (data) {
-  console.log(data)
   return request({
-    url: '/login',
+    url: 'accessUser/login',
     method: 'post',
     data
   })
@@ -11,7 +10,7 @@ export function login (data) {
 
 export function logout () {
   return request({
-    url: '/accessUser/logout',
+    url: 'accessUser/logout',
     method: 'post'
   })
 }
@@ -22,11 +21,3 @@ export const reqUpdatePassword = data => request({
   method: 'post',
   data: data
 })
-
-export function queryForCodeSelect (params = {}) {
-  return request({
-    url: '/auth-service/dict/queryForCodeSelect',
-    method: 'post',
-    data: params
-  })
-}
\ No newline at end of file
diff --git a/report-ui/src/mixins/access.js b/report-ui/src/mixins/access.js
index c32a39ac..4eea888e 100644
--- a/report-ui/src/mixins/access.js
+++ b/report-ui/src/mixins/access.js
@@ -1,62 +1,44 @@
 import { setItem, getItem } from '@/utils/storage';
 
 export default {
-  data() {
+  data () {
     return {
     }
   },
   computed: {
-    username: function(){
-      var username = getItem('username')
-      return username
+    operator: function () {
+      var operator = getItem('loginName')
+      return operator
     },
-    getUser: function(){
+    getUser: function () {
       // var user = getItem('user');
-      var user =JSON.parse(localStorage.getItem('user')) 
-      if(user != null ){
+      var user = JSON.parse(localStorage.getItem('user'))
+      if (user != null) {
         return user;
-      }else{
+      } else {
         return {};
       }
     },
-    isAdmin() {
-      if (this.getUser == null) {
-        return false
-      }
-      return this.getUser.userId === 1
-    },
-    opLoginName() {
-      return this.getUser == null ? '' : this.getUser.userName
-    },
-    opNikeName() {
-      return this.getUser == null ? '' : this.getUser.nikeName
-    },
-    opUserType() {
-      return this.getUser == null ? '' : this.getUser.userType
-    },
-    opAuthorities() {
+    opAuthorities () {
       return this.getUser == null ? [] : this.getUser.authorityWithOrgIds
     }
   },
-  created() {
+  created () {
   },
-  mounted() {
+  mounted () {
   },
-  destroyed() {
+  destroyed () {
   },
   methods: {
-    hasPermission(permissionStr, orgIds) {
+    hasPermission (permissionStr, orgIds) {
       //判断用户权限列表是否为空
-			if (this.opAuthorities == null) {
-				return false
-      }
-      if(this.isAdmin){
-        return true;
+      if (this.opAuthorities == null) {
+        return false
       }
-      if(permissionStr && permissionStr.indexOf('|') !== -1) {
+      if (permissionStr && permissionStr.indexOf('|') !== -1) {
         let flag = false
         let arr = permissionStr.split('|')
-        for(let i=0; i< arr.length; i++) {
+        for (let i = 0; i < arr.length; i++) {
           let a = arr[i].replace(/(^\s*)|(\s*$)/g, "");
           if (this.opAuthorities.hasOwnProperty(a)) {
             flag = true
@@ -66,22 +48,22 @@ export default {
       }
       //登录用户没有某个操作权限
       if (!this.opAuthorities.hasOwnProperty(permissionStr)) {
-				return false
+        return false
       }
       //如果当前验证，不包含项目级别验证，直接返回
-      if (typeof(orgIds) == 'undefined' || orgIds == null) {
+      if (typeof (orgIds) == 'undefined' || orgIds == null) {
         return true
-      } 
+      }
       //验证登录用户是否有某个项目的有操作权限
       var orgIdsHasPermission = this.opAuthorities[permissionStr]
       //如果projectIds是个数字，只要验证登录用户是否有该项目的操作权限
       if (typeof orgIds == 'number') {
         if (orgIdsHasPermission.indexOf(orgIds) > -1) {
           return true
-        }else{
+        } else {
           return false
         }
-      }else{
+      } else {
         var result = false
         for (var i in orgIdsHasPermission) {
           var flag = orgIds.indexOf(orgIdsHasPermission[i]) > -1
@@ -92,27 +74,5 @@ export default {
         return result
       }
     },
-    
-		//从所有字典中，取某个字典的列表
-		getDict(dictname){
-			var basecode = JSON.parse(localStorage.getItem('queryForCodeSelect'));
-			var dictList = basecode[dictname]
-			return dictList;
-		},
-		//从某个字典的列表，获取某个字典对象
-		getDictCode(dictname, codeValue , value='value'){
-      //如果 codeValue传过来的是字符串 all 则字典数组返回
-			var dictList = this.getDict(dictname);
-			for (var i = 0; i < dictList.length; i++) {
-				var codeItem = dictList[i]
-				if(codeItem[value] == codeValue){
-					return codeItem;
-        }
-        if(codeValue =='all'){
-          return dictList
-        }
-			}
-			return {};
-		},
   }
 }
diff --git a/report-ui/src/views/layout/components/Navbar.vue b/report-ui/src/views/layout/components/Navbar.vue
index 05b0ece3..82f0462a 100644
--- a/report-ui/src/views/layout/components/Navbar.vue
+++ b/report-ui/src/views/layout/components/Navbar.vue
@@ -1,17 +1,23 @@
 <template>
   <div>
-    <el-menu class="navbar" mode="horizontal">
-      <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container" />
+    <el-menu class="navbar"
+             mode="horizontal">
+      <hamburger :toggle-click="toggleSideBar"
+                 :is-active="sidebar.opened"
+                 class="hamburger-container" />
       <breadcrumb />
-      <el-dropdown class="avatar-container" trigger="click">
+      <el-dropdown class="avatar-container"
+                   trigger="click">
         <div class="avatar-wrapper">
           <i class="icon iconfont iconyonghu user" />
-          <span class="user-name">{{ username }}</span>
+          <span class="user-name">{{ operator }}</span>
           <i class="el-icon-caret-bottom" />
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-menu slot="dropdown"
+                          class="user-dropdown">
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">注销登录</span>
+            <span style="display:block;"
+                  @click="logout">注销登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -28,7 +34,7 @@ import { aesEncrypt } from '@/utils/aes'
 import { reqUpdatePassword } from '@/api/login'
 
 export default {
-  data() {
+  data () {
     // 确认密码
     var validatePass3 = (rule, value, callback) => {
       if (value === '') {
@@ -80,12 +86,12 @@ export default {
   computed: {
     ...mapGetters(['sidebar']),
   },
-  created() {},
+  created () { },
   methods: {
-    toggleSideBar() {
+    toggleSideBar () {
       this.$store.dispatch('ToggleSideBar')
     },
-    logout() {
+    logout () {
       this.$confirm('确定要退出吗', '温馨提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -98,14 +104,14 @@ export default {
       })
     },
     // 修改密码
-    updatePassword() {
+    updatePassword () {
       this.wordVisible = true
       this.$nextTick(() => {
         this.$refs.form && this.$refs.form.resetFields()
       })
     },
     // 发送请求 确认修改
-    confrimUpdate() {
+    confrimUpdate () {
       this.$refs.form.validate((valid) => {
         if (valid) {
           const { oldPassword, password, confirmPassword } = this.form
@@ -129,7 +135,7 @@ export default {
         }
       })
     },
-    helpCenter() {
+    helpCenter () {
       let helpCategory = JSON.parse(localStorage.getItem('helpCategory'))
       this.$router.push({
         path: '/helpCenList/list',
diff --git a/report-ui/src/views/login.vue b/report-ui/src/views/login.vue
index 7fb54639..28544c11 100644
--- a/report-ui/src/views/login.vue
+++ b/report-ui/src/views/login.vue
@@ -8,11 +8,20 @@
   <div class="login_container">
     <!-- 顶部logo -->
     <div class="login_title">
-      <img src="@/assets/images/home-logo.png" alt="logo" />
+      <img src="@/assets/images/home-logo.png"
+           alt="logo" />
     </div>
     <div class="login_contant">
-      <img src="@/assets/images/login.png" alt="image" class="login_img" />
-      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login_form" autocomplete="on" label-position="left" @keyup.enter.native="handleLogin">
+      <img src="@/assets/images/login.png"
+           alt="image"
+           class="login_img" />
+      <el-form ref="loginForm"
+               :model="loginForm"
+               :rules="loginRules"
+               class="login_form"
+               autocomplete="on"
+               label-position="left"
+               @keyup.enter.native="handleLogin">
         <div class="title_container">
           <h3 class="title">
             HELLO,
@@ -27,17 +36,42 @@
           <b />
           <div>
             <p>用户名</p>
-            <el-form-item prop="username">
-              <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" @focus="setTop('0')" @change="getPsw" />
+            <el-form-item prop="loginName">
+              <el-input ref="loginName"
+                        v-model="loginForm.loginName"
+                        placeholder="用户名"
+                        name="loginName"
+                        type="text"
+                        tabindex="1"
+                        autocomplete="on"
+                        @focus="setTop('0')"
+                        @change="getPsw" />
             </el-form-item>
           </div>
           <div>
             <p>密码</p>
-            <input name="password" type="password" autocomplete="off" class="take" />
-            <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+            <input name="password"
+                   type="password"
+                   autocomplete="off"
+                   class="take" />
+            <el-tooltip v-model="capsTooltip"
+                        content="Caps lock is On"
+                        placement="right"
+                        manual>
               <el-form-item prop="password">
-                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="用户密码" name="password" tabindex="2" autocomplete="on" @blur="capsTooltip = false" @focus="setTop('50')" @keyup.native="checkCapslock" />
-                <span class="show_pwd" @click="showPwd">
+                <el-input :key="passwordType"
+                          ref="password"
+                          v-model="loginForm.password"
+                          :type="passwordType"
+                          placeholder="用户密码"
+                          name="password"
+                          tabindex="2"
+                          autocomplete="on"
+                          @blur="capsTooltip = false"
+                          @focus="setTop('50')"
+                          @keyup.native="checkCapslock" />
+                <span class="show_pwd"
+                      @click="showPwd">
                   <i class="el-icon-view" />
                 </span>
               </el-form-item>
@@ -46,15 +80,23 @@
         </div>
         <div class="control">
           <div class="remember">
-            <input v-model="rememberPsw" type="checkbox" />
+            <input v-model="rememberPsw"
+                   type="checkbox" />
             <p>记住密码</p>
           </div>
         </div>
-        <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="handleLogin">登录</el-button>
+        <el-button :loading="loading"
+                   type="primary"
+                   class="login_btn"
+                   @click.native.prevent="handleLogin">登录</el-button>
       </el-form>
     </div>
     <!--  验证码  -->
-    <Verify v-if="needCaptcha" ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" @success="verifylogin" />
+    <Verify v-if="needCaptcha"
+            ref="verify"
+            :captcha-type="'blockPuzzle'"
+            :img-size="{ width: '400px', height: '200px' }"
+            @success="verifylogin" />
   </div>
 </template>
 
@@ -70,17 +112,17 @@ export default {
   components: {
     Verify,
   },
-  data() {
+  data () {
     return {
       activeTop: '-50%', // 色条滑块控制
       rememberPsw: false, // 记住密码选择框
       loginForm: {
-        username: 'admin',
+        loginName: 'admin',
         password: '123456',
         verifyCode: '',
       }, // 登录表单
       loginRules: {
-        username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
+        loginName: [{ required: true, message: '用户名必填', trigger: 'blur' }],
         password: [
           { required: true, message: '用户密码必填', trigger: 'blur' },
         ],
@@ -106,31 +148,31 @@ export default {
       immediate: true,
     },
   },
-  mounted() {
+  mounted () {
     // 获取焦点
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
+    if (this.loginForm.loginName === '') {
+      this.$refs.loginName.focus()
     } else if (this.loginForm.password === '') {
       this.$refs.password.focus()
     }
   },
   methods: {
     // 获取存储的密码并解密
-    getPsw() {
-      const cookVal = cookies.get(`u_${this.loginForm.username}`)
+    getPsw () {
+      const cookVal = cookies.get(`u_${this.loginForm.loginName}`)
       this.loginForm.password = cookVal && Decrypt(cookVal)
     },
     // 滑动条块的top控制
-    setTop(val) {
+    setTop (val) {
       this.activeTop = val
     },
     // 检测大写锁定键是否开启
-    checkCapslock(e) {
+    checkCapslock (e) {
       const { key } = e
       this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
     },
     // 查看密码
-    showPwd() {
+    showPwd () {
       if (this.passwordType === 'password') {
         this.passwordType = ''
       } else {
@@ -141,7 +183,7 @@ export default {
       })
     },
     // 滑动验证码
-    useVerify() {
+    useVerify () {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.$refs.verify.show()
@@ -151,14 +193,14 @@ export default {
       })
     },
     // 验证成功的回调
-    verifylogin(params) {
+    verifylogin (params) {
       this.loginForm.verifyCode = params.captchaVerification
       if (this.loginForm.verifyCode) {
         this.loginApi()
       }
     },
     // 登录操作
-    handleLogin() {
+    handleLogin () {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true
@@ -173,9 +215,9 @@ export default {
         }
       })
     },
-    async loginApi() {
+    async loginApi () {
       let obj = {
-        username: this.loginForm.username,
+        loginName: this.loginForm.loginName,
         password: transPsw(this.loginForm.password),
         verifyCode: '',
       }
@@ -184,11 +226,11 @@ export default {
       this.loading = false
       if (code != '200') return
       setItem('token', data.token)
-      setItem('username', data.username)
+      setItem('loginName', data.loginName)
       // 选中记住密码时 把密码存到cookie里,时效15天
       this.rememberPsw &&
         cookies.set(
-          `u_${this.loginForm.username}`,
+          `u_${this.loginForm.loginName}`,
           Encrypt(this.loginForm.password),
           { expires: 15 }
         )
@@ -202,7 +244,7 @@ export default {
         })
       }
     },
-    getOtherQuery(query) {
+    getOtherQuery (query) {
       return Object.keys(query).reduce((acc, cur) => {
         if (cur !== 'redirect') {
           acc[cur] = query[cur]
@@ -381,7 +423,7 @@ export default {
             height: 14px;
           }
           & > input:checked::before {
-            content: '\2713';
+            content: "\2713";
             background-color: #f5ab1b;
             position: absolute;
             top: 0;