515fceeb
 “wangming”
框架初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
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',
});
}
|
