162 lines
4.7 KiB
Vue
162 lines
4.7 KiB
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 { 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> |