修改查询窗口

examples/main.js

@@ -11,6 +11,11 @@ import 'ant-design-vue/dist/reset.css';
 import zh from '@/i18n/zh-CN.js';
 import en from '@/i18n/en-US.js';
 
+
+
+import * as AntDesignIconsVue from '@ant-design/icons-vue';
+window.AntDesignIconsVue = AntDesignIconsVue;
+
 // 默认语言
 const default_lang = 'zh';
 
@@ -41,3 +46,6 @@ app.use(Antd);
 app.use(router);
 app.use(VTooltip);
 app.mount('#app');
+
+
+window.app = app;

packages/info/src/QueryCondition.vue

@@ -89,6 +89,7 @@ export default {
       filterFields: [],
       selectedText: [],
       searchType:'simple',
+      
     };
   },
 

packages/info/src/QueryPage.vue

@@ -21,13 +21,28 @@
           />
         </div>
         <div>
-          <QueryCondition
-            ref="queryCondition" :info-filter-fields="infoFilterFields"
-            :info-buttons="infoWindowDto.infoButtons" :is-search-widget="isSearchWidget"
-            :info-window-no="infoWindowDto.no"
-            :search-condition-instance="searchConditionInstance"
-            @simple-search="simpleSearch" @complex-search="complexSearch" 
-          />
+          <a-flex justify="space-between" align="center">
+            <QueryCondition
+              ref="queryCondition" :info-filter-fields="infoFilterFields"
+              :info-buttons="infoWindowDto.infoButtons" :is-search-widget="isSearchWidget"
+              :info-window-no="infoWindowDto.no"
+              :search-condition-instance="searchConditionInstance"
+              @simple-search="simpleSearch" @complex-search="complexSearch" 
+            />
+
+            <div>
+              <a-pagination
+                v-model:current="pagination.current_page"
+                v-model:pageSize="pagination.per_page"
+                show-quick-jumper
+                size="small"
+                :total="pagination.total"
+                :page-size-options="pageSizeOptions"
+                @change="handlePageChange"
+                @show-size-change="handleShowSizeChange"
+              />
+            </div>
+          </a-flex>
         </div>
       </div>
       
@@ -82,7 +97,7 @@
     >
       <component
         :is="selectedView"
-        v-if="selectedView != null"
+        v-if="selectedView != null && selectedView != '' && componentLoadedCount == views.length"
         :info-grid-fields-instance="infoGridFieldsInstance" :sort-instance="sortInstance"
         :info-window-data-instance="infoWindowDataInstance" :pagination="pagination" :multiple="multiple"
         :call-out-js-url="infoWindowDto.callOutJsUrl" @data-selected="$emit('dataSelected', $event)"
@@ -91,7 +106,7 @@
     </div>
     <div class="flex-footer" style="margin-top: 10px">
       <div class="pull-left">
-        <span>{{ $t("lang.QueryPage.the") }}
+        <!-- <span>{{ $t("lang.QueryPage.the") }}
           {{ (pagination.current_page - 1) * pagination.per_page + 1 }}
           -
           {{ pagination.current_page * pagination.per_page }}
@@ -104,10 +119,10 @@
           {{ $t("lang.QueryPage.displayOnEachPage") }}
         </span>
         <PageSizeSelect :size="pagination.per_page" @page-size-changed="gridSizeSelect" />
-        <span>{{ $t("lang.QueryPage.strip") }}</span>
+        <span>{{ $t("lang.QueryPage.strip") }}</span> -->
       </div>
       <div class="pull-right">
-        <Pagination :pagination="pagination" :callback="pageSearch" />
+        <!-- <Pagination :pagination="pagination" :callback="pageSearch" /> -->
       </div>
     </div>
     <Loading v-if="loading" />
@@ -127,7 +142,7 @@ import Common from '../../common/Common.js';
 import Modal from '../../modal/src/Modal.vue';
 
 import PageSizeSelect from '../../page-size-select/src/PageSizeSelect.vue';
-import Pagination from '../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue';
+// import Pagination from '../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue';
 
 import QueryCondition from './QueryCondition.vue';
 import InfoHeader from './InfoHeader.vue';
@@ -155,11 +170,13 @@ import QueryPageDashboard from './QueryPageDashboard.vue';
 import { useSort, useInfoGridFields, useInfoWindowData, useSearchCondition } from './InfoWindowState.js';
 import { SyncOutlined, DownloadOutlined  } from '@ant-design/icons-vue';
 
+import CssUtil from '../../common/CssUtil.js';
+
 export default {
   name: 'QueryPage',
 
   components: {
-    Pagination,
+    // Pagination,
     QueryCondition,
     Modal,
     InfoHeader,
@@ -248,7 +265,6 @@ export default {
       searchConditionInstance: useSearchCondition(),
       infoGridFieldsInstance: useInfoGridFields(),
       infoWindowDataInstance: useInfoWindowData(),
-
       views: [
         {
           name: '表格视图',
@@ -260,19 +276,11 @@ export default {
             },
           },
         },
-        {
-          name: '看板视图',
-          value: 'QueryPageDashboard',
-          payload: {
-            src: 'https://joeschmoe.io/api/v1/random',
-            style: {
-              backgroundColor: '#f56a00',
-            },
-          },
-        },
       ],
 
       selectedView: 'QueryPageTable', // 选中的视图
+      componentLoadedCount: 1,
+      pageSizeOptions: ['20', '50', '100', '200', '1000'],
     };
   },
 
