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

<template>
  <div>
    <!-- 立案申请弹框 -->
    <el-dialog
      title="批量立案"
      :visible="openbatch"
      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="8">
            <div class="download" style="margin-bottom: 20px">
              <span> 下载： </span>
              <a href="#">
                <el-button class="uploadlink" @click="downloadTemplate">批量导入模板</el-button>
              </a>
            </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="uploadbatch"
              :limit="1"
              accept=".xlsx, .xls"
              :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">
                只接收.xlsx, .xls格式文件
              </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: ["openbatch","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/importData",
      },
    };
  },
  methods: {
    // 批量提交立案申请
    submitForm() {
        this.$refs.uploadbatch.submit();
    },
    // 取消
    cancel() {
      //   this.openbatch = false;
      this.$emit("cancelBatch");
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 下载模板 importTemplate
    downloadTemplate() {
    //   console.log("下载模板");
      this.download(
        "caseApplication/importTemplate",
        {},
        `case_batch_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
    //   this.upload.open = false;
      this.$emit("cancelBatch");
      this.upload.isUploading = false;
      this.$refs.uploadbatch.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>