Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
szdot 2023-11-09 16:08:22 +08:00
parent d7f12e2724
commit 04dd2efe46
5 changed files with 100 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/SearchOrder.vue Normal file
View File

@ -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>

2
src/components/SelectionOrderBack.vue
View File

@ -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>

2
src/components/SelectionOrderStatus.vue
View File

@ -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>

39
src/components/SerchOrder.vue Normal file
View File

@ -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>

37
src/views/layout/components/main/order/index.vue
View File

@ -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">
<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> -->
<SearchOrder class="w-100" @input="handleSearchChange" />
</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: {