xcx

src/pages/login/index.vue

@@ -71,7 +71,7 @@ export default {
           duration: 1000
         })
         setTimeout(() => {
-          this.$router.push({ name: 'system' })
+          this.$router.push({ name: 'userManager' })
         }, 1000)
       }).catch(msg => {
 

src/pages/system/index.vue

@@ -3,10 +3,18 @@
     <div class="system-header flex-h">
       <i class="iconfont icon-yinchenglogo"></i>
       <span>银城-城的空间</span>
-      <div class="flex-item flex-h">
+      <div class="flex-item flex-h" style="overflow: visible;">
         <div class="flex-item"></div>
-        <span class="characterMark">用户角色</span>
-        <a class="userIcon"></a>
+        <span class="characterMark">{{user.UserName}}</span>
+        <div class="userIconBox">
+          <a class="userIcon">
+            <img :src="user.Headimgurl" class="centerLabel cover" alt="">
+          </a>
+          <ul class="userSet">
+            <li @click="signout">登出</li>
+            <li @click="editPassword">修改密码</li>
+          </ul>
+        </div>
       </div>
     </div>
     <div class="flex-item flex-h">
@@ -24,6 +32,22 @@
         </div>
       </div>
     </div>
+    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
+      <el-input
+        placeholder="请输入旧密码"
+        v-model="postData.oriPasswd"
+        clearable>
+      </el-input>
+      <el-input style="margin-top:20px;"
+        placeholder="请输入新密码"
+        v-model="postData.newPasswd"
+        clearable>
+      </el-input>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitPasswd">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -36,12 +60,18 @@ export default {
   name: '',
   data () {
     return {
+      dialogFormVisible: false,
+      postData: {
+        oriPasswd: '', // 旧密码
+        newPasswd: '', // 新密码
+      },
     }
   },
   computed: {
     ...mapState({
       breadCrumb: x => x.app.breadcrumb,
       pageMenu: x => x.app.menus,
+      user: x => x.app.user,
     })
   },
   components: {
@@ -53,6 +83,37 @@ export default {
     this.updateBread({ routerData, Url: this.$route.name })
   },
   methods: {
+    submitPasswd () { // 修改密码
+      var aData = {
+        oriPasswd: this.md5(this.postData.oriPasswd),
+        newPasswd: this.md5(this.postData.newPasswd)
+      }
+      this.$ajax(this.$api.system.editPassword.url, {
+        method: this.$api.system.editPassword.method,
+        urlData: { id: this.user.UserId },
+        data: aData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'login' })
+      })
+    },
+    editPassword () { // 修改密码
+      this.dialogFormVisible = true
+    },
+    signout () { // 登出
+      this.$ajax(this.$api.system.signout.url, {
+        method: this.$api.system.signout.method,
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'login' })
+      })
+    },
     ...mapMutations([
       'updateBread'
     ]),

src/pages/system/page.scss

@@ -58,6 +58,49 @@
     border-radius: 100%;
     background: #eee;
     margin: 0 20px 0 10px;
+    display: block;
+  }
+
+  .userIconBox{
+    position: relative;
+    overflow: visible;
+    .userSet{
+      display: none;
+      position: absolute;
+      right: 30px;
+      top: 40px;
+      background: #fff;
+      padding: 5px 0;
+      box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
+      li{
+        display: block;
+        line-height: 30px;
+        white-space: nowrap;
+        color: #666;
+        font-size: 13px;
+        padding: 0 15px;
+        &:hover{
+          cursor: pointer;
+          background: #eee;
+        }
+      }
+      &::after{
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: dashed dashed solid dashed;
+        border-width: 8px;
+        border-color: transparent transparent #fff transparent;
+        right: 0;
+        top: -14px;
+      }
+    }
+    &:hover{
+      &>.userSet{
+        display: inline-block;
+      }
+    }
   }
 
 }

src/store/app.js

@@ -32,7 +32,7 @@ function packChildren (data) {
       }
     }
 
-    if (!found) {
+    if (!found && cp[inx].IsShow === 1) {
       res.push(cp[inx])
     }
   })

src/util/api.js

@@ -13,7 +13,15 @@ const $api = {
     init: { // 初始化菜单
       method: 'get',
       url: `${baseUrl}${common}/system/init`
-    }
+    },
+    signout: { // 登出
+      method: 'post',
+      url: `${baseUrl}${common}/signout`
+    },
+    editPassword: { // 修改密码
+      method: 'put',
+      url: `${baseUrl}${common}/user/:id/password`
+    },
   },
   systemSet: {
     getUserList: { // 获取用户列表