Quellcode durchsuchen

解决前端table导出excle数据量过大出错问题
ajax增加加载中提示

WANGJIALIANG vor 4 Jahren
Ursprung
Commit
b4cf93f482

BIN
src/main/resources/static/images/wait_dialog_icon.gif


+ 80 - 24
src/main/resources/static/js/common/pharmacy-com.js

@@ -1,27 +1,4 @@
 //@ sourceURL=pharmacy-com.js
-/**
- * 加载药品搜索窗口
- */
-/*function initDrugSearchList() {
-    var settings = {
-        placement: 'bottom-right',//值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left  要显示的位置
-        trigger: 'click', //值:click,hover 触发方式
-        content: '',//内容,内容可以是函数
-        width: '600',
-        //arrow:false,//是否显示箭头
-        multi: true,//在页面允许其他弹出层
-        closeable: true,//显示关闭按钮
-        style: '', //值:'',inverse
-        delay: 300,//延迟时间, 悬浮属性才执行
-        padding: true,//内容填充
-        height: '200',
-        //offsetTop:10,
-        cache: true,//如果缓存设置为false,则popover将销毁并重新创建
-    };
-    //药品弹窗
-    settings.content = '<div id="medicinePopoverContent"><table id="tb_table_medicine"></table></div>';
-    $('#searchText').webuiPopover('destroy').webuiPopover(settings);
-}*/
 
 /**
  * 加载搜索窗口
@@ -237,4 +214,83 @@ function showDrugPopover() {
             $('#searchTextDrug').val(row.name);
         }
     });
-}
+}
+
+/**
+ * 将table导出Excel
+ * @param tableid
+ * @param sheetName
+ */
+function tableToExcel(tableid, sheetName) {
+    var uri = 'data:application/vnd.ms-excel;base64,';
+    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
+        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+        + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+        + '</x:ExcelWorkbook></xml><![endif]-->' +
+        '<style type="text/css">' +
+        'table td{' +
+        'border: 1px solid #000000;' +
+        'width: 150px;' +
+        'height: 30px;' +
+        'text-align: center;' +
+        '}' +
+        '.xtd{' +
+        'border: 1px solid #000000;' +
+        'width: 50px;' +
+        'height: 30px;' +
+        'text-align: center;' +
+        '}' +
+        '</style>' +
+        '</head><body ><table class="excelTable">{table}</table></body></html>';
+    if (!tableid.nodeType) tableid = document.getElementById(tableid);
+    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
+    var blobExel = self.baseExel(uri+base64(formatName(template, ctx))); //把base64位文件转化为exel文件
+    document.getElementById("btn_excel").href = URL.createObjectURL(blobExel);
+    document.getElementById("btn_excel").download = ctx.worksheet;
+    console.log(document.getElementById("btn_excel").href);
+}
+
+/*处理后端返回的base64位文件变成exel文件进行下载
+    * 不要直接把base64位的exel文件直接给a标签的href,
+    * 文件过大时base64位长度过长;chrome浏览器对a标签的href长度有限制;导致下载失败;
+    * 建议用以下方法处理成本地文件再下载
+    * */
+function baseExel (base64) {
+    function getContentType(base64) {
+        return /data:([^;]*);/i.exec(base64)[1];
+    };
+    function getData(base64) {
+        return base64.substr(base64.indexOf("base64,") + 7, base64.length);
+    };
+    function b64toBlob(b64Data, contentType, sliceSize) {
+        contentType = contentType || '';
+        sliceSize = sliceSize || 512;
+        var byteCharacters = atob(b64Data);
+        var byteArrays = [];
+        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+            var slice = byteCharacters.slice(offset, offset + sliceSize);
+            var byteNumbers = new Array(slice.length);
+            for (var i = 0; i < slice.length; i++) {
+                byteNumbers[i] = slice.charCodeAt(i);
+            }
+            var byteArray = new Uint8Array(byteNumbers);
+            byteArrays.push(byteArray);
+        }
+        var blob = new Blob(byteArrays, { type: contentType });
+        return blob;
+    };
+    return b64toBlob(getData(base64), getContentType(base64));
+}
+
+//base64转码
+function base64(s) {
+    return window.btoa(unescape(encodeURIComponent(s)));
+};
+//替换table数据和worksheet名字
+function formatName(s, c) {
+    return s.replace(/{(\w+)}/g,
+        function (m, p) {
+            return c[p];
+        });
+};
+

