Commit fc7ce3a7 by Sweet Zhang

直接发邮件时改签名

parent 575d46a2
...@@ -8,19 +8,12 @@ ...@@ -8,19 +8,12 @@
import { ref, defineProps, defineEmits, watch, onMounted, onUnmounted } from 'vue' import { ref, defineProps, defineEmits, watch, onMounted, onUnmounted } from 'vue'
import WangEditor from 'wangeditor' import WangEditor from 'wangeditor'
import axios from 'axios' import axios from 'axios'
import { env } from '@/utils/env' // 之前创建的环境配置文件
// Props 定义(保持和原组件一致,无缝替换) // Props/Emits 保持不变
const props = defineProps<{ const props = defineProps<{
modelValue: string modelValue: string
config?: { config?: { height?: number; uploadUrl?: string; placeholder?: string }
height?: number
uploadUrl?: string
placeholder?: string
}
}>() }>()
// Emits 定义
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: string): void (e: 'update:modelValue', value: string): void
(e: 'change', value: string): void (e: 'change', value: string): void
...@@ -32,7 +25,6 @@ const defaultConfig = { ...@@ -32,7 +25,6 @@ const defaultConfig = {
uploadUrl: `${import.meta.env.VITE_REMOTE_API_BASE_URL}/oss/api/oss/upload`, uploadUrl: `${import.meta.env.VITE_REMOTE_API_BASE_URL}/oss/api/oss/upload`,
placeholder: '请输入内容...', placeholder: '请输入内容...',
} }
const config = { ...defaultConfig, ...props.config } const config = { ...defaultConfig, ...props.config }
// 编辑器实例 // 编辑器实例
...@@ -40,48 +32,49 @@ const editorRef = ref<HTMLDivElement | null>(null) ...@@ -40,48 +32,49 @@ const editorRef = ref<HTMLDivElement | null>(null)
let editor: WangEditor | null = null let editor: WangEditor | null = null
const content = ref(props.modelValue) const content = ref(props.modelValue)
// 初始化编辑器 // 封装上传方法(复用)
const uploadImage = async (file: File) => {
const formData = new FormData()
formData.append('file', file) // 固定key为file
const res = await axios.post(config.uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: localStorage.getItem('authToken') || '',
},
})
if (res.data.code !== 200) throw new Error(res.data.msg || '上传失败')
return res.data.data.url
}
onMounted(() => { onMounted(() => {
if (!editorRef.value) return if (!editorRef.value) return
// 创建编辑器
editor = new WangEditor(editorRef.value) editor = new WangEditor(editorRef.value)
// 配置 // 基础配置(保留wangEditor原生风格)
editor.config.height = config.height editor.config.height = config.height
editor.config.placeholder = config.placeholder editor.config.placeholder = config.placeholder
editor.config.showLinkImg = false // 隐藏网络图片功能 editor.config.showLinkImg = false
editor.config.uploadImgServer = config.uploadUrl // 图片上传接口
editor.config.uploadImgHeaders = {
Authorization: `${localStorage.getItem('authToken')}`,
}
editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2MB
editor.config.uploadImgMaxLength = 1 // 单次上传1张(LOGO)
editor.config.onchange = (html: string) => { editor.config.onchange = (html: string) => {
content.value = html content.value = html
emit('update:modelValue', html) emit('update:modelValue', html)
emit('change', html) emit('change', html)
} }
// 图片上传成功处理 // 核心:仅重写上传逻辑(最简版)
editor.config.uploadImgHooks = { editor.config.customUploadImg = async (files, insertImg) => {
success: (xhr: any, editor: any, result: any) => { try {
if (result.code === 200) { // 仅上传第一张(符合原限制)
return result.data.url const url = await uploadImage(files[0])
insertImg(url) // 插入到编辑器
} catch (err) {
console.error('图片上传失败:', err)
// 可添加Element Plus提示:ElMessage.error('图片上传失败')
} }
},
fail: (xhr: any, editor: any, result: any) => {
console.error('图片上传失败:', result)
},
} }
// 创建编辑器
editor.create() editor.create()
// 初始化内容
// 设置初始内容 if (props.modelValue) editor.txt.html(props.modelValue)
if (props.modelValue) {
editor.txt.html(props.modelValue)
}
}) })
// 监听外部内容变化 // 监听外部内容变化
...@@ -97,12 +90,7 @@ watch( ...@@ -97,12 +90,7 @@ watch(
) )
// 销毁编辑器 // 销毁编辑器
onUnmounted(() => { onUnmounted(() => editor?.destroy())
if (editor) {
editor.destroy()
editor = null
}
})
</script> </script>
<style scoped> <style scoped>
...@@ -111,18 +99,14 @@ onUnmounted(() => { ...@@ -111,18 +99,14 @@ onUnmounted(() => {
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
} }
.editor-container { .editor-container {
min-height: 300px; min-height: 300px;
padding: 10px; padding: 10px;
} }
/* 适配 wangEditor 样式 */
:deep(.w-e-toolbar) { :deep(.w-e-toolbar) {
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
flex-wrap: wrap; flex-wrap: wrap;
} }
:deep(.w-e-text-container) { :deep(.w-e-text-container) {
min-height: 250px; min-height: 250px;
} }
......
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
@close="showVariableSelector = false" @close="showVariableSelector = false"
/> />
<!-- 发送邮件弹窗 --> <!-- 发送邮件弹窗 -->
<el-dialog v-model="dialogVisible" title="提示" width="500"> <el-dialog v-model="dialogVisible" title="提示" width="500" :z-index="99999">
<span>邮件发送任务已提交,请前往邮件记录中查看发送状态</span> <span>邮件发送任务已提交,请前往邮件记录中查看发送状态</span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
......
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