shuhi-ui/src/views/mallOrder/all/components/page-search.vue

<template>
    <ele-card :body-style="{ paddingBottom: '0' }">
        <el-form :model="where" label-width="110px" @keyup.enter="search">
            <el-row :gutter="15">
                <el-col :lg="6" :md="12">
                    <el-form-item label="订单编号">
                        <el-input v-model="where.orderId" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="收件人姓名">
                        <el-input v-model="where.receiverName" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="收件人手机号">
                        <el-input v-model="where.receiverPhone" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="发货物流单号">
                        <el-input v-model="where.logisticsNo" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="退货物流单号">
                        <el-input v-model="where.returnLogisticsNo" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="全部订单状态">
                        <el-select v-model="where.status" placeholder="请选择" clearable>
                            <el-option v-for="item in statusDicts" :key="item.dictValue" :label="item.dictLabel"
                                :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="搜索备注关键字">
                        <el-input v-model="where.keyword" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="催发货订单">
                        <el-select v-model="where.urgeStatus" placeholder="请选择" clearable>
                            <el-option label="催发货" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :md="12">
                    <el-form-item label="下单时间">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="到"
                            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD"
                            style="width: 100%" @change="handleDateChange" />
                    </el-form-item>
                </el-col>

                <el-col :lg="6" :md="12" class="mb-4">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </ele-card>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useDictData } from '@/utils/use-dict-data';

const emit = defineEmits(['search']);

// 字典
const [statusDicts] = useDictData(['order_status']);

const where = reactive({
    orderId: '',
    receiverName: '',
    receiverPhone: '',
    logisticsNo: '',
    returnLogisticsNo: '',
    status: '',
    keyword: '',
    urgeStatus: '',
    startTime: '',
    endTime: ''
});

const dateRange = ref([]);

const handleDateChange = (val) => {
    if (val && val.length === 2) {
        where.startTime = val[0];
        where.endTime = val[1];
    } else {
        where.startTime = '';
        where.endTime = '';
    }
};

const search = () => {
    emit('search', { ...where });
};

const reset = () => {
    Object.keys(where).forEach(key => where[key] = '');
    dateRange.value = [];
    search();
};
</script>

<style scoped>
.mb-4 {
    margin-bottom: 16px;
}
</style>