提交手动汇总提示倒计时弹窗

src/views/attendance/stat/list.vue

@@ -128,7 +128,7 @@
       :close-on-click-modal="false"
       :show-close="false"
     >
-      <div class="fresh_box">
+      <div class="fresh_box" v-if="showContent">
         <div class="title_box" style="margin-bottom: 20px;">
           仅支持手动更新前一天及当日的打卡数据，请选择需要更新的时间段：
         </div>
@@ -143,8 +143,41 @@
         >
         </el-date-picker>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFresh" :loading="submitLoad"
+      <div class="fresh_box" v-else>
+        <div
+          class="title_box"
+          style="margin-bottom: 20px;line-height: 30px;"
+          v-if="showTip"
+        >
+          请确认是否开始进行{{
+            freshDate[0] + "至" + freshDate[1]
+          }}的考勤数据重新汇总；此过程预计需要
+          <span style="color:#ff0000 ;">10</span> 分钟左右，请勿关闭或刷新页面
+        </div>
+        <div
+          class="title_box"
+          style="margin-bottom: 20px;line-height: 30px;"
+          v-else
+        >
+          正在进行{{
+            freshDate[0] + "至" + freshDate[1]
+          }}的考勤数据重新汇总；此过程预计还需要
+          <span style="color:#ff0000 ;">{{ restTime }}</span>
+          分钟左右，请勿关闭或刷新页面
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer" v-if="showTip">
+        <el-button
+          type="primary"
+          @click="() => (showContent = false)"
+          v-if="showContent"
+          >确 定</el-button
+        >
+        <el-button
+          type="primary"
+          @click="submitFresh"
+          v-else
+          :loading="submitLoad"
           >确 定</el-button
         >
         <el-button @click="cancleFresh">取 消</el-button>
