mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-10 01:03:14 +08:00
refactor(modal): 重构确认删除弹窗以兼容 antdv-next 更新
- 调整导入路径以匹配 antdv-next 的新模块结构 - 使用 defineComponent 和 h 函数重构弹窗内容为组件 - 通过 ref 暴露表单实例以替代 useForm 方法 - 移除已弃用的 trigger 属性并更新表单验证方式
This commit is contained in:
@@ -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: '提示',
|
||||||
|
|||||||
Reference in New Issue
Block a user