137 lines
4.4 KiB
Vue
137 lines
4.4 KiB
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> |