Browse Source

列表增加回车模糊查询

hezhanp 8 months ago
parent
commit
751fc19458
1 changed files with 123 additions and 41 deletions
  1. 123 41
      src/components/seekPage.vue

+ 123 - 41
src/components/seekPage.vue

@@ -2,38 +2,73 @@
   <div class="index_box">
   <div class="index_box">
     <el-form label-width="90px" :inline="true">
     <el-form label-width="90px" :inline="true">
       <el-form-item v-for="(item, i) in seekList" :key="i">
       <el-form-item v-for="(item, i) in seekList" :key="i">
-        <el-form-item :label="item.label" :label-width="item.labelWidth + 'px'" v-if="i <= formLength - 1">
+        <el-form-item
+          :label="item.label"
+          :label-width="item.labelWidth + 'px'"
+          v-if="i <= formLength - 1"
+        >
           <!-- input 输入 -->
           <!-- input 输入 -->
           <div>
           <div>
             <div v-if="item.type == 'input'">
             <div v-if="item.type == 'input'">
-              <el-input clearable v-model="defaultWhere[item.value]" :placeholder="item.placeholder || '请输入内容'"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }" />
+              <el-input
+                clearable
+                v-model="defaultWhere[item.value]"
+                :placeholder="item.placeholder || '请输入内容'"
+                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+                @keyup.enter.native="search"
+              />
             </div>
             </div>
             <div v-if="item.type == 'select'">
             <div v-if="item.type == 'select'">
-              <el-select clearable v-model="defaultWhere[item.value]" :placeholder="item.placeholder || '请输入内容'"
-                :multiple="item.multiple ? item.multiple : false" :filterable="item.filterable ? item.filterable : true"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }">
-                <el-option v-for="(op, i) in item.planList" :label="op.label" :value="op.value" :key="i"></el-option>
+              <el-select
+                clearable
+                v-model="defaultWhere[item.value]"
+                :placeholder="item.placeholder || '请输入内容'"
+                :multiple="item.multiple ? item.multiple : false"
+                :filterable="item.filterable ? item.filterable : true"
+                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+              >
+                <el-option
+                  v-for="(op, i) in item.planList"
+                  :label="op.label"
+                  :value="op.value"
+                  :key="i"
+                ></el-option>
               </el-select>
               </el-select>
             </div>
             </div>
             <div v-if="item.type == 'date'">
             <div v-if="item.type == 'date'">
-              <el-date-picker v-model="defaultWhere[item.value]" @visible-change="change"
-                :type="item.dateType || 'daterange'" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: item.width ? item.width + 'px' : '220px' }">
+              <el-date-picker
+                v-model="defaultWhere[item.value]"
+                @visible-change="change"
+                :type="item.dateType || 'daterange'"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+              >
               </el-date-picker>
               </el-date-picker>
             </div>
             </div>
             <div v-if="item.type == 'DictSelection'">
             <div v-if="item.type == 'DictSelection'">
-              <DictSelection v-model="defaultWhere[item.value]" :placeholder="item.placeholder || '请选择内容'"
+              <DictSelection
+                v-model="defaultWhere[item.value]"
+                :placeholder="item.placeholder || '请选择内容'"
                 :multiple="item.multiple ? item.multiple : false"
                 :multiple="item.multiple ? item.multiple : false"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }" :dictName="item.dictName" />
-
+                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+                :dictName="item.dictName"
+              />
             </div>
             </div>
           </div>
           </div>
         </el-form-item>
         </el-form-item>
       </el-form-item>
       </el-form-item>
 
 
       <el-form-item>
       <el-form-item>
-        <el-dropdown ref="dropdownref" trigger="click" :hide-on-click="false" v-model="dropdownVisible">
+        <el-dropdown
+          ref="dropdownref"
+          trigger="click"
+          :hide-on-click="false"
+          v-model="dropdownVisible"
+          @keydown.enter.native.stop="search"
+        >
           <div v-if="seekList.length > formLength">
           <div v-if="seekList.length > formLength">
             <span class="el-dropdown-link">
             <span class="el-dropdown-link">
               更多选项<i class="el-icon-arrow-down el-icon--right"></i>
               更多选项<i class="el-icon-arrow-down el-icon--right"></i>
@@ -41,46 +76,88 @@
             <el-dropdown-menu slot="dropdown">
             <el-dropdown-menu slot="dropdown">
               <div class="padding">
               <div class="padding">
                 <el-form label-position="left">
                 <el-form label-position="left">
-                  <el-form-item v-for="(item, i) in deboListRow" :key="i" :inline="true" label-position="left">
-                    <el-form-item :label-width="item.labelWidth ? item.labelWidth : '90' + 'px'
-                      " :inline="true" :label="item.label">
+                  <el-form-item
+                    v-for="(item, i) in deboListRow"
+                    :key="i"
+                    :inline="true"
+                    label-position="left"
+                  >
+                    <el-form-item
+                      :label-width="
+                        item.labelWidth ? item.labelWidth : '90' + 'px'
+                      "
+                      :inline="true"
+                      :label="item.label"
+                    >
                       <div v-if="item.type == 'input'">
                       <div v-if="item.type == 'input'">
