修改密码弹窗
This commit is contained in:
parent
4af88265cc
commit
271abf098a
|
|
@ -0,0 +1,9 @@
|
|||
import { defAxios as request } from '@/utils/http'
|
||||
export function updatePwd(data) {
|
||||
return request({
|
||||
url: '/index/updatePwd',
|
||||
method: 'PUT',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -15,14 +15,36 @@
|
|||
:on-negative-click="handleClose"
|
||||
>
|
||||
<n-form-item
|
||||
label="登录密码:"
|
||||
path="password"
|
||||
label="旧密码:"
|
||||
path="oldPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.password"
|
||||
v-model:value="form.oldPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请输入登录密码"
|
||||
placeholder="请输入旧密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="新密码:"
|
||||
path="newPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.newPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="确认密码:"
|
||||
path="configmPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.configmPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请再次输入新密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
|
@ -30,9 +52,82 @@
|
|||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import Modal from '@/components/Modal/index.vue'
|
||||
import Modal from '../../../../components/Modal/index.vue'
|
||||
import { updatePwd } from '@/api/home/index.js'
|
||||
import { reactive, toRefs, computed } from '@vue/reactivity'
|
||||
export default {
|
||||
name: 'UpdateModal',
|
||||
components: { Modal }
|
||||
components: { Modal },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
'update:visible': null
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
form: {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
configmPassword: ''
|
||||
},
|
||||
rules: {
|
||||
oldPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入旧密码'
|
||||
},
|
||||
newPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入新密码'
|
||||
},
|
||||
configmPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请再次输入新密码'
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const getModalOptions = computed(() => {
|
||||
return {
|
||||
title: '修改密码',
|
||||
show: props.visible,
|
||||
negativeText: '取消',
|
||||
positiveText: '确认'
|
||||
}
|
||||
})
|
||||
|
||||
/* 关闭弹窗 */
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
return {
|
||||
...toRefs(data),
|
||||
getModalOptions,
|
||||
handleClose
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm() {
|
||||
this.$refs.formRef.validate((errors) => {
|
||||
if (!errors) {
|
||||
updatePwd(this.form).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.handleClose()
|
||||
$message.success(res.msg)
|
||||
} else {
|
||||
$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
<span class="user_name">{{ userInfo.realname }}</span>
|
||||
</div>
|
||||
</n-dropdown>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<update-modal v-if="modalShow" v-modal:visible="modalShow" />
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs, h } from 'vue'
|
||||
|
|
@ -21,8 +24,10 @@ import { useDialog } from 'naive-ui'
|
|||
import { loginOut } from '@/api/login/index.js'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { useUserStore } from '@/store/modules/user.js'
|
||||
import UpdateModal from './components/UpdateModal.vue'
|
||||
export default {
|
||||
name: 'LogOut',
|
||||
components: { UpdateModal },
|
||||
setup() {
|
||||
const renderIcon = (icon) => {
|
||||
return () => {
|
||||
|
|
@ -32,9 +37,6 @@ export default {
|
|||
}
|
||||
}
|
||||
const data = reactive({
|
||||
userInfo: {
|
||||
realname: '管理员'
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '修改密码',
|
||||
|
|
@ -46,7 +48,8 @@ export default {
|
|||
key: 'out',
|
||||
icon: renderIcon(LogoutIcon)
|
||||
}
|
||||
]
|
||||
],
|
||||
modalShow: false
|
||||
})
|
||||
|
||||
// 选中选项触发的回调
|
||||
|
|
@ -86,6 +89,7 @@ export default {
|
|||
})
|
||||
} else if (key === 'edit') {
|
||||
console.log('修改密码')
|
||||
this.modalShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<Modal
|
||||
:options="getModalOptions"
|
||||
:on-positive-click="handleConfirm"
|
||||
:on-negative-click="handleClose"
|
||||
:on-close="handleClose"
|
||||
>
|
||||
<template #Context>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
label-placement="left"
|
||||
:rules="rules"
|
||||
:on-positive-click="handleConfirm"
|
||||
:on-negative-click="handleClose"
|
||||
>
|
||||
<n-form-item
|
||||
label="旧密码:"
|
||||
path="oldPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.oldPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请输入旧密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="新密码:"
|
||||
path="newPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.newPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="确认密码:"
|
||||
path="configmPassword"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="form.configmPassword"
|
||||
type="password"
|
||||
:maxlength="20"
|
||||
placeholder="请再次输入新密码"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import Modal from '@/components/Modal/index.vue'
|
||||
import { updatePwd } from '@/api/home/index.js'
|
||||
import { reactive, toRefs } from '@vue/reactivity'
|
||||
export default {
|
||||
name: 'UpdateModal',
|
||||
components: { Modal },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
'update:visible': null
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const data = reactive({
|
||||
form: {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
configmPassword: ''
|
||||
},
|
||||
rules: {
|
||||
oldPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入旧密码'
|
||||
},
|
||||
newPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入新密码'
|
||||
},
|
||||
configmPassword: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请再次输入新密码'
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
/* 关闭弹窗 */
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
return {
|
||||
...toRefs(data),
|
||||
handleClose
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm() {
|
||||
this.$refs.formRef.validate((errors) => {
|
||||
if (!errors) {
|
||||
updatePwd(this.form).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.handleClose()
|
||||
$message.success(res.msg)
|
||||
} else {
|
||||
$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue