feat：修改密码
This commit is contained in:
lijianzhong
parent
837ebd76e7
commit
e36af85649
|
|
@ -1,168 +1,188 @@
|
|||
<script setup name="Tools">
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import { useMainPage } from '@/utils/composables'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { useFullscreen } from "@vueuse/core";
|
||||
import eventBus from "@/utils/eventBus";
|
||||
import { useMainPage } from "@/utils/composables";
|
||||
import useSettingsStore from "@/store/modules/settings";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const userStore = useUserStore()
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const { isFullscreen, toggle } = useFullscreen()
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
|
||||
function userCommand(command) {
|
||||
switch (command) {
|
||||
case 'dashboard':
|
||||
router.push({
|
||||
name: 'dashboard'
|
||||
})
|
||||
break
|
||||
case 'setting':
|
||||
router.push({
|
||||
name: 'personalSetting'
|
||||
})
|
||||
break
|
||||
case 'logout':
|
||||
userStore.logout().then(() => {
|
||||
router.push({
|
||||
name: 'login'
|
||||
})
|
||||
})
|
||||
break
|
||||
}
|
||||
switch (command) {
|
||||
case "pwd":
|
||||
router.push({
|
||||
name: "personalEditPassword",
|
||||
});
|
||||
break;
|
||||
case "logout":
|
||||
userStore.logout().then(() => {
|
||||
router.push({
|
||||
name: "login",
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
function pro() {
|
||||
window.open('https://www.baidu.com/', 'top')
|
||||
window.open("https://www.baidu.com/", "top");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tools">
|
||||
<div class="buttons">
|
||||
<span v-if="settingsStore.mode == 'pc' && false" class="item item-pro" @click="pro">
|
||||
<el-icon>
|
||||
<svg-icon name="pro" />
|
||||
</el-icon>
|
||||
<span class="title">查看专业版</span>
|
||||
</span>
|
||||
<span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="eventBus.emit('global-search-toggle')">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:search" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span v-if="settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen" class="item" @click="toggle">
|
||||
<el-icon>
|
||||
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span v-if="settingsStore.topbar.enablePageReload" class="item" @click="useMainPage().reload()">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:refresh-right" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span v-if="settingsStore.topbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
|
||||
<el-icon>
|
||||
<svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
|
||||
<svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:setting" />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<el-dropdown class="user-container" size="default" @command="userCommand">
|
||||
<div class="user-wrapper">
|
||||
<el-avatar size="small">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:user-filled" />
|
||||
</el-icon>
|
||||
</el-avatar>
|
||||
{{ userStore.account }}
|
||||
<el-icon>
|
||||
<svg-icon name="ep:caret-bottom" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="user-dropdown">
|
||||
<el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">控制台</el-dropdown-item>
|
||||
<el-dropdown-item command="setting">个人设置</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="tools">
|
||||
<div class="buttons">
|
||||
<span
|
||||
v-if="settingsStore.topbar.enableNavSearch"
|
||||
class="item"
|
||||
@click="eventBus.emit('global-search-toggle')"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:search" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen
|
||||
"
|
||||
class="item"
|
||||
@click="toggle"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="settingsStore.topbar.enablePageReload"
|
||||
class="item"
|
||||
@click="useMainPage().reload()"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:refresh-right" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="settingsStore.topbar.enableColorScheme"
|
||||
class="item"
|
||||
@click="
|
||||
settingsStore.setColorScheme(
|
||||
settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark'
|
||||
)
|
||||
"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon
|
||||
v-show="settingsStore.app.colorScheme === 'light'"
|
||||
name="ep:sunny"
|
||||
/>
|
||||
<svg-icon
|
||||
v-show="settingsStore.app.colorScheme === 'dark'"
|
||||
name="ep:moon"
|
||||
/>
|
||||
</el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="settingsStore.topbar.enableAppSetting"
|
||||
class="item"
|
||||
@click="eventBus.emit('global-theme-toggle')"
|
||||
>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:setting" />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<el-dropdown class="user-container" size="default" @command="userCommand">
|
||||
<div class="user-wrapper">
|
||||
<el-avatar size="small">
|
||||
<el-icon>
|
||||
<svg-icon name="ep:user-filled" />
|
||||
</el-icon>
|
||||
</el-avatar>
|
||||
{{ userStore.account }}
|
||||
<el-icon>
|
||||
<svg-icon name="ep:caret-bottom" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="user-dropdown">
|
||||
<el-dropdown-item command="pwd">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
.buttons {
|
||||
margin-right: 20px;
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 34px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
.el-icon {
|
||||
color: var(--el-text-color-primary);
|
||||
transition: var(--el-transition-color);
|
||||
}
|
||||
}
|
||||
.item-pro {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
transform-origin: right center;
|
||||
animation: pro-text 3s ease-out infinite;
|
||||
@keyframes pro-text {
|
||||
0%,
|
||||
20% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50%,
|
||||
70% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-image: linear-gradient(to right, #ffa237, #fc455d);
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
.buttons {
|
||||
margin-right: 20px;
|
||||
.item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 34px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
.el-icon {
|
||||
color: var(--el-text-color-primary);
|
||||
transition: var(--el-transition-color);
|
||||
}
|
||||
}
|
||||
.item-pro {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
transform-origin: right center;
|
||||
animation: pro-text 3s ease-out infinite;
|
||||
@keyframes pro-text {
|
||||
0%,
|
||||
20% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50%,
|
||||
70% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
padding-left: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-image: linear-gradient(to right, #ffa237, #fc455d);
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.user-container) {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
.user-wrapper {
|
||||
.el-avatar {
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
.user-wrapper {
|
||||
.el-avatar {
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,7 @@ const useUserStore = defineStore(
|
|||
}
|
||||
return retn
|
||||
},
|
||||
companyInfo: state => {
|
||||
return state.company || '{}'
|
||||
// return JSON.parse(state.company || '{}')
|
||||
},
|
||||
|
||||
userInfo: state => {
|
||||
return state.user || '{}'
|
||||
// return JSON.parse(state.user || '{}')
|
||||
|
|
@ -36,10 +33,10 @@ const useUserStore = defineStore(
|
|||
loginIn(data).then(res => {
|
||||
if (res.code == 1) {
|
||||
conpanyInfo(res.data.sysuserid).then(result => {
|
||||
localStorage.setItem('user', JSON.stringify(res.data))
|
||||
localStorage.setItem('account', res.data.postName)
|
||||
localStorage.setItem('token', res.data.tokenValue)
|
||||
localStorage.setItem('failure_time', 1664008260)
|
||||
localStorage.setItem('user-df', JSON.stringify(res.data))
|
||||
localStorage.setItem('account-df', res.data.postName)
|
||||
localStorage.setItem('token-df', res.data.tokenValue)
|
||||
localStorage.setItem('failure_time-df', 1664008260)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
|
|
@ -56,11 +53,10 @@ const useUserStore = defineStore(
|
|||
return new Promise(resolve => {
|
||||
const routeStore = useRouteStore()
|
||||
const menuStore = useMenuStore()
|
||||
localStorage.removeItem('account')
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
localStorage.removeItem('company')
|
||||
localStorage.removeItem('failure_time')
|
||||
localStorage.removeItem('account-df')
|
||||
localStorage.removeItem('token-df')
|
||||
localStorage.removeItem('user-df')
|
||||
localStorage.removeItem('failure_time-df')
|
||||
this.account = ''
|
||||
this.token = ''
|
||||
this.failure_time = ''
|
||||
|
|
|
|||
|
|
@ -7,86 +7,104 @@
|
|||
</route>
|
||||
|
||||
<script setup name="PersonalEditPassword">
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import useUserStore from "@/store/modules/user";
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const userStore = useUserStore()
|
||||
const userStore = useUserStore();
|
||||
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value !== form.value.newpassword) {
|
||||
callback(new Error('请确认新密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
if (value !== form.value.newpassword) {
|
||||
callback(new Error("请确认新密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const formRef = ref()
|
||||
const formRef = ref();
|
||||
const form = ref({
|
||||
password: '',
|
||||
newpassword: '',
|
||||
checkpassword: ''
|
||||
})
|
||||
password: "",
|
||||
newpassword: "",
|
||||
checkpassword: "",
|
||||
});
|
||||
|
||||
const rules = ref({
|
||||
password: [
|
||||
{ required: true, message: '请输入原密码', trigger: 'blur' }
|
||||
],
|
||||
newpassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
|
||||
],
|
||||
checkpassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ validator: validatePassword }
|
||||
]
|
||||
})
|
||||
password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
|
||||
newpassword: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{ min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
|
||||
],
|
||||
checkpassword: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{ validator: validatePassword },
|
||||
],
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
formRef.value.validate(valid => {
|
||||
if (valid) {
|
||||
userStore.editPassword(form.value).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '模拟修改成功，请重新登录'
|
||||
})
|
||||
userStore.logout().then(() => {
|
||||
router.push({
|
||||
name: 'login',
|
||||
query: {
|
||||
redirect: route.fullPath
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
})
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
userStore
|
||||
.editPassword(form.value)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "模拟修改成功，请重新登录",
|
||||
});
|
||||
userStore.logout().then(() => {
|
||||
router.push({
|
||||
name: "login",
|
||||
query: {
|
||||
redirect: route.fullPath,
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
|
||||
<page-main>
|
||||
<el-row>
|
||||
<el-col :md="24" :lg="12">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="原密码" prop="password">
|
||||
<el-input v-model="form.password" type="password" placeholder="请输入原密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newpassword">
|
||||
<el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="checkpassword">
|
||||
<el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</page-main>
|
||||
<fixed-action-bar>
|
||||
<el-button type="primary" size="large" @click="onSubmit">提交</el-button>
|
||||
</fixed-action-bar>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
|
||||
<page-main>
|
||||
<el-row>
|
||||
<el-col :md="24" :lg="12">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="原密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newpassword">
|
||||
<el-input
|
||||
v-model="form.newpassword"
|
||||
type="password"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="checkpassword">
|
||||
<el-input
|
||||
v-model="form.checkpassword"
|
||||
type="password"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</page-main>
|
||||
<fixed-action-bar>
|
||||
<el-button type="primary" size="large" @click="onSubmit">提交</el-button>
|
||||
</fixed-action-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user