refactor(modal): 重构确认删除弹窗以兼容 antdv-next 更新

- 调整导入路径以匹配 antdv-next 的新模块结构
- 使用 defineComponent 和 h 函数重构弹窗内容为组件
- 通过 ref 暴露表单实例以替代 useForm 方法
- 移除已弃用的 trigger 属性并更新表单验证方式
This commit is contained in:
dap
2026-01-28 14:22:35 +08:00
parent dfbab164ec
commit 2d1545106e

View File

@@ -1,9 +1,11 @@
import type { ModalFuncProps } from 'antdv-next'; /* eslint-disable vue/multi-word-component-names */
import type { Rule } from 'antdv-next/es/form'; 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'; import { isFunction } from 'lodash-es';
export interface ConfirmModalProps extends Omit<ModalFuncProps, 'visible'> { export interface ConfirmModalProps extends Omit<ModalFuncProps, 'visible'> {
@@ -24,7 +26,6 @@ export function confirmDeleteModal(props: ConfirmModalProps) {
{ {
message: '校验不通过', message: '校验不通过',
required: true, required: true,
trigger: 'change',
validator(_, value) { validator(_, value) {
if (value !== confirmText) { if (value !== confirmText) {
return Promise.reject(new Error('校验不通过')); 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({ window.modal.confirm({
...props, ...props,
centered: true, centered: true,
content: ( content: () =>
<div class="flex flex-col gap-[8px]"> h(
<Alert message={'确认删除后将无法恢复,请谨慎操作!'} type="error" /> defineComponent({
<Form layout="vertical" model={formValue}> setup(_, { expose }) {
<Form.Item {...validateInfos.content}> const formInstance = ref<FormInstance>();
<Input expose({ formInstance });
placeholder={placeholder} return () => (
v-model:value={formValue.content} <div class="flex flex-col gap-[8px]">
/> <Alert
</Form.Item> title={'确认删除后将无法恢复,请谨慎操作!'}
</Form> type="error"
</div> />
), <Form layout="vertical" model={formValue} ref={formInstance}>
<FormItem name="content" rules={rulesRef.content}>
<Input
placeholder={placeholder}
v-model:value={formValue.content}
/>
</FormItem>
</Form>
</div>
);
},
}),
{ ref: outerInstance },
),
okButtonProps: { danger: true, type: 'primary' }, okButtonProps: { danger: true, type: 'primary' },
onOk: async () => { onOk: async () => {
await validate(); await outerInstance.value?.formInstance?.validate();
isFunction(props.onValidated) && props.onValidated(); isFunction(props.onValidated) && props.onValidated();
}, },
title: '提示', title: '提示',