修改Loading

examples/loading/src/LoadingExample.vue

@@ -1,7 +1,9 @@
 <template>
   <h1>加载中</h1>
   <button class="btn btn-default" @click="start">开始</button>
-  <Loading ref="loading" />
+  <button class="btn btn-default" @click="startAndStop">定时关闭</button>
+  <button class="btn btn-default" @click="start2">打开2个loading</button>
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -15,16 +17,19 @@ export default {
   },
   data: function () {
     return {
-
+      loading: false,
     };
   },
 
   methods: {
     start: function(){
-      this.$refs.loading.show();
+      this.loading = true;
+    },
+    startAndStop: function(){
+      this.loading = true;
       let _self = this;
       window.setTimeout(function(){
-        _self.$refs.loading.hide();
+        _self.loading = false;
       }, 5000);
     },
   },

packages/client-organization/src/ClientOrganization.vue

@@ -18,7 +18,7 @@
         </div>
       </div>
     </div>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -64,6 +64,7 @@ export default {
       'datas': [],
       sendData: {},
       clientOrganizations: [],
+      loading: false,
     };
   },
 

packages/info/src/DocGenerator.vue

@@ -50,7 +50,7 @@
         @select-changed="queryInfoWindowData"
       />
     </div>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 <script>
@@ -84,6 +84,7 @@ export default {
       infoGridFields: [],     // 表格字段
       infoWindowData: [],
       tabIndex: 1,
+      loading: false,
     };
   },
 
@@ -108,7 +109,7 @@ export default {
       if (_self.infoWindowNo === undefined || _self.infoWindowNo === null || _self.infoWindowNo === '') {
         return;
       }
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
         type: 'GET',
@@ -118,7 +119,7 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.$refs.loading.show();
+          _self.loading=true;
           _self.infoWindowDto = data;
           _self.$emit('showTitle', data.name);
           _self.$nextTick(function () {
@@ -126,7 +127,7 @@ export default {
           });
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.show();
+          _self.loading=true;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -207,7 +208,7 @@ export default {
 
       var infoQueryParam = this.$refs.docGeneratorGrid.getQueryParam();
       infoQueryParam.condition = _self.$refs.queryCondition.getQueryCondition();            
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataSimple'),
         type: 'post',
@@ -218,7 +219,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(infoQueryParam),
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           console.log(data);
           if (data != undefined && data.range != undefined) {
             _self.infoWindowData = data.dataList;
@@ -226,7 +227,7 @@ export default {
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -242,7 +243,7 @@ export default {
       var infoQueryParam = this.$refs.docGeneratorGrid.getQueryParam();
       infoQueryParam.infoFilterFieldValues = _self.$refs.queryCondition.getQueryCondition();
 
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataComplex'),
         type: 'post',
@@ -253,7 +254,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(infoQueryParam),
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           console.log(data);
           if (data != undefined && data.range != undefined) {
             _self.infoWindowData = data.dataList;
@@ -261,7 +262,7 @@ export default {
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });

packages/info/src/InfoMultiSearchWidget.vue

@@ -42,7 +42,7 @@
         /> -->
       </template>
     </Modal>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 <script>
@@ -87,6 +87,7 @@ export default {
       searchText: '',
       selectIndex: -1,
       selectedDatas: [],
+      loading: false,
     };
   },
 

packages/info/src/InfoSearchWidget.vue

@@ -48,7 +48,7 @@
       @select-data="dataSelected"
     />
 
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 <script>
@@ -106,6 +106,7 @@ export default {
       searchText: '',
       leftPosition: 0,
       showSubInfoWindow: false,	// 显示子查询窗口
+      loading: false,
     };
   },
 
@@ -158,9 +159,9 @@ export default {
     whereClauseSource: function () {
       let _self = this;
       this.$nextTick(function(){
-      if (_self.$refs.info) {
-        _self.$refs.info.refresh();
-      }
+        if (_self.$refs.info) {
+          _self.$refs.info.refresh();
+        }
       });
     },
   },

packages/info/src/InfoWindow.vue

@@ -13,7 +13,7 @@
       @delete-selected="deleteSelected"
     />
 
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 <script>
@@ -68,6 +68,7 @@ export default {
       'infoWindowDto': {},
       // 显示部件名称
       'componentName': '',
+      loading: false,
     };
   },
 
@@ -99,7 +100,7 @@ export default {
         return;
       }
       var _self = this;
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
         type: 'GET',
@@ -109,7 +110,7 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           console.log(data);
           _self.infoWindowDto = data;
 
@@ -132,7 +133,7 @@ export default {
           });
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });

