<!--
* @Descripttion:
* @version:
* @Author:
* @Date: 2021-11-08 17:24:06
* @LastEditTime: 2021-11-10 09:26:44 --> <template> <!-- 共通导入组件 --> <el-dialog v-model="isExcelDialogVisible" width="30%" :before-close="handleClose" :close-on-click-modal="false"> <el-upload v-if="isUploadSuccess" :data="data" class="upload-demo" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :action="action" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :on-change="handleChange" :show-file-list="false" :file-list="fileList"> <el-button size="medium" class="uploadBtn" type="primary">点击上传</el-button> </el-upload> <div class="upLoad"> <a href="#" v-if="tlpFlg">下载模板</a> <span v-if="!tlpFlg" style="font-size: 20px;">上传过程记录</span>
</div>
<div class="pBox" v-if="textList.length > 0">
<div v-for="(item,index) in textList" :key="index">
<div v-html="item"></div>
</div>
<a :href="path" v-if="path">点击下载异常说明文件</a>
</div>
</el-dialog>
</template>
<script>
import base from "@/utils/baseUtils";
import { apiCall, apiUrlEnums } from "@/api/requestApi";
export default {
props: {
excelDialogVisible: {
type: Boolean,
default: false
},
typeCode: null,
apiUrl: null,
apiParam: {
type: Object
}
},
emits: ["isExcelDialogVisible"],
data() {
return {
headers: {
"userToken": base.getToken()
},
tlpFlg: true,
action: base.getApiUrl() + "/excelUpload.do",
isExcelDialogVisible: false,
isUploadSuccess: true,
textList: [],
path: '',
data: {
typeCode: ''
},
fileList: [],
apiUrls: '',
apiParams: ''
};
},
methods: {
handleClose() {
this.isExcelDialogVisible = false
this.$emit('isExcelDialogVisible', false)
},
handleChange(file, fileList) {
this.fileList = fileList.slice(-3);
},
handleError() {
this.isUploadSuccess = false
this.textList.push('<font color="#67C23A">文件开始上传......</font>')
this.textList.push('<font color="#67C23A">文件上传中......</font>')
this.textList.push('<font color="red">文件上传失败......</font>')
},
handleSuccess(e) {
this.tlpFlg = false
this.isUploadSuccess = false
this.textList.push('<font color="#67C23A">文件开始上传......</font>')
this.textList.push('<font color="#67C23A">文件上传中......</font>')
if (e.code === "0") {
this.textList.push('<font color="#67C23A">' + e.message + '</font>')
this.apiParams.fileId = e.fileId
apiCall(this.apiUrls, this.apiParams).then(res => {
if (res.code === "0") {
this.textList.push('<font color="#67C23A">' + res.message + '</font>')
this.getUploadStatus({ fileId: res.fileId })
} else {
this.isUploadSuccess = true
this.textList.push('<font color="red">' + res.message + '</font>')
}
});
} else {
this.textList.push('<font color="red">' + e.message + '</font>')
}
},
getUploadStatus(param) {
apiCall(apiUrlEnums.getUploadStatus, param).then(res => {
if (res.code === "0") {
if (res.data !== null && res.data !== undefined) {
if (res.data.code === 4000) {
this.textList.push('<font color="red">' + res.data.message + '</font>')
this.path = res.data.data.filePath
} else if (res.data.code === 5000) {
this.textList.push('<font color="red">' + res.data.message + '</font>')
} else if (res.data.code === 2000) {
this.textList.push('<font color="#67C23A">' + res.data.message + '</font>')
} else {
this.textList.push('<font color="#67C23A">' + res.data.message + '</font>')
setInterval(this.getUploadStatus(param), 2000)
}
} else {
setInterval(this.getUploadStatus(param), 2000)
}
} else {
setInterval(this.getUploadStatus(param), 2000)
}
});
}
},
watch: {
excelDialogVisible(newValue) {
this.isExcelDialogVisible = newValue
if (newValue === true) {
this.tlpFlg = true
this.isUploadSuccess = true
this.textList = []
this.path = ''
}
},
typeCode: {
handler(val) {
this.data.typeCode = val
},
deep: true,
immediate: true
},
apiUrl: {
handler(val) {
this.apiUrls = val
},
deep: true,
immediate: true
},
apiParam: {
handler(val) {
if (val) {
this.apiParams = val
} else {
this.apiParams = {}
}
},
deep: true,
immediate: true
}
}
}
</script>
<style scoped>
:deep(.el-upload) {
display: inline-block;
text-align: center;
cursor: pointer;
outline: 0;
margin-left: 50%;
transform: translateX(-50%);
width: 120px;
height: 48px;
border: none;
position: relative;
}
:deep(.el-upload .upload-demo) {
display: inline;
}
.pBox {
margin-top: 20px;
padding: 5px;
}
.pBox p {
margin: 3px;
padding: 3px;
border-radius: 5px;
}
.uploadBtn {
position: absolute;
transform: translate(-50%);
}
.upload-demo {
border: none;
}
.successClass {
color: dodgerblue;
}
.failClass {
color: firebrick
}
.upLoad {
width: 100%;
display: flex;
justify-content: center;
}
</style>
父组件:
<el-button type="primary" @click="importHandle()" v-if="inventoryAdjustStatus == 1"><i class="el-icon-upload2"></i> 导入</el-button>
<v-common-import typeCode="accountInventoryAdjustImport" :apiUrl='apiUrlString' :apiParam="{adjustId:search.inventoryAdjustId}" :excelDialogVisible="excelDialogVisible" @isExcelDialogVisible="onIsExcelDialogVisible"></v-common-import>
import vCommonImport from "@/components/assembly/vCommonImport";
components: {
vCommonImport,
},
// 导入
data里数据 excelDialogVisible: false,
onIsExcelDialogVisible(e) {
this.excelDialogVisible = e
if (e == false) {
this.getAccountInventoryAdjustDetailsList()
}
},
importHandle() {
this.excelDialogVisible = true
},