自定义分析表刷新交互优化

src/api/http.js

@@ -1,6 +1,16 @@
 "use strict";
 import axios from "axios";
 import bus from "./bus.js";
+let store=null
+// 异步加载store模块 不异步加载的话，@/api/modules/oldApi.js的导入导出写法会有问题
+import('@/vuex/index.js')
+.then(module => {
+  store=module.default
+})
+.catch(err => {
+  console.error(err,'vuex加载错误');
+});
+
 axios.defaults.withCredentials = true;
 axios.defaults.timeout = 0;
 axios.interceptors.request.use(
@@ -40,16 +50,29 @@ function getData(val, url) {
   return val;
 }
 
-function checkStatus(response) {
+function errorMsgShow(closableErrMsg,msg){
+  if(closableErrMsg){
+    let messageHint = bus.$message.error({
+      message:msg,
+      duration:0,
+      showClose:true
+    })
+    store.mutations.PUSH_CLOSABLE_HINT(store.state,messageHint)
+  }else{
+    bus.$message.error(msg);
+  }
+}
+
+function checkStatus(response,closableErrMsg) {
   //处理响应数据
   if (response && response.status === 200) {
     // loading,如果http状态码正常，则直接返回数据
     let res = bus.$parseData(response);
     if (!res) {
-      bus.$message.error("服务器开了个小差");
+      errorMsgShow(closableErrMsg,'服务器开了个小差')
       return false;
     } else if (res.Ret == 403) {
-      bus.$message.error(res.Msg);
+      errorMsgShow(closableErrMsg,res.Msg)
     } else if (res.Ret === 408) {
       localStorage.setItem("auth", "")
       localStorage.setItem("loginTime", "")
@@ -63,14 +86,19 @@ function checkStatus(response) {
     }
     return res;
   } else {
-    bus.$message.error("网络异常");
+    errorMsgShow(closableErrMsg,'网络异常')
     return false;
   }
 }
 
-function checkCode(res) {
-  bus.$message.error("网络异常");
+function checkCode(res,closableErrMsg) {
+  errorMsgShow(closableErrMsg,'网络异常')
 }
+
+function isFormData(obj) {
+  return typeof obj === 'object' && obj instanceof FormData;
+}
+
 // 请求时间需要过长，取消限制
 const cancelTimeoutUrlPost = ["/cloud_disk/resource/upload"];
 
@@ -78,6 +106,16 @@ export default {
   post(url, data) {
     //post请求方式
     let timeout = cancelTimeoutUrlPost.includes(url) ? 0 : 600000;
+    // 自定义参数
+    /**
+     * closableErrMsg123 -- 错误提示需要时可关闭类型的
+     */
+    let closableErrMsg=false
+    if(data){
+      // 区分formData格式
+      closableErrMsg = isFormData(data)?!!data.get('closableErrMsg123'):!!data.closableErrMsg123
+      isFormData(data)?data.delete('closableErrMsg123'):(data.closableErrMsg123=undefined)
+    }
     return axios({
       method: "post",
       url: url,
@@ -87,13 +125,23 @@ export default {
       headers: { "Content-Type": "application/json; charset=utf-8" },
     })
       .then((response) => {
-        return checkStatus(response);
+        return checkStatus(response,closableErrMsg);
       })
       .catch((res) => {
-        return checkCode(res);
+        return checkCode(res,closableErrMsg);
       });
   },
   get(url, data, responseType = "json") {
+    // 自定义参数
+    /**
+     * closableErrMsg123 -- 错误提示需要时可关闭类型的
+     */
+    let closableErrMsg=false
+    if(data){
+      closableErrMsg = !!data.closableErrMsg123
+      data.closableErrMsg123=undefined
+    }
+
     //get请求方式
     return axios({
       method: "get",
@@ -120,10 +168,10 @@ export default {
         if(responseType==='blob'){
           return response
         }
-        return checkStatus(response);
+        return checkStatus(response,closableErrMsg);
       })
       .catch((res) => {
-        return checkCode(res);
+        return checkCode(res,closableErrMsg);
       });
   },
   Base64,

src/styles/element-ui.scss

@@ -64,3 +64,13 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   max-height: 100vh;
   overflow-y: auto;
 }
+.el-message--error{
+  .el-message__closeBtn{
+    color: $danger-btn-color;
+  }
+}
+.el-message--success{
+  .el-message__closeBtn{
+    color: $--color-success;
+  }
+}

src/views/datasheet_manage/customAnalysis/list.vue

@@ -245,6 +245,7 @@
                 ref="sheetRef"
                 v-if="sheetConfigOpt.data"
                 :option="sheetConfigOpt"
+                @updated="hasChange=true"
               />
             </div>
           </template>
@@ -427,6 +428,8 @@ export default {
       saveTime:"",
 
       isEdbReFreshLoading: false,//指标刷新
+      // 内容是否更新
+      hasChange:false,
     };
   },
   watch: {
@@ -677,7 +680,10 @@ export default {
       this.handleDownloadResource(url,filename)
     },
     /* 保存表格 */
-    saveHandle: _.debounce(async function () {
+    saveHandle: _.debounce(function () {
+      this.saveApi()
+    }, 300),
+    async saveApi(){
       luckysheet.exitEditMode();
       let data = luckysheet.getAllSheets();
 
@@ -692,6 +698,7 @@ export default {
       let img = getSheetImage(data[0]);
       const form = new FormData();
       form.append("Image", img);
+      form.append("closableErrMsg123", true);
       const { Data } = await sheetInterface.uploadImg(form);
 
       data.luckysheet_select_save = [];
@@ -703,14 +710,16 @@ export default {
         ExcelClassifyId,
         ExcelImage: Data.ResourceUrl,
         Content: JSON.stringify(data),
+        closableErrMsg123:true
       });
       this.loading.close();
-      if (res.Ret !== 200) return;
+      if (res.Ret !== 200) return false;
+      this.hasChange=false
       this.saveTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
-      this.$message.success(this.$t('MsgPrompt.saved_msg'));
+      this.shouldClosedHintshow(this.$t('MsgPrompt.saved_msg'))
       this.getTreeData();
-    }, 300),
-
+      return true
+    },
     /* 获取表格列表 */
     getPublicList() {
       sheetInterface
@@ -858,11 +867,23 @@ export default {
       if(this.isEdbReFreshLoading) return
       
       this.isEdbReFreshLoading = true;
-      let res = await sheetInterface.sheetAnalysisInterface.sheetRefresh({ExcelInfoId: this.sheetDetailInfo.ExcelInfoId})
+      let res={}
+      // 内容有改变 刷新前需要先保存
+      if(this.hasChange){
+        let saveSuccess = await this.saveApi()
+        if(!saveSuccess){
+          // 没保存成功
+          this.isEdbReFreshLoading = false;
+          return
+        }
+        res = await sheetInterface.sheetAnalysisInterface.sheetRefresh({ExcelInfoId: this.sheetDetailInfo.ExcelInfoId,closableErrMsg123:true})
+      }else{
+        res = await sheetInterface.sheetAnalysisInterface.sheetRefresh({ExcelInfoId: this.sheetDetailInfo.ExcelInfoId,closableErrMsg123:true})
+      }
 
       this.isEdbReFreshLoading = false;
       if(res.Ret !== 200) return 
-      this.$message.success(res.Msg)
+      this.shouldClosedHintshow(res.Msg)
     },300),
 
     /* 重绘右侧区域宽度 */
@@ -899,7 +920,22 @@ export default {
         code: this.sheetDetailInfo.UniqueCode 
       }});
     },
-
+    shouldClosedHintshow(msg){
+      let messageHint=this.$message.success({
+        message:msg,
+        duration:0,
+        showClose:true
+      })
+      this.$store.commit('PUSH_CLOSABLE_HINT',messageHint)
+    },
+    closeHint(){
+      // console.log(this.$store.state.closableHints,'closableHints');
+      if(!(this.$store.state.closableHints && this.$store.state.closableHints.length>0)) return 
+      this.$store.state.closableHints.map(hint =>{
+        hint.close()
+      })
+      this.$store.commit('CLEAR_CLOSABLE_HINT')
+    }
   },
   mounted() {
     if (this.$route.query.code) {
@@ -913,9 +949,11 @@ export default {
     }
 
     window.addEventListener("resize", this.reloadRightWid);
+    document.addEventListener("click", this.closeHint);
   },
   destroyed() {
     window.removeEventListener("resize", this.reloadRightWid);
+    document.removeEventListener("click", this.closeHint);
   },
 };
 </script>

src/vuex/index.js

@@ -33,7 +33,8 @@ const state = {
   // 是否有 试用用户行为权限
   hasTrialUserPermisson:false,
   permissionRoute:[], //用于需要验证是否有某个菜单的权限
-  baseInfo:{}
+  baseInfo:{},
+  closableHints:[], //可关闭的信息提示
 };
 
 export default {

src/vuex/mutations.js

@@ -81,6 +81,14 @@ const mutations = {
   SET_BASE_INFO(state,obj) {
     state.baseInfo={...state.baseInfo,...obj};
   },
+  //添加可关闭的信息提示
+  PUSH_CLOSABLE_HINT(state,hintObj) {
+    state.closableHints.push(hintObj)
+  },
+  //清空可关闭的信息提示
+  CLEAR_CLOSABLE_HINT(state) {
+    state.closableHints=[]
+  },
 };
 
 export default mutations;