Merge branch 'master' of http://159.75.9.201:3000/client-2022/pc-component-v3

packages/info/src/InfoWindow.vue

@@ -1,17 +1,9 @@
 <template>
   <div>
     <component
-      :is="componentName"
-      ref="infoComponent"
-      :field-value="fieldValue"
-      :info-window="infoWindowDto"
-      :where-clause-source="whereClauseSource"
-      :is-search-widget="isSearchWidget"
-      :parent-model-data="parentModelData"
-      :model-data="modelData"
-      :multiple="multiple"
-      @data-selected="dataSelected"
-      @delete-selected="deleteSelected"
+      :is="componentName" ref="infoComponent" :field-value="fieldValue" :info-window="infoWindowDto"
+      :where-clause-source="whereClauseSource" :is-search-widget="isSearchWidget" :parent-model-data="parentModelData"
+      :model-data="modelData" :multiple="multiple" @data-selected="dataSelected" @delete-selected="deleteSelected"
     />
 
     <Loading v-if="loading" />
@@ -29,7 +21,7 @@ export default {
   components: {
     QueryPage,
     Loading,
-    'ClientOrganization' : ClientOrganization,
+    'ClientOrganization': ClientOrganization,
   },
 
   props: {
@@ -54,15 +46,15 @@ export default {
       default: null,
     },
     /**
-     * 查询窗口编号
-     */
+         * 查询窗口编号
+         */
     'infoWindowNo': {
       type: String,
       default: null,
     },
     /**
-     * 是否多选
-     */
+         * 是否多选
+         */
     'multiple': {
       type: Boolean,
       default: false,
@@ -77,16 +69,17 @@ export default {
       // 显示部件名称
       'componentName': '',
       loading: false,
+      moduleDtos: [],
     };
   },
 
   watch: {
 
     'infoWindowNo': {
-      handler: function(newValue, oldValue){
+      handler: function (newValue, oldValue) {
         let _self = this;
-        if(newValue != oldValue){
-          this.$nextTick(function(){
+        if (newValue != oldValue) {
+          this.$nextTick(function () {
             _self.loadData();
           });
         }
@@ -96,19 +89,19 @@ export default {
   },
 
   mounted: function () {
-    
+    this.getModules();
   },
 
   methods: {
     /**
-     * 加载数据
-     */
+         * 加载数据
+         */
     loadData: function () {
       if (this.infoWindowNo == null || this.infoWindowNo.length == 0) {
         return;
       }
       var _self = this;
-      _self.loading=true;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
         type: 'GET',
@@ -118,15 +111,16 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          _self.loading=false;
+          _self.loading = false;
           console.log(data);
           _self.infoWindowDto = data;
+          _self.dynamicInit();
 
           // 计算显示的部件
           if (_self.infoWindowDto.componentName != undefined && _self.infoWindowDto.componentName != '') {
             _self.componentName = _self.infoWindowDto.componentName;
           } else if (_self.infoWindowDto.infoWindowType == undefined || _self.infoWindowDto.infoWindowType == 'TableGrid'
-                        || _self.infoWindowDto.infoWindowType == 'NONE') {
+              || _self.infoWindowDto.infoWindowType == 'NONE') {
             _self.componentName = 'QueryPage';
           }
 
@@ -141,15 +135,112 @@ export default {
           });
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
 
     /**
-     * 数据选择事件
+       * 动态初始化仪表盘
+       */
+    dynamicInit: function () {
+      let _self = this;
+      // 注意：在webpack中直接使用import(url).then()会错误的解析url。
+      // 如果url是静态的值，举例'xxx.js', webpack打包的时候，会去src对应的目录下面找js文件。
+      // 如果url是变量，举例const url = '', webpack打包的时候，原理不清晰...，测试结果时浏览器不会发出http请求加载后端的js文件。
+      // const jsUrl = '' + '/DictionaryBase/Dashboard/BASE/2020080401.js';
+      // const jsUrl = '/DictionaryAsset/Dashboard/EAM/20220309_095250.js';
+      const cssUrl = _self.getCssUrlByInfoWindow(_self.infoWindowDto);
+      _self.dynamicLoadCss(cssUrl);
+      const jsUrl = _self.getJsUrlByInfoWindow(_self.infoWindowDto);
+      let command = `import('${jsUrl}').then(remoteComponent => {
+      console.log('remoteComponent：' + remoteComponent.default, remoteComponent.default.name);
+        console.log('remoteComponent：' + remoteComponent.default, remoteComponent.default.name);
+          app.component(remoteComponent.default.name, remoteComponent.default);
+          var item = {
+              id: remoteComponent.default.name,
+              componentName: remoteComponent.default.name
+          }
+          _self.componentName = item.componentName;
+          console.log(item);
+      }).catch(error => {
+          console.error(error);
+      });`;
+      eval(command);
+    },
+
+    /**
+     * 动态加载CSS
      */
+    dynamicLoadCss: function (url) {
+      var head = document.getElementsByTagName('head')[0];
+      var link = document.createElement('link');
+      link.type='text/css';
+      link.rel = 'stylesheet';
+      link.href = url;
+      head.appendChild(link);
+    },
+
+    /**
+    * [getModules 获取模块]
+    * @return {[type]} [description]
+    */
+    getModules: function () {
+      var _self = this;
+      $.ajax({
+        url: Common.getApiURL('moduleResource/getModuleDtos'),
+        type: 'get',
+        dataType: 'json',
+        beforeSend: function (request) {
+          Common.addTokenToRequest(request);
+        },
+        success: function (data) {
+          _self.moduleDtos = data;
+        },
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        },
+      });
+    },
+
+
+    /**
+      * 根据模块编号查询jsUrl
+      * @param {Object} infoWindow
+      */
+    getJsUrlByInfoWindow: function (infoWindow) {
+      var _self = this;
+      var jsUrl = null;
+      var result = _self.moduleDtos.filter(v => v.no === infoWindow.moduleNo);
+      if (result != null && result.length > 0) {
+        var item = result[0];
+        jsUrl = '/' + item.dictionaryName + '/InfoWindow/' + item.no + '/' + infoWindow.no + '.js';
+      }
+      return jsUrl;
+
+    },
+
+
+
+    /**
+      * 根据模块编号查询Css Url
+      * @param {Object} infoWindow
+      */
+    getCssUrlByInfoWindow: function (infoWindow) {
+      var _self = this;
+      var cssUrl = null;
+      var result = _self.moduleDtos.filter(v => v.no === infoWindow.moduleNo);
+      if (result != null && result.length > 0) {
+        var item = result[0];
+        cssUrl = '/' + item.dictionaryName + '/InfoWindow/' + item.no + '/' + infoWindow.no + '.css';
+      }
+      return cssUrl;
+    },
+
+    /**
+         * 数据选择事件
+         */
     dataSelected: function (data) {
       this.$emit('dataSelected', data);
     },
@@ -159,15 +250,15 @@ export default {
     },
 
     /**
-     * 数据删除事件
-     */
+         * 数据删除事件
+         */
     deleteSelected: function (data) {
       this.$emit('deleteSelected', data);
     },
 
     /**
-     * 获取选择的数据
-     */
+         * 获取选择的数据
+         */
     getSelectedModelDatas: function (data) {
       var _self = this;
       return _self.$refs.infoComponent.getSelectedModelDatas();