<template>
|
<div class="p-2">
|
<div>
|
<vxe-toolbar>
|
<template #buttons>
|
<div style="display: flex; align-items: flex-end">
|
<span style="font-size: 1.25rem; font-weight: 600">邮箱地址黑名单</span
|
><span style="margin-left: 5px; padding-bottom: 4px; font-size: 12px"
|
>黑名单中邮箱对应的邮件将自动收取到垃圾邮件（不会收到新邮件提醒）</span
|
>
|
</div>
|
</template>
|
<template #tools>
|
<a-button type="primary" @click="showModal('mail')">添加邮箱地址</a-button>
|
</template>
|
</vxe-toolbar>
|
<a-input-search
|
v-model:value="searchMail"
|
placeholder="请输入关键字搜索"
|
style="width: 300px; margin-bottom: 20px"
|
@search="onSearch($event, 'mail')"
|
/>
|
<a-table :columns="columns" :data-source="demo.mail" :scroll="{ y: 220 }" size="small">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.field == 'operate'">
|
<a class="ant-dropdown-link" @click="fnDelete(record)">删除</a>
|
</template>
|
<template v-else-if="column.field == 'mail'">
|
{{ record.blackContent }}
|
</template>
|
</template>
|
</a-table>
|
</div>
|
<div>
|
<vxe-toolbar>
|
<template #buttons>
|
<div style="display: flex; align-items: flex-end">
|
<span style="font-size: 1.25rem; font-weight: 600">域名黑名单</span
|
><span style="margin-left: 5px; padding-bottom: 4px; font-size: 12px"
|
>黑名单中域名对应的邮件将自动收取到垃圾邮件（不会收到新邮件提醒）</span
|
>
|
</div>
|
</template>
|
<template #tools>
|
<a-button type="primary" @click="showModal('domainName')">添加域名</a-button>
|
</template>
|
</vxe-toolbar>
|
<a-input-search
|
v-model:value="searchDomainName"
|
placeholder="请输入关键字搜索"
|
style="width: 300px; margin-bottom: 20px"
|
@search="onSearch($event, 'domainName')"
|
/>
|
<a-table
|
:columns="columnsDomainName"
|
:data-source="demo.domain"
|
:scroll="{ y: 220 }"
|
size="small"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.field == 'operate'">
|
<a class="ant-dropdown-link" @click="fnDelete(record)">删除</a>
|
</template>
|
<template v-else-if="column.field == 'domainName'">
|
{{ record.blackContent }}
|
</template>
|
</template>
|
</a-table>
|
</div>
|
|
<a-modal :width="600" v-model:open="open" :title="`新建${formTypeName}黑名单`" @ok="handleOk">
|
<a-form ref="formRef" :model="form" style="margin-top: 20px">
|
<a-form-item
|
v-if="formType === 'mail'"
|
label="邮箱地址"
|
name="blackContent"
|
:rules="[{ required: true, type: 'email', message: '请输入邮箱地址', trigger: 'blur' }]"
|
>
|
<a-input v-model:value="form.blackContent" placeholder="请输入邮箱地址" />
|
</a-form-item>
|
<a-form-item
|
v-else
|
label="域名地址"
|
name="blackContent"
|
:rules="[{ required: true, validator: validatorDomainName }]"
|
>
|
<a-input v-model:value="form.blackContent" placeholder="请输入域名地址" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
import { getBlackListApi, addBlackListApi, deleteBlackListApi } from '@/api/email/userList';
|
onUnmounted(() => {});
|
|
function fnGetList() {
|
getBlackListApi({}).then((res) => {
|
console.log(res);
|
demo.mail = res.data.mail;
|
demo.domain = res.data.domain;
|
});
|
}
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
const { createMessage } = useMessage();
|
|
const open = ref(false);
|
const formRef = ref();
|
const columns = [
|
{
|
title: '邮箱地址',
|
field: 'mail',
|
minWidth: 200,
|
},
|
{
|
title: '操作',
|
field: 'operate',
|
width: 200,
|
},
|
];
|
const columnsDomainName = [
|
{
|
title: '域名地址',
|
field: 'domainName',
|
minWidth: 200,
|
},
|
{
|
title: '操作',
|
field: 'operate',
|
width: 200,
|
},
|
];
|
function validatorDomainName(rule, value, callback) {
|
if (!value) {
|
callback(new Error('请输入域名地址'));
|
} else {
|
if (!/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/.test(value)) {
|
callback(new Error('域名地址格式不正确!'));
|
} else {
|
callback();
|
}
|
}
|
}
|
const form = reactive({
|
blackContent: '',
|
});
|
const formTypeName = ref('邮箱地址');
|
const formType = ref('mail');
|
const demo = reactive({
|
mail: [],
|
domain: [],
|
});
|
|
const searchMail = ref('');
|
const searchDomainName = ref('');
|
function showModal(blackType) {
|
open.value = true;
|
if (blackType === 'mail') {
|
formTypeName.value = '邮箱地址';
|
formType.value = 'mail';
|
} else {
|
formTypeName.value = '域名地址';
|
formType.value = 'domainName';
|
}
|
}
|
function handleOk() {
|
formRef.value.validate().then(() => {
|
addBlackListApi({
|
blackContent: form.blackContent,
|
blackType: formType.value === 'mail' ? false : true,
|
}).then((res) => {
|
createMessage.success('添加成功');
|
open.value = false;
|
fnGetList();
|
});
|
});
|
}
|
function fnDelete(row) {
|
deleteBlackListApi({
|
blackId: row.blackId,
|
}).then((res) => {
|
createMessage.success('删除成功');
|
fnGetList();
|
});
|
}
|
function onSearch(e, type) {
|
console.log(e, type,'---3333');
|
|
const data = {
|
search: e,
|
type: type === 'mail' ? 0 : 1,
|
};
|
if (type === 'mail') {
|
getBlackListApi(data).then((res) => {
|
demo.mail = res.data.mail;
|
});
|
} else {
|
getBlackListApi(data).then((res) => {
|
demo.domain = res.data.domain;
|
});
|
}
|
}
|
|
onMounted(() => {
|
fnGetList();
|
});
|
</script>
|
|
<style scoped>
|
.sortable-row-demo .drag-btn {
|
font-size: 12px;
|
cursor: move;
|
}
|
|
.sortable-row-demo .vxe-body--row.sortable-ghost,
|
.sortable-row-demo .vxe-body--row.sortable-chosen {
|
background-color: #dfecfb;
|
}
|
|
.bookmark {
|
display: inline-block;
|
position: relative;
|
width: 14px;
|
height: 18px;
|
margin-right: 5px;
|
border-radius: 2px 2px 0 0; /* Rounded top corners */
|
}
|
|
.bookmark::after {
|
content: '';
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 8px;
|
background-color: #fff;
|
clip-path: polygon(50% 60%, 0% 100%, 100% 100%); /* Triangle at the bottom */
|
}
|
</style>
|
