onbus_crm.git - Gitblit

huangyinfeng

2024-09-13 12f7304fe9e2bb56ec328e4429a654a0653928a9

提交 \| 用户 \| age
28c484	1	<template>
170f4d	2	<div>
128809	3	<div class="p-1">
H	4	<a-form ref="formRef" :label-col="{ span: 2 }" :wrapper-col="{ span: 24 }" :model="modelRef">
00fe0e	5	<a-form-item :wrapper-col="{ span: 7 }">
128809	6	<div style="display: flex; justify-content: space-evenly">
H	7	<a-button type="primary" shape="round" @click="fnHandleSubmit(modelRef)">发送</a-button>
00fe0e	8	<a-button shape="round" @click="fnSaveMailDrafts">存草稿</a-button>
H	9	<a-button shape="round" @click="fnPreview">预览</a-button>
128809	10	<a-button shape="round">提交审批</a-button>
H	11	<a-button shape="round">取消</a-button></div
170f4d	12	>
128809	13	</a-form-item>
H	14	<a-form-item label="发件人" v-bind="validateInfos.sender" :wrapper-col="{ span: 12 }">
	15	<a-select
	16	v-model:value="modelRef.sender"
	17	placeholder="选择发件人"
	18	show-search
	19	:field-names="{ label: 'name', value: 'id' }"
	20	:options="state.data"
	21	:filter-option="fnFilterOption"
	22	>
	23	</a-select>
	24	</a-form-item>
	25	<a-form-item label="收件人" v-bind="validateInfos.recipients" :wrapper-col="{ span: 18 }">
	26	<a-row>
	27	<a-col class="gutter-row" :span="16">
	28	<a-select
	29	mode="multiple"
	30	show-search
	31	placeholder="请选择收件人或者输入收件人邮箱"
	32	v-model:value="modelRef.recipients"
	33	:options="state.data"
	34	:field-names="{ label: 'name', value: 'id' }"
	35	:maxTagCount="4"
	36	:filter-option="fnFilterOption"
	37	/>
	38	</a-col>
	39	<a-col
	40	class="gutter-row"
	41	:span="2"
	42	style="display: flex; align-items: center; justify-content: center"
	43	>
170f4d	44	<plus-circle-outlined
H	45	style="color: rgb(0 0 0 / 45%)"
	46	@click="fnHandleSelect('recipients')"
	47	/>
