ys_sms_sending_web/src/views/sMsSendManage/loopSend/index.vue

<template>
    <div class="app-container">
        <!-- 短信余额提示 -->
        <el-alert
            v-if="smsBalance !== null"
            :title="`短信余额剩余${smsBalance}条,请及时充值!`"
            type="warning"
            :closable="false"
            show-icon
            style="margin-bottom: 20px"
        />

        <!-- 循环发送短信列表 -->
        <ComTable
            ref="comTableRef"
            :form-columns="formColumns"
            :table-columns="tableColumns"
            :load-data="listLoopSendAPI"
            :show-toolbar="true"
            :show-action="true"
            :action-columns="actionColumns"
        >
            <template #toolbar>
                <ComButton
                    type="primary"
                    icon="Plus"
                    @click="onHandleAdd"
                    v-hasPermi="['sms:loopTask:add']"
                >
                    新建
                </ComButton>
            </template>
            <template #taskStatus="{ row }">
                <!-- <el-switch
                    v-model="row.taskStatus"
                    active-value="1"
                    inactive-value="0"
                    @change="onHandleStatusChange($event, row)"
                /> -->
            </template>
        </ComTable>
    </div>
</template>

<script setup name="LoopSend">
import { ref, computed, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {
    listLoopSendAPI,
    delLoopSendAPI,
    updateLoopSendStatusAPI,
} from '@/api/sMsSendManage/loopSend.js'
import config from './config'
import ComTable from '@/components/ComTable/index.vue'
import ComButton from '@/components/ComButton/index.vue'

const router = useRouter()
const { proxy } = getCurrentInstance()

const { tableColumns, buildFormColumns } = config
const comTableRef = ref(null)
const smsBalance = ref(null) // 短信余额，可以从接口获取

// 根据配置构建搜索表单
const formColumns = computed(() => buildFormColumns())

// 操作列配置
const actionColumns = [
    {
        label: '详情',
        type: 'primary',
        link: true,
        permission: ['sms:loopTask:detail'],
        handler: (row) => {
            router.push({
                path: '/sms/loopSendEdit/index',
                query: {
                    id: row.id,
                    mode: 'detail',
                },
            })
        },
    },
    // {
    //     label: '编辑',
    //     type: 'primary',
    //     link: true,
    //     permission: ['sms:loopTask:edit'],
    //     handler: (row) => {
    //         router.push({
    //             path: '/sms/loopSendEdit/index',
    //             query: {
    //                 id: row.id,
    //                 mode: 'edit',
    //             },
    //         })
    //     },
    // },
    {
        label: '删除',
        type: 'danger',
        link: true,
        permission: ['sms:loopTask:remove'],
        handler: (row) => {
            proxy.$modal.confirm('是否确认删除该循环发送任务？').then(async () => {
                const result = await delLoopSendAPI({ id: row.id })
                if (result.code === 200) {
                    proxy.$modal.msgSuccess('删除成功')
                    comTableRef.value?.refresh()
                }
            })
        },
    },
]

// 新增
const onHandleAdd = () => {
    router.push({
        path: '/sms/loopSendEdit/index',
        query: {
            mode: 'add',
        },
    })
}

// 任务状态修改
const onHandleStatusChange = async (value, row) => {
    try {
        const result = await updateLoopSendStatusAPI({
            id: row.id,
            taskStatus: value,
        })
        if (result.code === 200) {
            proxy.$modal.msgSuccess(value === '1' ? '启用成功' : '停用成功')
            comTableRef.value?.refresh()
        } else {
            // 如果失败，恢复原状态
            row.taskStatus = value === '1' ? '0' : '1'
        }
    } catch (error) {
        // 如果失败，恢复原状态
        row.taskStatus = value === '1' ? '0' : '1'
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}
</style>