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

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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :datasource="datasource"
            :tools="false"
        >
            <template #toolbar>
                <el-radio-group @change="handleStatusChange" v-model="searchType">
                    <el-radio-button label="全部" value="0" />
                    <el-radio-button label="已加入回收书单（正在回收）" value="1" />
                    <el-radio-button label="已加入回收书单（暂停回收）" value="2" />
                </el-radio-group>
                <span class="ml-8"></span>
                <el-button type="danger" plain v-permission="'recycle:independent:batchAddBlacklist'" @click="onBlacklist()">加黑名单</el-button>
                <el-button type="warning" plain v-permission="'recycle:independent:batchPauseRecycle'" @click="onRecycle(null, 2)">暂停回收</el-button>
                <el-button type="warning" plain v-permission="'recycle:independent:batchStartRecycle'" @click="onRecycle(null, 1)">开启回收</el-button>
                <el-button type="success" plain v-permission="'recycle:independent:batchAddSocial'" @click="onType(1)">加社科库</el-button>
                <el-button type="primary" plain v-permission="'recycle:independent:batchAddTeach'" @click="onType(2)">加教材库</el-button>
            </template>
            <template #cover="{ row }">
                <el-image
                    style="width: 90px; height: 120px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                    :preview-src-list="row.cover ? [row.cover] : []"
                    :initial-index="0"
                    preview-teleported
                />
            </template>
            <template #baseInfo="{ row }">
                <book-info :row="row" @refresh="reload" />
            </template>
            <template #subscribeNum="{ row }">
                <el-link type="primary" @click="handleDetail(row)">
                    {{ row.subscribeNum ?? 0 }}
                </el-link>
            </template>
            <template #view="{ row }">
                <div class="grid grid-cols-2 gap-2 book-btns">
                    <el-button
                        color="#951d1d"
                        @click="handleViewUrl(row, 'kw')"
                        v-permission="'recycle:independent:viewUrl'"
                    >
                        查看孔网
                    </el-button>
                    <el-button
                        color="#e99d42"
                        @click="onRecycleLog(row)"
                        v-permission="'recycle:independent:viewRecycleLog'"
                    >
                        回收日志
                    </el-button>
                    <el-button
                        color="#f27606"
                        @click="handleViewUrl(row, 'tb')"
                        v-permission="'recycle:independent:viewUrl'"
                    >
                        查看淘宝
                    </el-button>
                    <el-button color="#0f7dc7" v-permission="'recycle:independent:viewSalesLog'" @click="onSalesLog(row)">
                        售价日志
                    </el-button>
                    <el-button color="#399420" @click="handleViewUrl(row, 'db')">
                        查看豆瓣
                    </el-button>
                    <el-button
                        color="#a4adb3"
                        @click="handleViewUrl(row, 'dd')"
                        v-permission="'recycle:independent:viewUrl'"
                    >
                        查看当当
                    </el-button>
                </div>
            </template>
            <template #action="{ row }">
                <row-actions :row="row" @discount="onDiscount" @blacklist="onBlacklist" @max="onMax" @recycle="onRecycle" @order="onOrder" @remove="onRemove" />
            </template>
        </common-table>

        <arrival-dialogs ref="dialogsRef" @refresh="reload" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { dayjs } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import bookSearch from '@/views/data/arrivalStats/components/page-search.vue';
    import bookInfo from '@/views/recycle/components/book-info.vue';
    import rowActions from './components/row-actions.vue';
    import arrivalDialogs from './components/arrival-dialogs.vue';
    import { initArrivalHandlers, onDiscount, onBlacklist, onMax, onOrder, onRecycle, onRemove, onRecycleLog, onSalesLog, onType } from './components/handlers.js';
    import request from '@/utils/request';

    defineOptions({ name: 'ArrivalStats' });

    const searchType = ref('0');
    const pageRef = ref(null);
    const dialogsRef = ref(null);
    initArrivalHandlers(pageRef, dialogsRef, () => pageRef.value?.reload());

    function formatTime(value) {
        if (!value) {
            return '-';
        }
        const date = dayjs(value);
        return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : value;
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '图片',
            prop: 'cover',
            width: 120,
            slot: 'cover',
            align: 'center'
        },
        {
            label: '信息',
            prop: 'baseInfo',
            minWidth: 480,
            slot: 'baseInfo'
        },
        {
            label: '订阅次数',
            prop: 'subscribeNum',
            slot: 'subscribeNum',
            sortable: true,
            columnKey: 'subscribeNum',
            minWidth: 120,
            align: 'center'
        },
        {
            label: '最大回收量',
            prop: 'recycleMax',
            minWidth: 110,
            align: 'center'
        },
        {
            label: '最近一次订阅时间',
            prop: 'lastSubscribeTime',
            sortable: true,
            columnKey: 'lastSubscribeTime',
            minWidth: 180,
            align: 'center',
            formatter: (row) => formatTime(row.lastSubscribeTime)
        },
        {
            label: '查看',
            prop: 'view',
            slot: 'view',
            width: 234,
            fixed: 'right'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 234,
            slot: 'action',
            fixed: 'right'
        }
    ]);

    const pageConfig = reactive({
        pageUrl: '/shop/shopNoticeArrival/statPage',
        fileName: '到货提醒统计',
        cacheKey: 'arrivalStatsTable',
        rowKey: 'isbn',
        params: { searchType: '0' }
    });

    const datasource = ({ pages, where, orders, sorter }) => {
        const pageNum = Number(pages?.pageNum || 1);
        const pageSize = Number(pages?.pageSize || 10);
        const params = {
            ...(pageConfig.params || {}),
            ...where,
            offset: (pageNum - 1) * pageSize,
            limitSize: pageSize
        };

        if (orders?.orderByColumn) {
            params.orderType = sorter?.column?.columnKey || orders.orderByColumn;
            params.orderWay = orders.isAsc === 'ascending' ? 'asc' : 'desc';
        }

        return request
            .get('/shop/shopNoticeArrival/statPage', { params })
            .then((res) => {
                if (res.data.code === 200) {
                    return res.data;
                }
                return Promise.reject(new Error(res.data.msg));
            });
    };

    
    function handleStatusChange(value) {
        searchType.value = value;
        pageConfig.params.searchType = value;
        pageRef.value?.reload();
    }

    function reload(where) {
        pageRef.value?.reload(where);
    }

    function handleDetail(row) {
        dialogsRef.value?.openDetail(row);
    }

    const handleViewUrl = (row, type) => {
        let url = '';
        if (type == 'dd') {
            url = `https://search.dangdang.com/?key=${row.isbn}&act=input`;
        } else if (type == 'tb') {
            url = `https://s.taobao.com/search?page=1&q=${row.isbn}&sort=sale-desc&tab=all`;
        } else if (type == 'db') {
            url = `https://search.douban.com/book/subject_search?search_text=${row.isbn}`;
        } else if (type == 'kw') {
            url = `https://search.kongfz.com/product_result/?key=${row.isbn}&status=0&_stpmt=eyJzZWFyY2hfdHlwZSI6ImFjdGl2ZSJ9`;
        }
        window.open(url, '_blank');
    };
</script>

<style lang="scss" scoped>
    .book-btns {
        gap: 6px;

        .el-button {
            min-width: 100px;
            font-size: 12px;
            color: #ffffff;
            padding: 4px 6px;
            margin-right: 0;
        }
    }
</style>