test code

src/permission.js

@@ -4,6 +4,7 @@ import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
+import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN } from "@/store/mutation-types"
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
@@ -27,6 +28,7 @@ router.beforeEach((to, from, next) => {
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
         }).catch(() => {
+          notification.error({ message: '错误', description: '请求用户信息失败，请重试' })
           store.dispatch('Logout').then(() => {
             next({ path: '/user/login' })
           })

src/views/dashboard/Workplace.vue

@@ -117,6 +117,8 @@
   import HeadInfo from '@/components/tools/HeadInfo'
   import Radar from '@/components/chart/Radar'
 
+  import { getRoleList, getServiceList } from "@/api/manage"
+
   const DataSet = require('@antv/data-set')
 
   export default {
@@ -185,6 +187,14 @@
     created() {
       this.user = this.userInfo
       this.avatar = this.userInfo.avatar
+
+      getRoleList().then(res => {
+        console.log('workplace -> call getRoleList()', res)
+      })
+
+      getServiceList().then(res => {
+        console.log('workplace -> call getServiceList()', res)
+      })
     },
     mounted() {
       this.getProjects()

src/views/user/Login.vue

@@ -9,7 +9,7 @@
 
           <a-form-item
             fieldDecoratorId="username"
-            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: this.handleUsernameOrEmail }], validateTrigger: 'blur'}"
+            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: this.handleUsernameOrEmail }], validateTrigger: 'change'}"
           >
             <a-input size="large" type="text" placeholder="帐户名或邮箱地址 / admin">
               <a-icon slot="prefix" type='user' :style="{ color: 'rgba(0,0,0,.25)' }"/>
@@ -27,7 +27,7 @@
         <a-tab-pane key="tab2" tab="手机号登陆">
           <a-form-item
             fieldDecoratorId="mobile"
-            :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'blur'}">
+            :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}">
             <a-input size="large" type="text" placeholder="手机号">
               <a-icon slot="prefix" type='mobile' :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>

src/views/user/Register.vue

@@ -11,12 +11,12 @@
 
       <a-form-item
         fieldDecoratorId="password"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordLevel }], validateTrigger: 'change'}">
-        <a-popover placement="right">
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}">
+        <a-popover placement="right" trigger="click" :visible="clicked" @visibleChange="clicked = true">
           <template slot="content">
             <div :style="{ width: '240px' }">
-              <div :class="['user-register', getPasswordLevelClass()]">强度：<span>低</span></div>
-              <a-progress :percent="30" :showInfo="false" strokeColor="#FF0000" />
+              <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
+              <a-progress :percent="state.percent" :showInfo="false" strokeColor="#FF0000" />
               <div style="margin-top: 10px;">
                 <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
               </div>
@@ -86,6 +86,18 @@
 <script>
   import { getSmsCaptcha } from '@/api/login'
 
+  const levelNames = {
+    0: '低',
+    1: '低',
+    2: '中',
+    3: '强'
+  }
+  const levelClass = {
+    0: 'error',
+    1: 'error',
+    2: 'warning',
+    3: 'success'
+  }
   export default {
     name: "Register",
     components: {
@@ -94,14 +106,24 @@
       return {
         form: null,
 
+        clicked: false,
         state: {
           time: 60,
           smsSendBtn: false,
-          passwordLevel: 0
+          passwordLevel: 0,
+          percent: 0,
         },
         registerBtn: false
       }
     },
+    computed: {
+      passwordLevelClass () {
+        return levelClass[this.state.passwordLevel]
+      },
+      passwordLevelName () {
+        return levelNames[this.state.passwordLevel]
+      }
+    },
     methods: {
 
       handlePasswordLevel (rule, value, callback) {
@@ -120,7 +142,12 @@
           level++
         }
         this.state.passwordLevel = level
+        this.state.percent = level * 30
+        console.log('passwordLevel', this.state.passwordLevel, 'level', level)
         if (level >= 2) {
+          if (level >= 3) {
+            this.state.percent = 100
+          }
           callback()
         } else {
           callback(new Error('密码强度不够'))
@@ -143,16 +170,6 @@
         })
       },
 
-      getPasswordLevelClass () {
-        const c = {
-          0: 'error',
-          1: 'error',
-          2: 'warning',
-          3: 'success'
-        }
-        return c[this.state.passwordLevel]
-      },
-
       getCaptcha(e) {
         e.preventDefault()
         let that = this
@@ -201,6 +218,7 @@
     },
     watch: {
       'state.passwordLevel' (val) {
+        console.log(val)
 
       }
     }