53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-model="store.changePassword"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
:close-on-press-escape="false"
|
||
|
|
:show-close="false"
|
||
|
|
align-center
|
||
|
|
draggable
|
||
|
|
width="500"
|
||
|
|
>
|
||
|
|
<template #header>
|
||
|
|
<h3>修改密码</h3>
|
||
|
|
</template>
|
||
|
|
<el-form :label-position="labelPosition" :model="formLabelAlign" label-width="100px" style="max-width: 460px">
|
||
|
|
<el-form-item label="原始密码">
|
||
|
|
<el-input v-model="formLabelAlign.oldPassword" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="新密码">
|
||
|
|
<el-input v-model="formLabelAlign.newPassword" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="确认密码">
|
||
|
|
<el-input v-model="formLabelAlign.confirmPassword" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button @click="store.changePassword = false">返回</el-button>
|
||
|
|
<el-button type="primary" @click="handelConfirmPassword"> 确认修改</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive, ref } from 'vue';
|
||
|
|
import type { FormProps } from 'element-plus';
|
||
|
|
import { headerStore } from '@/store/header';
|
||
|
|
|
||
|
|
const store = headerStore();
|
||
|
|
const labelPosition = ref<FormProps['labelPosition']>('right');
|
||
|
|
const formLabelAlign = reactive({
|
||
|
|
oldPassword: '',
|
||
|
|
newPassword: '',
|
||
|
|
confirmPassword: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 修改密码
|
||
|
|
*/
|
||
|
|
const handelConfirmPassword = () => {
|
||
|
|
store.changePassword = false;
|
||
|
|
};
|
||
|
|
</script>
|