adminBigData/src/layout/components/header.vue

<template>
  <div class="head_content">
    <div class="head_content_left">
      <div class="big_head">后台管理系统</div>
      <div class="small_head">大数据精准教学平台</div>
    </div>
    <div class="head_content_right">
      <el-dropdown trigger="click" @command="UserCommand" placement="bottom-end">
        <span class="userName">
          {{ userInfo.nickname }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="setPassWord">修改密码</el-dropdown-item>
            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <div class="page_dialog">
    <el-dialog v-model="dialogShow" title="修改密码" width="450px">
      <el-form
        :model="editPassWordData"
        label-width="80px"
        :rules="editPassWordDataRules"
        ref="editPassWordForm"
      >
        <el-form-item label="原密码" prop="passWord">
          <el-input v-model="editPassWordData.passWord" type="password" placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input v-model="editPassWordData.newPassWord" type="password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmNewPassWord">
          <el-input v-model="editPassWordData.confirmNewPassWord" type="password" placeholder="请输入确认新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="button_border_grag cancel" @click="dialogShow = false">取 消</el-button>
        <el-button class="button_background" :loading="submitLoading" @click="confirmPassWord(editPassWordForm)">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Header'
}
</script>
<script lang="ts" setup>
import router from '@/router'
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive, computed } from 'vue'
import { loginOut, changePassWord } from '@/api/login'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
const userInfo = computed(() => {
  const user = localStorage.getItem('userInfo')
  if (user) {
    return JSON.parse(user)
  }
  return null
})
const dialogShow = ref(false)
interface EditPassWordData {
  passWord: string
  newPassWord: string
  confirmNewPassWord: string
}
const editPassWordData = reactive<EditPassWordData>({
  passWord: '',
  newPassWord: '',
  confirmNewPassWord: ''
}) // 修改密码弹窗数据

const editPassWordForm = ref<FormInstance>()
const editPassWordDataRules = reactive<FormRules<EditPassWordData>>({
  passWord: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPassWord: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  confirmNewPassWord: [
    { required: true, message: '请输入确认新密码', trigger: 'blur' }
  ]
})
const UserCommand = (command: string) => {
  console.log(command)
  if(command == 'setPassWord') {
    setPassWord()
  }else if(command == 'loginOut') {
    loginOutFn()
  }
}
const setPassWord = () => {
  dialogShow.value = true
}
const loginOutFn = async () => {
  console.log(userInfo.value.username)
  const res = await loginOut(userInfo.value.userid)
  if(res.code == 200) {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.push('/login')
  }else {
    ElMessage.error(res.msg)
  }
}
const submitLoading = ref(false)
const confirmPassWord = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        const res = await changePassWord({
          oldPassword: editPassWordData.passWord,
          newPassword: editPassWordData.newPassWord,
          confirmNewPassword: editPassWordData.confirmNewPassWord,
        })
        if(res.code == 200) {
          ElMessage.success(res.msg)
          dialogShow.value = false
        }else {
          ElMessage.error(res.msg)
        }
      }catch {}finally {
        submitLoading.value = false
      }
    }
  })
}
</script>
 
<style lang="scss" scoped>
.head_content {
  height: 65px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2E64FA;
}
.big_head {
  font-size: 24px;
  color: #fff;
}
.small_head {
  font-size: 14px;
  color: #fff;
}
.head_content_right {
  .userName {
    height: 24px;
    line-height: 24px;
    color: #fff;
    cursor: pointer;
    .el-icon svg {
      margin-top: 2px;
    }
  }
}
</style>