-                        <el-input clearable v-model="defaultWhere[item.value]"
-                          :placeholder="item.placeholder || '请输入内容'" :style="{
+                        <el-input
+                          clearable
+                          v-model="defaultWhere[item.value]"
+                          :placeholder="item.placeholder || '请输入内容'"
+                          :style="{
                             width: item.width ? item.width + 'px' : '220px'
                             width: item.width ? item.width + 'px' : '220px'
-                          }" />
+                          }"
+                          @keydown.enter.native="() => search()"
+                          @keyup.enter.native="() => search()"
+                        />
                       </div>
                       </div>
                       <div v-if="item.type == 'select'">
                       <div v-if="item.type == 'select'">
-                        <el-select clearable v-model="defaultWhere[item.value]"
+                        <el-select
+                          clearable
+                          v-model="defaultWhere[item.value]"
                           :multiple="item.multiple ? item.multiple : false"
                           :multiple="item.multiple ? item.multiple : false"
                           :filterable="item.filterable ? item.filterable : true"
                           :filterable="item.filterable ? item.filterable : true"
-                          :placeholder="item.placeholder || '请输入内容'" :style="{
+                          :placeholder="item.placeholder || '请输入内容'"
+                          :style="{
                             width: item.width ? item.width + 'px' : '220px'
                             width: item.width ? item.width + 'px' : '220px'
-                          }" @visible-change="change" @change="handerChange">
-                          <el-option v-for="(op, i) in item.planList" :label="op.label" :value="op.value"
-                            :key="i"></el-option>
+                          }"
+                          @visible-change="change"
+                          @change="handerChange"
+                        >
+                          <el-option
+                            v-for="(op, i) in item.planList"
+                            :label="op.label"
+                            :value="op.value"
+                            :key="i"
+                          ></el-option>
                         </el-select>
                         </el-select>
                       </div>
                       </div>
 
 
                       <div v-if="item.type == 'date'">
                       <div v-if="item.type == 'date'">
-                        <el-date-picker v-model="defaultWhere[item.value]" @blur="change"
-                          :type="item.dateType || 'daterange'" range-separator="至" start-placeholder="开始日期"
-                          end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :style="{
+                        <el-date-picker
+                          v-model="defaultWhere[item.value]"
+                          @blur="change"
+                          :type="item.dateType || 'daterange'"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          :style="{
                             width: item.width ? item.width + 'px' : '220px'
                             width: item.width ? item.width + 'px' : '220px'
-                          }">
+                          }"
+                        >
                         </el-date-picker>
                         </el-date-picker>
                       </div>
                       </div>
                       <div v-if="item.type == 'DictSelection'">
                       <div v-if="item.type == 'DictSelection'">
-                        <DictSelection v-model="defaultWhere[item.value]" :placeholder="item.placeholder || '请选择内容'"
+                        <DictSelection
+                          v-model="defaultWhere[item.value]"
+                          :placeholder="item.placeholder || '请选择内容'"
                           :multiple="item.multiple ? item.multiple : false"
                           :multiple="item.multiple ? item.multiple : false"
-                          :style="{ width: item.width ? item.width + 'px' : '220px' }" :dictName="item.dictName" />
-
+                          :style="{
+                            width: item.width ? item.width + 'px' : '220px'
+                          }"
+                          :dictName="item.dictName"
+                        />
                       </div>
                       </div>
                       <div v-if="item.type == 'picker'">
                       <div v-if="item.type == 'picker'">
-                        <el-date-picker v-model="defaultWhere[item.value]" @blur="change"
-                          value-format="yyyy-MM-dd" :style="{
+                        <el-date-picker
+                          v-model="defaultWhere[item.value]"
+                          @blur="change"
+                          value-format="yyyy-MM-dd"
+                          :style="{
                             width: item.width ? item.width + 'px' : '220px'
                             width: item.width ? item.width + 'px' : '220px'
-                          }">
+                          }"
+                        >
                         </el-date-picker>
                         </el-date-picker>
                       </div>
                       </div>
                     </el-form-item>
                     </el-form-item>
@@ -93,10 +170,17 @@
       </el-form-item>
       </el-form-item>
 
 
       <el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="search">
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="ele-btn-icon"
+          @click="search"
+        >
           查询
           查询
         </el-button>
         </el-button>
-        <el-button @click="reset" icon="el-icon-refresh-left" type="primary">重置</el-button>
+        <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
+          >重置</el-button
+        >
       </el-form-item>
       </el-form-item>
     </el-form>
     </el-form>
   </div>
   </div>
@@ -113,9 +197,7 @@ export default {
     formLength: {
     formLength: {
       type: [Number],
       type: [Number],
       default: 3
       default: 3
-    },
-
-
+    }
   },
   },
 
 
   components: {},
   components: {},
@@ -155,7 +237,7 @@ export default {
     }
     }
   },
   },
 
 
-  created() { },
+  created() {},
   methods: {
   methods: {
     change(visible) {
     change(visible) {
       this.dropdownVisible = visible;
       this.dropdownVisible = visible;