import type { ModalFuncProps } from 'ant-design-vue';
|
import type { Rule } from 'ant-design-vue/es/form';
|
|
import { reactive } from 'vue';
|
|
import { Alert, Form, Input, Modal } from 'ant-design-vue';
|
import { isFunction } from 'lodash-es';
|
|
export interface ConfirmModalProps extends Omit<ModalFuncProps, 'visible'> {
|
confirmText?: string;
|
placeholder?: string;
|
onValidated?: () => Promise<void>;
|
}
|
|
export function confirmDeleteModal(props: ConfirmModalProps) {
|
const placeholder = props.placeholder || `输入'确认删除'`;
|
const confirmText = props.confirmText || '确认删除';
|
|
const formValue = reactive({
|
content: '',
|
});
|
const rulesRef = reactive<{ [key: string]: Rule[] }>({
|
content: [
|
{
|
message: '校验不通过',
|
required: true,
|
trigger: 'change',
|
validator(_, value) {
|
if (value !== confirmText) {
|
return Promise.reject(new Error('校验不通过'));
|
}
|
return Promise.resolve();
|
},
|
},
|
],
|
});
|
const useForm = Form.useForm;
|
const { validate, validateInfos } = useForm(formValue, rulesRef);
|
|
Modal.confirm({
|
...props,
|
centered: true,
|
content: (
|
<div class="flex flex-col gap-[8px]">
|
<Alert message={'确认删除后将无法恢复，请谨慎操作！'} type="error" />
|
<Form layout="vertical" model={formValue}>
|
<Form.Item {...validateInfos.content}>
|
<Input
|
placeholder={placeholder}
|
v-model:value={formValue.content}
|
/>
|
</Form.Item>
|
</Form>
|
</div>
|
),
|
okButtonProps: { danger: true, type: 'primary' },
|
onOk: async () => {
|
await validate();
|
isFunction(props.onValidated) && props.onValidated();
|
},
|
title: '提示',
|
type: 'warning',
|
});
|
}
|
