onbus_crm.git - Gitblit

huangyinfeng

4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5

提交 \| 用户 \| age
67287b	1	<template>
H	2	<div class="p-2">
	3	<vxe-toolbar>
	4	<template #buttons>
	5	<span style="font-size: 1.25rem; font-weight: 600">个人邮箱绑定</span>
	6	</template>
	7	<template #tools>
	8	<a-button style="margin-right: 20px" @click="fnCheckAll">检查全部邮箱</a-button>
	9	<a-button type="primary" @click="openAccount('add', '')">新建邮箱</a-button>
	10	</template>
	11	</vxe-toolbar>
	12	<vxe-table
	13	ref="xTable"
	14	id="key"
	15	style="margin: 10px 0"
2c1249	16	:data="demo.tableData"
67287b	17	min-height="40px"
H	18	row-key
	19	keep-source
	20	:filter-config="{ showIcon: false }"
	21	:row-config="{ isHover: true }"
	22	:column-config="{ resizable: true }"
db42d0	23	:edit-config="{ trigger: 'click', mode: 'cell' }"
67287b	24	>
2c1249	25	<vxe-column width="60">
H	26	<template #default>
	27	<span class="drag-btn">
	28	<HolderOutlined />
	29	</span>
	30	</template>
	31	</vxe-column>
67287b	32	<vxe-column show-overflow field="email" title="邮箱账号" min-width="250">
H	33	<template #default="{ row }">
	34	<!-- <HolderOutlined /> -->
	35	<span style="margin-left: 10px; color: #3081fe; font-weight: 500">{{ row.email }}</span>
	36	</template>
	37	</vxe-column>
db42d0	38	<vxe-column
H	39	show-overflow
	40	field="aliasEmail"
	41	title="显示名称"
	42	min-width="250"
	43	:edit-render="{}"
	44	>
67287b	45	<template #default="{ row }">
db42d0	46	<span style="color: #999">{{ row.aliasEmail }}</span>
H	47	</template>
	48	<template #edit="{ row }">
	49	<vxe-input
	50	ref="inputRef"
	51	v-model="row.aliasEmail"
	52	type="text"
	53	@blur="fnInputHandle(row)"
	54	></vxe-input>
67287b	55	</template>
H	56	</vxe-column>
	57	<vxe-column show-overflow field="status" title="邮箱状态" min-width="250">
	58	<template #default="{ row }">
	59	<div v-if="!isCheckAll">
db42d0	60	<a-tag color="success" v-if="row.mailStatus === '正常'">正常</a-tag>
67287b	61	<a-tag color="red" v-else>异常</a-tag>
H	62	</div>
	63	<div v-else>
	64	<a-spin :indicator="indicator" />
	65	</div>
	66	</template>
	67	</vxe-column>
	68	<vxe-column show-overflow field="action" title="操作" min-width="250">
	69	<template #default="{ row }">
	70	<a style="margin-right: 10px" @click="fnOpenAlias(row)">添加别名邮箱</a>
	71	<a style="margin-right: 10px" @click="openIsEmailValid(row)">检测</a>
	72	<a style="margin-right: 10px" @click="openAccount('update', row.email)">修改</a>
	73	<a style="margin-right: 10px" @click="openDelete(row)">解绑</a>
	74	</template>
	75	</vxe-column>
	76	</vxe-table>
	77	<a-modal
	78	:bodyStyle="{ maxHeight: '70vh', overflow: 'auto' }"
	79	v-model:open="open"
	80	:title="`${title}邮箱`"
	81	:confirmLoading="loading"
	82	@ok="fnHandleOk"
	83	>
