增加vue3版本快捷查询支持级联、日期组件，查询只有一选项时强制隐藏高级查询

Author: 283591387@qq.com

Vol.Vue3版本/src/components/basic/QuickSearch.vue

@@ -18,22 +18,25 @@
       >
       </el-option>
     </el-select>
-    <span
-      v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-    ></span>
-    <!--<el-date-picker
+    <el-date-picker
       clearable
-      style="width: 100%"
       size="small"
       v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-      v-model="formFields[singleSearch.field]"
-      :type="item.type"
+      v-model="searchFormFields[singleSearch.field]"
+      type="daterange"
+       :value-format="getDateFormat(singleSearch)"
       :placeholder="singleSearch.title"
-      :disabledDate="(val) => getDateOptions(val, singleSearch.item)"
-      :value-format="getDateFormat(singleSearch.item)"
     >
-    </el-date-picker> -->
-
+    </el-date-picker>
+    <el-cascader
+          clearable
+          size="small"
+          v-model="searchFormFields[singleSearch.field]"
+          v-else-if="singleSearch.type == 'cascader'"
+          :options="singleSearch.data"
+          :props="{ checkStrictly: true}"
+        >
+    </el-cascader>
     <el-input
       clearable
       v-else
@@ -72,6 +75,10 @@ export default {
         (typeof date2 == "number" ? date2 : new Date(date2).valueOf())
       );
     },
+    getDateFormat(item) {
+      //见https://day.js.org/docs/zh-CN/display/format
+      return item.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
+    },
     getDateOptions(date, item) {
       if ((!item.min && !item.max) || !date) {
         return false;

Vol.Vue3版本/src/components/basic/ViewGrid/methods.js

@@ -30,8 +30,8 @@ let methods = {
       return x.value == 'Search';
     });
     //添加高级查询
-
-    if (searchIndex != -1) {
+    let hasOneFormItem = this.searchFormOptions.length==1&&this.searchFormOptions[0].length==1;
+    if (searchIndex != -1&&!hasOneFormItem) {
       this.buttons.splice(searchIndex + 1, 0, {
         icon: this.fiexdSearchForm ? 'el-icon-refresh-left' : 'el-icon-search',
         name: this.fiexdSearchForm ? '重置' : '高级查询',
@@ -45,6 +45,9 @@ let methods = {
         }
       });
     }
+    if (hasOneFormItem) {
+      this.fiexdSearchForm=false;
+    }
     this.maxBtnLength += searchIndex == -1 ? 0 : 1;
     if (this.buttons.length <= this.maxBtnLength) return this.buttons;
     let btns = this.buttons.slice(0, this.maxBtnLength);

开发版dev/Vue.NetCore/Vol.Vue3版本/src/components/basic/QuickSearch.vue

@@ -18,22 +18,25 @@
       >
       </el-option>
     </el-select>
-    <span
-      v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-    ></span>
-    <!--<el-date-picker
+    <el-date-picker
       clearable
-      style="width: 100%"
       size="small"
       v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-      v-model="formFields[singleSearch.field]"
-      :type="item.type"
+      v-model="searchFormFields[singleSearch.field]"
+      type="daterange"
+       :value-format="getDateFormat(singleSearch)"
       :placeholder="singleSearch.title"
-      :disabledDate="(val) => getDateOptions(val, singleSearch.item)"
-      :value-format="getDateFormat(singleSearch.item)"
     >
-    </el-date-picker> -->
-
+    </el-date-picker>
+    <el-cascader
+          clearable
+          size="small"
+          v-model="searchFormFields[singleSearch.field]"
+          v-else-if="singleSearch.type == 'cascader'"
+          :options="singleSearch.data"
+          :props="{ checkStrictly: true}"
+        >
+    </el-cascader>
     <el-input
       clearable
       v-else
@@ -72,6 +75,10 @@ export default {
         (typeof date2 == "number" ? date2 : new Date(date2).valueOf())
       );
     },
+    getDateFormat(item) {
+      //见https://day.js.org/docs/zh-CN/display/format
+      return item.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
+    },
     getDateOptions(date, item) {
       if ((!item.min && !item.max) || !date) {
         return false;

开发版dev/Vue.NetCore/Vol.Vue3版本/src/components/basic/ViewGrid/methods.js

@@ -30,8 +30,8 @@ let methods = {
       return x.value == 'Search';
     });
     //添加高级查询
-
-    if (searchIndex != -1) {
+    let hasOneFormItem = this.searchFormOptions.length==1&&this.searchFormOptions[0].length==1;
+    if (searchIndex != -1&&!hasOneFormItem) {
       this.buttons.splice(searchIndex + 1, 0, {
         icon: this.fiexdSearchForm ? 'el-icon-refresh-left' : 'el-icon-search',
         name: this.fiexdSearchForm ? '重置' : '高级查询',
@@ -45,6 +45,9 @@ let methods = {
         }
       });
     }
+    if (hasOneFormItem) {
+      this.fiexdSearchForm=false;
+    }
     this.maxBtnLength += searchIndex == -1 ? 0 : 1;
     if (this.buttons.length <= this.maxBtnLength) return this.buttons;
     let btns = this.buttons.slice(0, this.maxBtnLength);