渲染按钮 增加远程打开窗口

packages/info/src/QueryPage.vue

@@ -66,8 +66,20 @@
       </a-space>
 
       <div v-if="!isSearchWidget" style="display: inline-block">
-        <template v-for="infoButton in infoButtons" :key="infoButton.name">
+        <template
+          v-for="infoButton in infoWindowDto.infoButtons"
+          :key="infoButton.name"
+        >
           <a-button
+            v-if="infoButton.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
+            v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)"
+            type="link"
+            @click="openRemoteComponentModule(infoButton)"
+          >
+            {{ Language.getNameTrl($i18n.locale, infoButton) }}
+          </a-button>
+          <a-button
+            v-else
             v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)"
             type="link"
             @click="executeProcess(infoButton)"
@@ -131,6 +143,7 @@
         :multiple="multiple"
         :call-out-js-url="infoWindowDto.callOutJsUrl"
         @data-selected="$emit('dataSelected', $event)"
+        @info-selected="infoSelected"
         @delete-selected="$emit('deleteSelected', $event)"
       />
     </div>
@@ -169,12 +182,13 @@
       </template>
     </Modal>
   </div>
+  <component :is="modal1Component" v-model:open="modal1Open" :info-data="selectInfoData" />
 </template>
 
 <script>
 import Common from '../../common/Common.js';
 import Modal from '../../modal/src/Modal.vue';
-
+import { defineAsyncComponent,reactive } from 'vue';
 import PageSizeSelect from '../../page-size-select/src/PageSizeSelect.vue';
 // import Pagination from '../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue';
 
@@ -214,7 +228,7 @@ import {
 } from '@ant-design/icons-vue';
 
 import CssUtil from '../../common/CssUtil.js';
-
+import { Spin as ASpin, Empty as AEmpty } from 'ant-design-vue';
 export default {
   name: 'QueryPage',
 
@@ -310,7 +324,10 @@ export default {
       modal: false,
       searchType: 'simple',
       sortInstance: useSort(),
-      infoButtons:[],
+      infoButtons: [],
+      modal1Component: null,
+      modal1Open: false,
+      selectInfoData:null,
       searchConditionInstance: useSearchCondition(),
       infoGridFieldsInstance: useInfoGridFields(),
       infoWindowDataInstance: useInfoWindowData(),
@@ -1006,6 +1023,75 @@ export default {
       this.pagination.per_page = size;
       localStorage.setItem(`InfoWindowPageSize${this.windowNo}`, size);
     },
+
+    // 获取表格选择的数据
+    infoSelected: function (selected){
+      this.selectInfoData = selected;
+    },
+
+    /**
+     * 获取字符串的哈希值
+     * @param input
+     */
+    getHash: function (input) {
+      let hash = 0;
+      if (input.length === 0) {
+        return hash;
+      }
+      for (let i = 0; i < input.length; i++) {
+        const char = input.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // 确保返回值是一个32位有符号整数
+      }
+      return Math.abs(hash).toString();
+    },
+
+    /**
+     * 远程加载ES VUE组件模块，并在模态框中打开。
+     * @param jsUrl js路径
+     * @param cssUrl css路径
+     */
+    openRemoteComponentModule: async function (tabButton) {
+      const _self = this;
+      let jsUrl = tabButton.remoteComponentModuleJsUrl;
+
+      let cssUrl = tabButton.remoteComponentModuleCssUrl;
+
+      // 显示模态框
+      // 异步的加载js组件
+      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
+      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';
+
+      if (cssUrl != null && cssUrl.length > 0) {
+        let cssUrlHash = _self.getHash(cssUrl);
+        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
+      }
+      // webpackIgnore：设置为 true 时，禁用动态导入解析。
+      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);
+
+      // console.log(testAsyncRemoteComponent);
+      if (jsUrl != null && jsUrl.length > 0) {
+        const testAsyncRemoteComponent = defineAsyncComponent({
+          // 加载函数
+          loader: () => {
+            return import(/* webpackIgnore: true */ jsUrl);
+          },
+          // 加载异步组件时使用的组件
+          loadingComponent: ASpin,
+          // 展示加载组件前的延迟时间，默认为 200ms
+          delay: 200,
+          // 加载失败后展示的组件
+          errorComponent: AEmpty,
+          // 如果提供了一个 timeout 时间限制，并超时了
+          // 也会显示这里配置的报错组件，默认值是：Infinity
+          timeout: 10000,
+        });
+
+        _self.modal1Component = testAsyncRemoteComponent;
+        _self.modal1Open = true;
+        console.log(_self.modal1Component);
+      }
+    },
   },
 };
 </script>

packages/info/src/QueryPageTable.vue

@@ -150,7 +150,7 @@ export default {
     },
   },
   
-  emits: ['dataSelected', 'deleteSelected'],
+  emits: ['dataSelected', 'deleteSelected','infoSelected'],
   data: function () {
     this.Language = Language;
     return {
@@ -316,8 +316,10 @@ export default {
 
       if (modelData.select === true) {
         _self.$emit('dataSelected', modelData);
+        _self.$emit('infoSelected', modelData);
       } else {
         _self.$emit('deleteSelected', modelData);
+        _self.$emit('infoSelected', modelData);
       }
     },