上传添加导入添加loading

qianbao
1 parent 78ceab92
Showing 2 changed files with 49 additions and 36 deletions
config/dev.env.js
src/views/bigscreenDesigner/designer/index.vue
 'use strict'
 const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
-const isDev = false;
+const isDev = true;
 const ipAddresses = isDev?"weberp.xlyprint.cn":"127.0.0.1:8080";
-  //window.location.host;
-
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   BASE_API: '"http://'+ipAddresses+'/xlyReport"',
@@ -131,6 +131,7 @@
               :headers="headers"
               accept=".zip"
               :on-success="handleUpload"
+              :before-upload="beforeUpload"
               :on-error="handleError"
               :show-file-list="false"
               :limit="1"
@@ -140,34 +141,42 @@
           </el-tooltip>
         </span>
         <span class="btn border-left" v-permission="'bigScreenManage:import'">
-          <ul class="nav">
-            <li>
-              <i class="iconfont icondaochu"></i
-              ><i class="el-icon-arrow-down"></i>
-              <ul>
-                <li>
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    content="适合当前系统"
-                    placement="right"
-                  >
-                    <div @click="exportDashboard(1)">导出(包含数据集)</div>
-                  </el-tooltip>
-                </li>
-                <li>
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    content="适合跨系统"
-                    placement="right"
-                  >
-                    <div @click="exportDashboard(0)">导出(不包含数据集)</div>
-                  </el-tooltip>
-                </li>
-              </ul>
-            </li>
-          </ul>
+           <i class="iconfont icondaochu" @click="exportDashboard(1)"></i>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="导出"
+              placement="right"
+            >
+            </el-tooltip>
+<!--          <ul class="nav">-->
+<!--            <li>-->
+<!--              <i class="iconfont icondaochu"></i-->
+<!--              ><i class="el-icon-arrow-down"></i>-->
+<!--              <ul>-->
+<!--                <li>-->
+<!--                  <el-tooltip-->
+<!--                    class="item"-->
+<!--                    effect="dark"-->
+<!--                    content="适合当前系统"-->
+<!--                    placement="right"-->
+<!--                  >-->
+<!--                    <div @click="exportDashboard(1)">导出(包含数据集)</div>-->
+<!--                  </el-tooltip>-->
+<!--                </li>-->
+<!--                <li>-->
+<!--                  <el-tooltip-->
+<!--                    class="item"-->
+<!--                    effect="dark"-->
+<!--                    content="适合跨系统"-->
+<!--                    placement="right"-->
+<!--                  >-->
+<!--                    <div @click="exportDashboard(0)">导出(不包含数据集)</div>-->
+<!--                  </el-tooltip>-->
+<!--                </li>-->
+<!--              </ul>-->
+<!--            </li>-->
+<!--          </ul>-->
         </span>
       </div>
       <!-- 中间设计-->
@@ -301,7 +310,6 @@
 import {
   insertDashboard,
   detailDashboard,
-  importDashboard,
   exportDashboard,
 } from "@/api/bigscreen";
 import { widgetTools, getToolByCode } from "./tools/index";
@@ -319,7 +327,6 @@ import { debounce } from &#39;@/utils/debounce&#39;; // 引入防抖函数
 import loadingViewerVue from 'loading-view-vue'
 import Vue from "vue";
 Vue.use(loadingViewerVue,{mode:"5"});
-
 export default {
   name: "Login",
   components: {
@@ -331,7 +338,7 @@ export default {
   },
   data() {
     return {
-      uploadUrl:process.env.BASE_API +"/reportDashboard/import/" +this.$route.query.reportCode,
+      uploadUrl :"http://"+window.location.host+"/xlyReport/reportDashboard/import/" +this.$route.query.reportCode,
       grade: false,
       layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
@@ -717,11 +724,11 @@ export default {
     //  导出
     async exportDashboard(val) {
       const fileName = this.$route.query.reportCode + ".zip";
-
       const param = {
         reportCode: this.$route.query.reportCode,
         showDataSet: val,
       };
+      this.$showLoading();
       exportDashboard(param).then((res) => {
         const that = this;
         const type = res.type;
@@ -734,8 +741,8 @@ export default {
           };
           return;
         }
-
         const blob = new Blob([res], { type: "application/octet-stream" });
+        this.$hideLoading();
         if (window.navigator.msSaveOrOpenBlob) {
           //msSaveOrOpenBlob方法返回bool值
           navigator.msSaveBlob(blob, fileName); //本地保存
@@ -748,12 +755,17 @@ export default {
         }
       });
     },
+    //上传之前
+    beforeUpload(){
+      this.$showLoading();
+    },
     // 上传成功的回调
     handleUpload(response, file, fileList) {
       //清除el-upload组件中的文件
       this.$refs.upload.clearFiles();
       //刷新大屏页面
       this.initEchartData();
+      this.$hideLoading();
       if (response.code == "200") {
         this.$message({
           message: "导入成功！",
@@ -767,6 +779,7 @@ export default {
       }
     },
     handleError(err) {
+      this.$hideLoading();
       this.$message({
         message: "上传失败！",
         type: "error",
@@ -941,6 +954,8 @@ export default {
       this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
     },
     widgetsClick(index) {
+      console.log("222222",process);
+      console.log("222222",window.location.host,reurl);
       const draggableArr = this.$refs.widgets;
       //判断是否按住了shift键盘
       if(this.shiftEnt){