变更项目缩写
This commit is contained in:
303
ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue
Normal file
303
ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="550px"
|
||||
center
|
||||
append-to-body
|
||||
@open="handleDialogOpen"
|
||||
@close="handleDialogClose"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
custom-class="import-dialog-wrapper"
|
||||
>
|
||||
<!-- 全屏Loading遮罩层 -->
|
||||
<div v-show="isUploading" class="import-loading-overlay">
|
||||
<i class="el-icon-loading"></i>
|
||||
<p>正在导入中,请稍候...</p>
|
||||
</div>
|
||||
|
||||
<el-form :model="formData" label-position="top" size="medium">
|
||||
<!-- 导入类型 -->
|
||||
<el-form-item label="导入类型">
|
||||
<el-radio-group v-model="formData.importType" @change="handleImportTypeChange" style="width: 100%">
|
||||
<el-radio label="person" border>个人中介</el-radio>
|
||||
<el-radio label="entity" border>机构中介</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<el-form-item label="选择文件">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="headers"
|
||||
:action="uploadUrl"
|
||||
:disabled="isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileError"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
仅支持 .xls 和 .xlsx 格式,文件大小不超过 10MB
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 其他选项 -->
|
||||
<el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-checkbox v-model="formData.updateSupport" :disabled="isUploading">
|
||||
更新已存在的数据
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-link type="primary" :underline="false" @click="handleDownloadTemplate">
|
||||
<i class="el-icon-download"></i>
|
||||
下载导入模板
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload2"
|
||||
:loading="isUploading"
|
||||
:disabled="!isFileSelected"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ isUploading ? '导入中...' : '开始导入' }}
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" @click="visible = false" :disabled="isUploading">
|
||||
取 消
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getToken} from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
name: "ImportDialog",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "数据导入"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
importType: "person",
|
||||
updateSupport: 0
|
||||
},
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
isUploading: false,
|
||||
isFileSelected: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
uploadUrl() {
|
||||
const baseUrl = process.env.VUE_APP_BASE_API;
|
||||
const updateSupport = this.formData.updateSupport ? 1 : 0;
|
||||
if (this.formData.importType === 'person') {
|
||||
return `${baseUrl}/ccdi/intermediary/importPersonData?updateSupport=${updateSupport}`;
|
||||
} else {
|
||||
return `${baseUrl}/ccdi/intermediary/importEntityData?updateSupport=${updateSupport}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.$emit("update:visible", val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogOpen() {
|
||||
this.isFileSelected = false;
|
||||
},
|
||||
handleDialogClose() {
|
||||
if (this.$refs.upload) {
|
||||
this.$refs.upload.clearFiles();
|
||||
}
|
||||
this.isFileSelected = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
handleImportTypeChange() {
|
||||
if (this.$refs.upload) {
|
||||
this.$refs.upload.clearFiles();
|
||||
}
|
||||
this.isFileSelected = false;
|
||||
},
|
||||
handleDownloadTemplate() {
|
||||
if (this.formData.importType === 'person') {
|
||||
this.download('dpc/intermediary/importPersonTemplate', {}, `个人中介黑名单模板_${new Date().getTime()}.xlsx`);
|
||||
} else {
|
||||
this.download('dpc/intermediary/importEntityTemplate', {}, `机构中介黑名单模板_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
},
|
||||
handleFileUploadProgress() {
|
||||
this.isUploading = true;
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
this.isFileSelected = fileList.length > 0;
|
||||
},
|
||||
handleFileRemove(file, fileList) {
|
||||
this.isFileSelected = fileList.length > 0;
|
||||
},
|
||||
handleFileSuccess(response) {
|
||||
this.isUploading = false;
|
||||
this.visible = false;
|
||||
this.$emit("success");
|
||||
this.$msgbox({
|
||||
title: '导入结果',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `<div style="overflow-y: auto; max-height: 60vh; padding-right: 10px; line-height: 1.6;">${response.msg}</div>`,
|
||||
confirmButtonText: '确定',
|
||||
customClass: 'import-result-dialog'
|
||||
});
|
||||
this.$refs.upload.clearFiles();
|
||||
},
|
||||
handleFileError() {
|
||||
this.isUploading = false;
|
||||
this.$modal.msgError("导入失败,请检查文件格式是否正确");
|
||||
this.$refs.upload.clearFiles();
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.upload.submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
|
||||
.el-radio {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
|
||||
&:first-child {
|
||||
.el-radio__label {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.el-radio__label {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-bordered {
|
||||
padding: 10px 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100% !important;
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-icon-upload {
|
||||
font-size: 50px;
|
||||
color: #409EFF;
|
||||
margin: 15px 0 10px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
|
||||
em {
|
||||
color: #409EFF;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
padding: 5px 0 0;
|
||||
|
||||
.el-button {
|
||||
min-width: 110px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.import-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
|
||||
.el-icon-loading {
|
||||
font-size: 48px;
|
||||
color: #409EFF;
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user