128809	48	</a-col>
H	49	<a-col class="gutter-row" :span="1">
	50	<a-form-item-rest>
	51	<a-button
	52	shape="round"
	53	type="link"
	54	block
	55	size="small"
	56	@click="ccCheckboxChange($event)"
	57	>
	58	{{ !isSecretDeliveryPerson ? '抄送' : '取消抄送' }}
	59	</a-button>
	60	</a-form-item-rest>
	61	</a-col>
	62	<a-col class="gutter-row" :span="1">
	63	<a-form-item-rest>
	64	<a-button
	65	shape="round"
	66	type="link"
	67	block
	68	size="small"
	69	@click="bccCheckboxChange($event)"
	70	>
	71	{{ !isCRecipient ? '密送' : '取消密送' }}
	72	</a-button>
	73	</a-form-item-rest>
	74	</a-col>
	75	</a-row>
	76	</a-form-item>
	77	<span style="position: relative; top: -18px; left: 9%" v-if="modelRef.recipients.length">
	78	{{ userParticulars && `${userParticulars.name}<${userParticulars.email}` }}>
	79	<span v-if="!userParticulars.title" style="margin-right: 10px; margin-left: 5px">
	80	暂未查询到该客户的当地时间
	81	<a @click="fnHandleTimeZone(userParticulars, 'add')">补充时区</a>
	82	</span>
	83	<span v-else>
	84	{{ userParticulars.title }}
	85	<a @click="fnHandleTimeZone(userParticulars, 'update')">时区不对？</a>
	86	</span>
	87
	88	<a v-if="modelRef.recipients.length > 2">查看全部</a>
	89	</span>
	90
	91	<a-form-item
	92	label="抄送人"
	93	v-bind="validateInfos.ccRecipients"
	94	v-if="isSecretDeliveryPerson"
	95	:wrapper-col="{ span: 18 }"
	96	>
	97	<a-row>
	98	<a-col class="gutter-row" :span="16">
	99	<a-select
	100	mode="multiple"
	101	show-search
	102	placeholder="请选择抄送人或者输入抄送人邮箱"
	103	v-model:value="modelRef.ccRecipients"
	104	:options="state.data"
	105	:field-names="{ label: 'name', value: 'id' }"
	106	:maxTagCount="4"
	107	:filter-option="fnFilterOption"
	108	/>
	109	</a-col>
	110	<a-col
	111	class="gutter-row"
	112	:span="2"
	113	style="display: flex; align-items: center; justify-content: center"
	114	>
	115	<plus-circle-outlined
	116	style="color: rgb(0 0 0 / 45%)"
	117	@click="fnHandleSelect('ccRecipients')"
	118	/>
	119	</a-col>
	120	</a-row>
	121	</a-form-item>
	122	<a-form-item
	123	label="密送人"
	124	v-bind="validateInfos.bccRecipients"
	125	v-if="isCRecipient"
	126	:wrapper-col="{ span: 18 }"
	127	>
	128	<a-row>
	129	<a-col class="gutter-row" :span="16">
	130	<a-select
	131	mode="multiple"
	132	show-search
	133	placeholder="请选择抄送人或者输入抄送人邮箱"
	134	v-model:value="modelRef.bccRecipients"
	135	:options="state.data"
	136	:field-names="{ label: 'name', value: 'id' }"
	137	:maxTagCount="4"
	138	:filter-option="fnFilterOption"
	139	/>
	140	</a-col>
	141	<a-col
	142	class="gutter-row"
	143	:span="2"
	144	style="display: flex; align-items: center; justify-content: center"
	145	>
	146	<plus-circle-outlined
	147	style="color: rgb(0 0 0 / 45%)"
	148	@click="fnHandleSelect('bccRecipients')"
	149	/>
	150	</a-col>
	151	</a-row>
	152	</a-form-item>
	153	<div
	154	style="position: relative; top: -20px; left: 9%; color: #909090; font-size: 12px"
	155	v-if="modelRef.recipients.length"
	156	>
	157	{{ `${userLength}/100 收件人、抄送人和密送的联系人总数不可超过100` }}
	158	</div>
00fe0e	159	<a-form-item label="主题" :wrapper-col="{ span: 12 }" :label-col="{ span: 2 }">
128809	160	<a-input placeholder="请输入邮件主题" v-model:value="modelRef.subject" />
H	161	</a-form-item>
	162	<a-form-item
	163	v-bind="validateInfos.content"
	164	:wrapper-col="{ span: 24 }"
	165	:label-col="{ span: 2 }"
	166	>
00fe0e	167	<Tinymce @change="fnChangeContent"></Tinymce>
128809	168	</a-form-item>
H	169	</a-form>
	170	</div>
	171	<SelectUser
	172	ref="selectUserRef"
	173	v-model="openSelectUser"
	174	:selectIds="selectIds"
	175	:idName="idName"
	176	:title="selectUserTitle"
	177	@updateData="fnSelectUser"
	178	/>
	179	<a-modal
	180	v-model:open="openTimeZone"
	181	:title="`${titleTimeZone}时区`"
	182	:confirm-loading="confirmLoading"
	183	@ok="fnHandleTimeZoneOk"
	184	>
	185	<a-form
	186	ref="formTimeZoneRef"
	187	:label-col="{ span: 6 }"
	188	:wrapper-col="{ span: 24 }"
	189	:model="modelRef"
	190	>
	191	<a-form-item label="国家地区：" :wrapper-col="{ span: 12 }">
	192	<a-select
	193	v-model:value="modelRef.sender"
	194	placeholder="选择国家地区"
	195	show-search
	196	:field-names="{ label: 'name', value: 'id' }"
	197	:options="state.data"
	198	>
