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">只能上传zip文件，并且格式为一级目录上传申请书证据材料，二级目录为申请书和证据材料</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
        };
    },
    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);
        },
        // 递归替换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>