应用能力调用记录-导出按钮添加加载

src/main/resources/templates/appAbilityRecord/list.html

@@ -72,16 +72,24 @@
             <button onclick="search();" class="layui-btn layui-btn-sm layui-btn-normal">搜索</button>
         </div>
         <div class="layui-inline">
-            <button onclick="exportAll();" class="layui-btn layui-btn-sm layui-btn-normal">各法院总调用统计导出</button>
+            <button id="export-all-btn" onclick="exportAll();" class="layui-btn layui-btn-sm layui-btn-normal">
+                各法院总调用统计导出
+            </button>
         </div>
         <div class="layui-inline">
-            <button onclick="exportYear();" class="layui-btn layui-btn-sm layui-btn-normal"><span id="year-text"></span>年调用量导出</button>
+            <button id="export-year-btn" onclick="exportYear();" class="layui-btn layui-btn-sm layui-btn-normal">
+                <span id="year-text"></span>年调用量导出
+            </button>
         </div>
         <div class="layui-inline">
-            <button onclick="exportMonth();" class="layui-btn layui-btn-sm layui-btn-normal"><span id="month-text"></span>月调用量导出</button>
+            <button id="export-month-btn" onclick="exportMonth();" class="layui-btn layui-btn-sm layui-btn-normal"><span
+                    id="month-text"></span>月调用量导出
+            </button>
         </div>
         <div class="layui-inline">
-            <button onclick="exportDay();" class="layui-btn layui-btn-sm layui-btn-normal"><span id="day-text"></span>日调用量导出</button>
+            <button id="export-day-btn" onclick="exportDay();" class="layui-btn layui-btn-sm layui-btn-normal"><span
+                    id="day-text"></span>日调用量导出
+            </button>
         </div>
         <div class="layui-inline">
             <span style="color: #C9C9C9">（以开始时间为基准导出，默认当前时间）</span>
@@ -322,7 +330,7 @@
         });
     }
 
-    function downloadFile(filename, params) {
+    function downloadFile(filename, params = {}, domID) {
         axios({
             url: gatewayUrl + '/appAbilityRecordAll/deriveCallRecord',
             method: 'get',
@@ -356,28 +364,46 @@
             } else {
                 console.log(' --- 未获取文件流 下载失败 --- ', data)
             }
+            removeLoading(domID);
         }).catch(function (err) {
             console.log(' --- 接口请求失败，抛出异常 --- ', err)
+            removeLoading(domID);
         })
     }
 
+    function addLoading(domID) {
+        let loading = '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>'
+        let btn = $(`#${domID}`)[0];
+        btn.innerHTML = loading + btn.innerHTML;
+        $(`#${domID}`).addClass('layui-btn-disabled');
+    }
+
+    function removeLoading(domID) {
+        $(`#${domID} > i`).remove();
+        $(`#${domID}`).removeClass('layui-btn-disabled');
+    }
+
     function exportAll() {
-        downloadFile('各法院调用统计.xlsx');
+        addLoading('export-all-btn');
+        downloadFile('各法院调用统计.xlsx', {}, 'export-all-btn');
     }
 
     function exportYear() {
+        addLoading('export-year-btn');
         let date = `${currYear}`
-        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
+        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date}, 'export-year-btn');
     }
 
     function exportMonth() {
+        addLoading('export-month-btn');
         let date = `${currYear}-${currMonth}`
-        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
+        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date}, 'export-month-btn');
     }
 
     function exportDay() {
+        addLoading('export-day-btn');
         let date = `${currYear}-${currMonth}-${currDate}`
-        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
+        downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date}, 'export-day-btn');
     }
 
     function dateInnerHtml() {