会员营期同步按钮

src/api/course/userCourseVideo.js

@@ -91,6 +91,14 @@ export function syncTemplate(courseId) {
   })
 }
 
+// 同步会员营期
+export function syncCoursePeriod(courseId) {
+  return request({
+    url: '/course/userCourseVideo/syncCoursePeriod/' + courseId,
+    method: 'post'
+  })
+}
+
 // 导出课堂视频
 export function exportUserCourseVideo(query) {
   return request({

src/views/components/course/userCourseCatalogDetails.vue

@@ -55,8 +55,25 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-delete" size="mini" @click="handleSync"
-                   v-hasPermi="['course:userCourseVideo:sync']">同步模板数据
+        <el-button 
+          type="primary" 
+          plain 
+          icon="el-icon-delete" 
+          size="mini" 
+          @click="handleSync"
+          v-hasPermi="['course:userCourseVideo:sync']"
+        >同步模板数据
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button 
+          type="primary" 
+          icon="el-icon-refresh" 
+          size="mini" 
+          :loading="syncPeriodLoading"
+          :disabled="syncPeriodLoading"
+          @click="handleSyncCoursePeriod"
+        >{{ syncPeriodLoading ? '同步中...' : '同步会员营期' }}
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -478,6 +495,52 @@
       </div>
     </el-dialog>
 
+    <!-- 同步结果对话框 -->
+    <el-dialog 
+      :title="syncResultDialog.title" 
+      :visible.sync="syncResultDialog.open" 
+      width="700px" 
+      append-to-body
+      class="sync-result-dialog"
+    >
+      <div v-if="syncResultDialog.data" class="sync-result-content">
+        <!-- 总体统计 -->
+        <el-alert
+          :title="`同步 ${syncResultDialog.data.periodCount} 个营期，共更新 ${syncResultDialog.data.totalUpdated} 条数据`"
+          type="success"
+          :closable="false"
+          show-icon
+        >
+        </el-alert>
+
+        <!-- 营期详情 -->
+        <div class="period-details">
+          <el-divider content-position="left">营期明细</el-divider>
+          <el-table 
+            :data="syncResultDialog.data.periodDetails" 
+            border 
+            style="width: 100%"
+            max-height="400"
+          >
+            <el-table-column type="index" label="序号" width="60" align="center" />
+            <el-table-column prop="periodName" label="营期名称" align="center" show-overflow-tooltip />
+            <el-table-column prop="updatedCount" label="更新数量" width="120" align="center">
+              <template slot-scope="scope">
+                <el-tag type="success" size="small">
+                  <i class="el-icon-success"></i>
+                  {{ scope.row.updatedCount }}条
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="closeSyncResultDialog">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -495,7 +558,8 @@ import {
   sortCourseVideo,
   updates,
   updateUserCourseVideo,
-  syncTemplate
+  syncTemplate,
+  syncCoursePeriod
 } from "@/api/course/userCourseVideo";
 import QuestionBank from "@/views/course/courseQuestionBank/QuestionBank.vue";
 import CourseProduct from "@/views/course/fsCourseProduct/CourseProduct.vue";
@@ -522,6 +586,14 @@ export default {
   },
   data() {
     return {
+      // 同步会员营期loading状态
+      syncPeriodLoading: false,
+      // 同步结果对话框
+      syncResultDialog: {
+        open: false,
+        title: '同步结果',
+        data: null
+      },
       // 缩略图验证相关
       thumbnailValidation: {
         show: false,
@@ -1432,8 +1504,75 @@ export default {
       this.commentDialog.title = `查看评论 - ${row.title}`;
       this.commentDialog.open = true;
     },
-    handleQuestionBankClose() {
-      this.questionBank.open = false;
+    /** 同步会员营期 */
+    handleSyncCoursePeriod() {
+      // 第一层防护：检查loading状态
+      if (this.syncPeriodLoading) {
+        this.$message.warning('正在同步中，请勿重复操作')
+        return
+      }
+
+      // 检查courseId
+      if (!this.courseId) {
+        this.$message.error('课程ID不能为空')
+        return
+      }
+
+      // 二次确认
+      this.$confirm('确认将课程视频的排序同步到绑定的营期中？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 第二层防护：验证通过后立即设置loading
+        this.syncPeriodLoading = true
+
+        // 调用同步接口
+        syncCoursePeriod(this.courseId)
+          .then(response => {
+            if (response.code === 200) {
+              // 成功提示
+              this.$message.success(response.msg)
+              
+              // 如果有详细数据，显示详情对话框
+              if (response.data && response.data.periodDetails) {
+                this.showSyncResult(response.data)
+              }
+              
+              // 刷新列表
+              this.getList()
+            } else {
+              // 暂无需要同步的营期数据
+              this.$message.warning(response.msg || '同步失败')
+            }
+          })
+          .catch(error => {
+            console.error('同步会员营期失败:', error)
+            const errorMsg = error.response?.data?.msg || error.message || '同步失败，请重试'
+            this.$message.error(errorMsg)
+          })
+          .finally(() => {
+            // 延迟重置loading状态，防止快速重复点击
+            setTimeout(() => {
+              this.syncPeriodLoading = false
+            }, 500)
+          })
+      }).catch(() => {
+        // 用户取消操作
+        console.log('用户取消同步操作')
+      })
+    },
+
+    /** 显示同步结果详情 */
+    showSyncResult(data) {
+      this.syncResultDialog.data = data
+      this.syncResultDialog.open = true
+    },
+
+    /** 关闭同步结果对话框 */
+    closeSyncResultDialog() {
+      this.syncResultDialog.open = false
+      this.syncResultDialog.data = null
     },
   // 实时过滤金额输入，只允许两位小数
   handleAmountInput(rule, field) {
@@ -1603,4 +1742,27 @@ export default {
   color: #fff !important;
 }
 
+/* 同步结果对话框样式 */
+.sync-result-dialog {
+  .sync-result-content {
+    padding: 10px 0;
+
+    .el-alert {
+      margin-bottom: 20px;
+    }
+
+    .period-details {
+      margin-top: 20px;
+
+      .el-divider {
+        margin: 15px 0;
+      }
+
+      .el-table {
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
 </style>