2c1249	84	<div class="p-2">
H	85	<a-form
	86	style="margin-top: 20px"
	87	layout="vertical"
	88	:model="formData"
	89	v-bind="{ span: 8 }"
	90	ref="formRef"
	91	:rules="rules"
	92	>
	93	<a-form-item v-if="isShow" label="收发件服务器验证">
	94	<a-select
	95	ref="select"
	96	v-model:value="isCustom"
	97	style="width: 120px"
	98	@change="fnHandleChange"
	99	>
	100	<a-select-option key="onCustom" value="onCustom"> 与邮箱相同 </a-select-option>
	101	<a-select-option key="custom" value="custom"> 自定义 </a-select-option>
	102	</a-select>
	103	</a-form-item>
	104	<a-form-item name="email">
	105	<template v-slot:label>
	106	邮箱账号
	107	<a-tooltip placement="right">
	108	<template #title>
	109	<span>工作邮箱是您处理公司事务时所使用的办公邮箱建议您专用于办公目的</span>
	110	</template>
	111	<ExclamationCircleOutlined style="margin-left: 5px" />
	112	</a-tooltip>
	113	</template>
	114	<a-input :disabled="typeAccount === 2" v-model:value="formData.email" />
	115	</a-form-item>
db42d0	116	<!-- v-if="isCustom == 'custom'" -->
H	117	<a-form-item name="password" label="邮箱密码">
2c1249	118	<a-input-password
H	119	type="password"
	120	v-model:value="formData.password"
	121	placeholder="输入邮箱密码或者授权码"
	122	/>
	123	</a-form-item>
	124	<a-form-item v-if="isShow" name="receiveProtocol" label="协议类型">
	125	<a-radio-group v-model:value="formData.receiveProtocol" name="radioGroup">
	126	<a-radio value="imap">IMAP</a-radio>
	127	<a-radio value="pop3">POP3(不推荐,无法同步发件)</a-radio>
	128	<!-- <a-radio value="exchange">Exchange</a-radio> -->
	129	</a-radio-group>
	130	<div style="color: red; font-size: 12px"
	131	>由于exchange协议支持问题，网易邮箱推荐使用IMAP协议。
	132	如需调整协议类型，请联系小满客服</div
	133	>
	134	</a-form-item>
	135	<!-- <a-form-item v-if="formData.receiveProtocol === 'exchange'" :name="['user', 'email']" label="Exchange服务器" :rules="[{ type: 'email' }]">
67287b	136	<a-row style="display: flex; align-items: center">
H	137	<a-col :span="18">
	138	<a-input v-model:value="formData.email" placeholder="Exchange服务器"
	139	/></a-col>
	140	<a-col :span="3">
	141	<a-checkbox v-model:value="formData.email">SSL</a-checkbox>
	142	</a-col>
	143	</a-row>
	144	</a-form-item>
	145	<a-form-item v-if="formData.receiveProtocol === 'exchange'" :name="['user', 'email']" label="域" :rules="[{ type: 'email' }]">
	146	<a-row style="display: flex; align-items: center">
	147	<a-col :span="18">
	148	<a-input v-model:value="formData.email" placeholder="Exchange服务器"
	149	/></a-col>
	150	<a-col :span="3">
	151	<a-checkbox v-model:value="formData.email">SSL</a-checkbox>
	152	</a-col>
	153	</a-row>
	154	</a-form-item> -->
2c1249	155	<a-form-item v-if="isShow" name="receiveHost" label="收邮件服务器">
H	156	<a-row style="display: flex; align-items: center">
	157	<a-col :span="12">
	158	<a-input v-model:value="formData.receiveHost" placeholder="收邮件服务器" />
	159	</a-col>
	160	<a-col :span="1" style="margin-right: 10px; margin-left: 5px">:</a-col>
	161	<a-col :span="6" style="margin-right: 10px">
	162	<a-form-item-rest
	163	><a-input width="50px" v-model:value="formData.receivePort" placeholder="端口"
	164	/></a-form-item-rest>
	165	</a-col>
	166	<a-col :span="3">
	167	<a-form-item-rest>
	168	<a-checkbox v-model:checked="formData.receiveSSL"
	169	>SSL</a-checkbox
	170	></a-form-item-rest
