|
@@ -1,37 +1,46 @@
|
|
|
<template>
|
|
|
<div v-loading="loading" style="padding: 10px">
|
|
|
- <div style="margin-bottom: 10px; padding-left: 65px">
|
|
|
- <el-button type="primary" @click="handleSend">发送</el-button>
|
|
|
- </div>
|
|
|
+ <!-- <div style="margin-bottom: 10px; padding-left: 65px">
|
|
|
+ <el-button type="primary" @click="handleSend">发 送</el-button>
|
|
|
+ </div> -->
|
|
|
<div style="width: 100%">
|
|
|
- <byForm
|
|
|
- :formConfig="formConfig"
|
|
|
- :formOption="formOption"
|
|
|
- v-model="formData.data"
|
|
|
- :rules="rules"
|
|
|
+ <el-form
|
|
|
ref="submit"
|
|
|
+ :model="formData.data"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="65px"
|
|
|
+ labelPosition="right"
|
|
|
>
|
|
|
- <template #to>
|
|
|
- <div>
|
|
|
- <div style="display: flex">
|
|
|
- <el-autocomplete
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSend()"> 发 送 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收件人" prop="to">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <!-- <el-autocomplete
|
|
|
v-model="formData.data.to"
|
|
|
clearable
|
|
|
- class="inline-input w-50"
|
|
|
placeholder="请输入"
|
|
|
+ style="width: 100%"
|
|
|
@select="handlePerson"
|
|
|
:fetch-suggestions="querySearchPerson"
|
|
|
+ @keyup.enter.native="handleAdd(10)"
|
|
|
>
|
|
|
- </el-autocomplete>
|
|
|
- <el-button
|
|
|
+ </el-autocomplete> -->
|
|
|
+ <el-input
|
|
|
+ v-model="formData.data.to"
|
|
|
+ placeholder="请输入"
|
|
|
+ @keyup.enter.native="handleAdd(10)"
|
|
|
+ />
|
|
|
+ <!-- <el-button
|
|
|
type="primary"
|
|
|
@click="handleAdd(10)"
|
|
|
style="margin-left: 10px"
|
|
|
:disabled="!formData.data.to"
|
|
|
>添加</el-button
|
|
|
- >
|
|
|
+ > -->
|
|
|
</div>
|
|
|
- <div style="margin-top: 15px">
|
|
|
+ <div style="margin-top: 15px" v-if="to && to.length > 0">
|
|
|
<el-tag
|
|
|
style="margin-right: 10px"
|
|
|
class="ml-2"
|
|
@@ -44,28 +53,49 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <template #cc>
|
|
|
- <div>
|
|
|
- <div style="display: flex">
|
|
|
- <el-autocomplete
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="">
|
|
|
+ <div style="display: flex">
|
|
|
+ <span
|
|
|
+ style="color: #666666; cursor: pointer"
|
|
|
+ @click="showcc = !showcc"
|
|
|
+ >抄送</span
|
|
|
+ >
|
|
|
+ <span style="color: ##dddddd; margin: 0 8px">|</span>
|
|
|
+ <span
|
|
|
+ style="color: #666666; cursor: pointer"
|
|
|
+ @click="showbcc = !showbcc"
|
|
|
+ >密送</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="抄送人" prop="cc" v-if="showcc">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <!-- <el-autocomplete
|
|
|
v-model="formData.data.cc"
|
|
|
clearable
|
|
|
class="inline-input w-50"
|
|
|
placeholder="请输入"
|
|
|
@select="handlePerson"
|
|
|
:fetch-suggestions="querySearchPerson"
|
|
|
+ @keyup.enter.native="handleAdd(20)"
|
|
|
>
|
|
|
- </el-autocomplete>
|
|
|
- <el-button
|
|
|
+ </el-autocomplete> -->
|
|
|
+ <el-input
|
|
|
+ v-model="formData.data.cc"
|
|
|
+ placeholder="请输入"
|
|
|
+ @keyup.enter.native="handleAdd(20)"
|
|
|
+ />
|
|
|
+ <!-- <el-button
|
|
|
type="primary"
|
|
|
@click="handleAdd(20)"
|
|
|
style="margin-left: 10px"
|
|
|
:disabled="!formData.data.cc"
|
|
|
>添加</el-button
|
|
|
- >
|
|
|
+ > -->
|
|
|
</div>
|
|
|
- <div style="margin-top: 15px">
|
|
|
+ <div style="margin-top: 15px" v-if="cc && cc.length > 0">
|
|
|
<el-tag
|
|
|
style="margin-right: 10px"
|
|
|
class="ml-2"
|
|
@@ -78,28 +108,33 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <template #bcc>
|
|
|
- <div>
|
|
|
- <div style="display: flex">
|
|
|
- <el-autocomplete
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密送人" prop="bcc" v-if="showbcc">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <!-- <el-autocomplete
|
|
|
v-model="formData.data.bcc"
|
|
|
clearable
|
|
|
- class="inline-input w-50"
|
|
|
placeholder="请输入"
|
|
|
@select="handlePerson"
|
|
|
:fetch-suggestions="querySearchPerson"
|
|
|
+ @keyup.enter.native="handleAdd(30)"
|
|
|
>
|
|
|
- </el-autocomplete>
|
|
|
- <el-button
|
|
|
+ </el-autocomplete> -->
|
|
|
+ <el-input
|
|
|
+ v-model="formData.data.bcc"
|
|
|
+ placeholder="请输入"
|
|
|
+ @keyup.enter.native="handleAdd(30)"
|
|
|
+ />
|
|
|
+ <!-- <el-button
|
|
|
type="primary"
|
|
|
@click="handleAdd(30)"
|
|
|
style="margin-left: 10px"
|
|
|
:disabled="!formData.data.bcc"
|
|
|
>添加</el-button
|
|
|
- >
|
|
|
+ > -->
|
|
|
</div>
|
|
|
- <div style="margin-top: 15px">
|
|
|
+ <div style="margin-top: 15px" v-if="bcc && bcc.length > 0">
|
|
|
<el-tag
|
|
|
style="margin-right: 10px"
|
|
|
class="ml-2"
|
|
@@ -112,17 +147,11 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #contentSlot>
|
|
|
- <div style="width: 100%">
|
|
|
- <Editor
|
|
|
- :value="formData.data.content"
|
|
|
- @updateValue="updateContent"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #fileSlot>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="主题" prop="subject">
|
|
|
+ <el-input v-model="formData.data.subject" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件">
|
|
|
<div style="width: 100%">
|
|
|
<el-upload
|
|
|
v-model:fileList="fileList"
|
|
@@ -147,7 +176,7 @@
|
|
|
>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
- <div class="att-box">
|
|
|
+ <div class="att-box" v-if="fileListCopy && fileListCopy.length > 0">
|
|
|
<div v-for="(itemFile, index) in fileListCopy" :key="index">
|
|
|
<div class="att-item">
|
|
|
<img
|
|
@@ -167,8 +196,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </byForm>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="正文" prop="content">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <Editor
|
|
|
+ :value="formData.data.content"
|
|
|
+ @updateValue="updateContent"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发件人" prop="replyTo">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.data.replyTo"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 50%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSend()"> 发 送 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -185,6 +232,8 @@ const loading = ref(false);
|
|
|
let uploadData = ref({});
|
|
|
const fileList = ref([]);
|
|
|
const fileListCopy = ref([]);
|
|
|
+const showcc = ref(false);
|
|
|
+const showbcc = ref(false);
|
|
|
const formOption = reactive({
|
|
|
inline: true,
|
|
|
labelWidth: 65,
|
|
@@ -201,6 +250,10 @@ const formConfig = computed(() => {
|
|
|
},
|
|
|
{
|
|
|
type: "slot",
|
|
|
+ slotName: "bbcc",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
slotName: "cc",
|
|
|
label: "抄送人",
|
|
|
prop: "cc",
|
|
@@ -254,43 +307,56 @@ const bcc = ref([]);
|
|
|
const replyTo = ref([]);
|
|
|
const submit = ref(null);
|
|
|
const handleSend = () => {
|
|
|
- submit.value.handleSubmit(() => {
|
|
|
- const data = { ...formData.data };
|
|
|
- if (!to.value.length > 0) {
|
|
|
- return ElMessage({
|
|
|
- message: "请添加收件人",
|
|
|
- type: "info",
|
|
|
- });
|
|
|
- }
|
|
|
- if (data.content) {
|
|
|
- let replyTo = [
|
|
|
- {
|
|
|
- address: formData.data.replyTo,
|
|
|
- personal: null,
|
|
|
- },
|
|
|
- ];
|
|
|
- const submitData = {
|
|
|
- type: mailStore.selectMail.type,
|
|
|
- mailboxId: mailStore.selectMail.id,
|
|
|
- subject: data.subject,
|
|
|
- content: data.content,
|
|
|
- to: to.value,
|
|
|
- cc: cc.value,
|
|
|
- bcc: bcc.value,
|
|
|
- replyTo: replyTo,
|
|
|
- fileList: fileListCopy.value.map((x) => ({
|
|
|
- fileName: x.fileName,
|
|
|
- fileUrl: x.fileUrl,
|
|
|
- })),
|
|
|
- };
|
|
|
- proxy.post("/mailService/sendMail", submitData).then((res) => {
|
|
|
- console.log(res, "aa");
|
|
|
- });
|
|
|
- } else {
|
|
|
- return ElMessage({
|
|
|
- message: "请输入正文",
|
|
|
- type: "info",
|
|
|
- });
|
|
|
+ submit.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const data = { ...formData.data };
|
|
|
+ if (!to.value.length > 0) {
|
|
|
+ return ElMessage({
|
|
|
+ message: "请添加收件人",
|
|
|
+ type: "info",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (data.content) {
|
|
|
+ let replyTo = [
|
|
|
+ {
|
|
|
+ address: formData.data.replyTo,
|
|
|
+ personal: null,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const submitData = {
|
|
|
+ type: mailStore.selectMail.type,
|
|
|
+ mailboxId: mailStore.selectMail.id,
|
|
|
+ subject: data.subject,
|
|
|
+ content: data.content,
|
|
|
+ to: to.value,
|
|
|
+ cc: cc.value,
|
|
|
+ bcc: bcc.value,
|
|
|
+ replyTo: replyTo,
|
|
|
+ fileList: fileListCopy.value.map((x) => ({
|
|
|
+ fileName: x.fileName,
|
|
|
+ fileUrl: x.fileUrl,
|
|
|
+ })),
|
|
|
+ };
|
|
|
+ proxy.post("/mailService/sendMail", submitData).then((res) => {
|
|
|
+ ElMessage({
|
|
|
+ message: "发送成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ formData.data = {
|
|
|
+ content: "",
|
|
|
+ };
|
|
|
+ to.value = [];
|
|
|
+ cc.value = [];
|
|
|
+ bcc.value = [];
|
|
|
+ fileList.value = [];
|
|
|
+ fileListCopy.value = [];
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return ElMessage({
|
|
|
+ message: "请输入正文",
|
|
|
+ type: "info",
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -429,4 +495,7 @@ onMounted(() => {
|
|
|
line-height: 40px;
|
|
|
padding: 0 8px;
|
|
|
}
|
|
|
+// .el-form-item--default {
|
|
|
+// margin-bottom: 0px;
|
|
|
+// }
|
|
|
</style>
|