152 lines
3.1 KiB
Vue
152 lines
3.1 KiB
Vue
<template>
|
|
<div class="head">
|
|
<div class="head_l">
|
|
<!-- <img src="/icoimg.png" alt="收缩" />-->
|
|
</div>
|
|
<el-dropdown>
|
|
<div class="head_r">
|
|
<!-- <img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />-->
|
|
<div class="head_user">
|
|
<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
|
|
<div class="head_user_desc">管理员</div>
|
|
</div>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click="drawer = true" >个人中心</el-dropdown-item>
|
|
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
|
|
<el-drawer
|
|
v-model="drawer"
|
|
title="个人中心"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="state.dynamicValidateForm"
|
|
label-position="top"
|
|
>
|
|
<el-form-item
|
|
prop="password"
|
|
label="原始密码"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '原始密码不能为空',
|
|
trigger: 'blur',
|
|
},
|
|
]"
|
|
>
|
|
<el-input v-model="state.dynamicValidateForm.password" />
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
prop="newPassword"
|
|
label="新密码"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '新密码不能为空',
|
|
trigger: 'blur',
|
|
},
|
|
]"
|
|
>
|
|
<el-input v-model="state.dynamicValidateForm.newPassword" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" @click="submitForm(formRef)">确定修改</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
import type { FormInstance } from 'element-plus'
|
|
const formRef = ref<FormInstance>()
|
|
import { updatePasswordAdmin } from '~/api/user/adminUserApi'
|
|
const router = useRouter();
|
|
const drawer = ref(false)
|
|
const state = reactive({
|
|
dynamicValidateForm:{}
|
|
})
|
|
|
|
/**
|
|
* 退出登录
|
|
*/
|
|
const logout = () => {
|
|
logoutAdmin().then(()=>{
|
|
toast.success("退出成功~")
|
|
router.push('/login');
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 修改密码
|
|
* @param formEl
|
|
*/
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.validate((valid) => {
|
|
if (valid) {
|
|
updatePasswordAdmin(state.dynamicValidateForm).then(result => {
|
|
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.head{
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #fdfdfe;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.head_l{
|
|
width:40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.head_l img{
|
|
width: 25px;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
}
|
|
.head_r{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 30px;
|
|
.profile{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #f6f6f6;
|
|
color: #333333;
|
|
font-size: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.head_user{
|
|
.head_user_name{
|
|
margin-top: 10px;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.head_user_desc{
|
|
color:#a7a7a7;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|