营期-公司设置红包页面按需求大幅度调整（第一版）

src/api/course/userCoursePeriod.js

@@ -104,3 +104,12 @@ export function batchSaveRedPacket(data) {
   })
 }
 
+// 获取设置红包金额列表
+export function getPeriodRedPacketList(query) {
+  return request({
+    url: '/course/period/redPacketList',
+    method: 'get',
+    params: query
+  })
+}
+

src/views/course/userCoursePeriod/index.vue

@@ -170,6 +170,12 @@
                 @click="handleCourse(scope.row)"
                 v-hasPermi="['course:period:edit']"
               >课程管理</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-money"
+                @click="setRedPacket(scope.row)"
+              >设置红包</el-button>
               <el-button
                 size="mini"
                 type="text"
@@ -303,16 +309,16 @@
         <el-table-column label="小节" align="center" prop="videoName" />
         <el-table-column label="营期时间" align="center" prop="dayDate" width="150"  />
         <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-money"
-              @click="handleSetRedPacket(scope.row)"
-            >设置红包</el-button>
-          </template>
-        </el-table-column>
+<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button-->
+<!--              size="mini"-->
+<!--              type="text"-->
+<!--              icon="el-icon-money"-->
+<!--              @click="handleSetRedPacket(scope.row)"-->
+<!--            >设置红包</el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
       </el-table>
 
       <div slot="footer" class="dialog-footer">
@@ -350,40 +356,12 @@
       </div>
     </el-dialog>
 
-    <!-- 设置红包对话框 -->
-    <el-dialog title="设置红包" :visible.sync="redPacketOpen" width="800px" append-to-body>
-      <el-table :data="redPacketTableData" border>
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column label="公司名称" prop="companyName" align="center" />
-        <el-table-column label="红包金额" align="center">
-          <template slot-scope="scope">
-            <el-input-number
-              v-model="scope.row.amount"
-              :min="0"
-              :precision="2"
-              :step="0.01"
-              size="small"
-              style="width: 150px"
-            >
-              <template slot="append">元</template>
-            </el-input-number>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="saveRedPacket(scope.row)"
-            >保存</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelRedPacket">关 闭</el-button>
-        <el-button type="primary" @click="batchSaveRedPacket">批量保存</el-button>
-      </div>
-    </el-dialog>
+    <red-packet
+      :visible.sync="redPacketVisible"
+      :periodId="currentRedPacketData.periodId"
+      :videoId="currentRedPacketData.videoId"
+      @success="handleRedPacketSuccess"
+    />
 
   </div>
 </template>
