<template>
|
<el-container class="main-layout">
|
<el-aside :width="isCollapse ? '64px' : '220px'" class="aside">
|
<div class="logo">
|
<span v-if="!isCollapse">数据录入系统</span>
|
<span v-else>数据</span>
|
</div>
|
<el-menu
|
:default-active="activeMenu"
|
:collapse="isCollapse"
|
:router="true"
|
background-color="#304156"
|
text-color="#bfcbd9"
|
active-text-color="#409EFF"
|
class="menu"
|
>
|
<el-menu-item index="/dashboard">
|
<el-icon><HomeFilled /></el-icon>
|
<template #title>首页</template>
|
</el-menu-item>
|
|
<el-sub-menu index="system">
|
<template #title>
|
<el-icon><Setting /></el-icon>
|
<span>系统管理</span>
|
</template>
|
<el-menu-item index="/system/user">
|
<el-icon><User /></el-icon>
|
<template #title>用户管理</template>
|
</el-menu-item>
|
<el-menu-item index="/system/department">
|
<el-icon><OfficeBuilding /></el-icon>
|
<template #title>部门管理</template>
|
</el-menu-item>
|
</el-sub-menu>
|
|
<el-sub-menu index="data">
|
<template #title>
|
<el-icon><Upload /></el-icon>
|
<span>数据管理</span>
|
</template>
|
<el-menu-item index="/data/excel">
|
<el-icon><Document /></el-icon>
|
<template #title>单位数据上传</template>
|
</el-menu-item>
|
</el-sub-menu>
|
</el-menu>
|
</el-aside>
|
|
<el-container>
|
<el-header class="header">
|
<div class="header-left">
|
<el-icon
|
class="collapse-btn"
|
:size="20"
|
@click="isCollapse = !isCollapse"
|
>
|
<Fold v-if="!isCollapse" />
|
<Expand v-else />
|
</el-icon>
|
</div>
|
<div class="header-right">
|
<el-dropdown @command="handleCommand">
|
<span class="user-info">
|
<el-icon><User /></el-icon>
|
{{ userStore.userInfo.realName || userStore.userInfo.username }}
|
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</el-header>
|
|
<el-main class="main">
|
<router-view />
|
</el-main>
|
</el-container>
|
|
<el-dialog v-model="passwordDialogVisible" title="修改密码" width="400px">
|
<el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="80px">
|
<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="请输入新密码" 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="passwordDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handlePasswordChange" :loading="passwordLoading">确定</el-button>
|
</template>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { useUserStore } from '@/stores/user'
|
import { changePassword } from '@/api/user'
|
import { ElMessage } from 'element-plus'
|
|
const route = useRoute()
|
const router = useRouter()
|
const userStore = useUserStore()
|
|
const isCollapse = ref(false)
|
const passwordDialogVisible = ref(false)
|
const passwordLoading = ref(false)
|
const passwordFormRef = ref(null)
|
|
const passwordForm = ref({
|
oldPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
})
|
|
const validateConfirmPassword = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入新密码'))
|
} else if (value !== passwordForm.value.newPassword) {
|
callback(new Error('两次输入的密码不一致'))
|
} else {
|
callback()
|
}
|
}
|
|
const validateNotSameAsOld = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入新密码'))
|
} else if (value === passwordForm.value.oldPassword) {
|
callback(new Error('新密码不能与原密码相同'))
|
} else {
|
callback()
|
}
|
}
|
|
const passwordRules = {
|
oldPassword: [
|
{ required: true, message: '请输入原密码', trigger: 'blur' }
|
],
|
newPassword: [
|
{ required: true, validator: validateNotSameAsOld, trigger: 'blur' },
|
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
|
],
|
confirmPassword: [
|
{ required: true, validator: validateConfirmPassword, trigger: 'blur' }
|
]
|
}
|
|
const activeMenu = computed(() => {
|
return route.path
|
})
|
|
const handleCommand = (command) => {
|
if (command === 'logout') {
|
userStore.logout()
|
router.push('/login')
|
} else if (command === 'editPassword') {
|
passwordDialogVisible.value = true
|
passwordForm.value = {
|
oldPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
}
|
}
|
}
|
|
const handlePasswordChange = async () => {
|
if (!passwordFormRef.value) return
|
|
await passwordFormRef.value.validate(async (valid) => {
|
if (valid) {
|
passwordLoading.value = true
|
try {
|
await changePassword({
|
oldPassword: passwordForm.value.oldPassword,
|
newPassword: passwordForm.value.newPassword
|
})
|
ElMessage.success('密码修改成功')
|
passwordDialogVisible.value = false
|
userStore.logout()
|
router.push('/login')
|
} catch (error) {
|
ElMessage.error(error.message || '密码修改失败')
|
} finally {
|
passwordLoading.value = false
|
}
|
}
|
})
|
}
|
</script>
|
|
<style scoped>
|
.main-layout {
|
height: 100vh;
|
}
|
|
.aside {
|
background-color: #304156;
|
transition: width 0.3s;
|
}
|
|
.logo {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 18px;
|
font-weight: bold;
|
background-color: #263445;
|
}
|
|
.menu {
|
border-right: none;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: white;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
padding: 0 20px;
|
}
|
|
.header-left {
|
display: flex;
|
align-items: center;
|
}
|
|
.collapse-btn {
|
cursor: pointer;
|
padding: 10px;
|
}
|
|
.collapse-btn:hover {
|
background-color: #f5f5f5;
|
border-radius: 4px;
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
cursor: pointer;
|
color: #333;
|
}
|
|
.main {
|
background-color: #f0f2f5;
|
overflow-y: auto;
|
}
|
</style>
|
