94 lines
2.2 KiB
Plaintext
94 lines
2.2 KiB
Plaintext
<template>
|
|
<basicModal
|
|
@register="modalRegister"
|
|
ref="modalRef"
|
|
@ok="formSubmit"
|
|
subBtuText="确定"
|
|
display-directive="show"
|
|
>
|
|
<template #default>
|
|
<div class="px-6 py-4">
|
|
<BasicForm @register="register" @reset="handleReset" class="basicForm" />
|
|
</div>
|
|
</template>
|
|
</basicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { basicModal, useModal } from '@/components/Modal';
|
|
import { message } from 'ant-design-vue';
|
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
|
|
|
const schemas: FormSchema[] = [
|
|
{
|
|
name: 'formerPwd',
|
|
component: 'Input',
|
|
label: '旧密码',
|
|
componentProps: {
|
|
placeholder: '请输入旧密码',
|
|
},
|
|
rules: [{ required: true, message: '请输入旧密码', trigger: ['blur'] }],
|
|
},
|
|
{
|
|
name: 'password',
|
|
component: 'Input',
|
|
label: '新密码',
|
|
componentProps: {
|
|
placeholder: '请输入新密码',
|
|
},
|
|
rules: [{ required: true, message: '请输入新密码', trigger: ['blur'] }],
|
|
},
|
|
{
|
|
name: 'rePassword',
|
|
component: 'Input',
|
|
label: '确认密码',
|
|
componentProps: {
|
|
placeholder: '请再次输入新密码',
|
|
},
|
|
rules: [{ required: true, message: '请再次输入新密码', trigger: ['blur'] }],
|
|
},
|
|
];
|
|
|
|
const modalRef: any = ref(null);
|
|
|
|
const [register, { submit, resetFields }] = useForm({
|
|
colProps: { span: 24 },
|
|
labelCol: { span: 5 },
|
|
layout: 'horizontal',
|
|
showActionButtonGroup: false,
|
|
schemas,
|
|
});
|
|
|
|
const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
|
|
title: '修改密码',
|
|
subBtuText: '提交修改',
|
|
});
|
|
|
|
async function formSubmit() {
|
|
const formRes = await submit();
|
|
if (formRes) {
|
|
await resetFields();
|
|
closeModal();
|
|
message.success('修改成功');
|
|
} else {
|
|
message.error('验证失败，请填写完整信息');
|
|
setSubLoading(false);
|
|
}
|
|
}
|
|
|
|
function showModal() {
|
|
openModal();
|
|
}
|
|
|
|
function handleReset(values: Recordable) {
|
|
console.log(values);
|
|
}
|
|
|
|
defineExpose({
|
|
showModal,
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|