@@ -347,6 +355,8 @@ export default {
       );
 
       _self.simpleSearch();
+
+      _self.dynamicInitViews();
     },
 
     /**
@@ -759,7 +769,7 @@ export default {
      * 执行导出
      * @return {void}
      */
-    executeExport: function (isSimple) {
+    executeExport: function () {
       var _self = this;
 
       if (this.searchConditionInstance.state.isComplex == false) {
@@ -821,7 +831,6 @@ export default {
      */
     getSelectedRecordIds: function () {
       return this.infoWindowDataInstance.getSelectedRecordIds();
-
     },
 
     /**
@@ -850,6 +859,109 @@ export default {
       }
       return null;
     },
+
+    dynamicInitViews: function(){
+      let _self = this;
+      let infoWindowDashbaords = _self.infoWindowDto.infoWindowDashbaords;
+      if(infoWindowDashbaords != null && infoWindowDashbaords.length > 0){
+        for(let i = 0, length = infoWindowDashbaords.length; i < length; i ++){
+          let infoWindowDashbaord = infoWindowDashbaords[i];
+          console.log(infoWindowDashbaord);
+          _self.dynamicInitView(infoWindowDashbaord);
+          
+        }
+      }
+    },
+    
+    /**
+     * 初始化Dashbaord界面
+     */
+    dynamicInitView: function (infoWindowDashbaord) {
+      // TODO: 添加测试文件
+      infoWindowDashbaord.cssUrl = '/content/DictionaryAsset/InfoWindow/EAM/20240922_095937_AssetDashboard.css';
+      infoWindowDashbaord.jsUrl = '/content/DictionaryAsset/InfoWindow/EAM/20240922_095937_AssetDashboard.js';
+
+
+      let _self = this;
+
+      const componentName = infoWindowDashbaord.componentName;
+
+      // 如果是默认视图的话，进行加载
+      if(infoWindowDashbaord.isDefault === true){
+        _self.selectedView = infoWindowDashbaord.componentName;
+      }
+
+      _self.views.push({
+        name: infoWindowDashbaord.name,
+        value: componentName,
+        payload: {
+          src: 'https://joeschmoe.io/api/v1/random',
+          style: {
+            backgroundColor: '#f56a00',
+          },
+        },
+      });
+
+
+
+      const cssUrl = infoWindowDashbaord.cssUrl;
+
+      if(cssUrl != null && cssUrl != undefined){
+        CssUtil.dynamicLoadCss(cssUrl, componentName);
+      }
+
+      const jsUrl = infoWindowDashbaord.jsUrl;
+      if(jsUrl != null && jsUrl != undefined){
+
+        let promise = new Promise((resolve, reject) => {
+          import(/* webpackIgnore: true */ jsUrl).then(remoteComponent => {
+            resolve(remoteComponent);
+          }).catch(error => {
+            reject(error);
+          });
+        });
+
+
+        promise.then(remoteComponent => {
+          console.log('remoteComponent：' + remoteComponent.default.name);
+          if(componentName !== remoteComponent.default.name){
+            let errorMessage = '数据字典-查询窗口自定义组件部件名称定义的是' + componentName + '，但是程序中name定义的是' + remoteComponent.default.name + '，两者必须相同。';
+            console.error(errorMessage);
+            Notify.error('查询窗口自定义组件定义错误', errorMessage, false);
+          }
+          window.app.component(componentName, remoteComponent.default);
+          _self.componentLoadedCount ++;
+        }, errorData => {
+          console.error(errorData);
+        });
+      }
+    },
+
+    
+    /**
+     * 页数改变
+     * @param page 
+     */
+    handlePageChange: function (page) {
+      this.pagination.current_page = page;
+      setTimeout(() => {
+        this.pageSearch();
+      }, 100);
+    },
+
+    /**
+     * 每页条数改变
+     * @param current 
+     * @param size 
+     */
+    handleShowSizeChange: function (current, size) {
+      setTimeout(() => {
+        this.pagination.current_page = 1;
+      });
+      this.pagination.per_page = size;
+      localStorage.setItem(`InfoWindowPageSize${this.windowNo}`, size);
+    },
+
   },
 };
 </script>

packages/info/src/QueryPageDashboard.vue

@@ -160,7 +160,6 @@
 
 <script>
 
-import Language from '../../common/Language.js';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
 
 export default {
@@ -211,7 +210,6 @@ export default {
   emits: ['dataSelected', 'deleteSelected'],
   
   data: function () {
-    this.Language = Language;
     return {
       isSelectAll: false,
       multipleSelect: false,