67287b	171	>
2c1249	172	</a-col>
H	173	</a-row>
	174	</a-form-item>
	175	<a-form-item
	176	style="margin-top: 22px"
	177	v-if="isCustom == 'custom'"
	178	name="receiveEmail"
	179	label="收件账号"
	180	>
	181	<a-input v-model:value="formData.receiveEmail" />
	182	</a-form-item>
	183	<a-form-item v-if="isCustom == 'custom'" name="receivePassword" label="收件密码">
	184	<a-input v-model:value="formData.receivePassword" />
	185	</a-form-item>
	186	<a-form-item v-if="isShow" name="smtpHost" label="发邮件服务器">
	187	<a-row style="display: flex; align-items: center">
	188	<a-col :span="12">
	189	<a-input v-model:value="formData.smtpHost" placeholder="发邮件服务器" />
	190	</a-col>
	191	<a-col :span="1" style="margin-right: 10px; margin-left: 5px">:</a-col>
	192	<a-col :span="6" style="margin-right: 10px">
	193	<a-form-item-rest
	194	><a-input width="50px" v-model:value="formData.smtpPort" placeholder="端口"
	195	/></a-form-item-rest>
	196	</a-col>
	197	<a-col :span="3">
	198	<a-form-item-rest
	199	><a-checkbox v-model:checked="formData.smtpSSL">SSL</a-checkbox></a-form-item-rest
	200	>
	201	</a-col>
	202	</a-row>
	203	</a-form-item>
	204	<a-form-item
	205	style="margin-top: 22px"
	206	v-if="isCustom == 'custom'"
	207	name="smtpEmail"
	208	label="发件账号"
	209	>
	210	<a-input v-model:value="formData.smtpEmail" />
	211	</a-form-item>
	212	<a-form-item v-if="isCustom == 'custom'" name="smtpPassword" label="发件密码">
	213	<a-input v-model:value="formData.smtpPassword" />
	214	</a-form-item>
	215	<a-form-item v-if="isShow" name="proxyFlag">
	216	<template v-slot:label>
	217	<a-tooltip placement="right">
	218	<template #title>
	219	<span>开启后网络提速</span>
	220	</template>
	221	<QuestionCircleOutlined style="margin-right: 5px" />
	222	</a-tooltip>
	223	自定义代理
	224	</template>
	225	<a-radio-group v-model:value="formData.proxyFlag" name="radioGroup">
	226	<a-radio :value="true">开启</a-radio>
	227	<a-radio :value="false">关闭</a-radio>
	228	</a-radio-group>
	229	</a-form-item>
	230	<a-form-item v-if="isShow" name="biSyncFlag">
	231	<template v-slot:label>
	232	<a-tooltip placement="right">
	233	<template #title>
	234	<span
	235	>开启后，对于新绑定的邮箱，全量同步文件夹及文件夹内的邮件。对于已经绑定的邮箱，全量同步文件夹及文件夹新收取的邮件，历史邮件不移动</span
	236	>
	237	</template>
	238	<QuestionCircleOutlined style="margin-right: 5px" />
	239	</a-tooltip>
	240	同步文件夹
	241	</template>
	242	<a-radio-group v-model:value="formData.biSyncFlag" name="radioGroup">
	243	<a-radio :value="true">开启</a-radio>
	244	<a-radio :value="false">关闭</a-radio>
	245	</a-radio-group>
	246	</a-form-item>
	247	</a-form>
	248	<a @click="fnIsShow" v-if="!isShow"> 手动配置</a>
	249	<a @click="fnIsShow" v-else> 收起手动配置</a>
67287b	250
2c1249	251	<a-divider style="margin-top: 50px" />
H	252	<div style="font-size: 18px">帮助文档</div>
	253	<div
	254	><a href="https://www.yuque.com/help.xiaoman/qwwqei/vkr8p7" target="_blank" rel="noopener"
	255	>1、查看绑定邮箱失败的常见原因及解决方案</a
	256	></div
	257	>
	258	<div
	259	><a href="https://www.yuque.com/help.xiaoman/qwwqei/sl9xuk" target="_blank" rel="noopener"
	260	>2、了解常见几类邮箱的具体绑定方法</a
	261	></div