+ 4 - 39
src/main/resources/static/js/yf/spirit_anesthetic_print.js

@@ -13,6 +13,7 @@ $(function () {
 
     //初始化页面上面的按钮事件
     $("#btn_search").click(function (t) {
+        $('.sjh').remove();
         if($('#drugFlagSearch').val() == 0){
             getSendDrugRecordData();
         }else{
@@ -86,7 +87,6 @@ function getSpiritAnestheticPrintData() {
                 let code = '';
                 let number = 0;
                 let sex;
-                $('.sjh').remove();
                 for (var i = 0; i < res.data.length; i++) {
                     let data = res.data[i];
                     if(code == ''){
@@ -157,6 +157,8 @@ function getSpiritAnestheticPrintData() {
  * 获取所有药品类型统计报表
  */
 function getSendDrugRecordData() {
+    $('#YWaitDialog').css('top',$('.xtd').offset().top);
+    $('#YWaitDialog').show();
     $(".dateRange").html($('#reportrange span').html());
     $(".printDate").html(format(new Date(),"yyyy-MM-dd HH:mm"));
     $.ajax({
@@ -174,6 +176,7 @@ function getSendDrugRecordData() {
             'queryScope': $("#queryScopeSearch").val()
         }),
         success: function (res) {
+            $('#YWaitDialog').hide();
             if (res == '401' || res == 401) {
                 window.location.href = '/thmz/login/view'
                 return;
@@ -184,7 +187,6 @@ function getSendDrugRecordData() {
                 let number = 0;
                 let totalNumber = 0;
                 let sex;
-                $('.sjh').remove();
                 for (var i = 0; i < res.data.length; i++) {
                     let data = res.data[i];
                     if(flag == ''){
@@ -393,41 +395,4 @@ function init_daterangepickertime() {
         $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
     });
     $('#reportrange span').html(moment().subtract(1, 'days').format("YYYY-MM-DD 14:00:00") + ' - ' + moment().format("YYYY-MM-DD 13:59:59"));
-}
-
-//base64转码
-function base64(s) {
-    return window.btoa(unescape(encodeURIComponent(s)));
-};
-//替换table数据和worksheet名字
-function format1(s, c) {
-    return s.replace(/{(\w+)}/g,
-        function (m, p) {
-            return c[p];
-        });
-};
-function tableToExcel(tableid, sheetName) {
-    var uri = 'data:application/vnd.ms-excel;base64,';
-    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
-        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
-        + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
-        + '</x:ExcelWorkbook></xml><![endif]-->' +
-        '<style type="text/css">' +
-        'table td{' +
-        'border: 1px solid #000000;' +
-        'width: 150px;' +
-        'height: 30px;' +
-        'text-align: center;' +
-        '}' +
-        '.xtd{' +
-        'border: 1px solid #000000;' +
-        'width: 50px;' +
-        'height: 30px;' +
-        'text-align: center;' +
-        '}' +
-        '</style>' +
-        '</head><body ><table class="excelTable">{table}</table></body></html>';
-    if (!tableid.nodeType) tableid = document.getElementById(tableid);
-    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
-    $("#btn_excel").attr('href',uri + base64(format1(template, ctx)));
 }

+ 8 - 51
src/main/resources/static/js/yf/yf_inventory.js

@@ -34,18 +34,6 @@ $(function () {
         initTbAddRecord();
         loadTbAddRecord();
     });
-    //导出excel
-    /*$("#btn_excel").click(function(){
-        var myDate = new Date();
-        $("#tj_table").table2excel({
-            exclude: ".noExl",//不识别的class
-            name: "Excel Document Name.xlsx",
-            filename: "湖南泰和医院药品盘点表("+myDate.getMonth()+"月)",
-            exclude_img: true,
-            exclude_links: true,
-            exclude_inputs: true
-        });
-    });*/
 });
 
 /**
@@ -312,6 +300,7 @@ function initTbAddRecord() {
         },
         ondblClickRow: function(rowid){
             let record = $("#tb_add_record").getRowData(rowid);
+            $('.sjh').remove();
             getTbAddRecordPrintData(record.drawNo);
             $("#recrodModal").modal("hide");
         },
@@ -331,6 +320,8 @@ function initTbAddRecord() {
  * 生成打印数据
  */
 function getTbAddRecordPrintData(drawNo) {
+    $('#YWaitDialog').css('top',$('.xtd').offset().top);
+    $('#YWaitDialog').show();
     $.ajax({
         type: "GET",
         url: '/thmz/getYpInventoryPrintData',
@@ -341,6 +332,7 @@ function getTbAddRecordPrintData(drawNo) {
             drawNo:drawNo
         },
         success: function (res) {
+            $('#YWaitDialog').hide();
             if (res == '401' || res == 401) {
                 window.location.href = '/thmz/login/view'
                 return;
@@ -359,7 +351,7 @@ function getTbAddRecordPrintData(drawNo) {
                 let lszje = 0;
                 let grzje = 0;
                 let ykzje = 0;
-                $('.sjh').remove();
+                let confirmName = res.confirmName==null?'':res.confirmName;
                 for (var i = 0; i < res.data.length; i++) {
                     let data = res.data[i];
                     var lsje = data.currStockAmount*data.packRetprice;
@@ -424,8 +416,8 @@ function getTbAddRecordPrintData(drawNo) {
                     '    <td colspan="7" style="text-align: right;">盈亏总金额:'+keepTwoDecimal(ykzje)+'</td>' +
                     '    </tr>' +
                     '    <tr style="font-weight: 700;background-color: #EBEBE4" class="sjh">' +
-                    '    <td colspan="3" style="text-align: right;">盘点人:'+res.confirmName+'</td>' +
-                    '    <td colspan="10" style="text-align: right;">审核人:'+res.inputName+'</td>' +
+                    '    <td colspan="3" style="text-align: right;">盘点人:'+res.inputName+'</td>' +
+                    '    <td colspan="10" style="text-align: right;">审核人:'+confirmName+'</td>' +
                     '    </tr>';
                 $("#tj_table").append(html);
                 var date = new Date();
@@ -509,39 +501,4 @@ function audit(){
     });
 }
 
-//base64转码
-function base64(s) {
-    return window.btoa(unescape(encodeURIComponent(s)));
-};
-//替换table数据和worksheet名字
-function format1(s, c) {
-    return s.replace(/{(\w+)}/g,
-        function (m, p) {
-            return c[p];
-        });
-};
-function tableToExcel(tableid, sheetName) {
-    var uri = 'data:application/vnd.ms-excel;base64,';
-    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
-        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
-        + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
-        + '</x:ExcelWorkbook></xml><![endif]-->' +
-        '<style type="text/css">' +
-        'table td{' +
-        'border: 1px solid #000000;' +
-        'width: 150px;' +
-        'height: 30px;' +
-        'text-align: center;' +
-        '}' +
-        '.xtd{' +
-        'border: 1px solid #000000;' +
-        'width: 50px;' +
-        'height: 30px;' +
-        'text-align: center;' +
-        '}' +
-        '</style>' +
-        '</head><body ><table class="excelTable">{table}</table></body></html>';
-    if (!tableid.nodeType) tableid = document.getElementById(tableid);
-    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
-    $("#btn_excel").attr('href',uri + base64(format1(template, ctx)));
-}
+

+ 17 - 2
src/main/resources/templates/yf/spirit_anesthetic_print.html

@@ -153,8 +153,23 @@
         </div>
     </div>
 </div>
-
-
+<!--加载中提示开始-->
+<div id="YWaitDialog"
+     style="
+    position: absolute;
+    margin: auto;
+    display: none;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    height: 60px;
+    width: 300px;">
+    <p style="text-align: center; vertical-align: central;">
+        请等待,正在查询数据<img src="/thmz/images/wait_dialog_icon.gif" />
+    </p>
+</div>
+<!--加载中提示结尾-->
 <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
     <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
 </object>

+ 17 - 1
src/main/resources/templates/yf/yf_inventory.html

@@ -242,7 +242,23 @@
     </div>
 </div>
 <!--盘点记录弹窗结尾-->
-
+<!--加载中提示开始-->
+<div id="YWaitDialog"
+     style="
+    position: absolute;
+    margin: auto;
+    display: none;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    height: 60px;
+    width: 300px;">
+    <p style="text-align: center; vertical-align: central;">
+        请等待,正在查询数据<img src="/thmz/images/wait_dialog_icon.gif" />
+    </p>
+</div>
+<!--加载中提示结尾-->
 <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
     <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
 </object>