提交代码

src/components/export/index.vue

@@ -0,0 +1,179 @@
+<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)=>{
+    let url = ''
+    let moyRL = ''
+    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;
+        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);
+    axios.post(baseUrl.value, formData, {"Content-type": "multipart/form-data"})
+      .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: #fff;
+}
+</style>