zouyu
2023-08-24 930b8403e74bdba2b7a8f3a38270a5227bf78995
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>
        </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">
        <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>
@@ -35,6 +51,17 @@
// import Hamburger from '@/components/Hamburger'
export default {
  data(){
    return {
      form: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  components: {
    // Breadcrumb,
    // Hamburger
@@ -46,6 +73,18 @@
    ])
  },
  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')
    },
@@ -67,7 +106,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%;