shuhi-ui/src/views/salesOps/topics/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"
            :datasource="mockDatasource">

            <!-- 状态 -->
            <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>

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

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

    defineOptions({ name: 'TopicsList' });

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

    const pageConfig = reactive({
        pageUrl: '/book/showIndex/queryBindBook',
        fileName: '专题列表',
        cacheKey: 'topics-list',
        params: {
            type: 1
        }
    });

    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 }
    ]);

    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/topics/delete' });
                EleMessage.success('删除成功');
                reload();
            })
            .catch(() => { });
    };

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

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