Arbitrate-Frontend/src/views/deliveryRecord/components/emailEdits.vue

<template>
    <div>
        <el-dialog title="邮件内容" :visible="emailVidable" @close="cancel" center :distroy-on-close="true">
            <div>
                <el-form>
                    <el-col :span="24">
                        <el-form-item label="邮件主题：" label-width="100px">
                            <div>{{ emailRow.mailSubject }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收件人：" label-width="100px">
                            <div>{{ emailRow.mailAddress }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发件人：" label-width="100px">
                            <div>{{ emailRow.mailFromAddress }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="邮件附件：" label-width="100px">
                            <div style="color: blue; cursor: pointer" v-for="(item, index) in emailRow.caseAttachList"
                                :key="index" @click="viewAttachments(item.annexPath)">
                                {{ item.annexName }}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传：" label-width="100px">
                            <el-upload class="upload-demo" accept=".doc,.docx,.pdf" ref="upload" :action="UploadUrl()"
                                :headers="headers" :data="filedata" :on-preview="handlePreview"
                                :on-remove="handleRemove" :limit="1" :on-change="beforeUpload"
                                :on-success="handlSuccess" :file-list="fileList">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传.doc，docx，pdf文件
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="邮件正文：" label-width="100px">
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="sendData"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton1" round><span>取 消</span></el-button>
                <el-button @click="submitSend" class="endbutton1" type="primary" round><span>确 认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    updateSendContent,
    update,
} from "@/api/deliveryRecord/deliveryRecord.js";
import { getToken } from "@/utils/auth";
export default {
    props: ["emailVidable", "emailRow", "queryParams"],
    data() {
        return {
            sendData: "",
            fileURL: window.location.origin + "/API",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            filedata: {
                annexType: 13,
            },
            fileList: [],
            files: [],
        };
    },
    watch: {
        emailVidable(val) {
            if (val) {
                console.log(this.emailRow);
                this.sendData = this.emailRow.mailContent;
            }
        },
    },
    methods: {
        cancel() {
            this.$emit("cancelEmail");
        },
        submitSend() {
            console.log(this.emailRow.mailContent);
            let caseAttachListParms = {};
            if (this.files.annexId) {
                caseAttachListParms = {
                    id: this.emailRow.id,
                    mailContent: this.sendData,
                    caseAttachList: [{ annexId: this.files.annexId }],
                }
            } else{
                caseAttachListParms = {
                    id: this.emailRow.id,
                    mailContent: this.sendData,
                    caseAttachList: [],
                }
            }
            this.updateSendContentFn(caseAttachListParms);
        },
        updateSendContentFn(data) {
            update(data).then((res) => {
                this.$message.success("更新成功");
                this.$emit("cancelEmail");
                this.$emit("getList", this.queryParams);
                this.$refs.upload.clearFiles(); // 清除文件列表
            });
        },
        // 查看附件下载附件
        viewAttachments(val) {
            window.open(this.fileURL + val);
        },
        /**上传地址*/
        UploadUrl() {
            return window.location.origin + "/API/evidence/upload";
        },
        handlePreview(file) { },
        handleRemove(file, fileList) { },
        beforeUpload(flie, fileList) {

        },
        handlSuccess(res, file) {
            const fileSuccess = [{ annexId: res.annexId, annexType: res.annexType, annexName: res.newFileName, annexPath: res.fileName, onlyOfficeFileId: res.onlyOfficeFileId }]
            // this.emailRow.caseAttachList = fileSuccess
            this.files = res
            console.log(res)
        },
    },
};
</script>

<style lang="scss" scoped></style>