shuhi-ui/src/views/marketing/shareDiscount/booklist/index.vue

<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <page-search @search="handleSearch" />
        <common-table ref="tableRef" :columns="columns" :page-config="pageConfig"
            @selection-change="handleSelectionChange">
            <template #toolbar>
                <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
                <!-- <el-button type="danger" :icon="Delete" @click="handleBatchDelete">批量删除</el-button> -->
                <el-button type="success" :icon="Upload" @click="handleImport">导入</el-button>
                <el-button type="warning" :icon="Download" @click="handleExport">导出</el-button>
            </template>

            <template #cover="{ row }">
                <el-image style="width: 50px; height: 70px" :src="row.cover" :preview-src-list="[row.cover]"
                    fit="cover" />
            </template>
            <template #sellStatus="{ row }">
                <dict-data code="sell_status" v-model="row.sellStatus" type="tag"></dict-data>
            </template>

            <!-- <template #action="{ row }">
                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
            </template> -->
        </common-table>

        <booklist-add ref="addRef" @success="refreshData" />

        <booklist-import ref="importRef" @success="refreshData" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { Plus, Delete, Upload, Download } from '@element-plus/icons-vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/PageSearch.vue';
    import BooklistAdd from './components/BooklistAdd.vue';
    import BooklistImport from './components/BooklistImport.vue';

    defineOptions({
        name: 'ShareDiscountBookList'
    });

    const tableRef = ref(null);
    const addRef = ref(null);
    const importRef = ref(null);
    const selection = ref([]);

    const pageConfig = reactive({
        pageUrl: '/activity/reduce/book/pagelist',
        exportUrl: '/activity/reduce/book/export',
        fileName: '降价营销书单',
        cacheKey: 'shareDiscountBookListTable',
        rowKey: 'id',
        tool: true
    });

    const columns = [
        { type: 'selection', width: 50 },
        { prop: 'cover', label: '封面', slot: 'cover', width: 80 },
        { prop: 'isbn', label: 'ISBN', width: 140 },
        { prop: 'bookName', label: '书名', minWidth: 150 },
        { prop: 'author', label: '作者', width: 120 },
        { prop: 'publish', label: '出版社', width: 150 },
        { prop: 'pubDate', label: '出版时间', width: 120 },
        { prop: 'price', label: '定价', width: 80 },
        { prop: 'productPrice', label: '售价', width: 80 },
        {
            prop: 'sellStatus',
            label: '销售状态',
            width: 100,
            slot: 'sellStatus',
            formatter: (row) => ['待上架', '出售中', '手动下架', '售罄', '黑名单'][row.sellStatus] || row.sellStatus
        },
        { prop: 'recycleDiscount', label: '回收折扣', width: 100 },
        { prop: 'recyclePrice', label: '回收价格', width: 100 },
        { prop: 'upsellPrice', label: '加价金额', width: 100 },
        { prop: 'createTime', label: '添加时间', width: 160 },
        // { prop: 'action', label: '操作', slot: 'action', width: 100, fixed: 'right' }
    ];

    const handleSearch = (params) => {
        tableRef.value?.reload(params);
    };

    const refreshData = () => {
        tableRef.value?.reload();
    };

    const handleSelectionChange = (val) => {
        selection.value = val;
    };

    const handleAdd = () => {
        addRef.value?.handleOpen();
    };

    const handleImport = () => {
        importRef.value?.handleOpen();
    };

    const handleExport = () => {
        tableRef.value?.exportData();
    };

    // const handleBatchDelete = () => {
    //     if (selection.value.length === 0) {
    //         ElMessage.warning('请选择要删除的记录');
    //         return;
    //     }
    //     ElMessageBox.confirm('确认删除选中的记录吗？', '提示', {
    //         type: 'warning'
    //     }).then(async () => {
    //         // No delete API available
    //     });
    // };

    // const handleDelete = (row) => {
    //     // No delete API available
    // };
</script>