1.0.72 查询窗口高级查询更改为抽屉样式

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.70",
+  "version": "1.0.72",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {

packages/info/src/InfoHeader.vue

@@ -4,14 +4,8 @@
       <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 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"
@@ -32,11 +26,17 @@
               @change="filterFieldSortChaned()"
               @click="stopPropagation($event)"
             >
-              <template #item="{element}">
-                <div style="margin-left: 15px;margin-right: 15px;">
+              <template #item="{ element }">
+                <div style="margin-left: 15px; margin-right: 15px">
                   <div class="column">
                     <input
-                      :id="'InfoForm' + '_' + infoWindowNo + '_' + element.fieldName"
+                      :id="
+                        'InfoForm' +
+                          '_' +
+                          infoWindowNo +
+                          '_' +
+                          element.fieldName
+                      "
                       v-model="element.isShow"
                       autocomplete="off"
                       class="isShow-checkbox"
@@ -45,9 +45,15 @@
                       @change="visibleChanged(element)"
                     />
                     <label
-                      :for="'InfoForm' + '_' + infoWindowNo + '_' + element.fieldName"
+                      :for="
+                        'InfoForm' +
+                          '_' +
+                          infoWindowNo +
+                          '_' +
+                          element.fieldName
+                      "
                       class="column-name"
-                      :class="{'column-red' : element.mandatory == true}"
+                      :class="{ 'column-red': element.mandatory == true }"
                     >{{ element.name }}</label>
                   </div>
                 </div>
@@ -73,14 +79,20 @@
               v-model="infoGridFieldsClone"
               item-key="key"
               class="dropdown-menu"
-              @change="gridFieldSortChaned()" 
+              @change="gridFieldSortChaned()"
               @click="stopPropagation($event)"
             >
-              <template #item="{element}">
-                <div style="margin-left: 15px;margin-right: 15px;">
+              <template #item="{ element }">
+                <div style="margin-left: 15px; margin-right: 15px">
                   <div class="column">
                     <input
-                      :id="'InfoGrid' + '_' + infoWindowNo + '_' + element.fieldName"
+                      :id="
+                        'InfoGrid' +
+                          '_' +
+                          infoWindowNo +
+                          '_' +
+                          element.fieldName
+                      "
                       v-model="element.isShow"
                       autocomplete="off"
                       class="isShow-checkbox"
@@ -89,9 +101,15 @@
                       @change="gridFieldvisibleChanged(element)"
                     />
                     <label
-                      :for="'InfoGrid' + '_' + infoWindowNo + '_' + element.fieldName"
+                      :for="
+                        'InfoGrid' +
+                          '_' +
+                          infoWindowNo +
+                          '_' +
+                          element.fieldName
+                      "
                       class="column-name"
-                      :class="{'column-red' : element.mandatory == true}"
+                      :class="{ 'column-red': element.mandatory == true }"
                     >{{ element.name }}</label>
                   </div>
                 </div>
@@ -107,6 +125,10 @@
           <span class="glyphicon glyphicon-question-sign" />
         </button>
       </div>
+      <a-button style="float: right; margin-top: 10px" type="link" @click="openComplexDrawer">
+        高级查询
+        <SearchOutlined />
+      </a-button>
     </div>
   </div>
 </template>
@@ -115,12 +137,13 @@
 
 import draggable from 'vuedraggable';
 import Language from '../../common/Language.js';
-
+import { SearchOutlined } from '@ant-design/icons-vue';
 export default {
 
 
   components: {
     draggable,
+    SearchOutlined,
   },
   props: {
     'infoFilterFields': {
@@ -145,14 +168,14 @@ export default {
     }, 
   },
 
-  emits: ['gridFieldPropertyChanged', 'filterFieldPropertyChanged'],
-    
+  emits: ['gridFieldPropertyChanged','openComplex', 'filterFieldPropertyChanged'],
   data: function () {
     this.Language = Language;
     return {
       sortMap: {},
       infoFilterFieldsClone: [],
       infoGridFieldsClone: [],
+      searchVisible:false,
     };
   },
 
@@ -170,6 +193,9 @@ export default {
   },
 
   methods: {
+    openComplexDrawer:function(){
+      this.$emit('openComplex',true);
+    },
     cloneInfoFilterFields: function () {
       var _self = this;
       if (_self.infoFilterFields != null) {

packages/info/src/QueryCondition.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <ul
+      <!-- <ul
         class="nav nav-tabs m-row"
         role="tablist"
       >
@@ -18,13 +18,10 @@
           <a @click="changeSearch(false)">{{ $t('lang.QueryCondition.advancedQuery') }}</a>
         </li>
         <slot name="header" :is-simple="isSimple" />
-      </ul>
+      </ul> -->
 
-      <div class="tab-content">
-        <div
-          class="tab-pane"
-          :class="{'active': isSimple === true}"
-        >
+      <div>
+        <div>
           <QueryConditionSimple
             ref="queryConditionSimple"
             :info-buttons="infoButtons"
@@ -38,20 +35,27 @@
         </div>
 
         <div
-          class="tab-pane"
-          :class="{'active': isSimple === false}"
+          v-show="isComplex"
         >
-          <QueryConditionComplex
-            ref="queryConditionComplex"
-            :info-window-no="infoWindowNo"
-            :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
+            v-model:visible="searchVisible"
+            title="高级查询"
+            width="440px"
+            placement="right"
+            @close="closeSearch"
+          >
+            <QueryConditionComplex
+              ref="queryConditionComplex"
+              :info-window-no="infoWindowNo"
+              :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>
@@ -92,10 +96,14 @@ export default {
       type: Boolean,
       default: null,
     },
+    'isComplex':{
+      type: Boolean,
+      default: false,
+    },
   },
     
 
-  emits: ['simpleSearch', 'complexSearch', 'refreshSearch', 'executeProcess', 'executeExport', 'changeSearch'],
+  emits: ['simpleSearch', 'complexSearch','openComplex', 'refreshSearch', 'executeProcess', 'executeExport', 'changeSearch'],
 
   data: function () {
     return {
@@ -103,6 +111,7 @@ export default {
       isSimple: true,
       filterFields: [],
       selectedText: [],
+      searchVisible:false,
     };
   },
 
@@ -132,6 +141,9 @@ export default {
       },
     },
     
+    isComplex(newVal){
+      this.searchVisible = newVal;
+    },
     
     
   },
@@ -145,7 +157,10 @@ export default {
     isSimpleQuery: function () {
       return this.isSimple === true;
     },
-
+    closeSearch(){
+      this.searchVisible = false;
+      this.$emit('openComplex',false);
+    },
     /**
          * 获取查询条件供外部调用
          * @return {Object} 查询条件
@@ -153,9 +168,9 @@ export default {
     getQueryCondition: function () {
       var _self = this;
       var values = [];
-      if (_self.isSimple === true) {
+      if (_self.isComplex === false) {
         values = this.$refs.queryConditionSimple.getQueryCondition();
-      } else if (_self.isSimple === false) {
+      } else if (_self.isComplex === true) {
         values = this.$refs.queryConditionComplex.getQueryCondition();
       }
       return values;

packages/info/src/QueryConditionComplex.vue

@@ -1,5 +1,33 @@
 <!-- 复杂查询过滤 -->
 <template>
+  <div class="buttons">
+    <a-button
+      type="primary"
+      class="item"
+      @click="complexSearch()"
+    >
+      {{ $t('lang.QueryConditionComplex.filter') }}
+    </a-button>
+    <template v-if="!isSearchWidget">
+      <a-button
+        class="item"
+        @click="executeExport()"
+      >
+        {{ $t('lang.QueryConditionComplex.export') }}
+      </a-button>
+
+      <!-- <template v-for="infoButton in infoButtons" :key="infoButton.name">
+        <a-button
+          v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)"
+          class="item"
+          type="dashed"
+          @click="executeProcess(infoButton)"
+        >
+          {{ Language.getNameTrl($i18n.locale, infoButton) }}
+        </a-button>
+      </template> -->
+    </template> 
+  </div>
   <div>
     <div>
       <div class="form-inline">
@@ -218,41 +246,6 @@
         </div>
       </div>
     </div>
-
-    <div>
-      <div>
-        <div>
-          <button
-            id="filter"
-            type="button"
-            class="btn btn-default m-btn"
-            @click="complexSearch()"
-          >
-            {{ $t('lang.QueryConditionComplex.filter') }}
-          </button>
-
-          <template v-if="!isSearchWidget">
-            <button
-              type="button"
-              class="btn btn-default m-btn"
-              @click="executeExport()"
-            >
-              {{ $t('lang.QueryConditionComplex.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>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -505,4 +498,17 @@ export default {
     float: left;
     margin-right: 5px;
 }
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+.buttons:after {
+  content: "";
+  flex: auto;
+}
+.item{
+  margin-right: 4px;
+}
 </style>

packages/info/src/QueryPage.vue

@@ -15,6 +15,7 @@
             :header-name="Language.getNameTrl($i18n.locale, infoWindowDto)"
             :info-filter-fields="infoFilterFields"
             :info-window-no="infoWindowDto.no"
+            @open-complex="openComplex"
             @filter-field-property-changed="filterFieldPropertyChanged($event)"
             @grid-field-property-changed="gridFieldPropertyChanged($event)"
           />
@@ -27,6 +28,8 @@
             :is-search-widget="isSearchWidget"
             :show-button="true"
             :info-window-no="infoWindowDto.no"
+            :is-complex="isComplex"
+            @open-complex="openComplex"
             @simple-search="simpleSearch"
             @complex-search="complexSearch"
             @refresh-search="pageSearch"
@@ -311,6 +314,7 @@ export default {
       tableOutDivId: Uuid.createUUID(),
       loading: false,
       modal: false,
+      isComplex:false,
     };
   },
   computed: {
@@ -426,8 +430,9 @@ export default {
       } else {
         executeFunction();
       }
-
-
+    },
+    openComplex:function(value){
+      this.isComplex = value;
     },
     // 页码数量改变
     gridSizeSelect: function (newPageSize) {
@@ -524,8 +529,8 @@ export default {
       _self.infoQueryParam.length = _self.pagination.per_page;
       _self.infoQueryParam.infoFilterFieldValues =
         _self.$refs.queryCondition.getQueryCondition();
-      var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
-      if (isSimpleQuery) {
+      // var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
+      if (this.isComplex == false) {
         _self.queryInfoWindowDataSimple();
       } else {
         _self.queryInfoWindowDataComplex();
@@ -956,8 +961,8 @@ export default {
     executeExport: function () {
       var _self = this;
 
-      var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
-      if (isSimpleQuery) {
+      // var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
+      if (this.isComplex == false) {
         let condition = _self.$refs.queryCondition.getQueryCondition();
         let downloadUrl =
           Common.getApiURL('exportResource/exportInfoDataSimple') +

packages/info/src/SearchInput.vue

@@ -83,11 +83,10 @@ export default {
         return;
       }
       that.options = [];
-      console.log(this.apiResponseDataTextFiledName, 'apiResponseDataTextFiledName');
       that.fetching = true;
       let filedName;
       const params = { start: 0, length: 99999, condition: value };
-      if (that.apiResponseDataTextFiledName.includes('->')) {
+      if (that.apiResponseDataTextFiledName && that.apiResponseDataTextFiledName.includes('->')) {
         filedName = that.apiResponseDataTextFiledName.split('->')[1];
       }
       $.ajax({