170f4d	199	</a-select>
128809	200	</a-form-item>
H	201	<a-form-item label="时区：" :wrapper-col="{ span: 12 }">
	202	<a-select
	203	v-model:value="modelRef.sender"
	204	placeholder="选择时区"
	205	show-search
	206	:field-names="{ label: 'name', value: 'id' }"
	207	:options="state.data"
	208	>
	209	</a-select>
	210	</a-form-item>
	211	<a-form-item :label-col="{ span: 6 }">
	212	<a-row>
	213	<a-col span="6"> </a-col>
	214	<a-col span="18">
	215	<div style="color: #909090"
	216	>当地实时时间根据时区信息显示<br />
	217	国家地区/时区信息在客户资料-特征信息查看</div
	218	>
	219	</a-col>
	220	</a-row>
	221	</a-form-item>
	222	</a-form>
	223	</a-modal>
170f4d	224	</div>
28c484	225	</template>
S	226
170f4d	227	<script lang="ts" setup>
128809	228	import { ref, reactive, computed } from 'vue';
H	229	import { useMessage } from '@/hooks/web/useMessage';
	230	import { Tinymce } from '@/components/Tinymce';
	231	import { PlusCircleOutlined } from '@ant-design/icons-vue';
12f730	232	import SelectUser from './SelectUser/SelectUser.vue';
128809	233	import { Form } from 'ant-design-vue';
H	234	const modelRef = reactive({
	235	sender: '',
	236	recipients: [],
	237	ccRecipients: [],
	238	bccRecipients: [],
00fe0e	239	fileUNID: [],
128809	240	subject: '',
H	241	content: '',
	242	});
	243	const rulesRef = reactive({
	244	sender: [
	245	{
	246	required: true,
	247	message: '发件人不能为空',
28c484	248	},
128809	249	],
H	250	recipients: [
	251	{
	252	required: true,
	253	message: '收件人不能为空',
	254	},
	255	],
	256	content: [
	257	{
	258	required: true,
	259	message: '内容不能为空',
	260	},
	261	],
	262	});
	263	const useForm = Form.useForm;
	264	const { validate, validateInfos } = useForm(modelRef, rulesRef);
28c484	265
128809	266	const formRef = ref();
170f4d	267
128809	268	let isSecretDeliveryPerson = ref(false);
170f4d	269
128809	270	let isCRecipient = ref(false);
H	271	const handleCheckboxChange = (ref, e) => {
	272	ref.value = !ref.value;
	273	};
170f4d	274
128809	275	const ccCheckboxChange = (e) => {
H	276	handleCheckboxChange(isSecretDeliveryPerson, e);
	277	};
	278	const bccCheckboxChange = (e) => {
	279	handleCheckboxChange(isCRecipient, e);
	280	};
7e566b	281
128809	282	const { createMessage } = useMessage();
00fe0e	283	import { getUserListApi, sendingMailApi, saveMailDraftsApi } from '@/api/email/userList';
128809	284	// 定义状态管理对象
H	285	const state = reactive({
	286	data: [],
	287	fetching: false,
	288	error: null,
	289	});
7e566b	290
128809	291	// 获取用户列表的函数
H	292	const fnGetUserList = async (params) => {
	293	try {
	294	state.fetching = true;
	295	const res = await getUserListApi(params);
170f4d	296
128809	297	if (res && res.items && Array.isArray(res.items)) {
H	298	state.data = res.items;
	299	} else {
	300	console.error('Invalid response format:', res);
170f4d	301	}
128809	302	} catch (error) {
H	303	console.error('Failed to fetch user list:', error);
	304	} finally {
170f4d	305	state.fetching = false;
128809	306	}
H	307	};
170f4d	308
128809	309	// 初始化用户数据
H	310	const fetchData = async () => {
	311	await fnGetUserList({ page: 1, pageSize: 30 });
	312	};
	313	console.log(state.data, 'state.data');
	314	// 调用初始化函数
	315	fetchData();
	316
	317	const fnFilterOption = (input: string, option: any) => {
	318	return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
	319	};
	320
	321	const openSelectUser = ref(false);
	322	const selectUserTitle = ref('选择收件人');
	323	const selectIds = ref([]);
	324	const idName = ref('');
	325	const fnHandleSelect = (e) => {
	326	if (e === 'recipients') {
	327	selectUserTitle.value = '选择收件人';
	328	idName.value = e;
	329	}
	330	if (e === 'ccRecipients') {
	331	selectUserTitle.value = '选择抄送人';
	332	idName.value = e;
	333	}
	334	if (e === 'bccRecipients') {
	335	selectUserTitle.value = '选择密送人';
	336	idName.value = e;
	337	}
	338	selectIds.value = modelRef[e];
	339	openSelectUser.value = true;
	340	};
	341
	342	function fnChangeContent(e) {
	343	modelRef.content = e.content;
00fe0e	344	modelRef.fileUNID = e.fileUNID;
128809	345	}
00fe0e	346
H	347	function fnBuildingCommitData() {
	348	return {
	349	sender: modelRef.sender,
	350	receiver: modelRef.recipients,
	351	cc: modelRef.ccRecipients,
	352	bcc: modelRef.bccRecipients,
	353	subject: modelRef.subject,
	354	content: modelRef.content,
	355	fileUNID: '4DFEFEB4-3BB1-448D-9712-DC6C106A7A44;7732',
	356	docCode: docCode.value,
	357	};
	358	}
	359	const docCode = ref('');
	360	import { Modal } from 'ant-design-vue';
