Files
sgxt_web/src/components/export/index.vue

162 lines
4.7 KiB
Vue
Raw Normal View History

2025-04-12 14:54:02 +08:00
<template>
<div class="exportBox">
2025-07-16 18:33:13 +08:00
<el-dialog v-model="show" title="导入文件" width="400px" :show-close="true" :center="true" :before-close="handleClose">
2025-04-12 14:54:02 +08:00
<div class="uplodBox">
2025-07-16 18:33:13 +08:00
<el-upload action="#" drag :on-success="handleSuccess" :on-change="handleChange" :show-file-list="true" :file-list="fileDate" accept=".xls,.xlsx" :auto-upload="false">
2025-04-12 14:54:02 +08:00
<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>
2025-07-16 18:33:13 +08:00
<div>仅支持扩展名.xls , xlsx</div>
2025-04-12 14:54:02 +08:00
</el-upload>
</div>
<div class="check">
2025-07-16 18:33:13 +08:00
<el-checkbox true-label="true" false-label="false" v-model="isSelect">是否替换已存在的数据</el-checkbox>
2025-04-12 14:54:02 +08:00
</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)=>{
2025-07-16 18:33:13 +08:00
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;
}
2025-04-12 14:54:02 +08:00
},{
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);
2025-07-03 21:15:39 +08:00
let token = localStorage.getItem('token')
axios.post(baseUrl.value, formData, {"Content-type": "multipart/form-data",headers:{"Authorization": `${token}`}}).then((res) => {
2025-04-12 14:54:02 +08:00
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 {
2025-07-03 21:15:39 +08:00
color: #0072ff;
2025-04-12 14:54:02 +08:00
}
</style>