报表组件增加邮件发送

src/api/iosBasicData/reports.js

@@ -72,4 +72,13 @@ export const fingenlegGetReportData = (row) => {
     method: 'get',
     params: row
   })
-}
+}
+
+
+export const generateMailFile = (row) => {
+    return request({
+        url: '/api/blade-los/reports/generateMailFileAndSend',
+        method: 'post',
+        data: row
+    })
+}

src/views/iosBasicData/SeafreightExportF/bills/assembly/businessReports.vue

@@ -12,6 +12,7 @@
       </template>
     </avue-crud>
     <reportContainer ref="reportContainer"></reportContainer>
+      <mail-component ref="mailComponentRef"/>
   </div>
 </template>
 
@@ -22,10 +23,12 @@ import { mapGetters } from "vuex";
 import { billsDetail } from '@/api/iosBasicData/bills'
 import { bbusinesstypeList } from "@/api/iosBasicData/bbusinesstype";
 import reportContainer from "@/views/iosBasicData/report-container/report-container.vue"
+import mailComponent from "@/views/iosBasicData/SeafreightExportF/bills/assembly/mail-component.vue";
 
 export default {
   components: {
-    reportContainer
+    reportContainer,
+      mailComponent
   },
   props: {
     id: {
@@ -542,6 +545,13 @@ export default {
         this.handleReportPreview(url, res.data.data.data)
       })
     },
+      testMail(e){
+          console.info('eeeeeeeeeeeeeeeeeeee----', e)
+          this.$refs.mailComponentRef.dialogVisible = true
+          this.$refs.mailComponentRef.formData.attachments = e.fileName
+          this.$refs.mailComponentRef.formData.fileType = e.formatName
+          this.$refs.mailComponentRef.formData.fileContent = e.data
+      },
     // 预览报表
     handleReportPreview(url, row) {
       Stimulsoft.Base.StiLicense.key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHn0s4gy0Fr5YoUZ9V00Y0igCSFQzwEqYBh/N77k4f0fWXTHW5rqeBNLkaurJDenJ9o97TyqHs9HfvINK18Uwzsc/bG01Rq+x3H3Rf+g7AY92gvWmp7VA2Uxa30Q97f61siWz2dE5kdBVcCnSFzC6awE74JzDcJMj8OuxplqB1CYcpoPcOjKy1PiATlC3UsBaLEXsok1xxtRMQ283r282tkh8XQitsxtTczAJBxijuJNfziYhci2jResWXK51ygOOEbVAxmpflujkJ8oEVHkOA/CjX6bGx05pNZ6oSIu9H8deF94MyqIwcdeirCe60GbIQByQtLimfxbIZnO35X3fs/94av0ODfELqrQEpLrpU6FNeHttvlMc5UVrT4K+8lPbqR8Hq0PFWmFrbVIYSi7tAVFMMe2D1C59NWyLu3AkrD3No7YhLVh7LV0Tttr/8FrcZ8xirBPcMZCIGrRIesrHxOsZH2V8t/t0GXCnLLAWX+TNvdNXkB8cF2y9ZXf1enI064yE5dwMs2fQ0yOUG/xornE'
@@ -563,7 +573,10 @@ export default {
       options.exports.showExportToDocument = false // 显示导出到文档
       options.toolbar.showParametersButton = true // 显示参数按钮
       options.appearance.bookmarksPrint = true // 书签打印
-      // options.toolbar.showPrintButton = false // 打印按钮是否显示   下面直接自定义控制打印弹窗是否开启
+      options.toolbar.showSendEmailButton = true // 显示发送邮件按钮
+        options.email.showEmailDialog = false
+        options.email.showExportDialog = false
+        // options.toolbar.showPrintButton = false // 打印按钮是否显示   下面直接自定义控制打印弹窗是否开启
 
       // printDestination 参数：用于指定报表打印的目标位置，可以是打印机、PDF 文件或者直接打印到浏览器等。
       // Stimulsoft.Viewer.StiPrintDestination.Direct：表示直接打印到打印机，即将报表内容直接发送至打印机进行打印。
@@ -573,7 +586,8 @@ export default {
       options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table
       // 是创建一个 Stimulsoft 报表查看器的实例的代码
       let viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false)
-
+        viewer.onEmailReport = this.testMail
+        console.info('viewer', viewer)
       // 报表
       console.log("创建一个报表实例");
       let report = new window.Stimulsoft.Report.StiReport();

src/views/iosBasicData/SeafreightExportF/bills/assembly/mail-component.vue

@@ -0,0 +1,248 @@
+<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" v-bind="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: {},
+                oss: '',
+                headers: {"Blade-Auth": "Bearer " + getToken()},
+                data: {},
+                propsHttp: {
+                    home: '',
+                    url: 'url',
+                    res: 'data'
+                }
+            },
+            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'}
+                ]
+            }
+        }
+    },
+    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 param = {
+                fileName: this.formData.attachments,
+                fileType: this.formData.fileType,
+                sendTo: this.formData.to,
+                mailTitle: this.formData.subject,
+                mailContent: this.formData.message,
+                fileContent: 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>