@@ -394,9 +372,13 @@ import {addPeriod, delPeriod, exportPeriod, getPeriod, pagePeriod, updatePeriod,
 import {getCompanyList} from "@/api/company/company";
 import { listCamp, addCamp, editCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
 import { courseList,videoList } from '@/api/course/courseRedPacketLog'
+import RedPacket from './redPacket.vue'
 
 export default {
   name: "Period",
+  components: {
+    RedPacket
+  },
   data() {
     return {
       // 遮罩层
@@ -485,11 +467,12 @@ export default {
       // 加载更多状态
       loadingMore: false,
       // 设置红包对话框
-      redPacketOpen: false,
-      // 红包表格数据
-      redPacketTableData: [],
-      // 营期公司列表
+      redPacketVisible: false,
       periodCompanyList: [],
+      currentRedPacketData: {
+        periodId: '',
+        videoId: ''
+      }
     };
   },
   created() {
@@ -1030,88 +1013,77 @@ export default {
         this.getCourseList();
       });
     },
-    /** 设置红包按钮操作 */
-    handleSetRedPacket(row) {
-      this.redPacketOpen = true;
-      // 获取营期公司金额列表
-      getPeriodCompanyList({ periodId: this.course.row.periodId, videoId: row.videoId }).then(response => {
-        this.periodCompanyList = response.data || [];
-        // 初始化表格数据
-        this.redPacketTableData = this.periodCompanyList.map(company => ({
-          companyId: company.companyId,
-          companyName: company.companyName,
-          amount: company.amount,
-          videoId: row.videoId,
-          periodId: this.course.row.periodId
-        }));
-      });
-    },
-    /** 取消设置红包 */
-    cancelRedPacket() {
-      this.redPacketOpen = false;
-      this.redPacketTableData = [];
-      this.periodCompanyList = [];
+    setRedPacket(row) {
+      this.currentRedPacketData = {
+        periodId: row.periodId
+        // videoId: row.videoId
+      };
+      this.redPacketVisible = true;
     },
-    /** 保存单个红包设置 */
-    saveRedPacket(row) {
-      if (row.amount <= 0) {
-        this.$message.warning('请输入红包金额');
-        return;
-      }
-
-      const saveData = [{
-        companyId: row.companyId,
-        redPacketMoney: row.amount,
-        videoId: row.videoId,
-        periodId: row.periodId,
-        dataType: 2
-      }];
-
-      // 调用保存接口
-      batchSaveRedPacket(saveData).then(response => {
-        if (response.code === 200) {
-          this.$message.success('保存成功');
-          // 刷新课程列表
-          this.getCourseList();
-        } else {
-          this.$message.error(response.msg || "保存失败");
-        }
-      }).catch(error => {
-        this.$message.error("保存失败：" + error.message);
-      });
+    handleRedPacketSuccess() {
+      this.getCourseList();
     },
-    /** 批量保存红包设置 */
-    batchSaveRedPacket() {
-      // 过滤出有设置金额的数据，并转换数据结构
-      const saveData = this.redPacketTableData
-        .filter(item => item.amount > 0)
-        .map(item => ({
-          companyId: item.companyId,
-          redPacketMoney: item.amount,
-          videoId: item.videoId,
-          periodId: item.periodId,
-          dataType: 2
-        }));
-
-      if (saveData.length === 0) {
-        this.$message.warning('请至少设置一个红包金额');
-        return;
-      }
 
-      // 调用批量保存接口
-      batchSaveRedPacket(saveData).then(response => {
-        if (response.code === 200) {
-          this.$message.success('批量保存成功');
-          this.redPacketOpen = false;
-          // 刷新课程列表
-          this.getCourseList();
-        } else {
-          this.$message.error(response.msg || "保存失败");
-        }
-      }).catch(error => {
-        this.$message.error("保存失败：" + error.message);
-      });
-    },
+    // /** 保存单个红包设置 */
+    // saveRedPacket(row) {
+    //   if (row.amount <= 0) {
+    //     this.$message.warning('请输入红包金额');
+    //     return;
+    //   }
+    //
+    //   const saveData = [{
+    //     companyId: row.companyId,
+    //     redPacketMoney: row.amount,
+    //     videoId: row.videoId,
+    //     periodId: row.periodId,
+    //     dataType: 2
+    //   }];
+    //
+    //   // 调用保存接口
+    //   batchSaveRedPacket(saveData).then(response => {
+    //     if (response.code === 200) {
+    //       this.$message.success('保存成功');
+    //       // 刷新课程列表
+    //       this.getCourseList();
+    //     } else {
+    //       this.$message.error(response.msg || "保存失败");
+    //     }
+    //   }).catch(error => {
+    //     this.$message.error("保存失败：" + error.message);
+    //   });
+    // },
+    // /** 批量保存红包设置 */
+    // batchSaveRedPacket() {
+    //   // 过滤出有设置金额的数据，并转换数据结构
+    //   const saveData = this.redPacketTableData
+    //     .filter(item => item.amount > 0)
+    //     .map(item => ({
+    //       companyId: item.companyId,
+    //       redPacketMoney: item.amount,
+    //       videoId: item.videoId,
+    //       periodId: item.periodId,
+    //       dataType: 2
+    //     }));
+    //
+    //   if (saveData.length === 0) {
+    //     this.$message.warning('请至少设置一个红包金额');
+    //     return;
+    //   }
+    //
+    //   // 调用批量保存接口
+    //   batchSaveRedPacket(saveData).then(response => {
+    //     if (response.code === 200) {
+    //       this.$message.success('批量保存成功');
+    //       this.redPacketOpen = false;
+    //       // 刷新课程列表
+    //       this.getCourseList();
+    //     } else {
+    //       this.$message.error(response.msg || "保存失败");
+    //     }
+    //   }).catch(error => {
+    //     this.$message.error("保存失败：" + error.message);
+    //   });
+    // }
   },
 };
 </script>

src/views/course/userCoursePeriod/redPacket.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <!-- 公司列表弹窗 -->
+    <el-dialog title="设置红包" :visible.sync="companyDialogVisible" width="800px" append-to-body>
+      <el-table :data="companyList" border>
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column label="公司名称" prop="companyName" align="center" />
+        <el-table-column label="操作" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleInputAmount(scope.row)"
+            >录入金额</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+      </div>
+    </el-dialog>
+
+    <!-- 课程红包设置弹窗 -->
+    <el-dialog title="录入红包金额" :visible.sync="courseDialogVisible" width="1200px" append-to-body>
+      <el-table :data="redPacketList" border>
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column label="课程" prop="courseName" align="center" />
+        <el-table-column label="小节" prop="videoName" align="center" />
+        <el-table-column label="红包金额" width="200px" align="center">
+          <template slot-scope="scope">
+            <el-input-number
+              v-model="scope.row.amount"
+              :min="0"
+              :precision="2"
+              :step="0.01"
+              size="small"
+              style="width: 150px"
+            >
+              <template slot="append">元</template>
+            </el-input-number>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="courseDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">保 存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPeriodCompanyList, getDays, batchSaveRedPacket, getPeriodRedPacketList } from "@/api/course/userCoursePeriod";
+import redPacket from "@/views/course/userCoursePeriod/redPacket.vue";
+
+export default {
+  name: "RedPacket",
+  computed: {
+    redPacket() {
+      return redPacket
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    periodId: {
+      type: [String, Number],
+      default: ''
+    },
+    // videoId: {
+    //   type: [String, Number],
+    //   default: ''
+    // }
+  },
+  data() {
+    return {
+      companyDialogVisible: false,
+      courseDialogVisible: false,
+      companyList: [],
+      redPacketList: [],
+      currentCompany: null
+    };
+  },
+  watch: {
+    visible(val) {
+      this.companyDialogVisible = val;
+      if (val) {
+        this.getCompanyList();
+      }
+    },
+    companyDialogVisible(val) {
+      if (!val) {
+        this.$emit('update:visible', false);
+      }
+    }
+  },
+  methods: {
+    // 获取公司列表
+    getCompanyList() {
+      getPeriodCompanyList({
+        periodId: this.periodId
+      }).then(response => {
+        this.companyList = response.data || [];
+      });
+    },
+    // 点击录入金额
+    handleInputAmount(row) {
+      this.currentCompany = row;
+      this.courseDialogVisible = true;
+      this.getCourseList();
+    },
+    // 获取课程列表
+    getCourseList() {
+      getPeriodRedPacketList({
+        periodId: this.periodId,
+        companyId: this.currentCompany.companyId
+      }).then(response => {
+        this.redPacketList = (response.data || []).map(item => ({
+          ...item,
+          amount: item.amount || 0
+        }));
+      });
+    },
+    // 保存红包金额
+    handleSave() {
+      const saveData = this.redPacketList
+        .filter(item => item.amount > 0)
+        .map(item => ({
+          companyId: this.currentCompany.companyId,
+          redPacketMoney: item.amount,
+          videoId: item.videoId,
+          periodId: this.periodId,
+          dataType: 2
+        }));
+
+      if (saveData.length === 0) {
+        this.$message.warning('请至少设置一个红包金额');
+        return;
+      }
+
+      batchSaveRedPacket(saveData).then(response => {
+        if (response.code === 200) {
+          this.$message.success('保存成功');
+          this.courseDialogVisible = false;
+          this.$emit('success');
+        } else {
+          this.$message.error(response.msg || "保存失败");
+        }
+      }).catch(error => {
+        this.$message.error("保存失败：" + error.message);
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.el-input-number {
+  width: 100%;
+}
+</style>