Arbitrate-Frontend/src/views/caseManagement/components/uploadCaseDialog.vue

<template>
    <div>
        <el-dialog title="上传证据目录" :visible="uploadCaseVisable" @close="cancel" center :distroy-on-close="true">
            <el-upload class="upload-demo" :before-upload="beforeUpload" ref="upload" accept=".zip"
                action="https://jsonplaceholder.typicode.com/posts/" :action="UploadUrl()" :headers="headers"
                :data="filedata" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess"
                :file-list="fileList" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary" :disabled="flagBtn">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"
                    :disabled="flagBtn">上传压缩包</el-button>
                <div slot="tip" class="el-upload__tip">
                    <div>结构示例</div>
                    <el-tree :data="dataTip"></el-tree>
                    <div>说明:1、压缩包目录结构为三级目录，
                        2、第2级目录名称应为“申请书”或“证据材料”。</div>
                </div>
            </el-upload>
            <div class="title">证据目录结构</div>
            <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
        </el-dialog>
    </div>
</template>
<!-- hearDate -->
<script>
import { evidenceTree } from '@/api/caseAccess/caseEntry.js'
import { getToken } from "@/utils/auth";
export default {
    props: ["uploadCaseVisable", "uploadCaseData"],
    data() {
        return {
            fileList: [],
            data: [],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            filedata: {
                id: this.uploadCaseData.id
            },
            flagBtn: false,
            dataTip: [{
                label: '压缩包名称',
                children: [{
                    label: '申请书',
                    children: [{
                        label: '申请书名称.pdf'
                    }]
                }, {
                    label: '证据材料',
                    children: [{
                        label: '证据1.pdf'
                    }, {
                        label: '证据2.pdf'
                    }]
                }]
            },],
        };
    },
    watch: {
        uploadCaseVisable(val) {
            if (val) {
                this.evidenceTreeFn({ caseId: this.uploadCaseData.id })
            }
        }
    },
    created() {

    },
    methods: {
        UploadUrl() {
            return window.location.origin + "/API/caseApplication/uploadZipFile";
        },
        cancel() {
            this.$emit("uploadCaseCancel");
        },
        submitUpload() {
            this.filedata.id = this.uploadCaseData.id
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleNodeClick(data) {
            console.log(data);
            let headPath = window.location.origin + "/API";
            if(data.annexPath){
                window.open(headPath + data.annexPath, "_blank")
            }
        },
        // 递归替换key
        setData(data) {
            data.forEach((val, i) => {
                val.label = val.evidenceName
                this.setData(val.children)
            })
        },
        // 获取证据目录
        evidenceTreeFn(data) {
            evidenceTree(data).then(res => {
                this.setData(res.data);
                this.data = res.data;
                if (this.data.length > 0) {
                    this.flagBtn = true;
                } else {
                    this.flagBtn = false;
                }
            })
        },
        handleSuccess() {
            this.evidenceTreeFn({ caseId: this.uploadCaseData.id })
        },
        beforeUpload(file) {
            console.log(file.type);
            const isZip = file.type === 'application/x-zip-compressed'
            if (!isZip) {
                this.$message.error('只能上传zip格式的文件')
            }
            return isZip
        }
    },
};
</script>
  
<style lang="scss" scoped>
.title {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 600;
}

.el-upload__tip {
    color: red;
}
</style>