Link List And Header Profile Info And Logout

src/store/getters.js

@@ -4,12 +4,12 @@ const getters = {
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  idCard: state => state.user.idCard,
-  deptName: state => state.user.deptName,
-  introduction: state => state.user.introduction,
   roles: state => state.user.roles,
+  avatar: state => state.user.userInfo.avatar,
+  name: state => state.user.userInfo.name,
+  idCard: state => state.user.userInfo.idCard,
+  deptName: state => state.user.userInfo.deptName,
+  userInfo: state => state.user.userInfo,
   permission_routes: state => state.permission.routes,
   messageCount: state => state.message.message,
   systemCount: state => state.message.system

src/store/modules/user.js

@@ -5,11 +5,7 @@ import router, { resetRouter } from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
-    name: '',
-    idCard: '',
-    deptCode: '',
-    deptName: '',
-    avatar: '',
+    userInfo: {},
     roles: []
   }
 }
@@ -23,20 +19,8 @@ const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
-  SET_NAME: (state, name) => {
-    state.name = name
-  },
-  SET_IDCARD: (state, idCard) => {
-    state.idCard = idCard
-  },
-  SET_DEPT_CODE: (state, deptCode) => {
-    state.deptCode = deptCode
-  },
-  SET_DEPT_NAME: (state, deptName) => {
-    state.deptName = deptName
-  },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
+  SET_USER_INFO: (state, userInfo) => {
+    state.userInfo = userInfo
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
@@ -66,7 +50,7 @@ const actions = {
           return reject('Verification failed, please Login again.')
         }
 
-        const { name, idCard, deptCode, deptName, avatar, roles } = data
+        const { userInfo, roles } = data
 
         // roles must be a non-empty array
         if (!roles || roles.length <= 0) {
@@ -74,11 +58,7 @@ const actions = {
         }
 
         commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
-        commit('SET_IDCARD', idCard)
-        commit('SET_DEPT_CODE', deptCode)
-        commit('SET_DEPT_NAME', deptName)
-        commit('SET_AVATAR', avatar)
+        commit('SET_USER_INFO', userInfo)
         resolve(data)
       }).catch(error => {
         reject(error)
@@ -96,7 +76,7 @@ const actions = {
   // user logout
   logout({ commit, state, dispatch }) {
     return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
+      logout().then(res => {
         commit('SET_TOKEN', '')
         commit('SET_ROLES', [])
         removeToken()
@@ -106,7 +86,7 @@ const actions = {
         // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
         dispatch('tagsView/delAllViews', null, { root: true })
 
-        resolve()
+        resolve(res)
       }).catch(error => {
         reject(error)
       })

src/styles/headertop.scss

@@ -111,4 +111,49 @@ $headerTextColor: #ffffff;
       }
     }
   }
+}
+
+.profile-poper-box {
+  .avatar-box {
+    display: flex;
+    align-items: center;
+
+    .name-box {
+      margin-left: 10px;
+    }
+
+    .user-name {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: bold;
+    }
+
+    .dept-name {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      margin-top: 5px;
+    }
+  }
+
+  .log-box {
+    border-top: dashed 1px rgba(0, 0, 0, 0.09);
+    border-bottom: dashed 1px rgba(0, 0, 0, 0.09);
+    padding: 5px 0;
+    margin: 10px;
+
+    &>div {
+      padding: 5px 0;
+    }
+
+    .log-left {
+      display: inline-block;
+      width: 100px;
+      text-align: right;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .log-right {
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
 }

src/views/home/Link.vue

@@ -3,7 +3,7 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>外部应用导航</span>
-        <el-button class="header-more-btn" type="text">更多<i class="el-icon-arrow-right" /></el-button>
+        <el-button class="header-more-btn" type="text" @click="showMore">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
       <div class="link-content">
         <div class="link-box">
@@ -19,6 +19,7 @@
       </div>
     </el-card>
     <link-add ref="linkAdd" @refreshData="getTablelist" />
+    <link-list ref="linkList" />
   </div>
 </template>
 
@@ -27,11 +28,13 @@ import { fetchLinkList } from '@/api/link'
 import { hasValidRecords } from '@/utils/convert'
 
 import LinkAdd from './components/LinkAdd'
+import LinkList from './components/LinkList'
 
 export default {
   name: 'HomeLink',
   components: {
-    LinkAdd
+    LinkAdd,
+    LinkList
   },
   data() {
     return {
@@ -75,6 +78,9 @@ export default {
     },
     showAdd() {
       this.$refs['linkAdd'].open()
+    },
+    showMore() {
+      this.$refs['linkList'].open()
     }
   }
 }

src/views/home/Message.vue

@@ -3,7 +3,7 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>消息提醒</span>
-        <el-button class="header-more-btn" type="text" @click="showList">更多<i class="el-icon-arrow-right" /></el-button>
+        <el-button class="header-more-btn" type="text" @click="showMore">更多<i class="el-icon-arrow-right" /></el-button>
       </div>
       <el-tabs v-model="curTab" class="message-content" @tab-click="getTablelist">
         <el-tab-pane :label="'待办（'+ messageCount.todo + '）'" name="Todo">
@@ -119,7 +119,7 @@ export default {
     this.getTypeData()
   },
   methods: {
-    showList() {
+    showMore() {
       this.$refs.messageList.open()
     },
     updateMessage() {

src/views/home/Search.vue

@@ -20,7 +20,7 @@ export default {
   methods: {
     eagleSearch() {
       if (!isNull(this.searchText)) {
-        this.$alert(this.searchText)
+        this.$alert(this.$store.state.user.encryptIdCard + '-' + this.searchText)
       } else {
         this.$message({
           type: 'info',

src/views/home/components/LinkAdd.vue

@@ -95,10 +95,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.home-edit-dialog {
-  width: 500px !important;
-}
-
 .form-box {
   margin: 20px;
 }

src/views/home/components/LinkList.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="home-edit-dialog link-list-dialog"
+      title="外部应用导航"
+    >
+      <div class="link-box">
+        <div class="link-item-box">
+          <a v-for="item in tableData" :key="item.id" class="link-item" :href="item.url" target="_blank">
+            {{ item.designation }}
+          </a>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { hasValidRecords } from '@/utils/convert'
+import { fetchLinkList } from '@/api/link'
+
+export default {
+  name: 'LinkList',
+  data() {
+    return {
+      // dialog
+      visible: false,
+      // table
+      current: 1,
+      size: 100,
+      total: 0,
+      pageSizeAll: [10, 20, 50, 100, 200, 500],
+      tableData: [],
+      // others
+      loading: false
+    }
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.current = 1
+      this.size = val
+      this.getTablelist()
+    },
+    // 切换第几页
+    handleCurrentChange(val) {
+      this.current = val
+      this.getTablelist()
+    },
+    // 重置搜索项
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.getTablelist()
+    },
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        page: 1,
+        size: 100,
+        order: 'create_time',
+        params: {
+          delFlag: 0
+        }
+      }
+      fetchLinkList(params).then(response => {
+        this.loading = false
+        if (hasValidRecords(response)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取外部应用列表出错: ' + error.message
+        })
+      })
+    },
+    /**
+     * 加载附件界面
+     */
+    open() {
+      this.tableData = []
+      this.searchTable()
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.link-box {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.link-item-box {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.link-item {
+  padding: 20px;
+  font-size: 16px;
+  color: rgba(0,0,0,0.85);
+}
+</style>

src/views/system/components/DetailEdit.vue

@@ -236,7 +236,7 @@ export default {
       if (!isNull(this.formData.deptName)) {
         this.defaultTreeId = this.formData.deptName
       } else {
-        this.defaultTreeId = this.$store.state.user.deptName
+        this.defaultTreeId = this.$store.getters.deptName
       }
       this.visible = true
     },