67287b	262	></div
H	263	>
	264	</a-modal>
	265
	266	<a-modal
	267	v-model:open="openDrawerDetail"
	268	:destroyOnClose="true"
	269	title="确认解绑"
	270	:loading="loading"
	271	@cancel="fnHandleDetailCancel"
	272	>
	273	<div style="padding: 20px 20px 20px 0; color: #000; font-size: 18px">
	274	解绑<span style="padding: 0 5px"> {{ deleteEmail }} </span>后
	275	</div>
	276	<ul>
	277	<li v-for="(warning, index) in removalWarnings" :key="index">
	278	<span class="bullet">•</span> {{ warning }}
	279	</li>
	280	</ul>
	281	<div style="margin-top: 20px">
	282	因绑定异常需调整，可在邮箱「修改」处更改如修改时遇到困难，可联系客服
	283	</div>
	284	<template #footer>
	285	<a-button @click="fnHandleDetailCancel">取消</a-button>
	286
	287	<a-button
	288	type="primary"
	289	danger
	290	@click="fnHandleDetailOk"
	291	:disabled="countdown !== 0"
	292	:loading="loading"
	293	>解绑<span v-show="countdown > 0"> ({{ countdown }}) </span></a-button
	294	>
	295	</template>
	296	</a-modal>
	297	<a-modal
	298	v-model:open="openDrawerIsEmailValid"
	299	:destroyOnClose="true"
	300	title="邮箱检测"
	301	v-model:value="isEmailValid"
	302	>
	303	<div style="margin-top: 20px; margin-right: 10%" class="p-4">
	304	<a-form labelAlign="right" :labelCol="{ span: 8 }">
	305	<a-form-item label="邮箱">
	306	{{ isEmailValid.email }}
	307	</a-form-item>
	308	<a-form-item label="邮箱密码">
	309	<div class="form-item">
	310	<div class="left" :class="checkStatus ? 'isColor' : 'isRed'"> ********</div>
2c1249	311	<div class="right">
67287b	312	<a-spin v-if="!isCheck" :indicator="indicator" />
H	313	<CheckCircleOutlined v-else-if="checkStatus" class="isColor" />
	314	<CloseCircleOutlined v-else class="isRed" />
	315	</div>
	316	</div>
	317	</a-form-item>
	318	<a-form-item label="协议类型">
	319	{{ isEmailValid.email }}
	320	</a-form-item>
	321	<a-form-item label="收邮件服务器">
	322	<div class="form-item">
	323	<div class="left" :class="checkStatus ? 'isColor' : 'isRed'">
	324	{{ isEmailValid.receiveHost }}
	325	</div>
	326	<div class="right"
	327	><a-spin v-if="!isCheck" :indicator="indicator" /><CheckCircleOutlined
	328	v-else-if="checkStatus"
	329	class="isColor"
	330	/>
	331	<CloseCircleOutlined v-else class="isRed" />
	332	</div> </div
	333	></a-form-item>
	334	<a-form-item label="发邮件服务器">
	335	<div class="form-item">
	336	<div class="left" :class="checkStatus ? 'isColor' : 'isRed'">
	337	{{ isEmailValid.smtpHost }}
	338	</div>
	339	<div class="right"
	340	><a-spin v-if="!isCheck" :indicator="indicator" />
	341	<CheckCircleOutlined v-else-if="checkStatus" class="isColor" />
	342	<CloseCircleOutlined v-else class="isRed" />
	343	</div> </div
	344	></a-form-item>
	345	<a-form-item label="自定义代理">
	346	<span style="margin-right: 5px"> {{ isEmailValid.proxyFlag ? '开启' : '关闭' }} </span>
	347	<a-tooltip placement="right">
	348	<template #title>
	349	<span>开启后网络提速</span>
	350	</template>
	351	<QuestionCircleOutlined style="margin-right: 5px" />
	352	</a-tooltip>
	353	</a-form-item>
	354	<a-form-item label="同步文件夹">
	355	<span style="margin-right: 5px"> {{ isEmailValid.biSyncFlag ? '开启' : '关闭' }} </span>
	356	<a-tooltip placement="right">
	357	<template #title>
	358	<span