128809	361	function fnHandleSubmit(values: any) {
H	362	validate()
	363	.then((res) => {
00fe0e	364	if (!modelRef.subject) {
H	365	Modal.confirm({
	366	title: '提示',
	367	content: '邮件主题为空，确定要发送吗？',
	368	onOk() {
2c1249	369	pushSendingMail();
00fe0e	370	},
H	371	onCancel() {},
	372	});
2c1249	373	} else {
H	374	pushSendingMail();
	375	}
128809	376	})
H	377	.catch((error) => {
	378	createMessage.error('表单验证失败');
	379	});
	380	}
00fe0e	381
2c1249	382	function pushSendingMail() {
H	383	const data = fnBuildingCommitData();
	384	sendingMailApi(data).then((res) => {});
00fe0e	385	}
H	386	function fnPreview() {}
	387
	388	function fnSaveMailDrafts() {
	389	const data = fnBuildingCommitData();
	390	saveMailDraftsApi(data).then((res) => {
	391	docCode.value = res.data.docCode;
	392	createMessage.success(res.msg);
	393	});
	394	}
	395
128809	396	const fnSelectUser = (e) => {
H	397	modelRef[e.idName] = e.selectedRowKeys;
	398	};
	399
	400	const userLength = computed(() => {
	401	return (
	402	modelRef.recipients.length + modelRef.ccRecipients.length + modelRef.bccRecipients.length
	403	);
	404	});
	405
	406	interface Recipient {
	407	value: string;
	408	email: string;
	409	title: string;
2c1249	410	name: string;
128809	411	}
H	412
	413	const userParticulars = computed<Recipient \| null>(() => {
	414	const recipientId = modelRef.recipients?.[0];
	415	if (!recipientId) {
	416	console.error('Recipient ID is not defined.');
	417	return { value: '', email: '', title: '' };
	418	}
	419	// 使用 find 方法查找匹配项
	420	const foundItem = state.data.find((item) => item.id === recipientId);
	421
	422	// 返回找到的项，如果未找到则返回 null
	423	return foundItem \|\| { value: '', email: '', title: '' };
	424	});
	425	const fnHandleTimeZone = (e, type) => {
	426	console.log('fnHandleTimeZone');
	427	if (type == 'add') {
	428	titleTimeZone.value = '添加';
	429	typeTimeZone.value = 1;
	430	} else {
	431	titleTimeZone.value = '修改';
	432	typeTimeZone.value = 2;
	433	}
	434	openTimeZone.value = true;
	435	};
	436
	437	const openTimeZone = ref<boolean>(false);
	438	const confirmLoading = ref<boolean>(false);
	439	const titleTimeZone = ref<string>('添加');
	440	const typeTimeZone = ref<number>(1);
	441
	442	const fnHandleTimeZoneOk = () => {
	443	confirmLoading.value = true;
	444	setTimeout(() => {
	445	openTimeZone.value = false;
	446	confirmLoading.value = false;
	447	}, 2000);
	448	};
	449	</script>
	450	<style scoped lang="less"></style>