完善导入模块
This commit is contained in:
龙运模
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="560" destroy-on-close draggable @closed="$emit('closed')">
|
||||
<el-button type="primary" :size="size" plain @click="importFile">批量导入</el-button>
|
||||
|
||||
<el-dialog v-bind="$attrs" :title="title" v-model="visible" :width="560" destroy-on-close draggable @closed="visible=false">
|
||||
<div class="importBody">
|
||||
<el-upload
|
||||
class="upload"
|
||||
@@ -9,14 +11,27 @@
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeUpload"
|
||||
:http-request="uploadFile"
|
||||
drag
|
||||
multiple
|
||||
:disabled="importDis"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
<span class="laText">请将Excel拖到此处</span>
|
||||
<span class="tipText">，或点击上传</span><em> Excel</em>
|
||||
<div v-if="!importTrue">
|
||||
<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
<span class="laText">请将Excel拖到此处</span>
|
||||
<span class="tipText">，或点击上传</span><em> Excel</em>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="el-upload__text">
|
||||
<el-icon class="trueIcon el-icon--upload">
|
||||
<sc-icon-FormXls />
|
||||
<div class="deleteFile" @click="deleteFile"><el-icon class="icon"><el-icon-Close/></el-icon></div>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">{{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
<span class="tip">如果数据导入中途业务出错，请不要刷新页面，修改后继续点击导入</span>
|
||||
@@ -24,16 +39,17 @@
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="importBox">
|
||||
<div class="importBox" v-if="progressShow">
|
||||
<div class="name">导入进度</div>
|
||||
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="67" />
|
||||
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="importInfo.rate" />
|
||||
</div>
|
||||
<div class="errText"></div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false">取 消</el-button>
|
||||
<el-button type="primary">确定导入</el-button>
|
||||
<el-button type="primary" @click="save">确定导入</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -41,30 +57,55 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "import",
|
||||
emits: ['success', 'closed'],
|
||||
emits: ['parentParams', 'closed', "importSuccess"],
|
||||
props:{
|
||||
size:{type:String, default:'small'},
|
||||
title:{type:String, default: ""},
|
||||
text:{type:String, default: ""}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
mode: "import",
|
||||
titleMap: {
|
||||
import: '批量导入公司组织'
|
||||
},
|
||||
visible: false,
|
||||
|
||||
oss:{
|
||||
host:''
|
||||
},
|
||||
upload_data:{}
|
||||
upload_data:{},
|
||||
fileShow:false,
|
||||
params:{},
|
||||
|
||||
importDis:false,
|
||||
importTrue:false,
|
||||
progressShow:false,
|
||||
importInfo:{},
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
visible(val){
|
||||
if(val){
|
||||
// 获取新消息
|
||||
this.$socketApi.getSock(this.getWsResult);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
open(mode='import'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
getWsResult(res){
|
||||
if(res.data && (res.data.type == 5)){
|
||||
this.importInfo = res.data;
|
||||
this.progressShow = true;
|
||||
if(res.data.status == 1){
|
||||
this.progressShow = false;
|
||||
this.$emit('importSuccess');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
return this
|
||||
// 导入文件
|
||||
importFile(){
|
||||
this.visible = true;
|
||||
},
|
||||
// 上传前
|
||||
beforeUpload(file){
|
||||
@@ -73,33 +114,35 @@ export default {
|
||||
this.$message.warning(`只能选择的excel文件类型`);
|
||||
return false;
|
||||
}
|
||||
return new Promise((resolve)=>{
|
||||
setTimeout(async ()=>{
|
||||
let params = {
|
||||
dir:"user/file/"
|
||||
}
|
||||
const res = await this.$API.oss.ossGet.post(params);
|
||||
this.oss = res.data;
|
||||
this.upload_data = {
|
||||
name: new Date().getTime() + file.name,
|
||||
key: this.oss.dir +file.name,
|
||||
policy: this.oss.policy,
|
||||
OSSAccessKeyId: this.oss.accessid,
|
||||
success_action_status: "200",
|
||||
callback: this.oss.callback,
|
||||
signature: this.oss.signature,
|
||||
"Cache-Control": this.oss.cache_control,
|
||||
};
|
||||
resolve()
|
||||
},100)
|
||||
})
|
||||
|
||||
|
||||
return true
|
||||
},
|
||||
async uploadFile({ file }) {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
for (const key in this.upload_data) {
|
||||
formData.append(key, this.upload_data[key]);
|
||||
}
|
||||
this.params = formData;
|
||||
this.importTrue = true;
|
||||
this.importDis = true;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
deleteFile(){
|
||||
this.importTrue = false;
|
||||
setTimeout(()=>{
|
||||
this.importDis = false;
|
||||
},100)
|
||||
},
|
||||
save(){
|
||||
this.$emit('parentParams',this.params);
|
||||
},
|
||||
// 上传成功
|
||||
handleSuccess(file){
|
||||
this.imageUrl = this.oss.host+'/'+file.data.filename;
|
||||
this.$emit('parentParams',this.imageUrl);
|
||||
handleSuccess(){
|
||||
// console.log(res,file,files)
|
||||
// this.$message.success('上传成功，马上开始导入数据');
|
||||
},
|
||||
// 上传失败
|
||||
handleError(){
|
||||
@@ -117,12 +160,34 @@ export default {
|
||||
width: 54px;height: 54px;
|
||||
}
|
||||
.upload :deep(.el-upload__text){
|
||||
.trueIcon{
|
||||
position: relative;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.laText{
|
||||
color: var(--el-color-dark);
|
||||
}
|
||||
.tipText{
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
.deleteFile{
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--el-color-danger);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
width: 12px;height: 12px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.upload :deep(.el-upload__tip){
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user