shuhi-ui/src/views/data/productPush/index.vue

<template>
    <ele-page flex-table>
        <page-search @search="reload"></page-search>

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <div class="flex items-center mb-4">
                    <el-button
                        type="warning"
                        plain
                        @click="handleBatchPush"
                        v-permission="'data:productPush:onePush'"
                    >
                        一键推送
                    </el-button>
                    <el-button
                        type="success"
                        plain
                        @click="handleExportExcel"
                        :icon="DownloadOutlined"
                        v-permission="'data:productPush:export'"
                    >
                        导出
                    </el-button>
                </div>
            </template>

            <template #isPush="{ row }">
                <dict-data
                    code="book_stat_is_push"
                    type="tag"
                    :model-value="row.pushStatus"
                />
            </template>

            <template #pushStatus="{ row }">
                <dict-data
                    code="book_stat_push_status"
                    type="text"
                    :model-value="row.pushRes"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        @click="handleDelete(row)"
                        v-permission="'data:productPush:delete'"
                    >
                        删除
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        @click="handleBatchPush(row)"
                        v-permission="'data:productPush:push'"
                    >
                        推送
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        @click="handlePushLog(row)"
                        v-permission="'data:productPush:pushLog'"
                    >
                        推送日志
                    </el-button>
                </div>
            </template>
        </common-table>

        <!-- 推送日志弹窗 -->
        <push-log ref="pushLogRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { DownloadOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './components/page-search.vue';
    import PushLog from './components/push-log.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'productPush' });

    const useStatus = ref('');

    /** 表格列配置 */
    const columns = ref([
        { label: 'ID', prop: 'id', align: 'center', width: 70 },
        { label: 'ISBN', prop: 'bookIsbn', align: 'center', minWidth: 120 },
        {
            label: '是否推送',
            prop: 'pushStatus',
            align: 'center',
            slot: 'isPush'
        },
        { label: '创建时间', prop: 'createTime', align: 'center', width: 180 },
        { label: '推送时间', prop: 'pushTime', align: 'center', width: 180 },
        {
            label: '扫描提交人',
            prop: 'scanUserName',
            align: 'center',
            formatter: (row) => row.scanUserName || '-'
        },
        {
            label: '后台处理人',
            prop: 'operateUserName',
            align: 'center',
            formatter: (row) => row.operateUserName || '-'
        },
        {
            label: '推送状态',
            prop: 'pushRes',
            align: 'center',
            slot: 'pushStatus'
        },
        {
            label: '操作',
            width: 240,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    /** 推送日志组件实例 */
    const pushLogRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/bookpush/pusherp/pagelist',
        exportUrl: '/bookpush/pusherp/export',
        fileName: '商品档案推送',
        cacheKey: 'productPushTable'
    });

    // 刷新表格
    function reload(where) {
        pageRef.value?.reload({ ...where });
    }

    // 导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('商品档案推送');
    }

    //删除
    function handleDelete(row) {
        pageRef.value.messageBoxConfirm({
            message: '确认删除选中的商品档案?',
            fetch: () => {
                return request.post('/bookpush/pusherp/remove?id=' + row.id);
            }
        });
    }

    // 批量推送
    function handleBatchPush(row = null) {
        let selections = row == null ? pageRef.value.getSelection() : [row];
        pageRef.value.operatBatch({
            row,
            method: 'post',
            url: '/bookpush/pusherp/pushBatch',
            title: '确认批量推送选中的商品档案?',
            data: {
                ids: selections.map((item) => item.id)
            }
        });
    }

    // 查看推送日志
    function handlePushLog(row) {
        pushLogRef.value?.open(row);
    }
</script>