shop-admin/src/views/sales/service/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.refundStatus.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']"
            :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="refundType">
                        <el-select v-model="state.condition.refundType" :opts="opts.type" />
                    </el-form-item>
                    <el-form-item label="处理状态" prop="handleStatus">
                        <el-select v-model="state.condition.handleStatus" :opts="opts.handle" />
                    </el-form-item>
                    <el-form-item label="用户账号" prop="userPhone">
                        <el-input v-model="state.condition.userPhone" />
                    </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>
    </div>
</template>

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

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

    /* 导出订单 */
    const handleExport = async () => {
        loading.value = true;
        await store.dispatch('service/export');
        loading.value = false;
    };

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

    /* 列表配置 */
    const config = reactive({
        columns: [
            {
                type: 'selection',
                fixed: 'left',
                width: 60,
            },
            {
                label: '服务单号',
                prop: 'refundNo',
                minWidth: 160,
                fixed: 'left',
            },
            {
                label: '申请时间',
                prop: 'applyTime',
                width: 180,
            },
            {
                label: '用户账号',
                prop: 'userPhone',
                width: 140,
            },
            {
                label: '退款金额',
                prop: 'applyAmount',
                minWidth: 120,
            },
            {
                label: '售后类型',
                prop: 'refundTypeDesc',
                width: 120,
            },
            {
                label: '服务单状态',
                width: 120,
                prop: 'refundStatusDesc',
            },
            {
                label: '处理状态',
                width: 120,
                prop: 'handleStatusDesc',
            },
            {
                label: '处理时间',
                width: 180,
                prop: 'handleTime',
            },
            {
                label: '操作',
                fixed: 'right',
                width: 160,
                slots: {
                    default: ({ row }) => (
                        <ElButton type="text" onClick={() => handleDetail(row)}>
                            查看详情
                        </ElButton>
                    ),
                },
            },
        ],
    });
</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>