tire-platform-ui/src/components/iosbasic-data/mail-component.vue

<template>
    <el-dialog title="发送邮件" :visible.sync="dialogVisible" append-to-body width="50%" :close-on-click-modal="false"
        custom-class="email-dialog">
        <el-form ref="emailForm" :model="formData" :rules="formRules" label-width="80px" label-position="right">
            <el-form-item label="收件人" prop="to">
                <el-input v-model="formData.to" placeholder="多个收件人用分号(;)分隔" clearable></el-input>
            </el-form-item>

            <el-form-item label="抄送" prop="cc">
                <el-input v-model="formData.cc" placeholder="多个抄送人用分号(;)分隔" clearable></el-input>
            </el-form-item>

            <el-form-item label="密送" prop="bcc">
                <el-input v-model="formData.bcc" placeholder="多个密送人用分号(;)分隔" clearable></el-input>
            </el-form-item>

            <el-form-item label="主题" prop="subject">
                <el-input v-model="formData.subject" placeholder="请输入邮件主题" clearable></el-input>
            </el-form-item>

            <el-form-item label="正文" prop="content">
                <avue-ueditor v-model="formData.content" :options="options"></avue-ueditor>
            </el-form-item>

            <el-form-item label="附件">
                <el-input v-model="formData.attachments" placeholder="请输入文件名" clearable></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="submitForm" size="medium" :loading="sending">发 送</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { getToken } from "@/util/auth";
import { generateMailFile } from "@/api/iosBasicData/reports";


export default {
    name: 'EmailDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            sending: false,
            options: {
                //普通上传地址
                action: "/api/blade-resource/oss/endpoint/put-file",
                customConfig: {
                    menus: [
                        'head',
                        'bold',
                        'fontSize',
                        'fontName',
                        'italic',
                        'underline',
                        'strikeThrough',
                        'foreColor',
                        'backColor',
                        'link',
                        'list',
                        'justify',
                        'quote',
                        'emoticon',
                        'image',
                        'table',
                        'undo',
                        'redo'
                    ],
                },
                headers: { "Blade-Auth": "Bearer " + getToken() },
                props: {
                    res: "data",
                    url: 'link'
                }
            },
            formData: {
                to: '',
                cc: '',
                bcc: '',
                subject: '',
                content: '',
                attachments: '',
                fileType: '',
                fileContent: ''
            },
            formRules: {
                to: [
                    { required: true, message: '请输入收件人邮箱', trigger: 'blur' },
                    {
                        validator: this.validateEmails,
                        message: '邮箱格式不正确',
                        trigger: 'blur'
                    }
                ],
                subject: [
                    { required: true, message: '请输入邮件主题', trigger: 'blur' },
                    { max: 100, message: '主题长度不能超过100个字符', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入邮件正文', trigger: 'blur' }
                ],
                attachments: [
                    { required: true, message: '请输入附件名', trigger: 'blur' }
                ]
            },
            fileTypeList: [
                {
                    key: 'Pdf',
                    value: 'pdf'
                },
                {
                    key: 'ImageSvg',
                    value: 'svg'
                },
                {
                    key: 'Excel2007',
                    value: 'xls'
                },
                {
                    key: 'Text',
                    value: 'txt'
                },
                {
                    key: 'Html',
                    value: 'html'
                },
                {
                    key: 'Word2007',
                    value: 'doc'
                },
                {
                    key: 'Csv',
                    value: 'csv'
                },
                {
                    key: 'Csv',
                    value: 'csv'
                }
            ]
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
            if (!newVal) {
                this.resetForm()
            }
        }
    },
    methods: {
        validateEmails(rule, value, callback) {
            if (!value) return callback()

            const emails = value.split(';').filter(e => e.trim())
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

            for (const email of emails) {
                if (!emailRegex.test(email.trim())) {
                    return callback(new Error(rule.message))
                }
            }

            callback()
        },
        submitForm() {
            this.$refs.emailForm.validate(valid => {
                if (valid) {
                    this.sendEmail()
                }
            })
        },
        sendEmail() {
            this.sending = true
            let fileContentStrList = ["ImageSvg", "Html"]
            let nowFile = this.fileTypeList.find(f => f.key === this.formData.fileType)
            let param = {
                fileName: this.formData.attachments,
                fileType: nowFile.value,
                sendTo: this.formData.to,
                mailTitle: this.formData.subject,
                mailContent: this.formData.content,
                fileContent: this.formData.fileContent,
                fileContentStr: ''
            }
            if (fileContentStrList.indexOf(this.formData.fileType) !== -1) {
                param.fileContent = null
                param.fileContentStr = this.formData.fileContent
            }
            generateMailFile(param).then(res => {
                console.info(res)
            })
            // 模拟发送请求
            setTimeout(() => {
                this.$message.success('邮件发送成功')
                this.sending = false
                this.dialogVisible = false
            }, 1500)
        },
        resetForm() {
            this.$refs.emailForm.resetFields()
            this.formData.attachments = ''
        }
    }
}
</script>

<style lang="scss">
.email-dialog {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;

        .el-dialog__title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
    }

    .el-dialog__body {
        padding: 20px 30px;

        .el-form-item {
            margin-bottom: 22px;

            .el-form-item__label {
                color: #666;
                font-weight: normal;
            }

            .el-input__inner,
            .el-textarea__inner {
                border-radius: 4px;
                transition: border-color 0.3s;

                &:focus {
                    border-color: #409eff;
                    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
                }
            }
        }
    }

    .el-dialog__footer {
        border-top: 1px solid #f0f0f0;
        padding: 15px 20px;
        text-align: right;

        .el-button {
            min-width: 80px;
            border-radius: 4px;
        }
    }
}
</style>