fix: 修复表单验证失效

This commit is contained in:
xlsea 2024-04-18 14:49:49 +08:00
parent bf075380e1
commit 97c5124213
5 changed files with 34 additions and 18 deletions

View File

@ -14,7 +14,7 @@ interface Props {
const props = defineProps<Props>();
interface Emits {
(e: 'handleSubmit'): void;
(e: 'submitted'): void;
(e: 'update:modelValue', modelValue: boolean): void;
}
@ -58,19 +58,9 @@ watch(
{ immediate: true }
);
const closeDrawer = () => {
visible.value = false;
emit('update:modelValue', false);
};
const onUpdateShow = (value: boolean) => {
emit('update:modelValue', value);
};
const handleSubmit = () => {
emit('handleSubmit');
closeDrawer();
};
</script>
<template>
@ -90,10 +80,7 @@ const handleSubmit = () => {
</template>
<slot></slot>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
</NSpace>
<slot name="footer"></slot>
</template>
</NDrawerContent>
</NDrawer>

View File

@ -47,7 +47,7 @@ function createDefaultModel(): Model {
};
}
type RuleKey = Extract<keyof Model, 'namespaceId' | 'groupName'>;
type RuleKey = Extract<keyof Model, 'namespaceId'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
namespaceId: defaultRequiredRule
@ -85,12 +85,18 @@ watch(visible, () => {
</script>
<template>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
<OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
<NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
</NSpace>
</template>
</OperateDrawer>
</template>

View File

@ -66,6 +66,10 @@ function handleUpdateModelWhenEdit() {
}
}
function closeDrawer() {
visible.value = false;
}
async function handleSubmit() {
await validate();
// request
@ -79,6 +83,7 @@ async function handleSubmit() {
fetchEditNamespace({ id, name, uniqueId });
}
window.$message?.success($t('common.updateSuccess'));
visible.value = false;
emit('submitted');
}
@ -91,7 +96,7 @@ watch(visible, () => {
</script>
<template>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
<OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.namespace.uniqueId')" path="uniqueId">
<NInput
@ -104,6 +109,12 @@ watch(visible, () => {
<NInput v-model:value="model.name" :placeholder="$t('page.namespace.form.name')" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
</NSpace>
</template>
</OperateDrawer>
</template>

View File

@ -114,6 +114,12 @@ watch(visible, () => {
<NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.form.notifyType')" clearable />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
</NSpace>
</template>
</OperateDrawer>
</template>

View File

@ -222,6 +222,12 @@ watch(visible, () => {
<NInput v-model:value="model.description" :placeholder="$t('page.notifyConfig.form.description')" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
</NSpace>
</template>
</OperateDrawer>
</template>