shuhi-ui/src/views/salesOps/booklist/index.vue

<template>
    <ele-page flex-table>
        <!-- Search Bar -->
        <div class="bg-white p-4 mb-4 rounded shadow-sm flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <el-input v-model="searchQuery" placeholder="请输入书单名称" style="width: 240px" clearable />
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
            <el-button type="primary" @click="handleAdd">添加书单</el-button>
        </div>

        <common-table ref="tableRef" :pageConfig="pageConfig" :columns="columns" :tools="false">
            
            <!-- 状态 -->
            <template #status="{ row }">
                 <span :class="row.status === 'online' ? 'text-green-500' : 'text-gray-500'">
                     {{ row.status === 'online' ? '已上架' : '已下架' }}
                 </span>
            </template>

             <!-- 操作 -->
             <template #action="{ row }">
                 <div class="flex items-center space-x-2">
                    <el-button 
                        v-if="row.status === 'online'" 
                        size="small" 
                        type="primary" 
                        plain
                        @click="handleStatusToggle(row)">
                        下架
                    </el-button>
                    <el-button 
                        v-else 
                        size="small" 
                        type="success" 
                        plain
                        @click="handleStatusToggle(row)">
                        上架
                    </el-button>
                    
                    <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
                    <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
                    <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
                 </div>
            </template>
        </common-table>

        <booklist-edit ref="editDialogRef" @success="handleSuccess" />
    </ele-page>
</template>

<script setup>
import { ref, reactive } from 'vue';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import BooklistEdit from './components/booklist-edit.vue';
import { EleMessage } from 'ele-admin-plus/es';

defineOptions({ name: 'Booklist' });

const tableRef = ref(null);
const editDialogRef = ref(null);
const searchQuery = ref('');

const pageConfig = reactive({
    pageUrl: '/salesOps/booklist/list',
    fileName: '书单列表',
    cacheKey: 'booklist-list',
    params: {}
});

const columns = ref([
    { type: 'selection', width: 50, align: 'center' },
    { label: '编号', prop: 'code', width: 100, align: 'center' },
    { label: '书单名称', prop: 'name', align: 'center' },
    { label: '发布时间', prop: 'publishTime', align: 'center', width: 180 },
    { label: '书单类型', prop: 'typeLabel', align: 'center' },
    { label: '相关单品', prop: 'relatedItems', align: 'center' },
    { label: '状态', prop: 'status', slot: 'status', align: 'center' },
    { label: '排序', prop: 'sort', align: 'center', width: 80 },
    { label: '操作', prop: 'action', slot: 'action', align: 'center', width: 250 }
]);

// Mock Data
const mockList = ref([
    { id: 1, code: '0101', name: '诺贝尔文学奖', publishTime: '2021-06-26 12:00:00', type: 'single', typeLabel: '单排列', relatedItems: 10, status: 'online', sort: 1 },
    { id: 2, code: '100', name: '茅盾文学奖', publishTime: '2021-06-26 12:00:00', type: 'double', typeLabel: '双排列', relatedItems: 10, status: 'offline', sort: 1 },
    { id: 3, code: '10252', name: '樊登读书', publishTime: '2021-06-26 12:00:00', type: 'double', typeLabel: '双排列', relatedItems: 10, status: 'online', sort: 1 },
    { id: 4, code: '0101', name: '书嗨推荐', publishTime: '2021-06-26 12:00:00', type: 'single', typeLabel: '单排列', relatedItems: 10, status: 'online', sort: 1 },
]);

const mockDatasource = ({ pages }) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            let data = mockList.value;
            if (searchQuery.value) {
                data = data.filter(item => item.name.includes(searchQuery.value));
            }
            resolve({
                code: 0,
                msg: 'success',
                count: data.length,
                data: data
            });
        }, 300);
    });
};

const handleSearch = () => {
    reload();
};

const handleReset = () => {
    searchQuery.value = '';
    reload();
};

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

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

const handleEdit = (row) => {
    editDialogRef.value?.handleOpen(row);
};

const handleDetail = (row) => {
    EleMessage.info(`查看 ${row.name} 详情`);
};

const handleDelete = (row) => {
    EleMessage.confirm(`确定要删除 ${row.name} 吗？`)
        .then(() => {
            // TODO: Call API to delete
            // tableRef.value?.operatBatch({ method: 'delete', row, url: '/salesOps/booklist/delete' });
            EleMessage.success('删除成功');
            reload();
        })
        .catch(() => {});
};

const handleStatusToggle = (row) => {
    // TODO: Call API to update status
    // tableRef.value?.operatBatch({ method: 'post', row, url: '/salesOps/booklist/updateStatus' });
    EleMessage.success(`${row.name} 已${row.status === 'online' ? '上架' : '下架'}`);
};

const handleSuccess = () => {
    reload();
};
</script>