修改查询窗口的布局。

packages/i18n/en-US.js

@@ -23,6 +23,7 @@ const lang = {
     filter: 'Filter',
     refresh: 'Refresh',
     export: 'Export',
+    moreCondition: 'More condition',
   },
 
   QueryPage :{

packages/i18n/zh-CN.js

@@ -8,6 +8,7 @@ const lang = {
     filter: '过滤',
     refresh: '刷新',
     export: '导出',
+    moreCondition: '更多筛选条件',
   },
 
   QueryCondition: {

packages/info/src/InfoHeader.vue

@@ -1,135 +1,140 @@
 <template>
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a class="navbar-brand">{{ headerName }}</a>
-    </div>
-
-    <div id="bs-example-navbar-collapse-2" class="collapse navbar-collapse">
-      <div class="navbar-form navbar-left" role="search">
-        <div class="dropdown float-left">
-          <button
-            id="dropdownMenuQueryFilter"
-            class="btn btn-default dropdown-toggle"
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="true"
-          >
-            <span class="glyphicon glyphicon-list-alt" />
-          </button>
-
-          <template v-if="infoFilterFieldsClone != null">
-            <draggable
-              v-model="infoFilterFieldsClone"
-              item-key="key"
-              class="dropdown-menu"
-              @change="filterFieldSortChaned()"
-              @click="stopPropagation($event)"
-            >
-              <template #item="{ element }">
-                <div style="margin-left: 15px; margin-right: 15px">
-                  <div class="column">
-                    <input
-                      :id="
-                        'InfoForm' +
-                          '_' +
-                          infoWindowNo +
-                          '_' +
-                          element.fieldName
-                      "
-                      v-model="element.isShow"
-                      autocomplete="off"
-                      class="isShow-checkbox"
-                      type="checkbox"
-                      :disabled="element.mandatory && element.isShow"
-                      @change="visibleChanged(element)"
-                    />
-                    <label
-                      :for="
-                        'InfoForm' +
-                          '_' +
-                          infoWindowNo +
-                          '_' +
-                          element.fieldName
-                      "
-                      class="column-name"
-                      :class="{ 'column-red': element.mandatory == true }"
-                    >{{ element.name }}</label>
-                  </div>
-                </div>
-              </template>
-            </draggable>
-          </template>
-        </div>
-
-        <div class="dropdown float-left dropdown-infoGrid">
-          <button
-            id="dropdownMenuQueryFilter2"
-            class="btn btn-default dropdown-toggle"
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="true"
-          >
-            <span class="glyphicon glyphicon-calendar" />
-          </button>
-
-          <template v-if="infoGridFieldsClone != null">
-            <draggable
-              v-model="infoGridFieldsClone"
-              item-key="key"
-              class="dropdown-menu"
-              @change="gridFieldSortChaned()"
-              @click="stopPropagation($event)"
-            >
-              <template #item="{ element }">
-                <div style="margin-left: 15px; margin-right: 15px">
-                  <div class="column">
-                    <input
-                      :id="
-                        'InfoGrid' +
-                          '_' +
-                          infoWindowNo +
-                          '_' +
-                          element.fieldName
-                      "
-                      v-model="element.isShow"
-                      autocomplete="off"
-                      class="isShow-checkbox"
-                      type="checkbox"
-                      :disabled="element.mandatory && element.isShow"
-                      @change="gridFieldvisibleChanged(element)"
-                    />
-                    <label
-                      :for="
-                        'InfoGrid' +
-                          '_' +
-                          infoWindowNo +
-                          '_' +
-                          element.fieldName
-                      "
-                      class="column-name"
-                      :class="{ 'column-red': element.mandatory == true }"
-                    >{{ element.name }}</label>
-                  </div>
-                </div>
-              </template>
-            </draggable>
-          </template>
-        </div>
-        <button
-          v-if="htmlHelpUrl != undefined && htmlHelpUrl != ''"
-          class="btn btn-default btn-help"
-          @click="openHtmlHelp(htmlHelpUrl)"
+  <div>
+    <a-page-header
+      class="site-page-header"
+      style="padding:0;border-bottom: solid 1px #d1cfcf;margin-bottom: 8px;"
+      :title="headerName"
+      :sub-title="subHeaderName"
+      @back="() => $router.go(-1)"
+    >
+      <template #extra>
+        <a-flex justify="flex-start" align="center" style="height: 46px;" gap="middle">
+          <a-dropdown>
+            <a class="ant-dropdown-link" @click.prevent>
+              设置
+              <DownOutlined />
+            </a>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item>
+                  <a-button type="link" @click="showDrawer1 = true">查询字段设置</a-button>
+                </a-menu-item>
+                <a-menu-item>
+                  <a-button type="link" @click="showDrawer2 = true">表格字段设置</a-button>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+
+          <a-tooltip v-if="!(htmlHelpUrl != undefined && htmlHelpUrl != '')" title="search">
+            <QuestionCircleOutlined style="font-size: 2rem;" @click="openHtmlHelp(htmlHelpUrl)" />
+          </a-tooltip>
+        </a-flex>       
+      </template>
+    </a-page-header>
+
+
+
+
+    
+
+    <a-drawer
+      v-model:open="showDrawer1"
+      title="查询字段设置"
+      placement="right"
+      @after-open-change="showDrawer1 = $event"
+    >
+      <template v-if="infoFilterFieldsClone != null">
+        <draggable
+          v-model="infoFilterFieldsClone"
+          item-key="key"
+          @change="filterFieldSortChaned()"
+          @click="stopPropagation($event)"
         >
-          <span class="glyphicon glyphicon-question-sign" />
-        </button>
-      </div>
-      <a-button style="float: right; margin-top: 10px" type="link" @click="openComplexDrawer">
-        高级查询
-        <SearchOutlined />
-      </a-button>
-    </div>
+          <template #item="{ element }">
+            <div style="margin-left: 15px; margin-right: 15px">
+              <div class="column">
+                <input
+                  :id="
+                    'InfoForm' +
+                      '_' +
+                      infoWindowNo +
+                      '_' +
+                      element.fieldName
+                  "
+                  v-model="element.isShow"
+                  autocomplete="off"
+                  class="isShow-checkbox"
+                  type="checkbox"
+                  :disabled="element.mandatory && element.isShow"
+                  @change="visibleChanged(element)"
+                />
+                <label
+                  :for="
+                    'InfoForm' +
+                      '_' +
+                      infoWindowNo +
+                      '_' +
+                      element.fieldName
+                  "
+                  class="column-name"
+                  :class="{ 'column-red': element.mandatory == true }"
+                >{{ element.name }}</label>
+              </div>
+            </div>
+          </template>
+        </draggable>
+      </template>
+    </a-drawer>
+
+
+    <a-drawer
+      v-if="infoGridFieldsClone != null"
+      v-model:open="showDrawer2"
+      title="表格字段设置"
+      placement="right"
+      @after-open-change="showDrawer2 = $event"
+    >
+      <draggable
+        v-model="infoGridFieldsClone"
+        item-key="key"
+        @change="gridFieldSortChaned()"
+        @click="stopPropagation($event)"
+      >
+        <template #item="{ element }">
+          <div style="margin-left: 15px; margin-right: 15px">
+            <div class="column">
+              <input
+                :id="
+                  'InfoGrid' +
+                    '_' +
+                    infoWindowNo +
+                    '_' +
+                    element.fieldName
+                "
+                v-model="element.isShow"
+                autocomplete="off"
+                class="isShow-checkbox"
+                type="checkbox"
+                :disabled="element.mandatory && element.isShow"
+                @change="gridFieldvisibleChanged(element)"
+              />
+              <label
+                :for="
+                  'InfoGrid' +
+                    '_' +
+                    infoWindowNo +
+                    '_' +
+                    element.fieldName
+                "
+                class="column-name"
+                :class="{ 'column-red': element.mandatory == true }"
+              >{{ element.name }}</label>
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </a-drawer>
   </div>
 </template>
 
@@ -137,14 +142,15 @@
 
 import draggable from 'vuedraggable';
 import Language from '../../common/Language.js';
-import { SearchOutlined } from '@ant-design/icons-vue';
-export default {
-
+import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
 
+export default {
   components: {
     draggable,
-    SearchOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
   },
+
   props: {
     'infoFilterFields': {
       type: Object,
@@ -154,6 +160,10 @@ export default {
       type: String,
       default: null,
     }, 
+    'subHeaderName': {
+      type: String,
+      default: null,
+    }, 
     'infoGridFields': {
       type: Object,
       default: null,
@@ -176,6 +186,8 @@ export default {
       infoFilterFieldsClone: [],
       infoGridFieldsClone: [],
       searchVisible:false,
+      showDrawer1: false,
+      showDrawer2: false,
     };
   },
 
@@ -201,9 +213,6 @@ export default {
   },
 
   methods: {
-    openComplexDrawer:function(){
-      this.$emit('openComplex',true);
-    },
     cloneInfoFilterFields: function () {
       var _self = this;
       if (_self.infoFilterFields != null) {

packages/info/src/InfoWindowState.js

@@ -2,6 +2,43 @@ import { reactive, ref } from 'vue';
 
 import InfoUtil from './InfoUtil.js';
 
+export function useSearchCondition(){
+  const state = reactive({
+    isComplex: false, // false: 简单查询, true: 高级查询
+  });
+
+  /**
+   * 显示高级查询
+   */
+  function openComplex(){
+    state.isComplex = true;
+  }
+
+  
+  /**
+   * 显示高级查询
+   */
+  function closeComplex(){
+    state.isComplex = false;
+  }
+
+  /**
+   * 设置是否高级显示
+   * @param {*} value 
+   */
+  function setComplex(value){
+    console.debug(value);
+    state.isComplex = value;
+  }
+
+  return {
+    state,
+    openComplex,
+    closeComplex,
+    setComplex,
+  };
+}
+
 
 export function useSort() {
   const sortSetting = reactive({

packages/info/src/QueryCondition.vue

@@ -1,48 +1,25 @@
 <template>
   <div>
     <div>
-      <!-- <ul
-        class="nav nav-tabs m-row"
-        role="tablist"
-      >
-        <li
-          role="presentation"
-          :class="{'active': isSimple === true}"
-        >
-          <a @click="changeSearch(true)">{{ $t('lang.QueryCondition.simpleQuery') }}</a>
-        </li>
-        <li
-          role="presentation"
-          :class="{'active': isSimple === false}"
-        >
-          <a @click="changeSearch(false)">{{ $t('lang.QueryCondition.advancedQuery') }}</a>
-        </li>
-        <slot name="header" :is-simple="isSimple" />
-      </ul> -->
-
       <div>
         <div>
           <QueryConditionSimple
             ref="queryConditionSimple"
             :info-buttons="infoButtons"
             :is-search-widget="isSearchWidget"
-            :show-button="showButton"
+            :search-condition-instance="searchConditionInstance"
             @simple-search="simpleSearch"
-            @refresh-search="refreshSearch"
-            @execute-process="executeProcess($event)"
-            @execute-export="executeExport"
           />
         </div>
 
-        <div
-          v-show="isComplex"
-        >
+        <div>
           <a-drawer
-            v-model:open="searchVisible"
+            :open="searchConditionInstance.state.isComplex"
             title="高级查询"
             width="440px"
             style="z-index: 1050;"
             placement="right"
+            @udpate:open="searchConditionInstance.setComplex($event)"
             @close="closeSearch"
           >
             <QueryConditionComplex
@@ -51,14 +28,10 @@
               :filter-fields="filterFields"
               :info-buttons="infoButtons"
               :is-search-widget="isSearchWidget"
-              :show-button="showButton"
               @complex-search="complexSearch"
-              @execute-process="executeProcess($event)"
-              @execute-export="executeExport"
             />
           </a-drawer>
         </div>
-        <slot name="body" />
       </div>
     </div>
   </div>
@@ -93,18 +66,16 @@ export default {
       type: Boolean,
       default: null,
     },
-    'showButton':{
-      type: Boolean,
-      default: null,
-    },
-    'isComplex':{
-      type: Boolean,
-      default: false,
+    'searchConditionInstance':{
+      type: Object,
+      default: function(){
+        return {};
+      },
     },
   },
     
 
-  emits: ['simpleSearch', 'complexSearch','openComplex', 'refreshSearch', 'executeProcess', 'executeExport', 'changeSearch'],
+  emits: ['simpleSearch', 'complexSearch',  'executeProcess', 'changeSearch'],
 
   data: function () {
     return {
@@ -112,7 +83,6 @@ export default {
       isSimple: true,
       filterFields: [],
       selectedText: [],
-      searchVisible:false,
       searchType:'simple',
     };
   },
@@ -143,9 +113,6 @@ export default {
       },
     },
     
-    isComplex(newVal){
-      this.searchVisible = newVal;
-    },
     
     
   },
@@ -159,9 +126,9 @@ export default {
     isSimpleQuery: function () {
       return this.isSimple === true;
     },
+    
     closeSearch(){
-      this.searchVisible = false;
-      this.$emit('openComplex',false);
+      this.searchConditionInstance.closeComplex();
     },
     /**
          * 获取查询条件供外部调用
@@ -211,28 +178,7 @@ export default {
       this.$emit('complexSearch','complex');
     },
 
-    /**
-         * 刷新搜索
-         */
-    refreshSearch: function () {
-      this.$emit('refreshSearch');
-    },
-
-    /**
-         * 执行流程
-         *
-         */
-    executeProcess: function (infoButton) {
-      this.$emit('executeProcess', infoButton);
-    },
 
-    /**
-         * 执行导出
-         * @return {void} 
-         */
-    executeExport: function () {
-      this.$emit('executeExport');
-    },
 
     /**
          * 切换简单查询和高级查询

packages/info/src/QueryConditionComplex.vue

@@ -313,10 +313,6 @@ export default {
       type: Boolean,
       default: null,
     },
-    'showButton':{
-      type: Boolean,
-      default: null,
-    },
   },
 
   emits: ['complexSearch', 'executeExport', 'executeProcess'],

packages/info/src/QueryConditionSimple.vue

@@ -2,55 +2,14 @@
 <template>
   <div>
     <div>
-      <input
-        v-model="simpleConditionValue"
-        autocomplete="off"
-        type="text"
-        class="form-control input-simple"
+      <a-input-search
+        v-model:value="simpleConditionValue"
         :placeholder="$t('lang.QueryConditionSimple.enterSearchCriteria')"
-        @keyup.enter="simpleSearch"
+        enter-button
+        style="width: 200px"
+        @search="simpleSearch"
       />
-    </div>
-    <div v-if="showButton" style="margin-top: 5px">
-      <div>
-        <button
-          id="filter"
-          type="button"
-          class="btn btn-default m-btn"
-          @click="simpleSearch()"
-        >
-          {{ $t('lang.QueryConditionSimple.filter') }}
-        </button>
-
-        <button
-          id="filter"
-          type="button"
-          class="btn btn-default m-btn"
-          @click="refreshSearch()"
-        >
-          {{ $t('lang.QueryConditionSimple.refresh') }}
-        </button>
-
-        <template v-if="!isSearchWidget">
-          <button
-            type="button"
-            class="btn btn-default m-btn"
-            @click="executeExport()"
-          >
-            {{ $t('lang.QueryConditionSimple.export') }}
-          </button>
-
-          <template v-for="infoButton in infoButtons" :key="infoButton.name">
-            <button
-              v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)"
-              class="btn btn-default btn-process m-btn"
-              @click="executeProcess(infoButton)"
-            >
-              {{ Language.getNameTrl($i18n.locale, infoButton) }}
-            </button>
-          </template>
-        </template>
-      </div>
+      <a-button type="link" @click="searchConditionInstance.openComplex()">{{ $t('lang.QueryConditionSimple.moreCondition') }}</a-button>
     </div>
   </div>
 </template>
@@ -73,13 +32,17 @@ export default {
       type: Boolean,
       default: false,
     },
-    'showButton':{
-      type: Boolean,
-      default: false,
+    'searchConditionInstance':{
+      type: Object,
+      default: function(){
+        return {};
+      },
     },
   },
 
-  emits: ['simpleSearch', 'refreshSearch', 'executeExport', 'executeProcess'],
+
+
+  emits: ['simpleSearch'],
 
   data: function () {
     this.Language = Language;
@@ -92,44 +55,23 @@ export default {
 
 
     /**
-         * 触发简单查询
-         * @return {void} 
-         */
+     * 触发简单查询
+     * @return {void} 
+     */
     simpleSearch: function () {
       this.$emit('simpleSearch','simple');
     },
 
-    /**
-         * 刷新搜索
-         */
-    refreshSearch: function () {
-      this.$emit('refreshSearch');
-    },
 
-    /**
-         * 执行导出
-         * @return {void} 
-         */
-    executeExport: function () {
-      this.$emit('executeExport');
-    },
 
-    /**
-         * 执行流程
-         *
-         */
-    executeProcess: function (infoButton) {
-      this.$emit('executeProcess', infoButton);
-    },
 
     /**
-         * 获取查询条件供外部调用
-         * @return {Object} 查询条件
-         */
+     * 获取查询条件供外部调用
+     * @return {Object} 查询条件
+     */
     getQueryCondition: function () {
       var _self = this;
       return _self.simpleConditionValue;
-      
     },
   },
 };

packages/info/src/QueryPage.vue

@@ -1,68 +1,91 @@
 <template>
   <div
-    class="flex-container"
-    :class="{
+    class="flex-container" :class="{
       'flex-container-modal': isSearchWidget == true,
       'flex-container': isSearchWidget == null || isSearchWidget == false,
     }"
   >
     <div class="flex-header">
-      <div class="panel panel-default" style="margin-bottom: 5px">
-        <div class="panel-heading" style="padding: 0px">
+      <div>
+        <div>
           <InfoHeader
             :html-help-url="infoWindowDto.htmlHelpUrl"
             :info-grid-fields="infoGridFieldsInstance.infoGridFields"
-            :header-name="Language.getNameTrl($i18n.locale, infoWindowDto)"
+            :header-name="Language.getNameTrl($i18n.locale, infoWindowDto)" 
+            :sub-header-name="Language.getHelpTrl($i18n.locale, infoWindowDto)"
+            
             :info-filter-fields="infoFilterFields"
-            :info-window-no="infoWindowDto.no"
-            @open-complex="openComplex"
+            :info-window-no="infoWindowDto.no" 
             @filter-field-property-changed="filterFieldPropertyChanged($event)"
             @grid-field-property-changed="gridFieldPropertyChanged($event)"
           />
         </div>
-        <div class="panel-body" style="padding-bottom: 5px; padding-top: 8px">
+        <div>
           <QueryCondition
-            ref="queryCondition"
-            :info-filter-fields="infoFilterFields"
-            :info-buttons="infoWindowDto.infoButtons"
-            :is-search-widget="isSearchWidget"
-            :show-button="true"
+            ref="queryCondition" :info-filter-fields="infoFilterFields"
+            :info-buttons="infoWindowDto.infoButtons" :is-search-widget="isSearchWidget"
             :info-window-no="infoWindowDto.no"
-            :is-complex="isComplex"
-            @open-complex="openComplex"
-            @simple-search="simpleSearch"
-            @complex-search="complexSearch"
-            @refresh-search="pageSearch"
-            @execute-process="executeProcess($event)"
-            @execute-export="executeExport"
+            :search-condition-instance="searchConditionInstance"
+            @simple-search="simpleSearch" @complex-search="complexSearch" 
           />
         </div>
       </div>
+      
+      <a-space warp style="margin-top: 5px;">
+        <a-button type="link" @click="pageSearch">
+          {{ $t('lang.QueryConditionSimple.refresh') }}
+          <template #icon>
+            <SyncOutlined />
+          </template>
+        </a-button>
+
+
+        <a-button type="link" @click="executeExport">
+          {{ $t('lang.QueryConditionSimple.export') }}
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+        </a-button>
+      </a-space>
+
+
+
+      <div v-if="!isSearchWidget" style="display: inline-block">
+        <template v-for="infoButton in infoButtons" :key="infoButton.name">
+          <a-button
+            v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)" type="link"
+            @click="executeProcess(infoButton)"
+          >
+            {{ Language.getNameTrl($i18n.locale, infoButton) }}
+          </a-button>
+        </template>
+      </div>
+
+
+      <a-segmented v-model:value="selectedView" :options="views" class="m-segmented" size="small">
+        <template #label="{ value: val, payload = {} }">
+          <div style="padding: 2px 2px">
+            <a-avatar :src="payload.src" :alt="val" size="small" shape="square">
+              {{ payload.content }}
+            </a-avatar>
+          </div>
+        </template>
+      </a-segmented>
     </div>
     <!-- xx -->
-     
-    <div class="flex-content">
-      <QueryPageTable 
-        v-if="1==2"
-        :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)"
-        @delete-selected="$emit('deleteSelected', $event)"
-      />
 
-      <QueryPageDashboard
-        v-else
-        :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)"
+    <div 
+      style="padding:0;border-bottom: solid 1px #d1cfcf;margin-top:5px; margin-bottom: 5px;"
+    />
+    <div
+      class="flex-content" 
+    >
+      <component
+        :is="selectedView"
+        v-if="selectedView != null"
+        :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)"
         @delete-selected="$emit('deleteSelected', $event)"
       />
     </div>
@@ -80,10 +103,7 @@
           ,
           {{ $t("lang.QueryPage.displayOnEachPage") }}
         </span>
-        <PageSizeSelect
-          :size="pagination.per_page"
-          @page-size-changed="gridSizeSelect"
-        />
+        <PageSizeSelect :size="pagination.per_page" @page-size-changed="gridSizeSelect" />
         <span>{{ $t("lang.QueryPage.strip") }}</span>
       </div>
       <div class="pull-right">
@@ -93,11 +113,7 @@
     <Loading v-if="loading" />
     <Modal v-model:show="modal">
       <template #default>
-        <ProcessReportResult
-          :process-report-result="processReportResult"
-          :pdf-only="pdfOnly"
-          :excel-only="excelOnly"
-        />
+        <ProcessReportResult :process-report-result="processReportResult" :pdf-only="pdfOnly" :excel-only="excelOnly" />
       </template>
       <template #header>
         <div>{{ $t("lang.QueryPage.resultsOfEnforcement") }}</div>
@@ -136,7 +152,8 @@ import dayjs from 'dayjs';
 import QueryPageTable from './QueryPageTable.vue';
 import QueryPageDashboard from './QueryPageDashboard.vue';
 
-import { useSort, useInfoGridFields, useInfoWindowData } from './InfoWindowState.js';
+import { useSort, useInfoGridFields, useInfoWindowData, useSearchCondition } from './InfoWindowState.js';
+import { SyncOutlined, DownloadOutlined  } from '@ant-design/icons-vue';
 
 export default {
   name: 'QueryPage',
@@ -151,6 +168,8 @@ export default {
     PageSizeSelect,
     QueryPageTable,
     QueryPageDashboard,
+    SyncOutlined,
+    DownloadOutlined ,
   },
 
   props: {
@@ -189,7 +208,7 @@ export default {
       type: String,
       default: null,
     },
-    
+
     /**
      * 是否多选
      */
@@ -224,11 +243,36 @@ export default {
       infoFilterFields: [],
       loading: false,
       modal: false,
-      isComplex:false,
-      searchType:'simple',
+      searchType: 'simple',
       sortInstance: useSort(),
+      searchConditionInstance: useSearchCondition(),
       infoGridFieldsInstance: useInfoGridFields(),
       infoWindowDataInstance: useInfoWindowData(),
+
+      views: [
+        {
+          name: '表格视图',
+          value: 'QueryPageTable',
+          payload: {
+            src: 'https://joeschmoe.io/api/v1/random',
+            style: {
+              backgroundColor: '#f56a00',
+            },
+          },
+        },
+        {
+          name: '看板视图',
+          value: 'QueryPageDashboard',
+          payload: {
+            src: 'https://joeschmoe.io/api/v1/random',
+            style: {
+              backgroundColor: '#f56a00',
+            },
+          },
+        },
+      ],
+
+      selectedView: 'QueryPageTable', // 选中的视图
     };
   },
 
@@ -244,8 +288,13 @@ export default {
       },
       deep: true,
     },
+
+    selectedView: function(newValue, oldValue){
+      console.log(newValue);
+      console.log(oldValue);
+    },
   },
-  
+
   created: function () {
     const infoPageSize = localStorage.getItem(
       `InfoWindowPageSize${this.windowNo}`,
@@ -255,12 +304,12 @@ export default {
     }
   },
 
+  mounted: function(){
 
-  methods: {
+  },
 
-    openComplex:function(value){
-      this.isComplex = value;
-    },
+
+  methods: {
 
     /**
      * 页面显示数量改变
@@ -333,7 +382,7 @@ export default {
         (_self.pagination.current_page - 1) * _self.pagination.per_page;
       _self.infoQueryParam.length = _self.pagination.per_page;
       _self.infoQueryParam.infoFilterFieldValues =
-      _self.$refs.queryCondition.getQueryCondition();
+        _self.$refs.queryCondition.getQueryCondition();
       if (_self.searchType === 'complex') {
         _self.queryInfoWindowDataComplex();
       } else {
@@ -446,7 +495,7 @@ export default {
             _self.loading = false;
           }
           _self.setSelectedFlag(data);
-          
+
           _self.infoWindowDataInstance.init(data.dataList);
 
           _self.pagination.total = data.totalSize;
@@ -720,8 +769,7 @@ export default {
     executeExport: function () {
       var _self = this;
 
-      // var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
-      if (this.isComplex == false) {
+      if (this.searchConditionInstance.state.isComplex == false) {
         let condition = _self.$refs.queryCondition.getQueryCondition();
         let downloadUrl =
           Common.getApiURL('exportResource/exportInfoDataSimple') +
@@ -780,7 +828,7 @@ export default {
      */
     getSelectedRecordIds: function () {
       return this.infoWindowDataInstance.getSelectedRecordIds();
-     
+
     },
 
     /**
@@ -800,10 +848,10 @@ export default {
      */
     getFirstSelectModelDataFieldValue: function (name) {
       const firstData = this.infoWindowDataInstance.getFirstSelected();
-      if(firstData == null){
+      if (firstData == null) {
         return null;
-      }else{
-        if(firstData.data[name] != null){
+      } else {
+        if (firstData.data[name] != null) {
           return firstData.data[name].displayValue[0];
         }
       }
@@ -822,6 +870,7 @@ export default {
   float: right;
   margin-left: 15px;
 }
+
 .mulitiple-select {
   background-color: #6699cc !important;
 }
@@ -861,13 +910,12 @@ export default {
   flex: 1;
   height: 0;
 }
-
 </style>
 
 
 <style scoped>
 /** 修复分页的样式 By YangZhiJie 2021-07-06 11:23 */
-nav >>> ul.pagination {
+nav>>>ul.pagination {
   margin: 0 !important;
 }
 </style>
@@ -880,4 +928,12 @@ nav >>> ul.pagination {
 .text-center {
   text-align: center !important;
 }
+
+.m-segmented{
+  float: right;
+}
+
+.m-segmented >>> .ant-segmented-item{
+  margin-bottom: 0px;
+}
 </style>

packages/info/src/QueryPageDashboard.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex-main table-fix-head">
-    <table>
+  <div class="flex-main">
+    <table style="width: 100%; background-color: #f7f9f8; border: 1px solid #eeeeeb; margin-bottom: 0.5rem;">
       <thead>
         <tr height="40px">
           <th
@@ -10,29 +10,80 @@
             <input v-model="isSelectAll" autocomplete="off" type="checkbox" />
           </th>
 
-          <th width="80px">综合排序</th>
-          <th width="80px">购置日期</th>
-          <th width="100px">财务入账日期</th>
-          <th width="60px">数量</th>
-          <th width="60px">价格</th>
+          <th width="80px">
+            <a-flex justify="flex-start" align="center">
+              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.assetNo')">
+                综合排序
+                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.assetNo'" #icon>
+                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
+                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
+                </template>
+              </a-button>
+            </a-flex>
+          </th>
+
+          <th width="80px">
+            <a-flex justify="flex-start" align="center">
+              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.buyDate')">
+                购置日期
+                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.buyDate'" #icon>
+                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
+                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
+                </template>
+              </a-button>
+            </a-flex>
+          </th>
+          <th width="100px">
+            <a-flex justify="flex-start" align="center">
+              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.accountCreateDate')">
+                财务入账日期
+                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.accountCreateDate'" #icon>
+                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
+                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
+                </template>
+              </a-button>
+            </a-flex>
+          </th>
+          <th width="60px">
+            <a-flex justify="flex-start" align="center">
+              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.quantity')">
+                数量
+                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.quantity'" #icon>
+                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
+                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
+                </template>
+              </a-button>
+            </a-flex>
+          </th>
+          <th width="60px">
+            <a-flex justify="flex-start" align="center">
+              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.orginalValue')">
+                价格
+                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.orginalValue'" #icon>
+                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
+                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
+                </template>
+              </a-button>
+            </a-flex>
+          </th>
+
+          <th />
         </tr>
       </thead>
     </table>
 
     <div>
-      <a-row :gutter="24">
-        <a-col
-          v-for="(item1, index) in infoWindowDataInstance.dataList" :key="'tr' + item1.id" :span="6" height="40px"
+      <a-flex wrap="wrap" gap="small">
+        <div
+          v-for="(item1, index) in infoWindowDataInstance.dataList" :key="'tr' + item1.id" 
           :class="{ warning: item1.select }" @dblclick="selectNode(item1)"
         >
-          <a-card hoverable :body-style="{padding: '1rem'}">
+          <a-card hoverable :body-style="{ padding: '1rem' }" style="width: 200px;">
             <template #cover>
               <a-flex gap="0" vertical>
                 <div>
-                  <div style="position: relative; height: 120px;">
-                    <div
-                      style="position: absolute; top:0px; left: 10px; z-index: 1;"
-                    >
+                  <div style="position: relative;">
+                    <div style="position: absolute; top:0px; left: 10px; z-index: 1;">
                       <span>
                         {{
                           index +
@@ -43,53 +94,41 @@
                         &nbsp;
                       </span>
                     </div>
-                    <div
-                      style="position: absolute; top:1px; left: 25px; z-index: 1;"
-                    >
+                    <div style="position: absolute; top:1px; left: 25px; z-index: 1;">
                       <input
-                        autocomplete="off" type="checkbox" :checked="item1.select"
-                        style="padding-left: 10px;"
+                        autocomplete="off" type="checkbox" :checked="item1.select" style="padding-left: 10px;"
                         @click.self="selectNodeForSearch(item1)"
                       />
                     </div>
-                 
-                    <div style="position: absolute; top:0px;">
-                      <img
-                        style="width: 100%;" 
-                        alt="example" 
-                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" 
-                      
-                        @click="selectNodeForSearch(item1)"
-                      />
-                    </div>
                   </div>
                 </div>
+
+                <div>
+                  <img
+                    style="width: 100%;" alt="example"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+                    @click="selectNodeForSearch(item1)"
+                  />
+                </div>
+
                 <div style="padding: 0 1rem;">
-                  资产名称
+                  {{ item1.data['assetInstance.assetNo'].displayValue[0] }}
                 </div>
                 <div style="padding: 0 1rem;">
-                  资产描述
+                  {{ item1.data['assetInstance.name'].displayValue[0] }}
                 </div>
 
                 <a-flex horizontal style="border: 1px solid #ebebe9;">
-                  <div style="width: 50%; text-align: center; border-right: 1px solid #ebebe9;">¥14300</div>
-                  <div style="width: 50%; text-align: center;">数量：1</div>
+                  <div style="width: 50%; text-align: center; border-right: 1px solid #ebebe9;">¥0</div>
+                  <div style="width: 50%; text-align: center;">数量：{{ item1.data['assetInstance.quantity'].displayValue[0] }}</div>
                 </a-flex>
               </a-flex>
             </template>
-            <template #actions>
-              <div>
-                <a-tag color="pink">账</a-tag>
-                <a-tag color="red">固</a-tag>
-                <a-tag color="orange">主</a-tag>
-                <a-tag color="green">无</a-tag>
-              </div>
-            </template>
 
             <a-flex gap="0" vertical>
               <a-flex horizontal gap="5">
                 <div style="width: 40%">购置日期</div>
-                <div style="width: 60%">xxx</div>
+                <div style="width: 60%"> xxx </div>
               </a-flex>
               <a-flex horizontal gap="5">
                 <div style="width: 40%">财务入账</div>
@@ -101,12 +140,19 @@
               </a-flex>
               <a-flex horizontal gap="5">
                 <div style="width: 40%">使用状态</div>
-                <div style="width: 60%">xxx</div>
+                <div style="width: 60%">{{ item1.data['useStatus.name'].displayValue[0] }}</div>
+              </a-flex>
+
+              <a-flex horizontal justify="flex-end" style="margin-top: 5px;">
+                <a-tag color="pink">账</a-tag>
+                <a-tag color="red">固</a-tag>
+                <a-tag color="orange">主</a-tag>
+                <a-tag color="green">无</a-tag>
               </a-flex>
             </a-flex>
           </a-card>
-        </a-col>
-      </a-row>
+        </div>
+      </a-flex>
     </div>
   </div>
 </template>
@@ -114,27 +160,17 @@
 
 <script>
 
-import Context from './Context.js';
-import JsUtil from '../../common/JsUtil.js';
 import Language from '../../common/Language.js';
-
-import Notify from '../../common/Notify.js';
-
-
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
 
 export default {
   name: 'QueryPageDashboard',
 
   components: {
+    ArrowUpOutlined, ArrowDownOutlined,
   },
 
   props: {
-    callOutJsUrl: {
-      type: String,
-      default() {
-        return null;
-      },
-    },
     infoWindowDataInstance: {
       type: Object,
       default() {
@@ -154,16 +190,16 @@ export default {
       },
     },
     /**
-         * 是否多选
-         */
+     * 是否多选
+     */
     multiple: {
       type: Boolean,
       default: false,
     },
 
     /**
-         * 排序对象实例
-         */
+     * 排序对象实例
+     */
     sortInstance: {
       type: Object,
       default() {
@@ -173,6 +209,7 @@ export default {
   },
 
   emits: ['dataSelected', 'deleteSelected'],
+  
   data: function () {
     this.Language = Language;
     return {
@@ -196,8 +233,8 @@ export default {
 
   watch: {
     /**
-         * 是否选择了全部的数据
-         */
+     * 是否选择了全部的数据
+     */
     isSelectAll: function (val) {
       var _self = this;
       if (_self.multipleSelect) {
@@ -212,6 +249,7 @@ export default {
         _self.isSelectAll = false;
       }
     },
+
     multiple: {
       handler: function (newValue, oldValue) {
         this.multipleSelect = newValue;
@@ -221,69 +259,16 @@ export default {
   },
 
   methods: {
-
-    getContext: Context,
-
-    executeCallout: function (rowData, filedItem) {
-      let _self = this;
-
-      const methodName = filedItem.callOutJsMethod;
-
-      const callOutJsUrl = this.infoWindowDto.callOutJsUrl;
-
-      let functionName = methodName.replace('.', '_') + '_calloutjs';
-
-      let executeFunction = function () {
-
-        let context = new _self.getContext(rowData, {});
-        try {
-          _self[functionName](context);
-        } catch (e) {
-          console.error(e);
-          Notify.error('数据字典定义异常', ` 【 ${methodName} 】前端列显示逻辑定义异常,请联系管理员检查数据字典的定义。`, false);
-        }
-      };
-
-      if (_self[functionName] == null) {
-        // 执行服务端的脚本
-        const jsUrl = callOutJsUrl;
-        if (jsUrl == null || jsUrl == undefined) {
-          Notify.error('数据字典定义异常', `【 ${methodName} 】Callout前端逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。`, false);
-          return;
-        }
-        let promise = JsUtil.dynamicLoadJsFunction(jsUrl, methodName);
-        promise.then(targetFunction => {
-          if (targetFunction == null) {
-            Notify.error('数据字典定义异常', `【 ${methodName} 】Callout前端逻辑定义异常,请联系管理员检查数据字典的定义。`, false);
-            return;
-          }
-
-          _self[functionName] = targetFunction;
-          executeFunction();
-
-        }, errorData => {
-          console.error(errorData);
-        });
-      } else {
-        executeFunction();
-      }
-    },
-
-
     /**
-         * 切换全选/单选
-         */
+     * 切换全选/单选
+     */
     changeSelectMode: function () {
       this.multipleSelect = !this.multipleSelect;
     },
 
-
-
-
-
     /**
-         * 选择/取消选择表格行中的复选框事件
-         */
+     * 选择/取消选择表格行中的复选框事件
+     */
     selectNodeForSearch: function (modelData) {
       var _self = this;
 
@@ -301,83 +286,22 @@ export default {
       }
     },
 
-
     /**
-         * 双击表格行事件
-         */
+     * 双击表格行事件
+     */
     selectNode: function (modelData) {
       this.$emit('dataSelected', modelData);
     },
 
-
-
   },
 };
 </script>
 
 <style scoped>
-.flex-main {
-  overflow: scroll;
-  flex: 1;
-  margin-bottom: 0px;
-}
-
-
-.fixed-table {
-  table-layout: fixed;
-}
-
-table.fixed-table tr th {
-  text-align: center;
-}
 
-table.fixed-table td {
-  text-align: center;
-  word-wrap: break-word;
-  word-break: normal;
-}
-
-
-
-table.fixed-table th {
-  position: relative;
-  min-width: 25px;
-}
-
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-table.fixed-table th {
-  min-width: 10px;
-  background-color: #f8f8f8;
-}
-
-table.fixed-table th .rz-handle {
-  width: 10px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: repeating-linear-gradient(45deg,
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.05) 2px,
-      rgba(0, 0, 0, 0.05) 4px);
-  cursor: ew-resize !important;
-}
-
-table.fixed-table th .rz-handle.rz-handle-active {
-  border-right: 2px solid #000;
-  transform: scaleX(100);
-  background: rgba(0, 0, 0, 0.05) 2px;
-}
-
-.rz-handle:hover {
-  background: rgba(0, 0, 0, 0.2) 4px;
+.flex-main {
+    overflow: scroll;
+    flex: 1;
+    margin-bottom: 0px;
 }
 </style>