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

<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <page-search @search="reload" />

        <common-table ref="tableRef" :columns="columns" :page-config="pageConfig" :bodyStyle="{ padding: 0 }">
            <template #toolbar>
                <el-button type="primary" plain :icon="Plus" @click="handleCreate">
                    新增
                </el-button>
            </template>

            <template #time="{ row }">
                {{ row.startTime }} 至 {{ row.endTime }}
            </template>

            <template #limitFirst="{ row }">
                <el-tag :type="String(row.limitFirst) === '1' ? 'success' : 'info'">
                    {{ String(row.limitFirst) === '1' ? '限制' : '不限制' }}
                </el-tag>
            </template>

            <template #status="{ row }">
                <el-tag :type="String(row.status) === '1' ? 'success' : 'danger'">
                    {{ String(row.status) === '1' ? '开启' : '关闭' }}
                </el-tag>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button type="primary" link @click="handleEdit(row)">
                        [编辑]
                    </el-button>
                    <el-button type="success" link @click="handleViewData(row)">
                        [查看数据]
                    </el-button>
                    <el-button :type="String(row.status) === '1' ? 'danger' : 'success'" link
                        @click="handleToggleStatus(row)">
                        [{{ String(row.status) === '1' ? '关闭活动' : '启动活动' }}]
                    </el-button>
                </div>
            </template>
        </common-table>

        <activity-edit ref="activityEditRef" @success="reload" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import request from '@/utils/request';
    import PageSearch from './components/PageSearch.vue';
    import ActivityEdit from './components/ActivityEdit.vue';
    import { Plus } from '@element-plus/icons-vue';

    defineOptions({ name: 'ShareDiscountActivity' });

    const tableRef = ref(null);
    const activityEditRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/activity/activityReduceInfo/pagelist',
        fileName: '分享降价活动列表',
        cacheKey: 'shareDiscountActivityTable',
        rowKey: 'id'
    });

    const columns = ref([
        { label: '活动名称', prop: 'activityName', minWidth: 150 },
        { label: '活动时间', slot: 'time', minWidth: 300 },
        { label: '是否限制首单', slot: 'limitFirst', minWidth: 120 },
        { label: '状态', slot: 'status', minWidth: 100 },
        { label: '创建时间', prop: 'createTime', minWidth: 180 },
        { label: '操作', slot: 'action', minWidth: 200, fixed: 'right' }
    ]);

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

    const handleCreate = () => {
        activityEditRef.value?.handleOpen();
    };

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

    const handleViewData = (row) => {
        EleMessage.info('查看数据功能待对接');
    };

    const handleToggleStatus = (row) => {
        // 0-关闭 1-开启
        let message = row.status == 1 ? '确认关闭活动？' : '确认开启活动？';
        let data = {
            activityId: row.id,
            status: row.status == 1 ? 0 : 1
        };
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => request.post('/activity/activityReduceInfo/changeStatus', data)
        });
    };
</script>