shuhi-ui/src/views/recycle/orderAlert/index.vue

<template>
    <ele-page flex-table>
        <ele-check-card
            v-if="alarmData.length > 0"
            v-model="checked"
            :items="alarmData"
            @change="handleCardChange"
            :row="{ gutter: 12 }"
            :column="{ span: 4 }"
            style="
                background-color: #fff;
                padding: 12px 0 0 12px;
                border-radius: 6px;
            "
        >
            <template #item="{ item }">
                <div style="padding: 18px" class="flex-col items-center">
                    <ele-text size="md">{{ item.title }}</ele-text>
                    <ele-count-up
                        :end-val="item.content"
                        style="font-size: 26px"
                    />
                </div>
            </template>
        </ele-check-card>

        <order-page
            ref="pageRef"
            :pageConfig="pageConfig"
            permissionKey="orderAlert"
            style="padding: 12px 0"
            :prop-columns="columns"
        >
            <template #toolbar>
                <el-button
                    type="success"
                    plain
                    class="ele-btn-icon"
                    :icon="DownloadOutlined"
                    v-permission="'recycleOrder:orderAlert:export'"
                    @click="exportData"
                >
                    导出订单明细
                </el-button>
            </template>
        </order-page>
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';
    const { proxy } = getCurrentInstance();

    defineOptions({ name: 'recycleOrderAlert' });

    //获取统计数据
    const alarmData = ref([]);
    // 预警类型:1物流预警 2到货预警 3审核超时 4确认收货预警
    // 已揽件-物流异常
    let alarmTypes = {
        1: '已揽件-物流异常',
        2: '已签收-收货超时',
        3: '已收货-审核超时',
        4: '已到仓-收货超时'
    };
    const getStatisticsData = async () => {
        proxy.$http
            .get('/order/orderInfo/getOrderWarnStatistics')
            .then((res) => {
                if (res.data.code === 200) {
                    alarmData.value = res.data.data.map((item) => ({
                        value: item.alarmType,
                        title: alarmTypes[item.alarmType],
                        content: item.alarmNum,
                        col: {
                            md: 3,
                            style: { marginBottom: '12px', width: '180px' }
                        }
                    }));
                }
            });
    };
    getStatisticsData();


    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/order/orderInfo/getOrderWarnList',
        exportUrl: '/order/orderInfo/orderWarnExport',
        fileName: '订单预警',
        cacheKey: 'recycleOrderAlertTable',
        where: {
          alarmType: ''
        }
    });

    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '单号',
            prop: 'orderNumber',
            slot: 'orderNumber',
            minWidth: 230
        },
        { label: '客户', prop: 'customer', slot: 'customer', minWidth: 360 },
        { label: '金额', prop: 'amount', slot: 'amount', minWidth: 160 },
        {
            label: '状态',
            prop: 'status',
            slot: 'status',
            width: '166'
        },
        { label: '时间', prop: 'time', slot: 'time', minWidth: 210 },
        { label: '预警时间', prop: 'alarmTime', minWidth: 160 },
        { label: '备注', prop: 'remarks', slot: 'remarks' },
        {
            columnKey: 'action',
            label: '操作',
            width: 182,
            align: 'center',
            slot: 'action',
            hideInPrint: true,
            hideInExport: true,
            fixed: 'right'
        }
    ]);

    //导出数据
    function exportData() {
        pageRef.value?.exportData('订单预警');
    }

    // 卡片选中
    const handleCardChange = (value) => {
        pageConfig.where.alarmType = value;
        pageRef.value?.reload();
    };

    // 选中值
    const checked = ref();
    // 数据
    const items = ref([
        {
            value: 1,
            title: '已揽件-物流异常',
            content: 12,
            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
        },
        {
            value: 2,
            title: '已签收-收货超时',
            content: 5,
            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
        },
        {
            value: 3,
            title: '已收货-审核超时',
            content: 12,
            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
        },
        {
            value: 4,
            title: '已到仓-收货超时',
            content: 12,
            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
        }
    ]);
</script>