搜索组件（订单列表过滤）

src/components/SearchOrder.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-input placeholder="请输入搜索内容" v-model="value[1]">
+    <el-select v-model="value[0]" slot="prepend" placeholder="条件选择" class="w-120px">
+      <el-option label="订单号" value="orderId" selection></el-option>
+      <el-option label="收获人" value="name"></el-option>
+      <el-option label="客户电话" value="tel"></el-option>
+      <el-option label="客户留言" value="remark"></el-option>
+      <el-option label="订单备注" value="desc"></el-option>
+    </el-select>
+  </el-input>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: ['orderId', '']
+    }
+  },
+  watch: {
+    value (val) {
+      this.$emit('input', val)
+    }
+  },
+  created () {
+    this.$emit('input', this.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SelectionOrderBack.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：空置为不过滤（显示全部订单），可多选条件">
+  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：可多选过滤条件（空置显示全部状态订单）">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
   </el-select>

src/components/SelectionOrderStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-100" v-model="value" multiple placeholder="订单状态过滤：空置为不过滤（显示全部订单），可多选条件">
+  <el-select class="w-100" v-model="value" multiple placeholder="订单状态过滤：可多选过滤条件（空置显示全部状态订单）">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
   </el-select>

src/components/SerchOrder.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：空置为不过滤（显示全部订单），可多选条件">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: 'normal',
+        label: '从未申请'
+      }, {
+        value: 'requested',
+        label: '申请退款中'
+      }, {
+        value: 'refunded',
+        label: '已退款'
+      }, {
+        value: 'rejected',
+        label: '拒绝退款'
+      }, {
+        value: 'actively',
+        label: '商家发起退款'
+      }],
+      value: []
+    }
+  },
+  watch: {
+    value (val) {
+      this.$emit('selectedValuesChanged', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/layout/components/main/order/index.vue

@@ -9,13 +9,7 @@
         <DatePickerOrder class="w-100" @dateRangepicked="handleDateRangePicked" />
       </el-col>
       <el-col :span="11">
-        <!-- <el-input placeholder="请输入内容" v-model="input3" class="w-100">
+        <SearchOrder class="w-100" @input="handleSearchChange" />
-          <el-select v-model="select" slot="prepend" placeholder="请选择" class="w-120px">
-            <el-option label="餐厅名" value="1"></el-option>
-            <el-option label="订单号" value="2"></el-option>
-            <el-option label="用户电话" value="3"></el-option>
-          </el-select>
-        </el-input> -->
       </el-col>
     </el-row>
     <el-row :gutter="15">
@@ -67,6 +61,7 @@ import SelectionShopId from '@/components/SelectionShopId'
 import SelectionOrderStatus from '@/components/SelectionOrderStatus'
 import SelectionOrderBack from '@/components/SelectionOrderBack'
 import DatePickerOrder from '@/components/DatePickerOrder'
+import SearchOrder from '@/components/SearchOrder'
 
 export default {
   name: 'Order',
@@ -78,14 +73,16 @@ export default {
       start_time: '', // 搜索条件 起始时间
       end_time: '', // 搜索条件 结束时间
       status: [], // 搜索条件 订单状态
-      back: []// 搜索条件 退款状态
+      back: [], // 搜索条件 退款状态
+      search: [] // 搜索条件 搜索
     }
   },
   components: {
     SelectionShopId,
     SelectionOrderStatus,
     SelectionOrderBack,
-    DatePickerOrder
+    DatePickerOrder,
+    SearchOrder
   },
   computed: {
     // 获取订单列表
@@ -123,6 +120,22 @@ export default {
             return this.back.includes(order.back)
           })
         }
+        // 搜索条件过滤
+        if (this.search[1] !== '') {
+          filteredList = filteredList.filter(order => {
+            if (this.search[0] === 'orderId') {
+              return order.order_sn.indexOf(this.search[1]) >= 0
+            } else if (this.search[0] === 'name') {
+              return order.receiver.indexOf(this.search[1]) >= 0
+            } else if (this.search[0] === 'tel') {
+              return order.tel.indexOf(this.search[1]) >= 0
+            } else if (this.search[0] === 'remark') {
+              return order.remark.indexOf(this.search[1]) >= 0
+            } else if (this.search[0] === 'desc') {
+              return order.describe.indexOf(this.search[1]) >= 0
+            }
+          })
+        }
         return filteredList
       } else {
         return []
@@ -151,6 +164,12 @@ export default {
      */
     handleOrderBackChange (val) {
       this.back = val
+    },
+    /**
+     * @description: 搜索组件绑定事件
+     */
+    handleSearchChange (val) {
+      this.search = val
     }
   },
   watch: {