From 1e4ef09b671cbf080b1fc6e8dbba2c6b5e105edb Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 27 Jan 2026 15:17:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sMsSendManage/loopSend.js          |   2 +-
 src/views/index.vue                        | 334 ++++++++++++++++-----
 src/views/sMsSendManage/loopSend/config.js |  16 +-
 src/views/sMsSendManage/loopSend/edit.vue  |   5 +-
 src/views/sMsSendManage/loopSend/index.vue |  97 ++++--
 5 files changed, 353 insertions(+), 101 deletions(-)

diff --git a/src/api/sMsSendManage/loopSend.js b/src/api/sMsSendManage/loopSend.js
index 23e39e3..3f5e0e9 100644
--- a/src/api/sMsSendManage/loopSend.js
+++ b/src/api/sMsSendManage/loopSend.js
@@ -50,7 +50,7 @@ export function getLoopSendDetailAPI(id) {
 // 循环发送短信 - 更新任务状态
 export function updateLoopSendStatusAPI(data) {
     return request({
-        url: '/msgJob/updateLoopTaskStatus',
+        url: '/msgJob/updateTaskStatus',
         method: 'POST',
         data,
     })
diff --git a/src/views/index.vue b/src/views/index.vue
index 4b257ce..53e19e5 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,123 +2,229 @@
     <div class="home">
         <section class="home-hero">
             <div class="home-hero-main">
-                <p class="home-tag">计划管理平台 · 首页</p>
+                <p class="home-tag">短信发送系统 · 首页</p>
                 <h1 class="home-title">
                     欢迎进入<br />
-                    运检站计划管理平台
+                    短信发送管理系统
                 </h1>
                 <p class="home-subtitle">
-                    这里将展示整体经营概况、计划执行情况等关键信息。当前为静态页，后续可根据产品设计替换为正式首页。
+                    高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
                 </p>
             </div>
-            <!--            <div class="home-hero-panel">
+            <div class="home-hero-panel">
                 <div class="panel-header">今日概览</div>
                 <div class="panel-body">
                     <div class="panel-item">
-                        <span class="panel-label">计划任务</span>
-                        <span class="panel-value">—</span>
+                        <span class="panel-label">今日发送</span>
+                        <span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
                     </div>
                     <div class="panel-item">
-                        <span class="panel-label">已完成</span>
-                        <span class="panel-value">—</span>
+                        <span class="panel-label">成功发送</span>
+                        <span class="panel-value">{{ todayStats.successCount || '—' }}</span>
                     </div>
                     <div class="panel-item">
-                        <span class="panel-label">预警事项</span>
-                        <span class="panel-value">—</span>
+                        <span class="panel-label">待发送任务</span>
+                        <span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
                     </div>
                 </div>
                 <div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
-            </div>-->
+            </div>
         </section>
 
         <section class="home-grid">
-            <el-card shadow="hover" class="home-card">
-                <h3>基础管理</h3>
-                <p>用于维护人员、岗位、站点等基础资料，为后续计划和统计提供统一数据源。</p>
+            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
+                <div class="card-icon">
+                    <el-icon :size="32" color="#1677ff">
+                        <Message />
+                    </el-icon>
+                </div>
+                <h3>单次发送</h3>
+                <p>
+                    快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
+                </p>
             </el-card>
-            <el-card shadow="hover" class="home-card">
-                <h3>计划管理</h3>
-                <p>支撑月度、日常计划的编制与执行过程管理，后续可在此接入进度看板等内容。</p>
+            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
+                <div class="card-icon">
+                    <el-icon :size="32" color="#52c41a">
+                        <Refresh />
+                    </el-icon>
+                </div>
+                <h3>循环发送</h3>
+                <p>
+                    基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
+                </p>
             </el-card>
-            <el-card shadow="hover" class="home-card">
-                <h3>作业与月报</h3>
-                <p>用于记录实际作业与月报数据，实现计划与执行结果的对比分析。</p>
+            <el-card
+                shadow="hover"
+                class="home-card"
+                @click="navigateTo('/basicManage/personManage')"
+            >
+                <div class="card-icon">
+                    <el-icon :size="32" color="#fa8c16">
+                        <User />
+                    </el-icon>
+                </div>
+                <h3>人员管理</h3>
+                <p>
+                    管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
+                </p>
+            </el-card>
+            <el-card
+                shadow="hover"
+                class="home-card"
+                @click="navigateTo('/basicManage/groupManage')"
+            >
+                <div class="card-icon">
+                    <el-icon :size="32" color="#eb2f96">
+                        <UserFilled />
+                    </el-icon>
+                </div>
+                <h3>分组管理</h3>
+                <p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
             </el-card>
         </section>
 
-        <section class="home-footer-note">
-            <p>当前首页仅展示静态信息，后续根据实际需求替换为正式大屏或经营驾驶舱。</p>
+        <section class="home-features">
+            <h2 class="features-title">核心功能</h2>
+            <div class="features-grid">
+                <div class="feature-item">
+                    <el-icon :size="24" color="#1677ff">
+                        <Clock />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>定时发送</h4>
+                        <p>支持 Cron 表达式配置，灵活设置发送时间</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#52c41a">
+                        <User />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>批量选择</h4>
+                        <p>支持按人员或分组批量选择接收人</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#fa8c16">
+                        <Document />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>任务管理</h4>
+                        <p>统一管理所有发送任务，支持启用/停用</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#eb2f96">
+                        <View />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>发送记录</h4>
+                        <p>查看详细的发送记录和状态信息</p>
+                    </div>
+                </div>
+            </div>
         </section>
     </div>
 </template>
 
-<script setup name="Index"></script>
+<script setup name="Index">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
 
-<style scoped>
+const router = useRouter()
+
+// 今日统计数据（后续可从接口获取）
+const todayStats = ref({
+    sendCount: null,
+    successCount: null,
+    pendingCount: null,
+})
+
+// 导航到指定路由
+const navigateTo = (path) => {
+    router.push(path)
+}
+</script>
+
+<style lang="scss" scoped>
 .home {
-    gap: 32px;
+    gap: 40px;
     display: flex;
     min-height: 100%;
     flex-direction: column;
-    padding: 32px 40px 48px;
-    background: radial-gradient(circle at top left, #e6f4ff 0, #ffffff 50%, #f5f7fb 100%);
+    padding: 40px 48px 48px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
 }
 
 .home-hero {
     gap: 32px;
     display: grid;
     align-items: stretch;
-    grid-template-columns: minmax(0, 2fr) minmax(280px, 1.4fr);
+    grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
 }
 
 .home-hero-main {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: 640px;
+    max-width: 680px;
 }
 
 .home-tag {
     display: inline-flex;
     align-items: center;
-    padding: 4px 12px;
+    padding: 6px 14px;
     border-radius: 999px;
     font-size: 13px;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
     color: #1677ff;
-    background: rgba(22, 119, 255, 0.08);
-    margin-bottom: 16px;
+    background: rgba(22, 119, 255, 0.1);
+    margin-bottom: 20px;
+    width: fit-content;
+    font-weight: 500;
 }
 
 .home-title {
-    font-size: 32px;
+    font-size: 42px;
     line-height: 1.3;
     font-weight: 700;
     color: #1f2937;
-    margin: 0 0 16px;
+    margin: 0 0 20px;
+    background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .home-subtitle {
     margin: 0;
-    font-size: 15px;
+    font-size: 16px;
     line-height: 1.8;
     color: #4b5563;
 }
 
 .home-hero-panel {
     border-radius: 20px;
-    background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #bae0ff 100%);
-    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
+    background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
+    box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
     color: #ffffff;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
+    }
 }
 
 .panel-header {
-    padding: 16px 20px 8px;
-    font-size: 15px;
+    padding: 20px 24px 12px;
+    font-size: 16px;
     font-weight: 600;
     opacity: 0.95;
 }
@@ -126,55 +232,81 @@
 .panel-body {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    padding: 12px 20px 8px;
-    gap: 8px;
+    padding: 16px 24px 12px;
+    gap: 12px;
 }
 
 .panel-item {
-    padding: 10px 12px;
+    padding: 16px 14px;
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.12);
-    backdrop-filter: blur(4px);
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(8px);
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 8px;
     min-width: 0;
+    transition: background 0.3s ease;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
 }
 
 .panel-label {
     font-size: 13px;
-    opacity: 0.85;
+    opacity: 0.9;
+    font-weight: 500;
 }
 
 .panel-value {
-    font-size: 20px;
-    font-weight: 600;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.2;
 }
 
 .panel-footer {
-    padding: 12px 20px 16px;
+    padding: 16px 24px 20px;
     font-size: 13px;
-    opacity: 0.9;
+    opacity: 0.85;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin-top: auto;
 }
 
 .home-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 24px;
 }
 
 .home-card {
     border-radius: 18px;
     overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        border-color: #e6f4ff;
+    }
 }
 
 .home-card :deep(.el-card__body) {
-    padding: 20px 22px 22px;
+    padding: 24px;
+}
+
+.card-icon {
+    margin-bottom: 16px;
+    display: inline-flex;
+    padding: 12px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
 }
 
 .home-card h3 {
-    margin: 0 0 10px;
-    font-size: 18px;
+    margin: 0 0 12px;
+    font-size: 20px;
     font-weight: 600;
     color: #111827;
 }
