Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

密码修改

Browse Source
This commit is contained in:
仲么了
2024-01-29 13:57:52 +08:00
parent 7cfa3c0a9e
commit a0c582e1dd
11 changed files with 391 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/user-boot/user.ts
View File

@@ -2,14 +2,14 @@ import request from '@/utils/request'
import { LoginData } from '@/api/types'
import { useAdminInfo } from '@/stores/adminInfo'
import { sm3Digest } from '@/assets/commjs/sm3.js'
import { sm2 } from '@/assets/commjs/sm2.js'
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
// 获取公钥
export function gongkey(params?: any) {
if (!params) {
const adminInfo = useAdminInfo()
params = {
loginName: adminInfo.$state.loginName
loginName: encrypt(adminInfo.$state.loginName)
}
}
return request({
@@ -19,8 +19,14 @@ export function gongkey(params?: any) {
})
}
export async function pwdSm3(pwd: any) {
let publicKey = await gongkey()
export async function pwdSm3(pwd: any, loginName?: string) {
let publicKey = await gongkey(
loginName
? {
loginName: encrypt(loginName)
}
: false
)
let sm3Pwd = sm3Digest(pwd) //SM3加密
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
}
@@ -64,7 +70,6 @@ export const getMarketList = () => {
})
}
export function add(data: any) {
return request({
url: '/user-boot/user/add',
@@ -81,10 +86,10 @@ export function edit(data: any) {
})
}
export async function passwordConfirm(pwd: string) {
export async function passwordConfirm(pwd: string, loginName: string = '') {
console.log(pwd, loginName)
return request({
url: '/user-boot/user/passwordConfirm?password=' + await pwdSm3(pwd),
url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd, loginName)),
method: 'get'
})
}
@@ -116,6 +121,16 @@ export async function updatePassword(params: any) {
})
}
export async function updateFirstPassword(params: any) {
return request({
url: '/user-boot/user/updateFirstPassword',
method: 'put',
data: {
name: params.name,
password: await pwdSm3(params.password, params.name)
}
})
}
export function checkUser(data: any) {
return request({

6
src/components/table/header/index.vue
View File

@@ -13,7 +13,7 @@
label-position="left"
:inline="true"
class="table-com-search-form"
:label-width="90"
:label-width="labelWidth"
>
<el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
@@ -52,7 +52,7 @@ const tableHeader = ref()
const datePickerRef = ref()
const dictData = useDictData()
const areaRef = ref()
const labelWidth = ref('')
interface Props {
datePicker?: boolean
area?: boolean
@@ -103,9 +103,11 @@ const showSelectChange = () => {
// 把dom(id=header-form)插入到table-com-search1或者table-com-search2
const dom = document.getElementById('header-form') as HTMLElement
if (showSelect.value) {
labelWidth.value = '90'
const dom1 = document.getElementById('table-com-search1') as HTMLElement
dom1.appendChild(dom)
} else {
labelWidth.value = ''
const dom2 = document.getElementById('table-com-search2') as HTMLElement
dom2.appendChild(dom)
}

87
src/components/tree/index.vue
View File

@@ -1,37 +1,66 @@
<template>
<div class="cn-tree">
<el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<el-tree
style="flex: 1;overflow: auto;"
ref="treeRef"
:props="defaultProps"
v-bind="$attrs"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
<div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all .3s; overflow: hidden;" >
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
/>
</div>
<el-tree
style="flex: 1; overflow: auto"
ref="treeRef"
:props="defaultProps"
v-bind="$attrs"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<script lang="ts" setup>
import { ElTree } from 'element-plus';
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch } from 'vue'
defineOptions({
name: 'govern/tree'
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = {
label: 'name',
@@ -40,6 +69,10 @@ const defaultProps = {
watch(filterText, val => {
treeRef.value!.filter(val)
})
const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
@@ -47,6 +80,7 @@ const filterNode = (value: string, data: any) => {
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>
<style lang="scss" scoped>
.cn-tree {
flex-shrink: 0;
@@ -57,11 +91,14 @@ defineExpose({ treeRef })
height: 100%;
width: 280px;
:deep(.el-tree) {
background: #efeff0;
border: 1px solid var(--el-border-color);
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7);
}
.menu-collapse {
color: var(--el-color-primary);
}
}
.custom-tree-node {
display: flex;

2
src/layouts/admin/components/popup/password.vue
View File

@@ -87,7 +87,7 @@ const open = () => {
dialogVisible.value = true
}
const submit = () => {
formRef.value.validate(async valid => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
passwordConfirm(form.password)
.then(res => {

281
src/styles/app.scss
View File

@@ -1,208 +1,211 @@
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none !important;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none !important;
}
html,
body,
#app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: var(--ba-bg-color);
font-size: 14px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: var(--ba-bg-color);
font-size: 14px;
overflow: hidden;
position: relative;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 3px;
background-color: var(--el-color-primary) !important;
border-radius: 30px !important;
border-radius: 5px;
height: 3px;
background-color: var(--el-color-primary) !important;
border-radius: 30px !important;
}
// 阿里 iconfont Symbol引用css
.iconfont-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.w100 {
width: 100% !important;
width: 100% !important;
}
.h100 {
height: 100% !important;
height: 100% !important;
}
.ba-center {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.default-main {
position: relative;
background: #fff;
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
background: #fff;
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
}
.zoom-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: -10px;
right: -10px;
cursor: se-resize;
position: absolute;
width: 20px;
height: 20px;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
.block-help {
display: block;
width: 100%;
color: #909399;
font-size: 13px;
line-height: 16px;
padding-top: 5px;
display: block;
width: 100%;
color: #909399;
font-size: 13px;
line-height: 16px;
padding-top: 5px;
}
/* 表格顶部菜单-s */
.table-header {
.table-header-operate .icon {
font-size: 14px !important;
color: var(--el-color-white) !important;
}
.table-header-operate .icon {
font-size: 14px !important;
color: var(--el-color-white) !important;
}
.el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important;
}
.el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important;
}
}
/* 表格顶部菜单-e */
/* 鼠标置入浮动效果-s */
.suspension {
transition: all 0.3s ease;
transition: all 0.3s ease;
}
.suspension:hover {
-webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02);
-ms-transform: translateY(-4px) scale(1.02);
-o-transform: translateY(-4px) scale(1.02);
transform: translateY(-4px) scale(1.02);
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
z-index: 999;
border-radius: 6px;
-webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02);
-ms-transform: translateY(-4px) scale(1.02);
-o-transform: translateY(-4px) scale(1.02);
transform: translateY(-4px) scale(1.02);
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
z-index: 999;
border-radius: 6px;
}
/* 鼠标置入浮动效果-e */
/* 表格-s */
.ba-table-box {
border-radius: var(--el-border-radius-round);
border-radius: var(--el-border-radius-round);
}
.ba-table-alert {
background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* 表格-e */
/* 新增/编辑表单-s */
.cn-operate-dialog {
overflow: hidden;
border-radius: var(--el-border-radius-base);
overflow: hidden;
border-radius: var(--el-border-radius-base);
}
.cn-operate-dialog .el-dialog__header {
padding-bottom: 16px;
border-bottom: 1px solid var(--ba-bg-color);
padding-bottom: 16px;
border-bottom: 1px solid var(--ba-bg-color);
}
.cn-operate-dialog .el-dialog__body {
height: 60vh;
padding-top: 20px;
padding-bottom: 52px;
height: 60vh;
padding-top: 20px;
padding-bottom: 52px;
}
.cn-operate-dialog .el-dialog__body .el-scrollbar {
padding-right: 60px;
// padding-right: 60px;
}
.cn-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow);
position: absolute;
width: 100%;
bottom: 0;
padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow);
position: absolute;
width: 100%;
bottom: 0;
}
.cn-operate-dialog .el-form {
width: calc(100% - 60px);
}
.cn-operate-dialog .el-form--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 10px;
width: calc(100% - 1px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 10px;
.el-form-item {
margin-right: 0;
margin-bottom: 0;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
}
}
.cn-operate-dialog .el-form--inline .el-select {
width: 100%;
width: 100%;
}
.ba-operate-form {
padding-top: 20px;
padding-top: 20px;
}
/* 新增/编辑表单-e */
/* 全局遮罩-s */
.ba-layout-shade {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999990;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999990;
}
/* 全局遮罩-e */
/* 图片上传预览-s */
.img-preview-dialog .el-dialog__body {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
}
img {
max-width: 100%;
}
}
/* 图片上传预览-e */
@@ -212,93 +215,95 @@ body,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.3s ease;
will-change: transform;
transition: all 0.3s ease;
}
// slide-right
.slide-right-enter-from {
opacity: 0;
transform: translateX(-20px);
opacity: 0;
transform: translateX(-20px);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(20px);
opacity: 0;
transform: translateX(20px);
}
// slide-left
.slide-left-enter-from {
@extend .slide-right-leave-to;
@extend .slide-right-leave-to;
}
.slide-left-leave-to {
@extend .slide-right-enter-from;
@extend .slide-right-enter-from;
}
/* 页面切换动画-e */
/* 布局相关-s */
.frontend-footer-brother {
min-height: calc(100vh - 120px);
min-height: calc(100vh - 120px);
}
.user-views {
padding-left: 15px;
padding-left: 15px;
.user-views-card {
margin-bottom: 15px;
}
.user-views-card {
margin-bottom: 15px;
}
}
.ba-aside-drawer {
.el-drawer__body {
padding: 0;
}
.el-drawer__body {
padding: 0;
}
}
/* 布局相关-e */
/* 暗黑模式公共样式-s */
.ba-icon-dark {
color: var(--el-text-color-primary) !important;
color: var(--el-text-color-primary) !important;
}
/* 暗黑模式公共样式-e */
/* NProgress-s */
#nprogress {
.bar,
.spinner {
z-index: 999999;
}
.bar,
.spinner {
z-index: 999999;
}
}
/* NProgress-e */
/* 自适应-s */
@media screen and (max-width: 768px) {
.xs-hidden {
display: none;
}
.xs-hidden {
display: none;
}
}
@media screen and (max-width: 1024px) {
.cn-operate-dialog {
width: 96%;
}
.cn-operate-dialog {
width: 96%;
}
}
@media screen and (max-width: 991px) {
.user-views {
padding: 0;
}
.user-views {
padding: 0;
}
}
/* 自适应-e */
.custom-table-header {
display: flex;
padding: 13px 15px;
align-items: center;
display: flex;
padding: 13px 15px;
align-items: center;
}

2
src/views/auth/userList/index.vue
View File

@@ -119,7 +119,7 @@ const tableStore = new TableStore({
return row.state !== 1
},
click: row => {
popupPwdRef.value.open(row.id)
popupPwdRef.value.open(row.id, row.loginName)
}
},
{

12
src/views/auth/userList/popupPwd.vue
View File

@@ -36,7 +36,8 @@ const form = reactive({
id: '',
password: '',
newPwd: '',
confirmPwd: ''
confirmPwd: '',
loginName: ''
})
const rules = {
password: [
@@ -46,7 +47,7 @@ const rules = {
max: 16,
message: '长度在 6 到 16 个字符',
trigger: 'blur'
},
}
],
newPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
@@ -83,17 +84,18 @@ const rules = {
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (id: string) => {
const open = (id: string,loginName: string) => {
form.id = id
form.loginName = loginName
form.password = ''
form.newPwd = ''
form.confirmPwd = ''
dialogVisible.value = true
}
const submit = async () => {
formRef.value.validate((valid:boolean) => {
formRef.value.validate((valid: boolean) => {
if (valid) {
passwordConfirm(form.password).then((res: any) => {
passwordConfirm(form.password, form.loginName).then((res: any) => {
updatePassword({
id: form.id,
newPassword: form.newPwd

6
src/views/govern/manage/basic/dictionary.vue
View File

@@ -79,9 +79,9 @@ const tableStore = new TableStore({
{ title: '数据名称', field: 'name' },
{ title: '别名', field: 'otherName' },
{ title: '展示名称', field: 'showName' },
{ title: '相别', field: 'phaseName' },
{ title: '单位', field: 'unit' },
{ title: '基础数据类型', field: 'type' },
{ title: '相别', field: 'phaseName', width: 80 },
{ title: '单位', field: 'unit', width: 80 },
{ title: '基础数据类型', field: 'type', width: 80 },
{ title: '数据谐波次数', field: 'harmStart' },
{ title: '数据统计方法', field: 'statMethod' },
{ title: '数据存储', field: 'classIdName' },

2
src/views/govern/manage/factory.vue
View File

@@ -264,7 +264,7 @@ const tableStore = new TableStore({
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-Edit',
icon: 'el-icon-EditPen',
render: 'tipButton',
click: async row => {

91
src/views/user/login.vue
View File

@@ -1,68 +1,69 @@
<template>
<div @keyup.enter='onSubmit(formRef)'>
<div @contextmenu.stop='' id='bubble' class='bubble'>
<canvas id='bubble-canvas' class='bubble-canvas'></canvas>
<div @keyup.enter="onSubmit(formRef)">
<div @contextmenu.stop="" id="bubble" class="bubble">
<canvas id="bubble-canvas" class="bubble-canvas"></canvas>
</div>
<div class='login-image'></div>
<div class='login-container-form'>
<div class='title-container'>
<div class='title'>
<span style='font-size: 28px'>电能质量数据监测云平台</span>
<div class="login-image"></div>
<div class="login-container-form">
<div class="title-container">
<div class="title">
<span style="font-size: 28px">电能质量数据监测云平台</span>
</div>
</div>
<el-form :rules='rules' ref='formRef' size='large' class='login-form' :model='form'>
<el-form-item prop='username'>
<el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
<el-form-item prop="username">
<el-input
ref='usernameRef'
v-model='form.username'
type='text'
ref="usernameRef"
v-model="form.username"
type="text"
clearable
placeholder='用户名'
autocomplete='off'
placeholder="用户名"
autocomplete="off"
>
<template #prefix>
<span class='iconfont icon-yonghu' style='color: #003078'></span>
<span class="iconfont icon-yonghu" style="color: #003078"></span>
</template>
</el-input>
</el-form-item>
<el-form-item prop='password'>
<el-form-item prop="password">
<el-input
ref='passwordRef'
v-model='form.password'
type='password'
placeholder='密码'
ref="passwordRef"
v-model="form.password"
type="password"
placeholder="密码"
show-password
autocomplete='off'
autocomplete="off"
>
<template #prefix>
<span class='iconfont icon-mima' style='color: #003078'></span>
<span class="iconfont icon-mima" style="color: #003078"></span>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button
:loading='state.submitLoading'
class='submit-btn'
:loading="state.submitLoading"
class="submit-btn"
round
type='info'
@click='onSubmit(formRef)'
type="info"
@click="onSubmit(formRef)"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
<div class='copy-right'>
<div class="copy-right">
<span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
<br />
<img style='width: 20px; height: 20px; position: absolute' src='@/assets/login/jhui.png' />
<img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />
<span>　　苏公网安备 32011502011902号</span>
</div>
<PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
</div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import { sm3Digest } from '@/assets/commjs/sm3.js'
@@ -74,15 +75,16 @@ import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage'
import PopupUpdatePwd from './popupUpdatePwd.vue'
const router = useRouter()
let timer: number
const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const userInfo = useAdminInfo()
Local.remove(ADMIN_INFO)
userInfo.removeToken()
@@ -129,23 +131,30 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await formEl.validate((valid, fields) => {
if (valid) {
state.submitLoading = true
gongkey({ loginName: encrypt(form.username) }).then(res => {
const loginName = encrypt(form.username)
gongkey({ loginName }).then(res => {
window.localStorage.setItem('publicKey', res.data)
let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0)
login({
username: encrypt(form.username),
username: loginName,
password: jiamipassword,
grant_type: 'captcha',
imageCode: '',
verifyCode: 0
}).then(res => {
res.data.loginName = encrypt(form.username)
userInfo.dataFill(res.data)
state.submitLoading = false
router.push({
path: '/'
})
})
.then(res => {
res.data.loginName = loginName
userInfo.dataFill(res.data)
state.submitLoading = false
router.push({
path: '/'
})
})
.catch(err => {
if (err.code === 'A0101') {
popupUpdatePwdRef.value.open(loginName)
}
})
})
setTimeout(() => {
state.submitLoading = false
@@ -155,7 +164,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
}
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.bubble {
position: relative;
width: 100%;

95
src/views/user/popupUpdatePwd.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
<el-input v-model="form.newPwd" type="password" placeholder="请输入新密码" show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
<el-input v-model="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { updateFirstPassword } from '@/api/user-boot/user'
import { validatePwd } from '@/utils/common'
import { useAdminInfo } from '@/stores/adminInfo'
import { useRouter } from 'vue-router'
const router = useRouter()
const adminInfo = useAdminInfo()
const dialogVisible = ref(false)
const title = ref('修改默认密码')
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive({
newPwd: '',
confirmPwd: '',
loginName: ''
})
const rules = {
newPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 16,
message: '长度在 6 到 16 个字符',
trigger: 'blur'
},
{ validator: validatePwd, trigger: 'blur' }
],
confirmPwd: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{
min: 6,
max: 16,
message: '长度在 6 到 16 个字符',
trigger: 'blur'
},
{
validator: (rule: any, value: string, callback: any) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== form.newPwd) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
},
trigger: 'blur',
required: true
}
]
}
const open = (loginName: string) => {
form.loginName = loginName
dialogVisible.value = true
}
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
updateFirstPassword({
name: form.loginName,
password: form.confirmPwd
}).then((res: any) => {
dialogVisible.value = false
ElMessage.success('密码修改成功, 请重新登录')
})
}
})
}
defineExpose({ open })
</script>