:lipstick: Updating the UI and style files. #1054 【重构】 登录流程简化，减少DB 访问

:lipstick: Updating the UI and style files. #1054 【重构】 登录流程简化，减少DB 访问

:lipstick: Updating the UI and style files. #1054 【重构】 登录流程简化，减少DB 访问

src/api/admin/user.js

@@ -61,3 +61,12 @@ export function getDetails(obj) {
     method: 'get'
   })
 }
+
+// 更改个人信息
+export function editInfo(obj) {
+  return request({
+    url: '/admin/user/edit',
+    method: 'put',
+    data: obj
+  })
+}

src/const/crud/admin/token.js

@@ -28,12 +28,14 @@ export const tableOption = {
   searchMenuSpan: 6,
   column: [{
     label: '用户ID',
-    prop: 'user_id',
-    align: 'center'
+    prop: 'id',
+    align: 'center',
+    slot: true,
   }, {
     label: '用户名',
     prop: 'username',
-    align: 'center'
+    align: 'center',
+    slot: true,
   }, {
     label: '令牌',
     prop: 'access_token',

src/views/admin/token/index.vue

@@ -29,7 +29,18 @@
         @refresh-change="refreshChange"
         @size-change="sizeChange"
         @current-change="currentChange"
-        @row-del="handleDel"/>
+        @row-del="handleDel">
+      <template
+        slot="id"
+        slot-scope="scope">
+        <span>{{ scope.row.user_info.id }}</span>
+      </template>
+        <template
+          slot="username"
+          slot-scope="scope">
+          <span>{{ scope.row.user_info.username }}</span>
+        </template>
+      </avue-crud>
     </basic-container>
   </div>
 </template>

src/views/admin/user/info.vue

@@ -127,90 +127,81 @@
 </template>
 
 <script>
-import { handleImg, openWindow } from '@/util/util'
-import { mapState } from 'vuex'
-import store from '@/store'
-import { getStore } from '@/util/store'
-import request from '@/router/axios'
+  import {handleImg, openWindow} from '@/util/util'
+  import {mapState} from 'vuex'
+  import store from '@/store'
+  import {getStore, setStore} from '@/util/store'
+  import {editInfo} from '@/api/admin/user'
 
-export default {
-  data() {
-    var validatePass = (rule, value, callback) => {
-      if (this.ruleForm2.password !== '') {
-        if (value !== this.ruleForm2.newpassword1) {
-          callback(new Error('两次输入密码不一致!'))
+
+  export default {
+    data() {
+      var validatePass = (rule, value, callback) => {
+        if (this.ruleForm2.password !== '') {
+          if (value !== this.ruleForm2.newpassword1) {
+            callback(new Error('两次输入密码不一致!'))
+          } else {
+            callback()
+          }
         } else {
           callback()
         }
-      } else {
-        callback()
       }
-    }
-    return {
-      switchStatus: 'userManager',
-      avatarUrl: '',
-      show: false,
-      headers: {
-        'Authorization': 'Bearer ' + store.getters.access_token,
-      },
-      ruleForm2: {
-        username: '',
-        password: '',
-        newpassword1: '',
-        newpassword2: '',
-        avatar: '',
-        phone: ''
-      },
-      rules2: {
-        password: [{ required: true, min: 6, message: '原密码不能为空且不少于6位', trigger: 'change' }],
-        newpassword1: [{ required: false, min: 6, message: '不少于6位', trigger: 'change' }],
-        newpassword2: [{ required: false, validator: validatePass, trigger: 'blur' }]
+      return {
+        switchStatus: 'userManager',
+        avatarUrl: '',
+        show: false,
+        headers: {
+          'Authorization': 'Bearer ' + store.getters.access_token,
+        },
+        ruleForm2: {
+          username: '',
+          password: '',
+          newpassword1: '',
+          newpassword2: '',
+          avatar: '',
+          phone: ''
+        },
+        rules2: {
+          password: [{required: true, min: 6, message: '原密码不能为空且不少于6位', trigger: 'change'}],
+          newpassword1: [{required: false, min: 6, message: '不少于6位', trigger: 'change'}],
+          newpassword2: [{required: false, validator: validatePass, trigger: 'blur'}]
+        }
       }
-    }
-  },
-  created() {
+    },
+    created() {
       this.resetForm()
-  },
-  computed: {
-    ...mapState({
-      userInfo: state => state.user.userInfo
-    })
-  },
-  methods: {
-    switchTab(tab) {
-      if (tab.name === 'userManager') {
-        handleImg(this.ruleForm2.avatar, 'avatar')
-      }
-      this.switchStatus = tab.name
     },
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          request({
-            url: '/admin/user/edit',
-            method: 'put',
-            data: this.ruleForm2
-          }).then(response => {
-            if (response.data.data) {
-              this.$notify.success('修改成功')
-              // 修改密码之后强制重新登录
-              if (this.switchStatus === 'passwordManager') {
-                this.$store.dispatch('LogOut').then(() => {
-                  location.reload() // 为了重新实例化vue-router对象 避免bug
-                })
-              }
-            } else {
-              this.$notify.error(response.data.msg)
-            }
-          }).catch(() => {
-            this.$notify.error('修改失败')
-          })
-        } else {
-          return false
-        }
+    computed: {
+      ...mapState({
+        userInfo: state => state.user.userInfo
       })
     },
-    resetForm(formName) {
+    methods: {
+      switchTab(tab) {
+        if (tab.name === 'userManager') {
+          handleImg(this.ruleForm2.avatar, 'avatar')
+        }
+        this.switchStatus = tab.name
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate(valid => {
+          if (!valid) {
+            return false
+          }
+          editInfo(this.ruleForm2).then(response => {
+            this.handleLocalData(this.ruleForm2)
+            this.$notify.success('修改成功')
+            // 修改密码之后强制重新登录
+            if (this.switchStatus === 'passwordManager') {
+              this.$store.dispatch('LogOut').then(() => {
+                location.reload() // 为了重新实例化vue-router对象 避免bug
+              })
+            }
+          })
+        })
+      },
+      resetForm() {
         this.ruleForm2.password = undefined
         this.ruleForm2.newpassword1 = undefined
         this.ruleForm2.newpassword2 = undefined
@@ -219,35 +210,49 @@ export default {
         this.ruleForm2.avatar = this.userInfo.avatar
         handleImg(this.userInfo.avatar, 'avatar')
         //判断是否选择了租户ID
-        const TENANT_ID = getStore({ name: 'tenantId' })
+        const TENANT_ID = getStore({name: 'tenantId'})
         if (TENANT_ID) {
-            this.headers['TENANT-ID'] = TENANT_ID // 租户ID
+          this.headers['TENANT-ID'] = TENANT_ID // 租户ID
+        }
+      },
+      handleClick(thirdpart) {
+        let appid, client_id, redirect_uri, url
+        redirect_uri = encodeURIComponent(window.location.origin + '/#/authredirect')
+        if (thirdpart === 'wechat') {
+          appid = 'wxd1678d3f83b1d83a'
+          url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect'
+        } else if (thirdpart === 'tencent') {
+          client_id = '101322838'
+          url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
+        } else if (thirdpart === 'gitee') {
+          client_id = '235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952'
+          url = 'https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
+        } else if (thirdpart === 'osc') {
+          client_id = 'neIIqlwGsjsfsA6uxNqD'
+          url = 'https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=' + client_id + '&state=OSC-BIND&redirect_uri=' + redirect_uri
+        }
+        openWindow(url, thirdpart, 540, 540)
+      },
+      handleAvatarSuccess(res, file) {
+        this.avatarUrl = URL.createObjectURL(file.raw)
+        this.ruleForm2.avatar = res.data.url
+      },
+      // 处理本地数据，避免刷新不同步
+      handleLocalData(form) {
+        let userInfo = getStore({name: 'userInfo'})
+
+        if (userInfo) {
+          userInfo.avatar = form.avatar
+          userInfo.phone = form.phone
+          setStore({
+            name: 'userInfo',
+            content: userInfo,
+            type: 'session'
+          })
         }
-    },
-    handleClick(thirdpart) {
-      let appid, client_id, redirect_uri, url
-      redirect_uri = encodeURIComponent(window.location.origin + '/#/authredirect')
-      if (thirdpart === 'wechat') {
-        appid = 'wxd1678d3f83b1d83a'
-        url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect'
-      } else if (thirdpart === 'tencent') {
-        client_id = '101322838'
-        url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
-      } else if (thirdpart === 'gitee') {
-        client_id = '235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952'
-        url = 'https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
-      } else if (thirdpart === 'osc') {
-        client_id = 'neIIqlwGsjsfsA6uxNqD'
-        url = 'https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=' + client_id + '&state=OSC-BIND&redirect_uri=' + redirect_uri
       }
-      openWindow(url, thirdpart, 540, 540)
-    },
-    handleAvatarSuccess(res, file) {
-      this.avatarUrl = URL.createObjectURL(file.raw)
-      this.ruleForm2.avatar = res.data.url
     }
   }
-}
 </script>
 <style>
   .avatar-uploader .el-upload {