xianshui/daofu-gov-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：修改密码

Browse Source
This commit is contained in:
lijianzhong 2024-01-30 17:17:37 +08:00
parent 837ebd76e7
commit e36af85649
3 changed files with 260 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
src/layout/components/Tools/index.vue
View File

@ -1,168 +1,188 @@
<script setup name="Tools"> <script setup name="Tools">
import { useFullscreen } from '@vueuse/core' import { useFullscreen } from "@vueuse/core";
import eventBus from '@/utils/eventBus' import eventBus from "@/utils/eventBus";
import { useMainPage } from '@/utils/composables' import { useMainPage } from "@/utils/composables";
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from "@/store/modules/settings";
import useUserStore from '@/store/modules/user' import useUserStore from "@/store/modules/user";
const router = useRouter() const router = useRouter();
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore();
const userStore = useUserStore() const userStore = useUserStore();
const { isFullscreen, toggle } = useFullscreen() const { isFullscreen, toggle } = useFullscreen();
function userCommand(command) { function userCommand(command) {
switch (command) { switch (command) {
case 'dashboard': case "pwd":
router.push({ router.push({
name: 'dashboard' name: "personalEditPassword",
}) });
break break;
case 'setting': case "logout":
router.push({ userStore.logout().then(() => {
name: 'personalSetting' router.push({
}) name: "login",
break });
case 'logout': });
userStore.logout().then(() => { break;
router.push({ }
name: 'login'
})
})
break
}
} }
function pro() { function pro() {
window.open('https://www.baidu.com/', 'top') window.open("https://www.baidu.com/", "top");
} }
</script> </script>
<template> <template>
<div class="tools"> <div class="tools">
<div class="buttons"> <div class="buttons">
<span v-if="settingsStore.mode == 'pc' && false" class="item item-pro" @click="pro"> <span
<el-icon> v-if="settingsStore.topbar.enableNavSearch"
<svg-icon name="pro" /> class="item"
</el-icon> @click="eventBus.emit('global-search-toggle')"
<span class="title">查看专业版</span> >
</span> <el-icon>
<span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="eventBus.emit('global-search-toggle')"> <svg-icon name="ep:search" />
<el-icon> </el-icon>
<svg-icon name="ep:search" /> </span>
</el-icon> <span
</span> v-if="
<span v-if="settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen" class="item" @click="toggle"> settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen
<el-icon> "
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" /> class="item"
</el-icon> @click="toggle"
</span> >
<span v-if="settingsStore.topbar.enablePageReload" class="item" @click="useMainPage().reload()"> <el-icon>
<el-icon> <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
<svg-icon name="ep:refresh-right" /> </el-icon>
</el-icon> </span>
</span> <span
<span v-if="settingsStore.topbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')"> v-if="settingsStore.topbar.enablePageReload"
<el-icon> class="item"
<svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" /> @click="useMainPage().reload()"
<svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" /> >
</el-icon> <el-icon>
</span> <svg-icon name="ep:refresh-right" />
<span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')"> </el-icon>
<el-icon> </span>
<svg-icon name="ep:setting" /> <span
</el-icon> v-if="settingsStore.topbar.enableColorScheme"
</span> class="item"
</div> @click="
<el-dropdown class="user-container" size="default" @command="userCommand"> settingsStore.setColorScheme(
<div class="user-wrapper"> settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark'
<el-avatar size="small"> )
<el-icon> "
<svg-icon name="ep:user-filled" /> >
</el-icon> <el-icon>
</el-avatar> <svg-icon
{{ userStore.account }} v-show="settingsStore.app.colorScheme === 'light'"
<el-icon> name="ep:sunny"
<svg-icon name="ep:caret-bottom" /> />
</el-icon> <svg-icon
</div> v-show="settingsStore.app.colorScheme === 'dark'"
<template #dropdown> name="ep:moon"
<el-dropdown-menu class="user-dropdown"> />
<el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">控制台</el-dropdown-item> </el-icon>
<el-dropdown-item command="setting">个人设置</el-dropdown-item> </span>
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item> <span
</el-dropdown-menu> v-if="settingsStore.topbar.enableAppSetting"
</template> class="item"
</el-dropdown> @click="eventBus.emit('global-theme-toggle')"
>
<el-icon>
<svg-icon name="ep:setting" />
</el-icon>
</span>
</div> </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> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.tools { .tools {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 20px;
white-space: nowrap; white-space: nowrap;
.buttons { .buttons {
margin-right: 20px; margin-right: 20px;
.item { .item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 24px; height: 24px;
width: 34px; width: 34px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
.el-icon { .el-icon {
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
transition: var(--el-transition-color); 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;
}
}
} }
.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) { :deep(.user-container) {
display: inline-block; display: inline-block;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
.user-wrapper { .user-wrapper {
.el-avatar { .el-avatar {
vertical-align: middle; vertical-align: middle;
margin-top: -2px; margin-top: -2px;
margin-right: 4px; margin-right: 4px;
}
} }
}
} }
</style> </style>

22
src/store/modules/user.js
View File

@ -21,10 +21,7 @@ const useUserStore = defineStore(
} }
return retn return retn
}, },
companyInfo: state => {
return state.company || '{}'
// return JSON.parse(state.company || '{}')
},
userInfo: state => { userInfo: state => {
return state.user || '{}' return state.user || '{}'
// return JSON.parse(state.user || '{}') // return JSON.parse(state.user || '{}')
@ -36,10 +33,10 @@ const useUserStore = defineStore(
loginIn(data).then(res => { loginIn(data).then(res => {
if (res.code == 1) { if (res.code == 1) {
conpanyInfo(res.data.sysuserid).then(result => { conpanyInfo(res.data.sysuserid).then(result => {
localStorage.setItem('user', JSON.stringify(res.data)) localStorage.setItem('user-df', JSON.stringify(res.data))
localStorage.setItem('account', res.data.postName) localStorage.setItem('account-df', res.data.postName)
localStorage.setItem('token', res.data.tokenValue) localStorage.setItem('token-df', res.data.tokenValue)
localStorage.setItem('failure_time', 1664008260) localStorage.setItem('failure_time-df', 1664008260)
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
@ -56,11 +53,10 @@ const useUserStore = defineStore(
return new Promise(resolve => { return new Promise(resolve => {
const routeStore = useRouteStore() const routeStore = useRouteStore()
const menuStore = useMenuStore() const menuStore = useMenuStore()
localStorage.removeItem('account') localStorage.removeItem('account-df')
localStorage.removeItem('token') localStorage.removeItem('token-df')
localStorage.removeItem('user') localStorage.removeItem('user-df')
localStorage.removeItem('company') localStorage.removeItem('failure_time-df')
localStorage.removeItem('failure_time')
this.account = '' this.account = ''
this.token = '' this.token = ''
this.failure_time = '' this.failure_time = ''

154
src/views/personal/edit.password.vue
View File

@ -7,86 +7,104 @@
</route> </route>
<script setup name="PersonalEditPassword"> <script setup name="PersonalEditPassword">
import useUserStore from '@/store/modules/user' import useUserStore from "@/store/modules/user";
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const userStore = useUserStore() const userStore = useUserStore();
const validatePassword = (rule, value, callback) => { const validatePassword = (rule, value, callback) => {
if (value !== form.value.newpassword) { if (value !== form.value.newpassword) {
callback(new Error('请确认新密码')) callback(new Error("请确认新密码"));
} else { } else {
callback() callback();
} }
} };
const formRef = ref() const formRef = ref();
const form = ref({ const form = ref({
password: '', password: "",
newpassword: '', newpassword: "",
checkpassword: '' checkpassword: "",
}) });
const rules = ref({ const rules = ref({
password: [ password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
{ required: true, message: '请输入原密码', trigger: 'blur' } newpassword: [
], { required: true, message: "请输入新密码", trigger: "blur" },
newpassword: [ { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
{ required: true, message: '请输入新密码', trigger: 'blur' }, ],
{ min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' } checkpassword: [
], { required: true, message: "请输入新密码", trigger: "blur" },
checkpassword: [ { validator: validatePassword },
{ required: true, message: '请输入新密码', trigger: 'blur' }, ],
{ validator: validatePassword } });
]
})
function onSubmit() { function onSubmit() {
formRef.value.validate(valid => { formRef.value.validate((valid) => {
if (valid) { if (valid) {
userStore.editPassword(form.value).then(() => { userStore
ElMessage({ .editPassword(form.value)
type: 'success', .then(() => {
message: '模拟修改成功，请重新登录' ElMessage({
}) type: "success",
userStore.logout().then(() => { message: "模拟修改成功，请重新登录",
router.push({ });
name: 'login', userStore.logout().then(() => {
query: { router.push({
redirect: route.fullPath name: "login",
} query: {
}) redirect: route.fullPath,
}) },
}).catch(() => {}) });
} });
}) })
.catch(() => {});
}
});
} }
</script> </script>
<template> <template>
<div> <div style="width: 100%">
<page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" /> <page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
<page-main> <page-main>
<el-row> <el-row>
<el-col :md="24" :lg="12"> <el-col :md="24" :lg="12">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px"> <el-form
<el-form-item label="原密码" prop="password"> ref="formRef"
<el-input v-model="form.password" type="password" placeholder="请输入原密码" /> :model="form"
</el-form-item> :rules="rules"
<el-form-item label="新密码" prop="newpassword"> label-width="120px"
<el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" /> >
</el-form-item> <el-form-item label="原密码" prop="password">
<el-form-item label="确认新密码" prop="checkpassword"> <el-input
<el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" /> v-model="form.password"
</el-form-item> type="password"
</el-form> placeholder="请输入原密码"
</el-col> />
</el-row> </el-form-item>
</page-main> <el-form-item label="新密码" prop="newpassword">
<fixed-action-bar> <el-input
<el-button type="primary" size="large" @click="onSubmit">提交</el-button> v-model="form.newpassword"
</fixed-action-bar> type="password"
</div> 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> </template>