2c1249	359	>开启后，对于新绑定的邮箱，全量同步文件夹及文件夹内的邮件。<br />对于已经绑定的邮箱，全量同步文件夹及文件夹新收取的邮件，历史邮件不移动</span
67287b	360	>
H	361	</template>
	362	<QuestionCircleOutlined style="margin-right: 5px" />
	363	</a-tooltip>
	364	</a-form-item>
	365	</a-form>
	366	</div>
	367	<template #footer>
	368	<div style="text-align: center">
	369	<a-button type="primary" @click="openIsEmailValid(isEmailValid)">重新检测</a-button>
	370	</div>
	371	</template>
	372	</a-modal>
	373	<a-modal
	374	v-model:open="openAlias"
	375	:title="`${titleAlias}添加别名邮箱`"
	376	:confirmLoading="loading"
	377	@ok="fnHandleAliasOk"
	378	>
	379	<a-form
	380	ref="aliasRef"
	381	style="margin-top: 20px"
	382	layout="vertical"
	383	:model="aliasFormData"
	384	v-bind="{ span: 8 }"
	385	>
	386	<a-form-item
	387	style="margin-top: 22px"
	388	name="aliasEmailName"
	389	label="别名邮箱"
	390	:rules="[{ required: true, message: '请输入别名邮箱', trigger: 'blur' }]"
	391	>
	392	<a-input v-model:value="aliasFormData.aliasEmailName" />
	393	</a-form-item>
	394	</a-form>
	395	</a-modal>
	396	</div>
	397	</template>
	398
	399	<script lang="ts" setup>
	400	name: 'mailboxManagement';
	401	import {
	402	HolderOutlined,
	403	ExclamationCircleOutlined,
	404	QuestionCircleOutlined,
	405	CheckCircleOutlined,
	406	CloseCircleOutlined,
	407	} from '@ant-design/icons-vue';
2c1249	408	import { ref, reactive, onUnmounted } from 'vue';
67287b	409	import {
H	410	addAccountApi,
	411	getAccountApi,
	412	updateAccountApi,
	413	deleteAccountApi,
	414	getAccountListApi,
	415	isEmailValidApi,
db42d0	416	addLiasEmailApi,
67287b	417	} from '@/api/email/userList';
H	418	const loading = ref(false);
2c1249	419	import Sortable from 'sortablejs';
H	420	let sortable: any;
	421	const demo = reactive({
	422	showHelpTip: false,
	423	tableData: [],
	424	});
	425	const xTable = ref();
	426	const rowDrop = () => {
	427	const $table = xTable.value;
	428	sortable = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
	429	handle: '.drag-btn',
	430	onEnd: (sortableEvent) => {
	431	const newIndex = sortableEvent.newIndex as number;
	432	const oldIndex = sortableEvent.oldIndex as number;
	433	const currRow = demo.tableData.splice(oldIndex, 1)[0];
	434	demo.tableData.splice(newIndex, 0, currRow);
	435	},
	436	});
	437	};
67287b	438
2c1249	439	let initTime: any;
H	440	nextTick(() => {
	441	// 加载完成之后在绑定拖动事件
	442	initTime = setTimeout(() => {
	443	rowDrop();
	444	}, 500);
	445	});
	446
	447	onUnmounted(() => {
	448	clearTimeout(initTime);
	449	if (sortable) {
	450	sortable.destroy();
	451	}
	452	});
	453