@@ -186,24 +318,61 @@
     color: #4b5563;
 }
 
-.home-footer-note {
+.home-features {
+    margin-top: 8px;
+}
+
+.features-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0 0 24px;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 20px;
+    border-radius: 12px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: #1677ff;
+        box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
+        transform: translateY(-2px);
+    }
+}
+
+.feature-content {
+    flex: 1;
+}
+
+.feature-content h4 {
+    margin: 0 0 6px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.feature-content p {
+    margin: 0;
     font-size: 13px;
+    line-height: 1.6;
     color: #6b7280;
 }
 
 @media (max-width: 1024px) {
     .home {
-        padding: 24px 24px 36px;
-    }
-
-    .home-hero {
-        grid-template-columns: 1.2fr 1fr;
-    }
-}
-
-@media (max-width: 768px) {
-    .home {
-        padding: 20px 16px 28px;
+        padding: 32px 32px 40px;
     }
 
     .home-hero {
@@ -215,7 +384,36 @@
     }
 
     .home-title {
-        font-size: 26px;
+        font-size: 36px;
+    }
+}
+
+@media (max-width: 768px) {
+    .home {
+        padding: 24px 20px 32px;
+        gap: 32px;
+    }
+
+    .home-hero {
+        gap: 24px;
+    }
+
+    .home-title {
+        font-size: 28px;
+    }
+
+    .home-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .panel-body {
+        grid-template-columns: 1fr;
     }
 }
 </style>
diff --git a/src/views/sMsSendManage/loopSend/config.js b/src/views/sMsSendManage/loopSend/config.js
index 0525ec9..38148e9 100644
--- a/src/views/sMsSendManage/loopSend/config.js
+++ b/src/views/sMsSendManage/loopSend/config.js
@@ -7,16 +7,16 @@ export const buildFormColumns = () => [
         prop: 'taskName',
         placeholder: '请输入任务名称',
     },
-    {
-        type: 'date',
-        prop: 'dateRange',
-        dateType: 'daterange',
-        placeholder: '请选择日期范围',
-        paramsList: ['startTime', 'endTime'], // 将日期范围拆分为开始时间和结束时间
-    },
+    // {
+    //     type: 'date',
+    //     prop: 'dateRange',
+    //     dateType: 'daterange',
+    //     placeholder: '请选择日期范围',
+    //     paramsList: ['startTime', 'endTime'], // 将日期范围拆分为开始时间和结束时间
+    // },
     {
         type: 'select',
-        prop: 'smsType',
+        prop: 'msgType',
         placeholder: '请选择短信类型',
         options: [
             { label: '通知', value: '1' },
diff --git a/src/views/sMsSendManage/loopSend/edit.vue b/src/views/sMsSendManage/loopSend/edit.vue
index 108a661..a66d8b1 100644
--- a/src/views/sMsSendManage/loopSend/edit.vue
+++ b/src/views/sMsSendManage/loopSend/edit.vue
@@ -334,7 +334,10 @@ const onCloseCronDialog = (visible) => {
 
 // 返回
 const onBack = () => {
-    router.back()
+    // router.back()
+    proxy.$tab.closeOpenPage({
+        path: '/sMsSendManage/loopSend',
+    })
 }
 
 // 提交表单
diff --git a/src/views/sMsSendManage/loopSend/index.vue b/src/views/sMsSendManage/loopSend/index.vue
index ac8b7c4..340c940 100644
--- a/src/views/sMsSendManage/loopSend/index.vue
+++ b/src/views/sMsSendManage/loopSend/index.vue
@@ -31,12 +31,14 @@
                 </ComButton>
             </template>
             <template #taskStatus="{ row }">
-                <!-- <el-switch
-                    v-model="row.taskStatus"
-                    active-value="1"
-                    inactive-value="0"
-                    @change="onHandleStatusChange($event, 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>
     </div>
@@ -45,6 +47,7 @@
 <script setup name="LoopSend">
 import { ref, computed, getCurrentInstance } from 'vue'
 import { useRouter } from 'vue-router'
+import { debounce } from 'lodash-es'
 import {
     listLoopSendAPI,
     delLoopSendAPI,
@@ -60,6 +63,7 @@ const { proxy } = getCurrentInstance()
 const { tableColumns, buildFormColumns } = config
 const comTableRef = ref(null)
 const smsBalance = ref(null) // 短信余额，可以从接口获取
+const switchLoadingMap = new Map() // 记录每个 switch 的 loading 状态
 
 // 根据配置构建搜索表单
 const formColumns = computed(() => buildFormColumns())
@@ -123,25 +127,72 @@ const onHandleAdd = () => {
     })
 }
 
-// 任务状态修改
-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'
+// 获取 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)
 </script>
 
 <style lang="scss" scoped>