moreShopAdmin/src/components/orderPop/index.vue

<template>
    <div>
        <el-form class="mb-[-16px]" :model="queryParams" inline>
            <el-form-item label="订单号" prop="order_id">
                <el-input
                    class="w-[280px]"
                    v-model="queryParams.order_id"
                    @keydown.enter="resetPage"
                    clearable
                    placeholder="请输入订单号"
                />
            </el-form-item>
            <el-form-item label="门店" prop="store_id">
                <el-select
                    v-model="queryParams.store_id"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="输入门店名称搜索"
                    remote-show-suffix
                    :remote-method="remoteMethod"
                    :loading="storeloading"
                    style="width: 240px"
                    @change="resetPage"
                >
                    <el-option
                        v-for="item in storeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="order_id">
                <el-date-picker
                    v-model="startEndTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    unlink-panels
                    @change="changeStartEndTime"
                />
            </el-form-item>
            <el-form-item label="支付方式" prop="pay_type">
                <el-select
                    class="w-[280px]"
                    v-model="queryParams.pay_type"
                    placeholder="请选择支付方式"
                    @change="resetPage"
                >
                    <el-option
                        :label="item.name"
                        :value="item.value"
                        v-for="item in dictData.pay_type"
                        :key="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetPage">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="mt-4" v-loading="pager.loading">
            <el-table :data="pager.lists" @selection-change="handleSelectionChange" :height="300">
                <el-table-column type="selection" width="55" />
                <el-table-column label="订单ID" prop="id" show-overflow-tooltip />
                <el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
                <el-table-column label="门店" prop="store_name" show-overflow-tooltip />
                <el-table-column label="用户" prop="nickname" show-overflow-tooltip />
                <el-table-column label="实际支付金额" prop="pay_price" show-overflow-tooltip />
                <el-table-column label="订单状态" prop="status_name">
                    <template #default="{ row }">
                        <div v-if="row.refund_status == 2">
                            <el-tag type="danger">已退款</el-tag>
                        </div>
                        <div v-else>
                            <el-tag v-if="row.status_name == '待收货'" type="success">{{
                                row.status_name
                            }}</el-tag>
                            <el-tag
                                v-else-if="
                                    row.status_name == '已收货' || row.status_name == '已完成'
                                "
                                type="info"
                                >{{ row.status_name }}</el-tag
                            >
                            <el-tag
                                v-else-if="
                                    row.status_name == '待发货' || row.status_name == '待核销'
                                "
                                type="warning"
                                >{{ row.status_name }}</el-tag
                            >
                            <el-tag v-else type="danger">{{ row.status_name }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" prop="pay_type" show-overflow-tooltip>
                    <template #default="{ row }">
                        <dict-value :options="dictData.pay_type" :value="row.pay_type"></dict-value>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" show-overflow-tooltip />
            </el-table>
        </div>
        <div class="flex mt-4 justify-end">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <el-button class="w-full mt-4" type="primary" @click="bindStore">添加订单</el-button>
    </div>
</template>

<script lang="ts" setup name="systemStoreLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiStoreOrderLists } from '@/api/store_order'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import { ElMessage } from 'element-plus'
import { apiSystemStoreLists } from '@/api/system_store'
import moment from 'moment'

const props = defineProps<{
    store_id: string
}>()

// 查询条件
const queryParams = reactive({
    order_id: '',
    pay_type: '',
    store_id: '',
    start_time: '',
    end_time: '',
    is_merge: 0
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')
const storeloading = ref(false)
const storeList = ref([])
const remoteMethod = (e = '') => {
    storeloading.value = true
    apiSystemStoreLists({
        name: e,
        page_size: 50
    })
        .then((res) => {
            storeList.value = res.lists
            setTimeout(() => {
                storeloading.value = false
            }, 300)
        })
        .catch((err) => {
            setTimeout(() => {
                storeloading.value = false
            }, 300)
        })
}
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiStoreOrderLists,
    params: queryParams
})
getLists()
const startEndTime = ref([])
const changeStartEndTime = () => {
    if (startEndTime.value[0] && startEndTime.value[1]) {
        queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
        queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
    } else {
        queryParams.start_time = ''
        queryParams.end_time = ''
    }
    getLists()
}
const emits = defineEmits(['onBindOrder'])
// 绑定用户
const bindStore = () => {
    const list = pager.lists.filter((item) => selectData.value.includes(item.id))
    if (!list.length) return ElMessage.error('请先选择订单')
    emits('onBindOrder', list)
}
</script>