diff --git a/apps/web-antd/src/utils/modal.tsx b/apps/web-antd/src/utils/modal.tsx index 58a5d769..ecdada44 100644 --- a/apps/web-antd/src/utils/modal.tsx +++ b/apps/web-antd/src/utils/modal.tsx @@ -1,9 +1,11 @@ -import type { ModalFuncProps } from 'antdv-next'; -import type { Rule } from 'antdv-next/es/form'; +/* eslint-disable vue/multi-word-component-names */ +import type { FormInstance } from 'antdv-next'; +import type { Rule } from 'antdv-next/dist/form/types'; +import type { ModalFuncProps } from 'antdv-next/dist/modal/interface'; -import { reactive } from 'vue'; +import { defineComponent, h, reactive, ref } from 'vue'; -import { Alert, Form, Input } from 'antdv-next'; +import { Alert, Form, FormItem, Input } from 'antdv-next'; import { isFunction } from 'lodash-es'; export interface ConfirmModalProps extends Omit { @@ -24,7 +26,6 @@ export function confirmDeleteModal(props: ConfirmModalProps) { { message: '校验不通过', required: true, - trigger: 'change', validator(_, value) { if (value !== confirmText) { return Promise.reject(new Error('校验不通过')); @@ -34,28 +35,41 @@ export function confirmDeleteModal(props: ConfirmModalProps) { }, ], }); - const useForm = Form.useForm; - const { validate, validateInfos } = useForm(formValue, rulesRef); + + const outerInstance = ref<{ formInstance?: FormInstance }>({}); window.modal.confirm({ ...props, centered: true, - content: ( -
- -
- - - -
-
- ), + content: () => + h( + defineComponent({ + setup(_, { expose }) { + const formInstance = ref(); + expose({ formInstance }); + return () => ( +
+ +
+ + + +
+
+ ); + }, + }), + { ref: outerInstance }, + ), okButtonProps: { danger: true, type: 'primary' }, onOk: async () => { - await validate(); + await outerInstance.value?.formInstance?.validate(); isFunction(props.onValidated) && props.onValidated(); }, title: '提示',