zouyu
2023-08-28 e27aa65d479626dfb6899b6934135e1db4faa13e
src/layout/components/Navbar.vue
@@ -6,25 +6,41 @@
    <div class="right-menu">
      <div class="right-serves">
        <i class="el-icon-setting" />
        <i class="el-icon-bell" />
        <i class="el-icon-time" />
        <!-- <i class="el-icon-setting" /> -->
        <p @click="toMessage"><el-badge is-dot class="el-icon-bell message-icon"></el-badge></p>
        <!-- <i class="el-icon-time" /> -->
      </div>
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <a class="user-avatar">{{ '中天'.slice(0,1) }}</a>
          <a class="user-avatar">{{ user.name.slice(0,1) }}</a>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              修改密码
            <el-dropdown-item >
              <p @click="dialogFormVisible = true">修改密码</p>
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" :append-to-body="true" width="40%">
        <el-form :model="form">
          <el-form-item label="旧密码" :label-width="formLabelWidth">
            <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="form.newPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="form.confirmPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset()">取 消</el-button>
          <el-button type="primary" @click="editPwd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
@@ -33,8 +49,33 @@
import { mapGetters } from 'vuex'
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
   import {
      get,
      post,
      wpost,
      postFile
   } from "@/api/util/requestUtil.js"
export default {
  data(){
    return {
      form: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      user: {
            id: null,
            name: 'value'
         },
      dialogFormVisible: false,
      formLabelWidth: '120px',
         user: {
            id: null,
            name: 'value'
         }
    }
  },
  components: {
    // Breadcrumb,
    // Hamburger
@@ -45,14 +86,39 @@
      'avatar'
    ])
  },
   mounted() {
      this.getUser()
   },
  methods: {
    reset(){
      this.dialogFormVisible = false;
      this.form.oldPwd = '';
      this.form.newPwd = '';
      this.form.confirmPwd = '';
    },
    toMessage(){
      this.$router.push('/message/toDo');
    },
    editPwd(){
      console.log(1);
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      // await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
      sessionStorage.removeItem("user")
      localStorage.removeItem("autoenter");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$router.replace({path: '/login'});
      location.reload();
    },
      getUser(){
         get(this.$url.info).then(res=>{
            this.user = res.data
        sessionStorage.setItem("user",JSON.stringify(res.data))
         })
      }
  }
}
</script>
@@ -67,7 +133,13 @@
  border-bottom: 1px solid #f0f2f5;
  // box-shadow: 0 0 0.857143rem rgba(0, 0, 0, 0.12);
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
  .message-icon{
    margin-right: 10px;
    cursor: pointer;
  }
  .v-modal{
    z-index: 8;
  }
  .hamburger-container {
    line-height: 46px;
    height: 100%;