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

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

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #toolbar>
                <el-radio-group @change="handleStatusChange" v-model="fullType">
                    <el-radio-button label="库存收满预警" value="0" />
                    <el-radio-button label="库存已收满预警" value="1" />
                </el-radio-group>

                <span class="ml-8"></span>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycle:stockFullAlert:batchAddBooklist'"
                    @click="handleOptBooklist('add')"
                >
                    加入回收书单
                </el-button>
                <el-button
                    type="danger"
                    plain
                    v-permission="'recycle:stockFullAlert:batchAddBlacklist'"
                    @click="handleOptBlacklist('add')"
                >
                    加黑名单
                </el-button>
                <el-button
                    type="warning"
                    plain
                    v-permission="'recycle:stockFullAlert:batchPauseRecycle'"
                    @click="handleOptRecycle('pause')"
                >
                    暂停回收
                </el-button>
                <el-button
                    color="#7728f5"
                    plain
                    v-permission="'recycle:stockFullAlert:oneUpdate'"
                    @click="handleOneUpdate()"
                >
                    一键更新
                </el-button>
                <el-button
                    color="#0e40f5"
                    plain
                    v-permission="'recycle:stockFullAlert:exprot'"
                    @click="handleExportExcel()"
                >
                    导出Excel
                </el-button>
            </template>

            <template #cover="{ row }">
                <el-image
                    style="width: 90px; height: 120px; border-radius: 4px"
                    fit="cover"
                    :src="row.cover"
                />
            </template>
            <template #baseInfo="{ row }">
                <book-stat-info :row="row" @refresh="reload"></book-stat-info>
            </template>

            <template #view="{ row }">
                <div class="grid grid-cols-2 gap-2 book-btns">
                    <el-button color="#951d1d" @click="handleViewUrl(row, 'kw')"
                        >查看孔网</el-button
                    >
                    <el-button color="#e99d42" @click="handleRecycleLog(row)" v-permission="'recycle:stockFullAlert:recycleLog'"
                        >回收日志</el-button
                    >
                    <el-button color="#f27606" @click="handleViewUrl(row, 'tb')"
                        >查看淘宝</el-button
                    >
                    <el-button color="#0f7dc7" @click="handleSalesLog(row)" v-permission="'recycle:stockFullAlert:salesLog'"
                        >售价日志</el-button
                    >
                    <el-button color="#399420" @click="handleViewUrl(row, 'db')"
                        >查看豆瓣</el-button
                    >
                    <el-button color="#a4adb3" @click="handleViewUrl(row, 'dd')"
                        >查看当当</el-button
                    >
                </div>
            </template>

            <template #action="{ row }">
                <div class="grid grid-cols-2 gap-2 book-btns">
                    <el-button
                        color="#7728f5"
                        v-permission="'recycle:stockFullAlert:modifyDiscount'"
                        @click="handleModifyDiscount(row)"
                        >修改回收折扣</el-button
                    >
                    <el-button
                        color="#333333"
                        v-permission="'recycle:stockFullAlert:addBlacklist'"
                        @click="handleOptBlacklist('add', row)"
                        v-if="row.bookStatus == 1 || row.bookStatus == 2"
                        >加入黑名单</el-button
                    >
                    <el-button
                        type="success"
                        v-permission="'recycle:stockFullAlert:removeBlacklist'"
                        @click="handleOptBlacklist('remove', row)"
                        v-if="row.bookStatus == 3"
                    >
                        移除黑名单
                    </el-button>

                    <el-button
                        color="#3ab54a"
                        v-permission="'recycle:stockFullAlert:modifyMaxRecycle'"
                        @click="handleModifyMaxRecycle(row)"
                        >修改最大回收量</el-button
                    >
                    <el-button
                        color="#bd3124"
                        v-permission="'recycle:stockFullAlert:pauseRecycle'"
                        @click="handleOptRecycle('pause', row)"
                        v-if="row.recycleStatus == 1"
                        >暂停回收</el-button
                    >
                    <el-button
                        color="#bd3124"
                        v-permission="'recycle:stockFullAlert:startRecycle'"
                        @click="handleOptRecycle('start', row)"
                        v-else
                        >开启回收</el-button
                    >
                    <el-button
                        color="#e99d42"
                        v-permission="
                            'recycle:stockFullAlert:modifyOrderRecycle'
                        "
                        @click="handleModifyOrderRecycle(row)"
                        >修改订单回收量</el-button
                    >
                    <el-button
                        color="#4095e5"
                        v-permission="'recycle:stockFullAlert:removeBooklist'"
                        @click="handleOptBooklist('remove', row)"
                        >移除回收书单</el-button
                    >
                    <el-button
                        color="#567722"
                        v-permission="'recycle:stockFullAlert:remind'"
                        @click="handleRemind(row)"
                        >一个月后提醒</el-button
                    >
                </div>
            </template>
        </common-table>

        <orderRecycleLog ref="recycleLogRef" />
        <orderSalesLog ref="salesLogRef" />
        <modifyOrderRecycle ref="orderRecycleRef" @refresh="reload" />
        <modifyMaxRecycle ref="maxRecycleRef" @refresh="reload" />
        <modifyDiscount ref="modifyDiscountRef" @refresh="reload" />
        <orderBlacklist ref="blacklistRef" @refresh="reload" />
        <oneUpdate ref="oneUpdateRef" @submit="handleOneUpdateSubmit" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import bookSearch from '@/views/recycle/components/book-search.vue';
    import bookStatInfo from '@/views/recycle/components/book-stat-info.vue';
    import orderRecycleLog from '@/views/recycleOrder/detail/order-recycle-log.vue';
    import orderSalesLog from '@/views/recycleOrder/detail/order-sales-log.vue';
    import modifyOrderRecycle from '@/views/recycle/components/modify-order-recycle.vue';
    import modifyMaxRecycle from '@/views/recycle/components/modify-max-recycle.vue';
    import modifyDiscount from '@/views/recycle/components/modify-discount.vue';
    import orderBlacklist from '@/views/recycleOrder/detail/order-blacklist.vue';
    import oneUpdate from '@/views/recycle/components/one-update.vue';
    import { useBookOperation } from '@/utils/use-book-operation';
    import { ElMessage } from 'element-plus';

    const { proxy } = getCurrentInstance();

    defineOptions({ name: 'stockFullAlert' });

    const fullType = ref('0');
    function handleStatusChange(value) {
        pageRef.value.reload({ fullType: value });
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '图片',
            prop: 'cover',
            width: 120,
            slot: 'cover'
        },
        {
            label: '信息',
            prop: 'baseInfo',
            width: 540,
            slot: 'baseInfo'
        },
        { label: '回收折扣', prop: 'recycleDiscount' },
        { label: '预估金额', prop: 'recyclePrice' },
        { label: '最大回收量', prop: 'recycleMax', minWidth: 100 },
        { label: '当前剩余回收量', prop: 'restRecycleNum', minWidth: 100 },
        { label: '预警次数', prop: 'alarmNum', minWidth: 90 },
        { label: '销量', prop: 'salesNum', minWidth: 90 },
        {
            columnKey: 'view',
            label: '查看',
            width: 234,
            slot: 'view',
            fixed: 'right'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 234,
            slot: 'action',
            fixed: 'right'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/book/stockAlarm/pagelist',
        exportUrl: '/book/stockAlarm/export',
        fileName: '图书收满预警',
        cacheKey: 'stockFullAlertTable',
        params: {
            alarmType: '1',
            delStatus: '1',
            fullType: fullType.value,
            history:'0'
        }
    });

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

    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('图书收满预警');
    }

    // 使用图书操作混入
    const {
        blacklistRef,
        discountRef,
        paramsRef,
        handleOptBooklist,
        handleOptBlacklist,
        handleOptRecycle,
        handleOptType,
        handleAddDiscount,
        handleSetParams,
        modifyDiscountRef,
        handleModifyDiscount,
        handleViewUrl
    } = useBookOperation(pageRef);

    //一个月后提醒
    function handleRemind(row) {
        pageRef.value?.messageBoxConfirm({
            message: '确定一个月后提醒吗？',
            fetch: () =>
                proxy.$http.post('/book/stockAlarm/setAlarmTime', {
                    id: row.id,
                })
        });
    }

    //一键更新
    const oneUpdateRef = ref(null);
    function handleOneUpdate() {
        oneUpdateRef.value?.handleOpen();
    }

    //处理一键更新提交
    function handleOneUpdateSubmit(data) {
        data.alarmType = 1;
        proxy.$http.post('/book/stockAlarm/alarmReload', data).then((res) => {
            if (res.data.code == 200) {
                ElMessage.success('操作成功');
            } else {
                ElMessage.error(res.data.msg);
            }
        });
    }

    //查看回收日志
    const recycleLogRef = ref();
    const handleRecycleLog = (row) => {
        recycleLogRef.value?.handleOpen(row);
    };

    //查看售价日志
    const salesLogRef = ref();
    const handleSalesLog = (row) => {
        salesLogRef.value?.handleOpen(row);
    };

    //修改订单回收量
    const orderRecycleRef = ref();
    const handleModifyOrderRecycle = (row) => {
        orderRecycleRef.value?.handleOpen(row);
    };

    //修改最大回收量
    const maxRecycleRef = ref();
    const handleModifyMaxRecycle = (row) => {
        maxRecycleRef.value?.handleOpen(row);
    };
</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>