Mediation-Frontend/src/views/caseManagement/components/evidenceDialog.vue

<template>
    <div>
        <el-dialog title="上传证据" :visible="evidenceVisable" @close="cancel" center :distroy-on-close="true">
            <el-descriptions title="案件内容" :column="2" border>
                <el-descriptions-item label="案件编号">{{ evidenceData.caseNum }}</el-descriptions-item>
                <el-descriptions-item label="申请人">{{ evidenceData.applicationName }}</el-descriptions-item>
                <!-- <el-descriptions-item label="案件标的">{{ evidenceData.caseSubjectAmount }}</el-descriptions-item> -->
                <el-descriptions-item label="案件状态">
                    <el-tag size="small">{{ evidenceData.caseStatusName }}</el-tag>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="仲裁方式">{{ evidenceData.arbitratMethodName }}</el-descriptions-item> -->
                <el-descriptions-item label="申请人证据">
                    <div style="color: #104fad;cursor:pointer" v-for="(item, index) in fileListData"
                        @click="preview(item.annexPath)" :key="index">
                        {{ item.annexName }}</div>
                </el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 30px;">
                <el-upload class="upload-demo" ref="upload" action="" :file-list="fileList" accept=".png,.jpg,.doc,.docx,.txt,.pdf"
                    :auto-upload="false" :http-request="uploadFile" :on-change="beforeAvatarUpload" :before-remove="beforeRemove" multiple>
                    <el-button type="primary"><span>选择证据</span></el-button>
                </el-upload>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton1" round><span>取 消</span></el-button>
                <el-button @click="upload" class="endbutton1" type="primary" round><span>点击上传</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { getFileList, batchUpload } from '@/api/caseManagement/caseManagement'
import { getToken } from "@/utils/auth";
export default {
    props: ["evidenceVisable", "evidenceData"],
    data() {
        return {
            fileListData: [],
            // 上传文件的列表
            uploadFiles: [],
            // 上传文件的个数
            filesLength: 0,
            info: {
                annexType: 2,
            },
            fileList:[]
            // headers: {
            //     Authorization: "Bearer " + getToken(),
            // },
        };
    },
    watch: {
        evidenceVisable(val) {
            this.fileList = []
            if (val) {
                this.getEvidenceList({ caseAppliId: this.evidenceData.id, annexTypeList: "2" })
            }
        }
    },
    created() {
        this.info.id = this.evidenceData.id;
    },
    methods: {
        preview(data) {
            window.open(
                window.location.origin + "/API" + data,
                "_blank"
            );
        },
        UploadUrl() {
            return window.location.origin + "/API/evidence/upload";
        },
        cancel() {
            this.$emit("cancelEvidence");
        },
        // 修改当前文件列表长度
        // changeFileLength(file, fileList) {
        //     this.uploadFiles.push(file)
        // },
        // 删除文件
        beforeRemove(file, fileList){
            this.uploadFiles = fileList
        },
        // 文件上传之前处理
        beforeAvatarUpload(file,fileList) {
            console.log(file,fileList,"before");
            this.uploadFiles = [];
            // this.uploadFiles.push(file)
            this.uploadFiles = fileList
        },
        // 用户点击上传调用
        async upload() {
            // 触发上传 调用配置 :http-request="uploadFile"
            // 即触发 uploadFile函数
            this.uploadFile()
            // await this.$refs.upload.submit();
            // 上传完成后执行的操作 ...
        },
        // 该函数还是会被调用多次
        // 每次param参数传入一个文件
        uploadFile() {
            // 将文件加入需要上传的文件列表
            // 当uploadFiles长度等于用户需要上传的文件数时进行上传
            // 创建FormData上传
            if (this.uploadFiles.length === 0) {
                this.$message.warning('请选取文件')
                return
            }
            let fd = new FormData()
            // 将全部文件添加至FormData中
            this.uploadFiles.forEach(file => {
                fd.append('file', file.raw)
            })
            // // 将附加信息添加至FormData
            fd.append("id", this.evidenceData.id)
            fd.append("annexType", this.info.annexType)
            // 上传文件
            batchUpload(fd).then(res => {
                this.$modal.msgSuccess("上传成功");
                this.cancel()
            })
        },
        // 获取案件申请人证据列表
        getEvidenceList(data) {
            getFileList(data).then(res => {
                this.fileListData = res.data;
            })
        }
    },
};
</script>
  
<style lang="scss" scoped>
.steps {
    display: flex;
    flex-wrap: wrap;
}
</style>