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

<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-form-item :span="24" label="案件压缩包上传：" prop="upload">
            <el-upload class="upload-demo" ref="uploadZipBatch" :limit="1" accept=".zip" :headers="upload.headers"
              :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess" :auto-upload="false" :data="paramsData" 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-form-item :span="24" label="调解书模板" prop="templateId">
            <el-select v-model="form.templateId" placeholder="请选择">
              <el-option v-for="dict in templateList" :key="dict.id" :label="dict.temName" :value="dict.id"></el-option>
            </el-select>
          </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 {
  getTemplate,
} from "@/api/officialSeal/officialSeal.js";
import { getToken } from "@/utils/auth";
export default {
  props: ["openCompressedPackages", "getList", "queryParams"],
  data() {
    return {
      //   key: value,
      form: {},
      fileList: [],
      templateList: [],
      rules: {
        // upload: [
        //   { required: true, message: "案件压缩包不能为空", trigger: "blur" },
        // ],
        templateId: [
          { required: true, message: "调解书模板不能为空", trigger: "blur" },
        ],
      },
      paramsData:{
        // templateId:this.form.templateId
      },
      // 案件压缩导入
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        // updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/caseApplication/uploadCaseZipFile",
      },
    };
  },
  watch: {
    openCompressedPackages(val) {
      if (val) {
        this.form = {}
        this.getTemplateFn({
          pageNum: 1,
          pageSize: 10000000,
        })
      }
    },
  },
  methods: {
    submitForm() {
      this.paramsData.templateId = this.form.templateId;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$refs.uploadZipBatch.submit();
        }
      })
    },
    // 获取裁决书模板
    getTemplateFn(data) {
      getTemplate(data).then(res => {
        console.log(res.rows, "KKKKKKKKKKKKKKKKKKKKKKK");
        this.templateList = res.rows;
      })
    },
    // 取消
    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();
      if (response.code == 200) {
        this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
          "导入结果",
          { dangerouslyUseHTMLString: true }
        )
      } else {
        this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          "导入压缩失败" +
          "</div>",
          "导入结果",
          { dangerouslyUseHTMLString: true }
        )
      }

      this.getList(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>