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

<template>
    <div class="app-container">
        <!-- 循环发送短信列表 -->
        <ComTable
            ref="comTableRef"
            :form-columns="formColumns"
            :table-columns="tableColumns"
            :load-data="listLoopSendAPI"
            :show-toolbar="true"
            :show-action="true"
            :action-columns="actionColumns"
        >
            <template #toolbar>
                <div class="toolbar-left">
                    <ComButton type="primary" icon="Plus" @click="onHandleAdd"> 新建 </ComButton>
                    <span v-if="smsBalance !== null" class="sms-balance-text">
                        短信余额剩余 {{ smsBalance }} 条
                        <span v-if="smsBalance < 10000">，请及时充值！</span>
                    </span>
                </div>
            </template>

            <template #taskStatus="{ row }">
                <el-switch
                    active-value="0"
                    inactive-value="1"
                    :model-value="getTaskStatusValue(row)"
                    :loading="getSwitchLoading(row.id)"
                    :disabled="getSwitchLoading(row.id)"
                    @change="(value) => debouncedStatusChange(value, row)"
                />
            </template>
        </ComTable>

        <!-- 发送详情弹框 -->
        <ComDialog
            :dialog-config="sendDetailsDialogConfig"
            @closeDialogOuter="onCloseSendDetailsDialog"
        >
            <template #outerContent>
                <SendDetails ref="sendDetailsRef" :sendDetailsId="sendDetailsId" />
            </template>
        </ComDialog>
    </div>
</template>

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

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

const { tableColumns, buildFormColumns } = config
const comTableRef = ref(null)
const sendDetailsRef = ref(null)
const smsBalance = ref(null) // 短信余额
const switchLoadingMap = new Map() // 记录每个 switch 的 loading 状态
const sendDetailsId = ref(null)

// 发送详情弹框配置
const sendDetailsDialogConfig = reactive({
    outerVisible: false,
    outerTitle: '发送详情',
    outerWidth: '90%',
    minHeight: '500px',
    maxHeight: '90vh',
})

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

// 操作列配置
const actionColumns = [
    {
        label: '详情',
        type: 'primary',
        link: true,

        handler: (row) => {
            router.push({
                path: '/sms/loopSendEdit/index',
                query: {
                    id: row.id,
                    mode: 'detail',
                },
            })
        },
    },

    {
        label: '发送详情',
        type: 'primary',
        link: true,

        handler: (row) => {
            sendDetailsDialogConfig.outerTitle = `发送详情 - ${row.taskName || ''}`
            sendDetailsId.value = row.id
            sendDetailsDialogConfig.outerVisible = true
        },
    },
    {
        label: '删除',
        type: 'danger',
        link: true,

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

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

// 获取 taskStatus 的值，统一转换为字符串格式
const getTaskStatusValue = (row) => {
    const value = row.taskStatus
    if (value === null || value === undefined) {
        return '1'
    }
    // 如果是数字，转换为字符串；如果已经是字符串，直接返回
    return String(value)
}

// 获取 switch 的 loading 状态
const getSwitchLoading = (rowId) => {
    return switchLoadingMap.get(rowId) || false
}

// 设置 switch 的 loading 状态
const setSwitchLoading = (rowId, loading) => {
    if (loading) {
        switchLoadingMap.set(rowId, true)
    } else {
        switchLoadingMap.delete(rowId)
    }
}

// 任务状态修改（实际执行的方法）
const onHandleStatusChange = (value, row) => {
    // 如果正在加载中，直接返回
    if (getSwitchLoading(row.id)) {
        return
    }

    // 更新 row 数据，保持与 switch 组件的值同步
    row.taskStatus = value

    // 设置 loading 状态
    setSwitchLoading(row.id, true)

    // 组装参数
    const params = {
        id: row.id,
        taskStatus: value,
        jobId: row.jobId,
    }

    updateLoopSendStatusAPI(params)
        .then((res) => {
            if (res.code === 200) {
                proxy.$modal.msgSuccess(value === '0' ? '启用成功' : '停用成功')
                comTableRef.value?.refresh()
            } else {
                // 如果失败，恢复原状态
                row.taskStatus = value === '0' ? '1' : '0'
            }
        })
        .catch(() => {
            // 如果失败，恢复原状态
            row.taskStatus = value === '0' ? '1' : '0'
        })
        .finally(() => {
            // 清除 loading 状态
            setSwitchLoading(row.id, false)
        })
}

// 使用防抖包装状态修改方法，延迟 300ms
const debouncedStatusChange = debounce(onHandleStatusChange, 300)

// 获取短信余额
const getSmsBalance = async () => {
    try {
        const result = await getSmsBalanceAPI()
        if (result.code === 200) {
            smsBalance.value = result.data || result.balance || null
        }
    } catch (error) {
        console.error('获取短信余额失败:', error)
    }
}

// 关闭发送详情弹框
const onCloseSendDetailsDialog = (visible) => {
    sendDetailsDialogConfig.outerVisible = visible
}

onMounted(() => {
    getSmsBalance()
})
</script>

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

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sms-balance-text {
    margin-left: 16px;
    font-size: 14px;
    color: #f56c6c;
}
</style>