loulijun2021
2022-07-16 392f9468875a8721c17c4e15c288333017cac4a1
src/layout/components/Navbar.vue
@@ -15,7 +15,7 @@
          <!--          <i class="el-icon-caret-bottom" />-->
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
          <!--          <router-link to="/">-->
          <!--            <el-dropdown-item>-->
          <!--              Home-->
@@ -27,16 +27,44 @@
          <!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
          <!--            <el-dropdown-item>Docs</el-dropdown-item>-->
          <!--          </a>-->
          <!--          <el-dropdown-item @click.native="logout">-->
          <!--            <span style="display:block;">修改密码</span>-->
          <!--          </el-dropdown-item>-->
          <!--          divided-->
          <el-dropdown-item @click.native="logout">
            <span style="display:block;">退出</span>
          <el-dropdown-item @click.native="editPassword">
            <span style="display:block;">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;font-weight: bolder">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleClose"
      @closed="handleClose"
    >
      <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
        <!--        <el-form-item label="用户编码:">-->
        <!--          <div>{{ usercode }}</div>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="用户名称:">-->
        <!--          <div> {{ username }}</div>-->
        <!--        </el-form-item>-->
        <el-form-item label="密码:" prop="password">
          <el-input v-model="form.password" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="新密码:" prop="newpassword">
          <el-input v-model="form.newpassword" style="width: 220px;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">返回</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
@@ -44,10 +72,10 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getCookie, removeCookie, removeToken } from '@/utils/auth'
import { logout } from '@/api/user'
import { resetRouter } from '@/router'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  components: {
    Breadcrumb,
@@ -60,11 +88,37 @@
    ])
  },
  created() {
    this.usercode = getCookie('navTabId')
    this.username = getCookie('admin')
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码!'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('密码不能为中文!'))
        } else {
          callback()
        }
      }
    }
    return {
      username: ''
      usercode: '',
      username: '',
      form: {
        password: '',
        newpassword: ''
      },
      dialogVisible: false,
      formRules: {
        password: [
          { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
        ],
        newpassword: [
          { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
@@ -75,6 +129,36 @@
      await this.$store.dispatch('user/logout')
      this.$message.success('退出成功!')
      this.$router.push(`/login`)
    },
    editPassword() {
      this.dialogVisible = true
    },
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            usercode: this.usercode,
            username: this.username,
            password: this.form.password,
            newpassword: this.form.newpassword
          }
          console.log(data)
          UpdateUserPassword(data).then(res => {
            if (res.code === '200') {
              this.$message.success('修改成功!')
              this.dialogVisible = false
            }
          })
        }
      })
    },
    handleClose() {
      this.form.password = ''
      this.form.newpassword = ''
      this.$refs.dialogForm.clearValidate()
    }
  }
}
@@ -86,7 +170,7 @@
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  .hamburger-container {
    line-height: 46px;
@@ -94,7 +178,7 @@
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;
    -webkit-tap-highlight-color: transparent;
    &:hover {
      background: rgba(0, 0, 0, .025)
@@ -139,11 +223,12 @@
        margin-top: 5px;
        position: relative;
        cursor: pointer;
        .headerImg{
        .headerImg {
          margin: 5px;
        }
        .headerName{
        .headerName {
          font-weight: bolder;
        }
@@ -164,5 +249,33 @@
      }
    }
  }
  .footerButton {
    display: flex;
    justify-content: end;
  }
  ::v-deep .el-button--primary {
    background-color: #42b983 !important;
    height: 30px;
    display: flex;
    align-items: center;
    //border: 1px solid $main_color;
    border: none;
    padding: 0 20px;
  }
  ::v-deep .el-button--default {
    background-color: #ffffff !important;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
</style>