262 lines
7.1 KiB
Vue
262 lines
7.1 KiB
Vue
<template>
|
|
<el-container class="layout-container">
|
|
<el-aside width="200px">
|
|
<div class="logo">经销商管理系统</div>
|
|
<el-menu
|
|
:default-active="activeMenu"
|
|
router
|
|
background-color="#304156"
|
|
text-color="#bfcbd9"
|
|
active-text-color="#409eff"
|
|
>
|
|
<el-menu-item index="/dashboard">
|
|
<el-icon><HomeFilled /></el-icon>
|
|
<span>首页</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/customer">
|
|
<el-icon><User /></el-icon>
|
|
<span>客户管理</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/report">
|
|
<el-icon><Document /></el-icon>
|
|
<span>报备管理</span>
|
|
</el-menu-item>
|
|
<el-menu-item v-if="userStore.isAdmin" index="/dealer">
|
|
<el-icon><Shop /></el-icon>
|
|
<span>经销商管理</span>
|
|
</el-menu-item>
|
|
<el-menu-item v-if="userStore.isAdmin" index="/system-config">
|
|
<el-icon><Setting /></el-icon>
|
|
<span>系统配置</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="header-content">
|
|
<div class="breadcrumb">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="user-info">
|
|
<el-dropdown>
|
|
<span class="user-name">
|
|
<el-icon><Avatar /></el-icon>
|
|
{{ userStore.userInfo?.realName }}
|
|
<el-tag v-if="userStore.isAdmin" type="danger" size="small" style="margin-left: 8px">
|
|
管理员
|
|
</el-tag>
|
|
<el-tag v-else type="success" size="small" style="margin-left: 8px">经销商</el-tag>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="showChangePasswordDialog = true">
|
|
<el-icon><Lock /></el-icon>
|
|
修改密码
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click="handleLogout">
|
|
<el-icon><SwitchButton /></el-icon>
|
|
退出登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<!-- 修改密码对话框 -->
|
|
<el-dialog
|
|
v-model="showChangePasswordDialog"
|
|
title="修改密码"
|
|
width="500px"
|
|
@close="handleDialogClose"
|
|
>
|
|
<el-form ref="formRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
|
|
<el-form-item label="原密码" prop="oldPassword">
|
|
<el-input
|
|
v-model="passwordForm.oldPassword"
|
|
type="password"
|
|
placeholder="请输入原密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
|
<el-input
|
|
v-model="passwordForm.newPassword"
|
|
type="password"
|
|
placeholder="请输入新密码（6-20位）"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
<el-input
|
|
v-model="passwordForm.confirmPassword"
|
|
type="password"
|
|
placeholder="请再次输入新密码"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showChangePasswordDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="handleChangePassword">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { changePassword } from '@/api/auth'
|
|
import { hashPassword } from '@/utils/crypto'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const activeMenu = computed(() => route.path)
|
|
const currentPageTitle = computed(() => route.meta.title as string || '首页')
|
|
|
|
// 修改密码对话框
|
|
const showChangePasswordDialog = ref(false)
|
|
const formRef = ref<FormInstance>()
|
|
const passwordForm = reactive({
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
|
|
const passwordRules: FormRules = {
|
|
oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
|
newPassword: [
|
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
|
{ min: 6, max: 20, message: '新密码长度必须在6-20位之间', trigger: 'blur' }
|
|
],
|
|
confirmPassword: [
|
|
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
|
{
|
|
validator: (_rule, value, callback) => {
|
|
if (value !== passwordForm.newPassword) {
|
|
callback(new Error('两次输入的密码不一致'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
|
|
const handleChangePassword = async () => {
|
|
if (!formRef.value) return
|
|
await formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
try {
|
|
// 对密码进行 SHA-256 哈希后再传输
|
|
const hashedOldPassword = await hashPassword(passwordForm.oldPassword)
|
|
const hashedNewPassword = await hashPassword(passwordForm.newPassword)
|
|
|
|
await changePassword({
|
|
oldPassword: hashedOldPassword,
|
|
newPassword: hashedNewPassword
|
|
})
|
|
ElMessage.success('密码修改成功，请重新登录')
|
|
showChangePasswordDialog.value = false
|
|
// 退出登录
|
|
userStore.logout()
|
|
router.push('/login')
|
|
} catch (error) {
|
|
console.error('修改密码失败', error)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleDialogClose = () => {
|
|
formRef.value?.resetFields()
|
|
Object.assign(passwordForm, {
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
'确定要退出登录吗？',
|
|
'提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
)
|
|
userStore.logout()
|
|
router.push('/login')
|
|
} catch {
|
|
// 取消退出
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layout-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.el-aside {
|
|
background-color: #304156;
|
|
color: #fff;
|
|
}
|
|
|
|
.logo {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
background-color: #2b3a4b;
|
|
}
|
|
|
|
.el-header {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.header-content {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-name {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-name .el-icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.el-main {
|
|
background-color: #f0f2f5;
|
|
padding: 20px;
|
|
}
|
|
</style>
|