packages/info/src/QueryPage.vue

@@ -158,7 +158,7 @@
         />
       </div>
     </div>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
     <Modal ref="modal">
       <template #default>
         <ProcessReportResult
@@ -271,6 +271,7 @@ export default {
       infoFilterFields: [],
       // 表格外面的DIV的id
       tableOutDivId: Uuid.createUUID(),
+      loading: false,
     };
   },
   computed: {
@@ -464,7 +465,7 @@ export default {
 
     queryInfoWindowDataComplex: function () {
       var _self = this;
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataComplex'),
         type: 'post',
@@ -475,7 +476,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.infoQueryParam),
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           data.dataList.forEach(function (item) {
             item.select = false;
           });
@@ -489,7 +490,7 @@ export default {
           _self.fixedTableHeader();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -498,7 +499,7 @@ export default {
     queryInfoWindowDataSimple: function () {
       var _self = this;
       if (_self.$refs.loading) {
-        _self.$refs.loading.show();
+        _self.loading=true;
       }
 
       _self.infoQueryParam.whereClauseSource = _self.whereClauseSource;
@@ -513,7 +514,7 @@ export default {
         data: JSON.stringify(_self.infoQueryParam),
         success: function (data) {
           if (_self.$refs.loading) {
-            _self.$refs.loading.hide();
+            _self.loading=false;
           }
           data.dataList.forEach(function (item) {
             item.select = false;
@@ -530,7 +531,7 @@ export default {
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           if (_self.$refs.loading) {
-            _self.$refs.loading.hide();
+            _self.loading=false;
           }
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
@@ -719,7 +720,7 @@ export default {
             return;
           }
 
-          _self.$refs.loading.show();
+          _self.loading=true;
           ProcessReportResource.uniqueByNo(infoButton.processReportNo).then(successData => {
             _self.processReportDto = successData;
             if (successData) {
@@ -728,15 +729,15 @@ export default {
             }
             ProcessReportResource.runProcessByIds(infoButton.processReportNo, ids).then(successData => {
               _self.$refs.modal.show = true;
-              _self.$refs.loading.hide();
+              _self.loading=false;
               _self.processReportResult = successData;
               _self.$emit('processExecuteFinish');
             }, errorData => {
-              _self.$refs.loading.hide();
+              _self.loading=false;
               Common.processException(errorData);
             });
           }, errorData => {
-            _self.$refs.loading.hide();
+            _self.loading=false;
             Common.processException(errorData);
           });
         }

packages/info/src/SearchWidget.vue

@@ -57,7 +57,7 @@
       @select-data="dataSelected"
     />
 
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -140,6 +140,7 @@ export default {
       isVisible: [],
       searchText: inputSearchText,
       leftPosition: 0,
+      loading: false,
     };
   },
 
@@ -189,9 +190,9 @@ export default {
     whereClauseSource: function () {
       let _self = this;
       this.$nextTick(function(){
-      if (_self.$refs.info) {
-        _self.$refs.info.refresh();
-      }
+        if (_self.$refs.info) {
+          _self.$refs.info.refresh();
+        }
       });
     },
   },

packages/loading/src/Loading.vue

@@ -1,23 +1,22 @@
 <template>
-  <div
-    v-show="visible"
-    class="loading"
-  >
-    <input
-      ref="focusInput"
-      class="focus-input"
-    />
-    <div
-      :id="id"
-      class="spinner"
-    >
-      <div class="circ1" />
-      <div class="circ2" />
-      <div class="circ3" />
-      <div class="circ4" />
-      <h4>{{ text }}</h4>
+  <teleport to="body">
+    <div :key="id" class="loading">
+      <input
+        ref="focusInput"
+        class="focus-input"
+      />
+      <div
+        
+        class="spinner"
+      >
+        <div class="circ1" />
+        <div class="circ2" />
+        <div class="circ3" />
+        <div class="circ4" />
+        <h4>{{ text }}</h4>
+      </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script>
@@ -25,7 +24,7 @@ var UUID = require('../../common/Uuid.js').default;
 
 export default {
   // eslint-disable-next-line
-  name: 'Loading',
+    name: 'Loading',
   props: {
     'text': {
       type: String,
@@ -35,59 +34,37 @@ export default {
   data: function () {
     return {
       'id': 'loading_' + UUID.createUUID(),
-      'visible': false,
-      'uuid': UUID.createUUID(),
     };
   },
 
+
   mounted: function () {
-    this.hide();
+    var _self = this;
+    _self.$nextTick(function () {
+      _self.$refs.focusInput.focus();
+    });
   },
 
+
   methods: {
     // 居中显示
-    centerLoader: function () {
-      var _self = this;
-      var winW = $(window).width();
-      var winH = $(window).height();
-
-      var id = '#' + _self.id;
-      var spinnerW = $(id).outerWidth();
-      var spinnerH = $(id).outerHeight();
-
-      $(id).css({
-        'position': 'absolute',
-        'left': ((winW / 2) - (spinnerW / 2)) + 'px',
-        'top': ((winH / 2) - (spinnerH / 2)) + 'px',
-      });
-    },
+    // centerLoader: function () {
+    //     var _self = this;
+    //     var winW = $(window).width();
+    //     var winH = $(window).height();
 
-    // 显示加载中的界面
-    show: function () {
-      var _self = this;
-      _self.visible = true;
+    //     var id = '#' + _self.id;
+    //     var spinnerW = $(id).outerWidth();
+    //     var spinnerH = $(id).outerHeight();
 
-      window[_self.uuid] = document.activeElement;
+    //     $(id).css({
+    //         'position': 'absolute',
+    //         'left': ((winW / 2) - (spinnerW / 2)) + 'px',
+    //         'top': ((winH / 2) - (spinnerH / 2)) + 'px',
+    //     });
+    // },
 
-      _self.$nextTick(function () {
-        _self.centerLoader();
-        $(window).resize(function () {
-          _self.centerLoader();
-        });
-        $(_self.$refs.focusInput).focus();
-      });
-    },
 
-    // 隐藏加载中的界面
-    hide: function () {
-      var _self = this;
-      if (window[_self.uuid] != undefined) {
-        console.log('loading uuid:' + window[_self.uuid]);
-        window[_self.uuid].focus();
-        window[_self.uuid] = undefined;
-      }
-      _self.visible = false;
-    },
   },
 };
 
@@ -127,6 +104,9 @@ export default {
     width: 90px;
     height: 30px;
     text-align: center;
+    position: fixed;
+    left: calc(50% - 45px);
+    top: calc(50% - 15px);
 }
 
 .spinner > div {

packages/print/src/PrintEpc.vue

@@ -65,7 +65,7 @@
         关闭
       </button>
     </Modal>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -101,6 +101,7 @@ export default {
         epcs: '',       // 读取的标签信息
         epc: '',        // 打印的EPC
       },
+      loading: false,
     };
   },
 
@@ -154,16 +155,16 @@ export default {
 
       let promise = PrintEpcUtil.printSingleEpc(this.printerName, epc);
 
-      _self.$refs.loading.show();
+      _self.loading=true;
       promise.then(successData => {
-        _self.$refs.loading.hide();
+        _self.loading=false;
         if (successData.success == false) {
           successData.command = 'write';
           _self.printResult = successData;
           _self.$refs.printResultModal.show = true;
         }
       }, errorData => {
-        _self.$refs.loading.hide();
+        _self.loading=false;
         if (errorData.success == false) {
           errorData.command = 'write';
           _self.printResult = errorData;

packages/process/src/ProcessReportDynamic.vue

@@ -134,7 +134,7 @@
       />
     </div>
 
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -182,6 +182,7 @@ export default {
         'data': {
         },
       },
+      loading: false,
     };
   },
 
@@ -294,7 +295,7 @@ export default {
       });
       _self.processReportResult = {};
 
-      _self.$refs.loading.show();
+      _self.loading=true;
       $.ajax({
         url: Common.getApiURL('ProcessReportResource/runProcessDynamic'),
         type: 'post',
@@ -305,7 +306,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.processResultData),
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           _self.processReportResult = data;
 
           if (_self.processReportResult.reportResults != undefined && _self.processReportResult.reportResults.length > 0) {
@@ -323,7 +324,7 @@ export default {
 
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });

packages/process/src/ProcessReportStatic.vue

@@ -141,7 +141,7 @@
         :excel-only="processReportDto.excelOnly"
       />
     </div>
-    <Loading ref="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -194,7 +194,7 @@ export default {
 
         },
       },
-
+      loading: false,
     };
   },
 
@@ -317,7 +317,7 @@ export default {
       if (!_self.complete) {
         return;
       }
-      _self.$refs.loading.show();
+      _self.loading=true;
 
       $.ajax({
         url: Common.getApiURL('ProcessReportResource/runProcess'),
@@ -329,7 +329,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.processResultData),
         success: function (data) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           _self.processReportResult = data;
 
           if (
@@ -349,7 +349,7 @@ export default {
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.$refs.loading.hide();
+          _self.loading=false;
           Common.processException(
             XMLHttpRequest,
             textStatus,