admin/src/pages/system/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="system-header flex-h">
      <i class="iconfont icon-yinchenglogo"></i>
      <span>银城-城的空间</span>
      <div class="flex-item flex-h" style="overflow: visible;">
        <div class="flex-item"></div>
        <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">
      <div class="system-siderBar">
        <siderBar :menu="pageMenu"></siderBar>
      </div>
      <div class="flex-item flex-v">
        <div class="system-breadcrumb">
          <breadCrumb :list="breadCrumb"></breadCrumb>
        </div>
        <div class="flex-item">
          <div class="subPageBox">
            <router-view></router-view>
          </div>
        </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>

<script>
import breadCrumb from '@/components/breadCrumb/index'
import siderBar from '@/components/siderBar/index'
import routerData from '@/router/router'
import { mapState, mapMutations, mapActions } from 'vuex'
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: {
    breadCrumb,
    siderBar,
  },
  created () {
    this.updateSystemInfo()
    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'
    ]),
    ...mapActions([
      'updateSystemInfo'
    ]),
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>