sgxt_web/src/components/export/index.vue

<template>
  <div class="exportBox">
    <el-dialog
      v-model="show"
      title="导入文件"
      width="400px"
      :show-close="true"
      :center="true"
      :before-close="handleClose"
    >
      <div class="uplodBox">
        <el-upload
          action="#"
          drag
          :on-success="handleSuccess"
          :on-change="handleChange"
          :show-file-list="true"
          :file-list="fileDate"
          accept=".xls,.xlsx"
          :auto-upload="false"
        >
          <el-icon class="el-icon-upload" size="100"><upload-filled /></el-icon>
          <div class="el-upload-text">
            拖动或者点击上传或者<span @click.stop="downloadModel" class="model">下载模板</span>
          </div>
          <div>仅支持扩展名：.xls , xlsx</div>
        </el-upload>
      </div>
      <div class="check">
        <el-checkbox true-label="true" false-label="false" v-model="isSelect"
          >是否替换已存在的数据</el-checkbox
        >
      </div>
      <div class="foot">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { useStore } from "vuex";
import { ref, defineProps, defineEmits, watch } from "vue";
const store = useStore();
const props = defineProps({
  show: { type: Boolean, default: false },
  lx:{ type: String, default:'policeF'}
});
const headers = ref({
  Authorization: "Bearer " + store.getters.token
});
const isSelect = ref(false);
const emits = defineEmits(["closeImport", "handleImport"]);
const fileDate = ref([]);
const filesList = ref({});
const baseUrl = ref('')//上传地址
const modelUrl = ref('')//下载模板地址
watch(()=>props.lx,(val)=>{
    switch (val) {
        case 'policeF':
            baseUrl.value = '/mosty-api/mosty-jcgl/tbJcglXfll/importData'
            modelUrl.value = '/mosty-api/mosty-jcgl/tbJcglXfll/importTemplate'
            break;
        case 'car':
            baseUrl.value = '/mosty-api/mosty-jcgl/tpJcglXfcl/importData'
            modelUrl.value = '/mosty-api/mosty-jcgl/tpJcglXfcl/importTemplate'
            break;
        case 'jyqx':
            baseUrl.value = '/mosty-api/mosty-jcgl/tpJcglJyqx/importData'
            modelUrl.value = '/mosty-api/mosty-jcgl/tpJcglJyqx/importTemplate'
            break;
        case 'znzb':
            baseUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importData'
            modelUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importTemplate'
            break;
        case 'fjnr':
            baseUrl.value = '/mosty-api/mosty-gsxt/tbGsxtRqfjNr/importFxnr'
            // modelUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importTemplate'
            break;
        default:
            break;
    }
    
},{
    immediate:true
})

// 关闭
function handleClose() {
  fileDate.value = [];
  filesList.value = {};
  emits("closeImport");
}

// 覆盖前一个文件
function handleChange(file, fileList) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  let whiteList = ["xls", "xlsx"];
  if (!whiteList.includes(fileSuffix)) {
    fileList.splice(0, 1);
    filesList.value = {};
    ElMessage.warning("上传只能是.xls、.xlsx 格式,请重新上传");
    return false;
  } else {
    if (fileList.length > 1) {
      fileList.splice(0, 1);
    }
    filesList.value = file;
  }
}
// 上传成功
function handleSuccess(row) {}
// 下载模板
function downloadModel() {
  window.open(modelUrl.value, "_self");
}

// 确定上传
function onComfirm() {
  if (filesList.value.length <= 0) {
    ElMessage.warning("请上传文件");
  } else {
    let file = filesList.value.raw;
    let formData = new FormData();
    formData.append("file", file);
    formData.append("updateSupport", isSelect.value);
    let token = localStorage.getItem('token')
    axios.post(baseUrl.value, formData, {"Content-type": "multipart/form-data",headers:{"Authorization": `${token}`}}).then((res) => {
        if (res.status == 200) {
          let { data, message, code } = res.data;
          if (code == -1) ElMessage({ type:'warning', message:message, dangerouslyUseHTMLString:true });
          if(code == 10000) ElMessage({ type:'success', message:data, dangerouslyUseHTMLString:true });
          emits("handleImport");
          handleClose();
        } else {
          ElMessage.warning("文件上传失败");
        }
      });
  }
}
</script>

<style lang="scss" scoped>
.exportBox {
  .uplodBox {
    width: 100%;
    .el-icon {
      font-size: 64px;
      color: #505050;
    }
    .el-icon-upload {
      top: 33px;
    }
    ::v-deep .el-upload-dragger {
      line-height: 50px;
    }
    .el-upload-text {
      color: #505050;
      > .model {
        color: #409eff;
      }
    }
  }
  .foot {
    text-align: center;
    margin: 10px 0;
  }
  .check {
    height: 20px;
  }
}
</style>
<style>
.el-upload-list__item-name {
  color: #0072ff;
}
</style>