feat: 确认删除modal封装
This commit is contained in:
parent
fb79c9e63d
commit
a41f392a9e
63
apps/web-antd/src/utils/modal.tsx
Normal file
63
apps/web-antd/src/utils/modal.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
import { Alert, Form, Input, Modal, type ModalFuncProps } 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',
|
||||||
|
});
|
||||||
|
}
|
@ -9,7 +9,8 @@ import { Page, useVbenModal } from '@vben/common-ui';
|
|||||||
|
|
||||||
import { Space, Table } from 'ant-design-vue';
|
import { Space, Table } from 'ant-design-vue';
|
||||||
|
|
||||||
import { loginInfoList } from '#/api/monitor/logininfo';
|
import { loginInfoClean, loginInfoList } from '#/api/monitor/logininfo';
|
||||||
|
import { confirmDeleteModal } from '#/utils/modal';
|
||||||
|
|
||||||
import { columns } from './data';
|
import { columns } from './data';
|
||||||
import loginInfoModal from './login-info-modal.vue';
|
import loginInfoModal from './login-info-modal.vue';
|
||||||
@ -30,10 +31,21 @@ function handlePreview(record: Recordable<any>) {
|
|||||||
modalApi.setData(record);
|
modalApi.setData(record);
|
||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleClear() {
|
||||||
|
confirmDeleteModal({
|
||||||
|
onValidated: async () => {
|
||||||
|
await loginInfoClean();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page content-class="flex flex-col gap-[6px]">
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<a-button @click="handleClear">{{ $t('pages.common.clear') }}</a-button>
|
||||||
|
</div>
|
||||||
<Table :columns="columns" :data-source="loginDataList" size="middle">
|
<Table :columns="columns" :data-source="loginDataList" size="middle">
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.dataIndex === 'action'">
|
<template v-if="column.dataIndex === 'action'">
|
||||||
|
Loading…
Reference in New Issue
Block a user