|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="leo-excel-uploader">
|
|
|
+ <el-upload
|
|
|
+ class="excel-uploader-box"
|
|
|
+ v-show="uploaderShow"
|
|
|
+ :action="uploaderRequestUrl"
|
|
|
+ name="file"
|
|
|
+ :headers="uploaderHeaders"
|
|
|
+ :data="uploaderFormData"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="uploaderHandleBefore"
|
|
|
+ :on-success="uploaderHandleSuccess"
|
|
|
+ :disabled="uploaderDisabled"
|
|
|
+ v-loading="uploaderLoading"
|
|
|
+ >
|
|
|
+ <el-button type="primary">{{uploadBtnTitle}}</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog
|
|
|
+ title="进度提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ width="30%">
|
|
|
+ <el-progress :percentage="importPercent"></el-progress>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import { getToken, apiImportOrderDecToExcelTable, apiImportOrderDec } from '@/api/upload'
|
|
|
+ export default {
|
|
|
+ name: 'LeoExcelUploader',
|
|
|
+ props: {
|
|
|
+ uploadBtnTitle: {
|
|
|
+ type: String,
|
|
|
+ default: 'Upload',
|
|
|
+ },
|
|
|
+ requestUploadRoute: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ requestImportToExcelTableRoute: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ requestImportExcelTableToDataRoute: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ importRowCount: {
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ uploaderSuccessCanChange: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ otherParams: {
|
|
|
+ type: Object,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ finishCallbackFunc: {
|
|
|
+ type:Function,
|
|
|
+ default:null,
|
|
|
+ },
|
|
|
+ excelOption: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ uploaderShow: true,
|
|
|
+ uploaderLoading: false,
|
|
|
+ uploaderFormData: {
|
|
|
+ 'uploadToken': '',
|
|
|
+ 'excelOption': this.excelOption,
|
|
|
+ },
|
|
|
+ uploaderRequestUrl: `${this.requestUploadRoute}`,
|
|
|
+ importRequestUrl: `${this.requestImportRoute}`,
|
|
|
+ uploaderHeaders: {
|
|
|
+ 'Device-Type': 'pc',
|
|
|
+ 'Suppress-Response-Code': '1',
|
|
|
+ 'Authorization': '',
|
|
|
+ },
|
|
|
+ uploaderDisabled: false,
|
|
|
+ successImageUrl: null,
|
|
|
+ dialogVisible: false,
|
|
|
+ importPercent: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uploaderHandleBefore() {
|
|
|
+ if (!this.importRowCount || this.importRowCount <= 1) {
|
|
|
+ this.$message({
|
|
|
+ message: '请填写文件总行数，并且总行数大于1',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const auth_token = localStorage.accessToken
|
|
|
+ this.uploaderHeaders.Authorization = 'Bearer ' + auth_token
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ getToken().then(response => {
|
|
|
+ this.uploaderFormData.uploadToken = response.data
|
|
|
+ this.uploaderLoading = true
|
|
|
+ resolve(true)
|
|
|
+ }).catch(() => {
|
|
|
+ this.uploaderLoading = true
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ reject(false)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploaderHandleSuccess(response, file) {
|
|
|
+ if (response.success) {
|
|
|
+ this.$message({
|
|
|
+ message: 'Successful',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ // 显示进度框
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.importPercent = 0
|
|
|
+ // 导入excel
|
|
|
+ this.importToExcelTable(response.data.excelImportId, 1, 1000)
|
|
|
+
|
|
|
+ if (!this.uploaderSuccessCanChange) {
|
|
|
+ this.uploaderShow = false
|
|
|
+ this.uploaderDisabled = true
|
|
|
+ this.uploaderLoading = false
|
|
|
+ }
|
|
|
+ this.$emit('on-success', response.data)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: response.data,
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ this.uploaderLoading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ importToExcelTable(excelImportId, startRow = 0, limit = 1000) {
|
|
|
+ let _this = this
|
|
|
+ let importRowCount = Number.parseInt(_this.importRowCount)
|
|
|
+ let postParams = {
|
|
|
+ excelImportId: excelImportId,
|
|
|
+ rowCount: importRowCount,
|
|
|
+ startRow: startRow,
|
|
|
+ limit: limit > importRowCount ? importRowCount : limit,
|
|
|
+ }
|
|
|
+ for (let key in _this.otherParams ) {
|
|
|
+ postParams[key] = _this.otherParams[key]
|
|
|
+ }
|
|
|
+
|
|
|
+ apiImportOrderDecToExcelTable(_this.requestImportToExcelTableRoute, postParams).then(response => {
|
|
|
+ if (!response.data.finish) {
|
|
|
+ // 完成一次的进度占50%的多少
|
|
|
+ let percent = parseInt(startRow / importRowCount * 50)
|
|
|
+ if (_this.importPercent + percent >= 50) {
|
|
|
+ _this.importPercent = 50
|
|
|
+ } else {
|
|
|
+ if (_this.importPercent + percent >= 100) {
|
|
|
+ _this.importPercent = 100
|
|
|
+ } else {
|
|
|
+ _this.importPercent += percent
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this.importToExcelTable(excelImportId, startRow + limit, limit)
|
|
|
+ } else {
|
|
|
+ _this.importPercent = 50
|
|
|
+ _this.importExcelTableToData(excelImportId, 0, 2)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ _this.importPercent = 0
|
|
|
+ _this.dialogVisible = false
|
|
|
+ _this.uploaderLoading = false
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ importExcelTableToData(excelImportId, offset = 0, limit = 100) {
|
|
|
+ let _this = this
|
|
|
+ let postParams = {
|
|
|
+ excelImportId: excelImportId,
|
|
|
+ offset: offset,
|
|
|
+ limit: limit,
|
|
|
+ }
|
|
|
+ for (let key in this.otherParams ) {
|
|
|
+ postParams[key] = this.otherParams[key]
|
|
|
+ }
|
|
|
+ apiImportOrderDec(_this.requestImportExcelTableToDataRoute, postParams).then(response => {
|
|
|
+ if (!response.data.finish) {
|
|
|
+ let percent = Number.parseInt(offset / _this.importRowCount * 50)
|
|
|
+ if (_this.importPercent + percent >= 100) {
|
|
|
+ _this.importPercent = 100
|
|
|
+ } else {
|
|
|
+ _this.importPercent += percent
|
|
|
+ }
|
|
|
+ _this.importExcelTableToData(excelImportId, offset + limit, limit)
|
|
|
+ } else {
|
|
|
+ _this.importPercent = 100
|
|
|
+ _this.dialogVisible = false
|
|
|
+ _this.uploaderLoading = false
|
|
|
+ if( _this.finishCallbackFunc !== null ) {
|
|
|
+ _this.finishCallbackFunc()
|
|
|
+ }
|
|
|
+ _this.$message({
|
|
|
+ message: '导入完成',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ _this.importPercent = 0
|
|
|
+ _this.dialogVisible = false
|
|
|
+ _this.uploaderLoading = false
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+
|
|
|
+ </style>
|
|
|
+
|
david