This commit is contained in:
fz
2023-11-29 15:45:21 +08:00
4 changed files with 240 additions and 7 deletions
@@ -0,0 +1,197 @@
<template>
<div>
<!-- 立案申请弹框 -->
<el-dialog
title="案件压缩"
:visible="openCompressedPackages"
width="600px"
append-to-body
@close="cancel"
center
>
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-row>
<!-- <el-col :span="16">
<el-form-item label="申请人姓名:" prop="applyName">
<el-input v-model="form.jobName" placeholder="请输入姓名" />
</el-form-item>
</el-col>-->
<el-col :span="15">
<div class="download" style="">
<span> 下载: </span>
<a href="#">
<el-button class="uploadlink" @click="downloadTemplate">案件压缩导入模板</el-button>
</a>
</div>
</el-col>
<el-col :span="15">
<div style="margin:10px 0;font-size:12px;color:grey">
<span>
提示:请将多个excel文件压缩成zip格式后上传
</span>
</div>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="立案申请书:" prop="applybook"> </el-form-item>
</el-col>
<el-col :span="12"> </el-col> -->
</el-row>
<el-row>
<el-form-item :span="24" label="案件压缩包上传:" prop="upload">
<el-upload
class="upload-demo"
ref="uploadZipBatch"
:limit="1"
accept=".zip"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
<div slot="tip" class="el-upload__tip">
支持zip格式文件
</div>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" class="endbutton"><span>确 定</span></el-button>
<el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { importTemplate } from "@/api/caseAccess/caseEntry";
import { getToken } from "@/utils/auth";
export default {
props: ["openCompressedPackages","getcaseApply","queryParams"],
data() {
return {
// key: value,
form: {},
fileList: [],
rules: {
upload: [
{ required: true, message: "案件压缩包不能为空", trigger: "blur" },
],
},
// 案件压缩导入
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/caseApplication/uploadCaseZipFile",
},
};
},
methods: {
submitForm() {
this.$refs.uploadZipBatch.submit();
},
// 取消
cancel() {
this.$emit("cancelCompreess");
},
handleRemove(file, fileList) {},
handlePreview(file) {},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1个文件,本次选择了 ${files.length} `
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
// 下载模板 importTemplate
downloadTemplate() {
// console.log("下载模板");
this.download(
"caseApplication/uploadCaseZipFile",
{},
`case_batch_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
// this.upload.open = false;
this.$emit("cancelCompreess");
this.upload.isUploading = false;
this.$refs.uploadZipBatch.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getcaseApply(this.queryParams);
},
},
};
</script>
<style lang="scss" scoped>
.download {
a {
.uploadlink{
border: none;
color: #2092c7;
}
}
}
::v-deep .el-dialog {
width: 800px;
background: #ffffff;
border-radius: 20px;
}
.endbutton {
width: 154px;
height: 37px;
background: #0072ff;
border-radius: 19px;
span {
width: 96px;
height: 15px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
}
.endbutton1 {
width: 154px;
height: 37px;
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 19px;
span {
width: 31px;
height: 13px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959595;
}
}
</style>