Skip to content

F
frontend-yd-email
Commit 575d46a2 by Sweet Zhang
Options

直接发邮件时改签名

parent b0197048
Showing with 73 additions and 127 deletions
src/components/RichTextEditor.vue
......@@ -53,7 +53,7 @@ onMounted(() => {
editor.config.showLinkImg = false // 隐藏网络图片功能
editor.config.uploadImgServer = config.uploadUrl // 图片上传接口
editor.config.uploadImgHeaders = {
Authorization: `Bearer ${localStorage.getItem('token')}`,
Authorization: `${localStorage.getItem('authToken')}`,
}
editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2MB
editor.config.uploadImgMaxLength = 1 // 单次上传1张（LOGO）
......
src/utils/menuConfig.ts
......@@ -32,12 +32,12 @@ export const menuConfig: MenuItem[] = [
icon: 'fas fa-file-excel',
title: '变量管理',
},
{
name: 'signatures',
path: '/signature-management',
icon: 'fas fa-file-excel',
title: '签名管理',
},
// {
// name: 'signatures',
// path: '/signature-management',
// icon: 'fas fa-file-excel',
// title: '签名管理',
// },
{
name: 'emails',
path: '/emails',
......@@ -53,5 +53,5 @@ export const pageTitles: Record<string, string> = {
senders: '发件人管理',
variables: '变量管理',
emails: '邮件记录',
signatures: '签名管理',
// signatures: '签名管理',
}
src/views/ComposeEmail.vue
......@@ -13,6 +13,7 @@
:loading="loading"
size="large"
class="w-full"
@change="setDefaultSignature"
>
<el-option
v-for="sender in senders"
......@@ -137,24 +138,6 @@
placeholder="邮件主题"
/>
</div>
<!-- <div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">签名</label>
<el-select
v-model="emailForm.signatureId"
placeholder="选择签名"
class="flex-auto"
size="large"
@change="handleSignatureChange"
>
<el-option
v-for="signature in signatureList"
:key="signature.id"
:label="signature.name"
:value="signature.id"
/>
</el-select>
<el-button type="text" @click="goToSignatureManagement" class="ml-2"> 管理签名 </el-button>
</div> -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">正文</label>
<div class="border border-gray-300 rounded-md overflow-hidden">
......@@ -300,73 +283,6 @@ const uploadConfig = {
multiple: true,
}
// 签名列表
const signatureList = ref<Signature[]>([])
// 获取签名列表
const fetchSignatureList = async () => {
try {
// 实际项目中替换为API请求
// const res = await api.get('/email/signatures');
// signatureList.value = res.data;
// 模拟数据
signatureList.value = [
{
id: 1,
name: '默认签名',
type: 'template',
isDefault: true,
config: {
companyName: 'Yindun Insurance Brokers Co..Ltd',
logoUrl: 'https://m.zuihuibi.cn/ydLife/assets/images/ydinsurance_logo.png',
name: '',
alias: '',
phone: '',
email: '',
address:
'Room 3063, Tower No.8 Shuang Xing , No 1 Weigongcun Ave, Haidian District, Beijing. P.R. China',
showCompanyName: true,
showLogo: true,
showName: true,
showAlias: true,
showPhone: true,
showEmail: true,
showAddress: true,
},
customContent: '',
createTime: '',
updateTime: '',
},
]
// 默认选中默认签名
const defaultSignature = signatureList.value.find((item) => item.isDefault)
if (defaultSignature) {
emailForm.value.signatureId = defaultSignature.id
}
} catch (error) {
ElMessage.error('获取签名列表失败')
console.error(error)
}
}
// 当前选中的签名
const selectedSignature = computed(() => {
return signatureList.value.find((item) => item.id === emailForm.value.signatureId) || null
})
// 切换签名
const handleSignatureChange = () => {
if (selectedSignature.value) {
ElMessage.success(`已切换为：${selectedSignature.value.name}`)
}
}
// 跳转到签名管理页面
const goToSignatureManagement = () => {
router.push('/signature-management')
}
// 远程搜索方法
const remoteSearch = async (query: string, type: string) => {
console.log(query, type)
......@@ -494,7 +410,6 @@ onMounted(() => {
getContacts()
getGroups()
applyVariableTemplate()
fetchSignatureList()
})
const loading = ref(false)
const variablePrefix = '{{'
......@@ -517,6 +432,10 @@ const applyVariableTemplate = () => {
})
}
}
const setDefaultSignature = () => {
emailForm.value.customContent = setSignaturePreview(currentSender.value)
}
// 插入变量方法
const insertVariable = (variable: Variable) => {
// 支持多选变量，循环添加选中变量
......@@ -629,9 +548,9 @@ const handleImportContacts = (results) => {
// 发送邮件
const sendEmail = () => {
// 构建完整的邮件内容（正文 + 签名）
const signatureContent = selectedSignature.value
? getSignaturePreview(selectedSignature.value)
: ''
const signatureContent = emailForm.value.customContent
? emailForm.value.customContent
: setSignaturePreview(currentSender.value)
const fullContent = `${emailForm.value.content}\n\n${signatureContent}`
const params = {
...emailForm.value,
......@@ -721,16 +640,28 @@ const handleDocumentUploadSuccess = (results: UploadResult[]) => {
ElMessage.success(`成功上传 ${successCount} 个文档`)
}
// 获取签名预览HTML
const getSignaturePreview = (signature: Signature): string => {
if (signature.type === 'template') {
const config = signature.config
let html = '<div style="font-family: Arial, sans-serif; line-height: 1.8; color: #333;">'
const setSignaturePreview = (currentSender): string => {
if (currentSender) {
const config = {
showCompanyName: true,
showLogo: true,
showName: true,
showPhone: true,
showEmail: true,
showAddress: true,
name: currentSender.displayName,
logoUrl: 'https://m.zuihuibi.cn/ydLife/assets/images/ydinsurance_logo.png',
companyName: 'Yindun Insurance Brokers Co..Ltd',
phone: currentSender.phone || '',
email: currentSender.email || '',
address:
'Room 3063, Tower No.8 Shuang Xing , No 1 Weigongcun Ave, Haidian District, Beijing. P.R. China',
}
let html =
'<div style="font-family: Arial, sans-serif; line-height: 1.8; color: #333;"><p style="margin: 15px 0; font-weight: 500;">Best Regards</p><p style="margin: 15px 0; border:1px solid #ccc;"></p></div>'
if (config.showName) {
html += `<p style="margin: 0; font-weight: bold; font-size: 14px;">${config.name}`
if (config.showAlias && config.alias) {
html += ` | ${config.alias}`
}
html += '</p>'
}
......@@ -743,29 +674,27 @@ const getSignaturePreview = (signature: Signature): string => {
}
if (config.showPhone && config.phone) {
html += `<p style="margin: 0; font-size: 12px;">电话：${config.phone}</p>`
html += `<p style="margin: 0; font-size: 12px;">M：+86 ${config.phone}</p>`
}
if (config.showEmail && config.email) {
html += `<p style="margin: 0; font-size: 12px;">邮箱：<a href="mailto:${config.email}" style="color: #409eff; text-decoration: none;">${config.email}</a></p>`
html += `<p style="margin: 0; font-size: 12px;">E：<a href="mailto:${config.email}" style="color: #409eff; text-decoration: none;">${config.email}</a></p>`
}
if (config.showAddress && config.address) {
html += `<p style="margin: 0; font-size: 12px;">地址：${config.address}</p>`
html += `<p style="margin: 0; font-size: 12px;">A：${config.address}</p>`
}
html += '</div>'
return html
} else {
return signature.customContent
}
}
// 测试发送邮件
const sendSelfEmail = () => {
// 构建完整的邮件内容（正文 + 签名）
const signatureContent = selectedSignature.value
? getSignaturePreview(selectedSignature.value)
: ''
const signatureContent = emailForm.value.customContent
? emailForm.value.customContent
: setSignaturePreview(currentSender.value)
const fullContent = `${emailForm.value.content}\n\n${signatureContent}`
const params = {
...emailForm.value,
......
src/views/SenderManagement.vue
......@@ -7,7 +7,22 @@
<i class="fas fa-times"></i> 取消编辑
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-gray-700 mb-1 text-sm">邮件服务商 *</label>
<select
v-model="formData.providerBizId"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option
v-for="provider in providers"
:value="provider.providerBizId"
:key="provider.providerBizId"
>
{{ provider.providerName }}
</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-1 text-sm">邮箱地址 *</label>
<input
......@@ -32,23 +47,17 @@
v-model="formData.displayName"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="例如：XX公司"
placeholder="发邮件时默认显示在签名处"
/>
</div>
<div>
<label class="block text-gray-700 mb-1 text-sm">邮件服务商 *</label>
<select
v-model="formData.providerBizId"
<label class="block text-gray-700 mb-1 text-sm">发件人手机号</label>
<input
v-model="formData.phone"
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option
v-for="provider in providers"
:value="provider.providerBizId"
:key="provider.providerBizId"
>
{{ provider.providerName }}
</option>
</select>
placeholder="发邮件时默认显示在签名处"
/>
</div>
</div>
<div class="mt-4 flex justify-end">
......@@ -126,6 +135,11 @@
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
发件人手机号码
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
状态
</th>
<th
......@@ -145,6 +159,7 @@
}}
</td>
<td class="px-6 py-4 whitespace-nowrap">{{ sender.displayName }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ sender.phone }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
......@@ -223,7 +238,6 @@ const resetSearch = () => {
const handlePageChange = (page: number, size: number) => {
console.log('分页变化:', page, size)
getSenders()
// 这里可以发起API请求获取新数据
}
const handleCurrentUpdate = (page: number) => {
......@@ -315,6 +329,7 @@ const formData = ref<Partial<Sender>>({
providerBizId: '',
displayName: '',
active: 1,
phone: '',
})
// 服务商列表
const providers = ref<Provider[]>([])
......@@ -328,6 +343,7 @@ const resetForm = () => {
providerBizId: '',
displayName: '',
active: 1,
phone: '',
}
}
const getProviders = () => {
......@@ -388,6 +404,7 @@ const saveSender = () => {
providerBizId: formData.value.providerBizId || '',
displayName: formData.value.displayName || '',
active: formData.value.active ?? 1,
phone: formData.value.phone || '',
}
senderApi.addEmailSenderConfig(newSender).then((res) => {
// 补充异常处理
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment