公共导入组件

<!--
 * @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;
        /* background-color: yellow; */
        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;
        /*height: 150px;
        overflow-y: auto;*/
    }

    .pBox p {
        /* border: 1px dashed #ccc; */
        margin: 3px;
        padding: 3px;
        border-radius: 5px;
    }

    /* 
    .isExcelDialogVisible {
        width: 200%;
    } */

    .uploadBtn {
        position: absolute;
        transform: translate(-50%);

    }

    .upload-demo {

        /* transform: translateX(50%); */
        border: none;
    }

    .successClass {
        color: dodgerblue;
    }

    .failClass {
        color: firebrick
    }

    .upLoad {
        width: 100%;
        /* background-color: pink; */
        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
            },