67287b	454	function fnMailList() {
H	455	getAccountListApi()
	456	.then((res) => {
	457	if (res.code == 0) {
2c1249	458	demo.tableData = res.data;
67287b	459	}
H	460	console.log(res);
	461	})
	462	.catch((err) => {
	463	console.log(err);
2c1249	464	demo.tableData = [];
67287b	465	});
H	466	}
	467	fnMailList();
	468	const defaultFormData = {
	469	email: '',
	470	password: '',
	471	aliasEmail: '',
	472	biSyncFlag: false,
	473	proxyFlag: true,
db42d0	474	receiveProtocol: 'imaps',
67287b	475	receiveSSL: false,
H	476	receivePort: '',
	477	receiveHost: '',
db42d0	478	smtpSSL: true,
67287b	479	smtpPort: '',
H	480	smtpHost: '',
	481	invalid: '',
	482	mailType: 0,
	483	};
	484	const formData = ref<Record<string, any>>(defaultFormData);
	485	const isCustom = ref('onCustom');
	486	function fnHandleChange(e) {
	487	console.log(e, 'iririririr');
	488
	489	isCustom.value = e;
	490	}
	491	const checkReceivePort = async (value) => {
	492	console.log(formData.value.receivePort, '=-3--3', value);
	493	if (value === '') {
	494	return Promise.reject('请输入收件服务器');
	495	}
	496	if (!formData.value.receivePort) {
	497	return Promise.reject('请输入收件服务器、端口');
	498	}
	499	return Promise.resolve();
	500	};
	501	const checkSmtpHost = async (value) => {
	502	if (value === '') {
	503	return Promise.reject('请输入收件服务器');
	504	}
	505	if (!formData.value.smtpHost) {
	506	return Promise.reject('请输入收件服务器、端口');
	507	}
	508	return Promise.resolve();
	509	};
	510	const rules = ref({
	511	email: [
	512	{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
	513	{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
	514	],
	515	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	516	receiveHost: [{ required: true, validator: checkReceivePort }],
	517	smtpHost: [{ required: true, validator: checkSmtpHost }],
2c1249	518	smtpPassword: [{ required: true, message: '请输入发件密码', trigger: 'blur' }],
H	519	smtpEmail: [{ required: true, message: '请输入发件账号', trigger: 'blur' }],
	520	receiveEmail: [{ required: true, message: '请输入收件密码', trigger: 'blur' }],
	521	receivePassword: [{ required: true, message: '请输入收件账号', trigger: 'blur' }],
67287b	522	});
H	523	import { useMessage } from '@/hooks/web/useMessage';
	524	const { createMessage } = useMessage();
	525	const formRef = ref();
	526
	527	const open = ref(false);
	528	const fnHandleOk = () => {
	529	formRef.value.validate().then(() => {
db42d0	530	const data = !isShow
H	531	? formData.value
	532	: {
	533	email: formData.value.email,
	534	password: formData.value.password,
	535	};
67287b	536	if (isShow.value == true) {
H	537	data.mailType = isCustom.value === 'onCustom' ? 1 : 2;
	538	}
	539	const api = typeAccount.value === 2 ? updateAccountApi : addAccountApi;
	540	loading.value = true;
	541	api(data)
	542	.then((res) => {
	543	if (res.code === 0) {
	544	createMessage.success(res.msg);
	545	}
	546	loading.value = false;
2c1249	547	fnMailList();
db42d0	548	open.value = false;
67287b	549	})
H	550	.catch((err) => {
	551	loading.value = false;
db42d0	552	open.value = false;
67287b	553	});
H	554	});
	555	};
	556
	557	const isShow = ref(false);
	558	function fnIsShow() {
	559	isShow.value = !isShow.value;
	560	}
	561	const title = ref('添加');
	562	const typeAccount = ref(1);
2c1249	563	function openAccount(type, email) {
67287b	564	formData.value = { ...defaultFormData };
H	565	try {
	566	if (type == 'add') {
	567	title.value = '添加';
	568	// formData.value = {};
	569	isShow.value = false;
	570	typeAccount.value = 1;
	571	} else {
	572	title.value = '修改';
	573	typeAccount.value = 2;
	574	isShow.value = true;
2c1249	575	getAccountApi({ mail: email }).then((res) => {
67287b	576	formData.value = res.data;
H	577	});
	578	}
	579	open.value = true;
	580	} catch (error) {
	581	open.value = false;
	582	}
	583	}
	584
	585	// 删除
	586
	587	const removalWarnings = [
	588	'此邮箱下的历史邮件不可查看',
	589	'您不能使用此邮箱收发件',
	590	'同步删除自定义文件夹、标签、收发件规则和绑定的别名邮箱。重新绑定后也不能恢复',
	591	'相关邮件线索仅可查看不可操作',
	592	];
	593	const deleteEmail = ref();
	594	const openDrawerDetail = ref<boolean>(false);
	595	const accountId = ref();
	596
	597	const fnHandleDetailCancel = () => {
	598	countdown.value = 10;
	599	openDrawerDetail.value = false;
	600	clearInterval(intervalId);
	601	};
	602	function openDelete(row) {
	603	openDrawerDetail.value = true;
	604	deleteEmail.value = row.email;
	605	accountId.value = row.accountId;
	606	countdown.value = 10;
	607	clearInterval(intervalId);
	608	startCountdown();
	609	}
	610	function fnHandleDetailOk() {
	611	openDrawerDetail.value = false;
db42d0	612	deleteAccountApi(accountId.value )
67287b	613	.then((res) => {
H	614	if (res.code === 0) {
	615	createMessage.success(res.msg);
	616	fnMailList();
	617	}
	618	})
	619	.catch((err) => {
	620	// createMessage.error(err.msg);
	621	});
	622	}
	623	const countdown = ref(10);
	624	let intervalId: any;
	625
	626	const startCountdown = () => {
	627	if (countdown.value > 0) {
	628	intervalId = setInterval(() => {
	629	countdown.value--;
	630	if (countdown.value === 0) {
	631	clearInterval(intervalId);
	632	}
	633	}, 1000);
	634	}
	635	};
	636
	637	import { LoadingOutlined } from '@ant-design/icons-vue';
	638	import { h, nextTick } from 'vue';
	639	// 邮箱检测
	640	const isCheck = ref(false);
	641	const checkStatus = ref(false);
	642
	643	const openDrawerIsEmailValid = ref(false);
	644	function openIsEmailValid(row) {
	645	openDrawerIsEmailValid.value = true;
	646	isEmailValid.value = row;
	647	const email = { email: row.email };
	648	isCheck.value = false;
	649	isEmailValidApi(email).then((res) => {
	650	if (res.code == 0) {
	651	isCheck.value = true;
db42d0	652	checkStatus.value = res.data.code == 0 ? true : false;
67287b	653	}
H	654	});
	655	}
	656	const indicator = h(LoadingOutlined, {
	657	style: {
	658	fontSize: '24px',
	659	},
	660	spin: true,
	661	});
	662
	663	const isEmailValid = ref<Record<string, any>>({});
	664
	665	// 别名处理
	666	const aliasFormData = ref<Record<string, any>>({});
	667	const openAlias = ref(false);
	668	const titleAlias = ref('');
	669	function fnOpenAlias(row) {
	670	openAlias.value = true;
	671	titleAlias.value = row.email;
	672	}
	673	const aliasRef = ref();
	674	function fnHandleAliasOk() {
	675	nextTick(() => {
	676	aliasRef.value.validate().then(() => {
	677	openAlias.value = false;
	678	});
	679	});
	680	}
	681
	682	// 全部检测
	683	const isCheckAll = ref(false);
	684	function fnCheckAll() {
	685	isCheckAll.value = true;
	686	setTimeout(() => {
	687	isCheckAll.value = false;
	688	}, 3000);
	689	}
db42d0	690
H	691	function fnInputHandle(row) {
	692	addLiasEmailApi({ aliasEmail: row.aliasEmail, accountId: row.accountId }).then((res) => {});
	693	}
67287b	694	</script>
H	695	<style scoped lang="less">
	696	.bullet {
	697	display: inline-block;
	698	margin-right: 5px;
	699	color: #000;
	700	font-size: 16px;
	701	}
	702
	703	.form-item {
	704	display: flex;
	705	align-items: center;
	706	justify-content: space-between;
	707	}
	708
	709	.isColor {
	710	color: #18a561;
	711	}
	712
	713	.isRed {
	714	color: red;
	715	}
	716	</style>