shop-admin/src/views/sales/order/index.vue

<template>
    <div class="list-container">
        <ul class="order-status">
            <li v-for="(item, index) in opts.status" :key="index">
                <el-button
                    :type="state.condition.orderStatus.includes(item.value) ? 'primary' : 'default'"
                    @click="handleStatus(item.value)"
                >
                    <span>
                        {{ item.label }}
                    </span>
                    <span>(</span>
                    <span class="num">{{ summary[index] || 0 }}</span>
                    <span>)</span>
                </el-button>
            </li>
        </ul>
        <TableList
            v-loading="loading"
            :code="code"
            :config="config"
            :data="list"
            :operation="['search', 'export']"
            :reset="handleReset"
            title="订单"
            :total="total"
            @export="handleExport"
            @search="handleSearch"
        >
            <template #search>
                <el-form inline>
                    <el-form-item label="订单编号" prop="orderNo">
                        <el-input v-model="state.condition.orderNo" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="userPhone">
                        <el-input v-model="state.condition.userPhone" />
                    </el-form-item>
                    <el-form-item label="来源" prop="orderSource">
                        <el-select v-model="state.condition.orderSource" :opts="opts.source" />
                    </el-form-item>
                    <el-form-item label="提交时间" prop="dateRange">
                        <el-date-picker
                            v-model="state.condition.dateRange"
                            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-form>
            </template>
        </TableList>
        <CloseOrder ref="refsCloseOrder" />
    </div>
</template>

<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    import CloseOrder from './close.vue';
    const router = useRouter();
    const store = useStore();
    const loading = ref(false);
    const code = computed(() => store.state.order.code);
    const list = computed(() => store.state.order.list);
    const total = computed(() => store.state.order.total);
    const summary = computed(() => store.state.order.summary);
    const opts = computed(() => store.state.order.opts);
    if (!unref(opts).init) {
        store.dispatch('order/load');
    }

    /* 查询订单 */
    const state = reactive({
        condition: {
            orderNo: null,
            userPhone: null,
            orderSource: null,
            orderStatus: [0],
            dateRange: [],
            startTime: null,
            endTime: null,
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('order/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    watch(
        () => state.condition.orderStatus,
        () => {
            handleSearch();
        },
        { deep: true }
    );
    const handleReset = () => {
        state.condition = {
            orderNo: null,
            userPhone: null,
            orderSource: null,
            orderStatus: [0],
            dateRange: [],
            startTime: null,
            endTime: null,
        };
    };
    const handleStatus = (status) => {
        let index = state.condition.orderStatus.indexOf(status);
        if (index === -1) {
            if (status === 0) {
                state.condition.orderStatus = [0];
            } else {
                state.condition.orderStatus.push(status);
                state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
            }
        } else {
            if (status !== 0) {
                state.condition.orderStatus.splice(index, 1);
                if (state.condition.orderStatus.length) {
                    state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
                } else {
                    state.condition.orderStatus = [0];
                }
            }
        }
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('order/search');
        loading.value = false;
    };

    /* 导出订单 */
    const handleExport = async () => {
        console.info('export');
    };

    /* 查看详情 */
    const handleDetail = (row) => {
        router.push({
            name: 'OrderDetail',
            params: {
                id: row.id,
            },
        });
    };

    /* 关闭订单 */
    const refsCloseOrder = ref(null);
    const handleClose = (row) => {
        unref(refsCloseOrder).show(row.orderId);
    };

    /* 列表配置 */
    const config = reactive({
        columns: [
            {
                type: 'selection',
                fixed: 'left',
                width: 60,
            },
            {
                label: '订单编号',
                prop: 'orderNo',
                minWidth: 300,
                fixed: 'left',
            },
            {
                label: '手机号',
                prop: 'userPhone',
                width: 140,
            },
            {
                label: '订单金额',
                prop: 'payAmount',
                minWidth: 120,
            },
            {
                label: '支付方式',
                prop: 'payTypeDesc',
                width: 120,
            },
            {
                label: '订单来源',
                width: 120,
                prop: 'payTypeDesc',
            },
            {
                label: '订单状态',
                width: 120,
                prop: 'orderStatusDesc',
            },
            {
                label: '提交时间',
                prop: 'submitTime',
                width: 180,
            },
            {
                label: '操作',
                fixed: 'right',
                width: 160,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <ElButton type="text" onClick={() => handleDetail(row)}>
                                查看订单
                            </ElButton>
                            {row.orderStatus === 1 ? (
                                <ElButton type="text" onClick={() => handleClose(row)}>
                                    关闭订单
                                </ElButton>
                            ) : (
                                ''
                            )}
                        </div>
                    ),
                },
            },
        ],
    });
</script>

<style lang="less" scoped>
    .list-container {
        display: flex;
        flex-direction: column;
        .common-list {
            flex-shrink: 1;
        }
        .order-status {
            display: flex;
            margin-bottom: @layout-space;
            li {
                + li {
                    margin-left: @layout-space;
                }
            }
        }
    }
</style>