筛选优化 根据筛选数据展现不同输入类型及条件

fe/PC/src/components/searchOverall/index.vue

@@ -47,6 +47,7 @@
                     placeholder="请选择筛选对象"
                     :disabled="item.hide"
                     :filterable="true"
+                    @change="resetSelect(item)"
                   >
                     <el-option
                       v-for="(item, index) in tableColumnsOptions(tableColumns)"
@@ -71,8 +72,9 @@
                     placeholder="请选择条件"
                     :disabled="item.column == '' || item.hide ? true : false"
                   >
+                  <!-- moreListOptions.action -->
                     <el-option
-                      v-for="item in moreListOptions.action"
+                      v-for="item in formatMoreListOptions(item.column) "
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
@@ -109,6 +111,16 @@
                     >
                     </el-option>
                   </el-select>
+                  <!-- 日期时间 -->
+                  <el-date-picker
+                  v-else-if="getColumnType(item.column) == 'dateTime'"
+                    type="datetime"
+                    v-model="item.value"
+                    :placeholder="'选择日期时间'"
+                    style="width: 100%"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-ddTHH:mm:ss"
+                  ></el-date-picker>
                   <el-input
                     v-else
                     v-model="item.value"
@@ -389,6 +401,45 @@ export default {
       })
       return data
     },
+    // 判断筛选类型是否是时间格式
+    getColumnType(val) {
+      var columnsType = this.tableColumns.filter(item => item.prop == val)
+      if (columnsType.length > 0) {
+        if (columnsType[0].type) {
+          return columnsType[0].type
+        } 
+      }  else {
+        return ''
+      }
+    },
+    // 筛选条件改变重置其他项
+    resetSelect(val) {
+      val.action = "=="
+      val.value = ""
+    },
+    // 根据数据内容约束条件选项
+    formatMoreListOptions(val) {
+      if (val) {
+        for(var i =0; i< this.tableColumns.length; i++) {
+          if (val == this.tableColumns[i].prop) {
+            if (this.tableColumns[i].filters) {
+              return this.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=')
+            } else if (this.tableColumns[i].type == 'dateTime') {
+              return this.moreListOptions.action.filter(item => 
+                item.value == '==' || 
+                item.value == '!=' ||
+                item.value == '>' ||
+                item.value == '<' ||
+                item.value == '>=' ||
+                item.value == '<=' )
+            } else {
+              return this.moreListOptions.action
+            }
+          }
+        }
+      }
+      return this.moreListOptions.action
+    },
     // 设置moreList列表的内容项是input还是select
     inputOrSelect(val) {
       let data