营期-公司设置红包页面按需求调整（第二版，从右边弹窗设置）

src/views/course/userCoursePeriod/index.vue

@@ -162,19 +162,25 @@
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['course:period:edit']"
               >修改</el-button>
+    <!--              <el-button-->
+    <!--                size="mini"-->
+    <!--                type="text"-->
+    <!--                icon="el-icon-edit"-->
+    <!--                @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"
-                icon="el-icon-edit"
-                @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>
+                icon="el-icon-setting"
+                @click="handlePeriodSettings(scope.row)"
+              >营期相关设置</el-button>
               <el-button
                 size="mini"
                 type="text"
@@ -184,15 +190,15 @@
               >删除</el-button>
             </template>
           </el-table-column>
-        </el-table>
-
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
       </el-main>
     </el-container>
 
@@ -289,41 +295,31 @@
       </div>
     </el-drawer>
 
-    <!-- 添加或修改会员营期对话框-->
-    <el-dialog title="课程管理" :visible.sync="course.open" width="75%" top="10px" append-to-body style="padding-bottom: 10px">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            v-if="(getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total) > 0"
-            type="primary"
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAddCourse"
-            v-hasPermi="['course:period:add']"
-          >添加课程</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="course.loading" :data="course.list">
-        <el-table-column label="课程" align="center" prop="courseName" width="180" />
-        <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>
-
-      <div slot="footer" class="dialog-footer">
-<!--        <el-button type="primary" @click="saveCourseData">保存</el-button>-->
-      </div>
-    </el-dialog>
+<!--    &lt;!&ndash; 添加或修改会员营期对话框&ndash;&gt;-->
+<!--    <el-dialog title="课程管理" :visible.sync="course.open" width="75%" top="10px" append-to-body style="padding-bottom: 10px">-->
+<!--      <el-row :gutter="10" class="mb8">-->
+<!--        <el-col :span="1.5">-->
+<!--          <el-button-->
+<!--            v-if="(getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total) > 0"-->
+<!--            type="primary"-->
+<!--            icon="el-icon-plus"-->
+<!--            size="mini"-->
+<!--            @click="handleAddCourse"-->
+<!--            v-hasPermi="['course:period:add']"-->
+<!--          >添加课程</el-button>-->
+<!--        </el-col>-->
+<!--      </el-row>-->
+<!--      <el-table v-loading="course.loading" :data="course.list">-->
+<!--        <el-table-column label="课程" align="center" prop="courseName" width="180" />-->
+<!--        <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>-->
+
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--&lt;!&ndash;        <el-button type="primary" @click="saveCourseData">保存</el-button>&ndash;&gt;-->
+<!--      </div>-->
+<!--    </el-dialog>-->
 
     <!-- 添加或修改会员营期对话框-->
     <el-dialog title="添加课程" :visible.sync="course.addOpen" width="500px" append-to-body>
@@ -362,12 +358,55 @@
       @success="handleRedPacketSuccess"
     />
 
+    <!-- 营期相关设置抽屉 -->
+  <el-drawer
+    title="营期相关设置"
+    :visible.sync="periodSettingsVisible"
+    direction="rtl"
+    size="70%"
+    :destroy-on-close="true"
+    append-to-body
+    custom-class="period-settings-drawer"
+  >
+    <div class="drawer-content" style="margin-left:25px">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="课程管理" name="course">
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                v-if="(getDiff(periodSettingsData.periodStartingTime, periodSettingsData.periodEndTime) - course.total) > 0"
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAddCourse"
+                v-hasPermi="['course:period:add']"
+              >添加课程</el-button>
+            </el-col>
+          </el-row>
+          <el-table v-loading="course.loading" :data="course.list">
+            <el-table-column label="课程" align="center" prop="courseName" width="180" />
+            <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>
+        </el-tab-pane>
+        <el-tab-pane label="公司列表" name="company">
+          <red-packet
+            :visible.sync="redPacketVisible"
+            :activeTab="activeTab"
+            :periodId="periodSettingsData.periodId"
+            @success="handleRedPacketSuccess"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-drawer>
+
   </div>
 </template>
 
 <script>
-import {addPeriod, delPeriod, exportPeriod, getPeriod, pagePeriod, updatePeriod, getDays, addCourse, updateListCourseData, getPeriodCompanyList,
-  batchSaveRedPacket} from "@/api/course/userCoursePeriod";
+import {addPeriod, delPeriod, exportPeriod, getPeriod, pagePeriod, updatePeriod, getDays, addCourse, updateListCourseData} from "@/api/course/userCoursePeriod";
 import {getCompanyList} from "@/api/company/company";
 import { listCamp, addCamp, editCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
 import { courseList,videoList } from '@/api/course/courseRedPacketLog'
@@ -471,7 +510,15 @@ export default {
       currentRedPacketData: {
         periodId: '',
         videoId: ''
-      }
+      },
+      // 营期相关设置抽屉
+      periodSettingsVisible: false,
+      activeTab: 'course',
+      periodSettingsData: {},
+      companyList: [],
+      courseDialogVisible: false,
+      redPacketList: [],
+      currentCompany: null
     };
   },
   created() {
@@ -965,7 +1012,7 @@ export default {
     handleAddCourse() {
       this.course.addOpen = true;
       this.course.form = {
-        periodId: this.course.row.periodId,
+        periodId: this.course.queryParams.periodId,
         courseId: null,
         videoIds: []
       };
@@ -1023,67 +1070,17 @@ export default {
     handleRedPacketSuccess() {
       this.getCourseList();
     },
-
-    // /** 保存单个红包设置 */
-    // 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);
-    //   });
-    // }
+    handlePeriodSettings(row) {
+      this.periodSettingsData = row;
+      this.periodSettingsVisible = true;
+      // 初始化课程列表
+      this.course.queryParams.periodId = row.periodId;
+      this.getCourseList();
+      // 如果是公司列表tab，显示红包设置
+      if (this.activeTab === 'company') {
+        this.redPacketVisible = true;
+      }
+    },
   },
 };
 </script>

src/views/course/userCoursePeriod/redPacket.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 公司列表弹窗 -->
-    <el-dialog title="设置红包" :visible.sync="companyDialogVisible" width="800px" append-to-body>
+<!--    <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" />
@@ -15,12 +15,12 @@
           </template>
         </el-table-column>
       </el-table>
-      <div slot="footer" class="dialog-footer">
-      </div>
-    </el-dialog>
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--      </div>-->
+<!--    </el-dialog>-->
 
     <!-- 课程红包设置弹窗 -->
-    <el-dialog title="录入红包金额" :visible.sync="courseDialogVisible" width="1200px" append-to-body>
+    <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" />
@@ -55,15 +55,19 @@ import redPacket from "@/views/course/userCoursePeriod/redPacket.vue";
 export default {
   name: "RedPacket",
   computed: {
-    redPacket() {
-      return redPacket
-    }
+    // redPacket() {
+    //   return redPacket
+    // }
   },
   props: {
     visible: {
       type: Boolean,
       default: false
     },
+    activeTab: {
+      type: String,
+      default: ''
+    },
     periodId: {
       type: [String, Number],
       default: ''
@@ -75,7 +79,8 @@ export default {
   },
   data() {
     return {
-      companyDialogVisible: false,
+      // companyDialogVisible: false,
+      activeTab: '',
       courseDialogVisible: false,
       companyList: [],
       redPacketList: [],
@@ -83,8 +88,8 @@ export default {
     };
   },
   watch: {
-    visible(val) {
-      this.companyDialogVisible = val;
+    activeTab(val) {
+      this.activeTab = val;
       if (val) {
         this.getCompanyList();
       }