refactor: 重置密码使用原生重构(Descriptions)
This commit is contained in:
parent
2ca39dfdbb
commit
123f234971
@ -1,38 +1,23 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ResetPwdParam, User } from '#/api/system/user/model';
|
import type { ResetPwdParam, User } from '#/api/system/user/model';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import { useVbenModal, z } from '@vben/common-ui';
|
import { useVbenModal, z } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenForm } from '#/adapter/form';
|
import { useVbenForm } from '#/adapter/form';
|
||||||
import { userResetPassword } from '#/api/system/user';
|
import { userResetPassword } from '#/api/system/user';
|
||||||
import { Description, useDescription } from '#/components/description';
|
|
||||||
|
|
||||||
const emit = defineEmits<{ reload: [] }>();
|
const emit = defineEmits<{ reload: [] }>();
|
||||||
|
|
||||||
const [BasicModal, modalApi] = useVbenModal({
|
const [BasicModal, modalApi] = useVbenModal({
|
||||||
onCancel: handleCancel,
|
onClosed: handleClosed,
|
||||||
onConfirm: handleSubmit,
|
onConfirm: handleSubmit,
|
||||||
onOpenChange: handleOpenChange,
|
onOpenChange: handleOpenChange,
|
||||||
});
|
});
|
||||||
|
|
||||||
const [registerDescription, { setDescProps }] = useDescription({
|
|
||||||
column: 1,
|
|
||||||
schema: [
|
|
||||||
{
|
|
||||||
field: 'userId',
|
|
||||||
label: '用户ID',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'userName',
|
|
||||||
label: '用户名',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'nickName',
|
|
||||||
label: '昵称',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const [BasicForm, formApi] = useVbenForm({
|
const [BasicForm, formApi] = useVbenForm({
|
||||||
schema: [
|
schema: [
|
||||||
{
|
{
|
||||||
@ -64,13 +49,18 @@ const [BasicForm, formApi] = useVbenForm({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const currentUser = ref<null | User>(null);
|
||||||
async function handleOpenChange(open: boolean) {
|
async function handleOpenChange(open: boolean) {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
modalApi.modalLoading(true);
|
||||||
|
|
||||||
const { record } = modalApi.getData() as { record: User };
|
const { record } = modalApi.getData() as { record: User };
|
||||||
setDescProps({ data: record }, true);
|
currentUser.value = record;
|
||||||
await formApi.setValues({ userId: record.userId });
|
await formApi.setValues({ userId: record.userId });
|
||||||
|
|
||||||
|
modalApi.modalLoading(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
@ -83,7 +73,7 @@ async function handleSubmit() {
|
|||||||
const data = await formApi.getValues();
|
const data = await formApi.getValues();
|
||||||
await userResetPassword(data as ResetPwdParam);
|
await userResetPassword(data as ResetPwdParam);
|
||||||
emit('reload');
|
emit('reload');
|
||||||
handleCancel();
|
handleClosed();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
} finally {
|
} finally {
|
||||||
@ -91,9 +81,10 @@ async function handleSubmit() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleCancel() {
|
async function handleClosed() {
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
await formApi.resetForm();
|
await formApi.resetForm();
|
||||||
|
currentUser.value = null;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -104,7 +95,17 @@ async function handleCancel() {
|
|||||||
title="重置密码"
|
title="重置密码"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col gap-[12px]">
|
<div class="flex flex-col gap-[12px]">
|
||||||
<Description @register="registerDescription" />
|
<Descriptions v-if="currentUser" size="small" :column="1" bordered>
|
||||||
|
<DescriptionsItem label="用户ID">
|
||||||
|
{{ currentUser.userId }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="用户名">
|
||||||
|
{{ currentUser.userName }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="昵称">
|
||||||
|
{{ currentUser.nickName }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
</Descriptions>
|
||||||
<BasicForm />
|
<BasicForm />
|
||||||
</div>
|
</div>
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
|
Loading…
Reference in New Issue
Block a user