@@ -176,6 +209,30 @@ export default {
     this.initalArr = this.config.columns;
   },
   methods: {
+    //倒计时
+    countdown() {
+      let now = Date.parse(new Date());
+      let msec = this.endTime - now;
+
+      if (msec < 0) return;
+
+      // let day = parseInt(msec / 1000 / 60 / 60 / 24);
+      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
+      let min = parseInt((msec / 1000 / 60) % 60);
+      let sec = parseInt((msec / 1000) % 60);
+      min = min > 9 ? min : "0" + min;
+      sec = sec > 9 ? sec : "0" + sec;
+      this.restTime = min + "分" + sec + "秒";
+      const that = this;
+      if (min >= 0 && sec >= 0) {
+        if (min == 0 && sec == 0) {
+          return;
+        }
+        setTimeout(function() {
+          that.countdown();
+        }, 1000);
+      }
+    },
     submitFresh() {
       console.log(this.freshDate);
       if (this.freshDate) {
@@ -186,11 +243,11 @@ export default {
         })
           .then((res) => {
             if (res.code == 1) {
-              this.$message.success(res.msg);
-              this.dialogOpen = false;
+              this.showTip = false;
               this.btnFreshLoading = false;
               this.submitLoad = false;
-              this.freshDate = "";
+              this.endTime = Date.parse(new Date()) + 10 * 60 * 1000;
+              this.countdown();
             }
           })
           .catch((error) => {
@@ -198,6 +255,9 @@ export default {
             this.submitLoad = false;
             this.dialogOpen = false;
             this.btnFreshLoading = false;
+            this.showContent = true;
+            this.showTip = true;
+            this.freshDate = "";
           });
       } else {
         this.$message.error("请选择时间范围！");
@@ -206,6 +266,7 @@ export default {
     cancleFresh() {
       this.dialogOpen = false;
       this.btnFreshLoading = false;
+      this.showContent = true;
       this.freshDate = "";
     },
     // 手动更新
@@ -478,6 +539,10 @@ export default {
   },
   data() {
     return {
+      showTip: true,
+      showContent: true,
+      endTime: "",
+      restTime: "10",
       pickerOptions0: {
         disabledDate(v) {
           let limitDate =

src/views/staff/perform/summary/list.vue

@@ -36,7 +36,7 @@
       :close-on-click-modal="false"
       :show-close="false"
     >
-      <div class="fresh_box">
+      <div class="fresh_box" v-if="showContent">
         <div class="title_box" style="margin-bottom: 20px;">
           仅支持手动更新月度绩效数据，请选择需要更新的月份：
         </div>
@@ -49,8 +49,37 @@
         >
         </el-date-picker>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFresh" :loading="submitLoad"
+      <div class="fresh_box" v-else>
+        <div
+          class="title_box"
+          style="margin-bottom: 20px;line-height: 30px;"
+          v-if="showTip"
+        >
+          请确认是否开始进行{{ freshDate }}的绩效数据重新汇总；此过程预计需要
+          <span style="color:#ff0000 ;">15</span> 分钟，请勿关闭或刷新页面
+        </div>
+        <div
+          class="title_box"
+          style="margin-bottom: 20px;line-height: 30px;"
+          v-else
+        >
+          正在进行{{ freshDate }}的绩效数据重新汇总；此过程预计还需要
+          <span style="color:#ff0000 ;">{{ restTime }}</span>
+          分钟，请勿关闭或刷新页面
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer" v-if="showTip">
+        <el-button
+          type="primary"
+          @click="() => (showContent = false)"
+          v-if="showContent"
+          >确 定</el-button
+        >
+        <el-button
+          type="primary"
+          @click="submitFresh"
+          v-else
+          :loading="submitLoad"
           >确 定</el-button
         >
         <el-button @click="cancleFresh">取 消</el-button>
@@ -69,7 +98,9 @@ export default {
     dialogShow,
   },
   mixins: [table],
-  created() {},
+  created() {
+    console.log();
+  },
 
   methods: {
     /** 导出Excel */
@@ -186,11 +217,12 @@ export default {
         })
           .then((res) => {
             if (res.code == 1) {
-              this.$message.success(res.msg);
-              this.dialogOpen = false;
+              // this.$message.success(res.msg);
+              this.showTip = false;
               this.btnFreshLoading = false;
               this.submitLoad = false;
-              this.freshDate = "";
+              this.endTime = Date.parse(new Date()) + 15 * 60 * 1000;
+              this.countdown();
             }
           })
           .catch((error) => {
@@ -198,6 +230,9 @@ export default {
             this.submitLoad = false;
             this.dialogOpen = false;
             this.btnFreshLoading = false;
+            this.showContent = true;
+            this.showTip = true;
+            this.freshDate = "";
           });
       } else {
         this.$message.error("请选择需要更新的月份！");
@@ -206,17 +241,46 @@ export default {
     cancleFresh() {
       this.dialogOpen = false;
       this.btnFreshLoading = false;
+      this.showContent = true;
       this.freshDate = "";
     },
+    //倒计时
+    countdown() {
+      let now = Date.parse(new Date());
+      let msec = this.endTime - now;
+
+      if (msec < 0) return;
+
+      // let day = parseInt(msec / 1000 / 60 / 60 / 24);
+      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
+      let min = parseInt((msec / 1000 / 60) % 60);
+      let sec = parseInt((msec / 1000) % 60);
+      min = min > 9 ? min : "0" + min;
+      sec = sec > 9 ? sec : "0" + sec;
+      this.restTime = min + "分" + sec + "秒";
+      const that = this;
+      if (min >= 0 && sec >= 0) {
+        if (min == 0 && sec == 0) {
+          return;
+        }
+        setTimeout(function() {
+          that.countdown();
+        }, 1000);
+      }
+    },
   },
   data() {
     return {
+      endTime: "",
+      restTime: "15",
       freshDate: "",
       btnFreshLoading: false,
       sortList: "",
       dialogOpen: false,
       isExport: false,
       showBtn: true,
+      showTip: true,
+      showContent: true,
       submitLoad: false,
       progress: false,
       percent: 0,