|
@@ -0,0 +1,1495 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="营期名称" prop="periodName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.periodName"
|
|
|
+ placeholder="请输入营期名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开营日期开始" prop="periodStartingTime" label-width="120px">
|
|
|
+ <el-date-picker clearable size="small" style="width: 200px"
|
|
|
+ v-model="queryParams.periodStartingTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择开营日期开始时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开营日期结束" prop="periodEndTime" label-width="120px">
|
|
|
+ <el-date-picker clearable size="small" style="width: 300px"
|
|
|
+ v-model="queryParams.periodEndTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择开营日期结束时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+<!-- <el-col :span="1.5">-->
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- plain-->
|
|
|
+<!-- icon="el-icon-plus"-->
|
|
|
+<!-- size="mini"-->
|
|
|
+<!-- @click="handleAdd"-->
|
|
|
+<!-- v-hasPermi="['course:period:add']"-->
|
|
|
+<!-- >新增-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="1.5">-->
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="warning"-->
|
|
|
+<!-- plain-->
|
|
|
+<!-- icon="el-icon-download"-->
|
|
|
+<!-- size="mini"-->
|
|
|
+<!-- @click="handleExport"-->
|
|
|
+<!-- v-hasPermi="['course:period:export']"-->
|
|
|
+<!-- >导出-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="1.5">-->
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- plain-->
|
|
|
+<!-- icon="el-icon-edit"-->
|
|
|
+<!-- size="mini"-->
|
|
|
+<!-- @click="handleBatchSetRedPacket"-->
|
|
|
+<!-- v-hasPermi="['course:period:export']"-->
|
|
|
+<!-- :disabled="batchSetRedPacketDisabled"-->
|
|
|
+<!-- >批量设置红包-->
|
|
|
+<!-- </el-button>-->
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="periodList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center"/>
|
|
|
+ <el-table-column label="营期名称" align="center" prop="periodName"/>
|
|
|
+ <el-table-column label="营期状态" align="center" prop="periodStatus" width="100"
|
|
|
+ :formatter="periodStatusFormatter"/>
|
|
|
+ <el-table-column label="开营开始时间" align="center" prop="periodStartingTime" width="180"/>
|
|
|
+ <el-table-column label="开营结束时间" align="center" prop="periodEndTime" width="180"/>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['course:period:edit']"
|
|
|
+ >详情
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-setting"
|
|
|
+ @click="handlePeriodSettings(scope.row)"
|
|
|
+ >营期相关设置
|
|
|
+ </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-drawer :title="title" :visible.sync="open" size="700px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="营期名称" prop="periodName">
|
|
|
+ <el-input disabled v-model="form.periodName" placeholder="请输入营期名称"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程风格" prop="courseStyle">
|
|
|
+ <image-upload disabled v-model="form.courseStyle" :limit="1"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="直播间风格" prop="liveRoomStyle">
|
|
|
+ <image-upload disabled v-model="form.liveRoomStyle" :limit="1"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="红包发放方式" prop="redPacketGrantMethod">
|
|
|
+ <el-radio-group disabled v-model="form.redPacketGrantMethod">
|
|
|
+ <el-radio :label="1">按课程</el-radio>
|
|
|
+ <el-radio :label="2">按营期</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="营期类型" prop="periodType">
|
|
|
+ <el-radio-group disabled v-model="form.periodType">
|
|
|
+ <el-radio :label="1">多课程</el-radio>
|
|
|
+ <el-radio :label="2">单课程</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开营日期" prop="periodStartingTime">
|
|
|
+ <el-date-picker
|
|
|
+ disabled
|
|
|
+ :style="{display: form.periodType == 1 ? '' : 'none !important'}"
|
|
|
+ v-model="form.dateRange"
|
|
|
+ @change="timeChange(1)"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ disabled
|
|
|
+ :style="{display: form.periodType == 2 ? '' : 'none !important'}"
|
|
|
+ @change="timeChange(2)"
|
|
|
+ v-model="form.date"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <!-- 添加训练营对话框 -->
|
|
|
+ <el-dialog :title="campForm.trainingCampId ? '修改训练营' : '新建训练营'" :visible.sync="campDialogVisible"
|
|
|
+ width="500px" append-to-body>
|
|
|
+ <el-form ref="campForm" :model="campForm" :rules="campRules" label-width="100px">
|
|
|
+ <el-form-item label="训练营名称" prop="trainingCampName">
|
|
|
+ <el-input v-model="campForm.trainingCampName" placeholder="请输入训练营名称"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitCampForm">确 定</el-button>
|
|
|
+ <el-button @click="cancelCampForm">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加课程对话框-->
|
|
|
+ <el-dialog title="添加课程" :visible.sync="course.addOpen" width="500px" append-to-body>
|
|
|
+ <el-form ref="courseAddForm" :model="course.form" label-width="100px">
|
|
|
+ <el-form-item label="课程" prop="courseId">
|
|
|
+ <el-select filterable v-model="course.form.courseId" placeholder="请选择课程" clearable size="small"
|
|
|
+ @change="courseChange(course.form.courseId)" style="width: 100%" :value-key="'dictValue'">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in courseList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小节" prop="videoId">
|
|
|
+ <el-select filterable v-model="course.form.videoIds" placeholder="请选择小节"
|
|
|
+ :multiple-limit="getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total"
|
|
|
+ multiple clearable size="small" style="width: 100%" :value-key="'dictValue'">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in videoList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="看课时间" prop="timeRange">
|
|
|
+ <el-time-picker
|
|
|
+ is-range
|
|
|
+ v-model="course.form.timeRange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围">
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="领取红包时间" prop="lastJoinTime">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="course.form.joinTime"
|
|
|
+ :selectableRange="course.form.timeRange"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ placeholder="选择时间范围">
|
|
|
+ </el-time-picker>
|
|
|
+ <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间,只允许看课,不允许领取红包</p>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitCourseForm">确 定</el-button>
|
|
|
+ <el-button @click="closeAddCourse">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="修改看课时间" :visible.sync="updateCourse.open" width="500px" append-to-body>
|
|
|
+ <el-form ref="courseUpdateForm" :model="updateCourse.form" label-width="100px">
|
|
|
+ <el-form-item label="看课时间" prop="timeRange">
|
|
|
+ <el-time-picker
|
|
|
+ is-range
|
|
|
+ v-model="updateCourse.form.timeRange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围">
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="领取红包时间" prop="lastJoinTime">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="updateCourse.form.joinTime"
|
|
|
+ :selectableRange="updateCourse.form.timeRange"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ placeholder="选择时间范围">
|
|
|
+ </el-time-picker>
|
|
|
+ <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间,只允许看课,不允许领取红包</p>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitUpdateCourseForm">确 定</el-button>
|
|
|
+ <el-button @click="closeUpdateCourse">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="修改营期时间" :visible.sync="updateDateOpen" width="500px" append-to-body>
|
|
|
+ <el-form ref="courseUpdateForm" :model="form" label-width="100px">
|
|
|
+ <el-form-item label="营期时间" prop="dayDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.dayDate"
|
|
|
+ :selectableRange="form.dayDate"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="updateDate">确 定</el-button>
|
|
|
+ <el-button @click="updateDateOpen = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- <red-packet-->
|
|
|
+ <!-- :visible.sync="redPacketVisible"-->
|
|
|
+ <!-- :periodId="currentRedPacketData.periodId"-->
|
|
|
+ <!-- :videoId="currentRedPacketData.videoId"-->
|
|
|
+ <!-- @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" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="课程管理" name="course">
|
|
|
+ <el-table v-loading="course.loading" :data="course.list" @selection-change="handleSelectionCourseChange">
|
|
|
+ <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"/>
|
|
|
+ <el-table-column label="开始时间" align="center" prop="startDateTime" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag>{{ parseTime(scope.row.startDateTime, '{h}:{i}:{s}') }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="结束时间" align="center" prop="endDateTime" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="success">{{ parseTime(scope.row.endDateTime, '{h}:{i}:{s}') }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="领取红包时间" align="center" prop="lastJoinTime" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="danger">{{ parseTime(scope.row.lastJoinTime, '{h}:{i}:{s}') }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="课程统计" name="statistics">
|
|
|
+ <course-statistics
|
|
|
+ :periodId="periodSettingsData.periodId"
|
|
|
+ :active="activeTab === 'statistics'"
|
|
|
+ />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <batch-red-packet
|
|
|
+ :visible.sync="batchRedPacketVisible"
|
|
|
+ :selected-data="selectedPeriods"
|
|
|
+ @success="handleBatchRedPacketSuccess"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ addPeriod,
|
|
|
+ delPeriod,
|
|
|
+ exportPeriod,
|
|
|
+ getPeriod,
|
|
|
+ pagePeriod,
|
|
|
+ updatePeriod,
|
|
|
+ getDays,
|
|
|
+ addCourse,
|
|
|
+ updateCourseTime,
|
|
|
+ updateCourseDate,
|
|
|
+ updateListCourseData,
|
|
|
+ periodCourseMove,
|
|
|
+ closePeriod
|
|
|
+} from "@/api/course/userCoursePeriod";
|
|
|
+import {getCompanyList} from "@/api/company/company";
|
|
|
+import {courseList, videoList} from '@/api/course/courseRedPacketLog'
|
|
|
+import RedPacket from './redPacket.vue'
|
|
|
+import BatchRedPacket from './batchRedPacket.vue'
|
|
|
+import CourseStatistics from './statistics.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Period",
|
|
|
+ components: {
|
|
|
+ RedPacket,
|
|
|
+ BatchRedPacket,
|
|
|
+ CourseStatistics
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ updateDateOpen: false,
|
|
|
+ // 左侧遮罩层
|
|
|
+ leftLoading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 左侧总条数
|
|
|
+ leftTotal: 0,
|
|
|
+ // 会员营期表格数据
|
|
|
+ periodList: [],
|
|
|
+ // 左侧列表数据
|
|
|
+ leftList: [],
|
|
|
+ videoList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ isDisabledDateRange: false, //是否禁用开营日期
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ periodName: null,
|
|
|
+ periodStartingTime: null,
|
|
|
+ periodEndTime: null,
|
|
|
+ companyIdList: []
|
|
|
+ },
|
|
|
+ // 左侧查询参数
|
|
|
+ leftQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ hasNextPage: false,
|
|
|
+ scs: 'order_number(desc),training_camp_id(desc)',
|
|
|
+ trainingCampName: null
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ course: {
|
|
|
+ open: false,
|
|
|
+ row: {},
|
|
|
+ list: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ loading: true,
|
|
|
+ total: 0,
|
|
|
+ addOpen: false,
|
|
|
+ form: {},
|
|
|
+ },
|
|
|
+ updateCourse: {
|
|
|
+ open: false,
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ form: {},
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+ // 公司选项
|
|
|
+ companyOptions: [],
|
|
|
+ // 训练营列表
|
|
|
+ campList: [],
|
|
|
+ // 激活的训练营索引
|
|
|
+ activeCampIndex: null,
|
|
|
+ // 训练营对话框是否显示
|
|
|
+ campDialogVisible: false,
|
|
|
+ courseList: false,
|
|
|
+ // 训练营表单
|
|
|
+ campForm: {
|
|
|
+ trainingCampId: null,
|
|
|
+ trainingCampName: ''
|
|
|
+ },
|
|
|
+ // 训练营表单校验
|
|
|
+ campRules: {
|
|
|
+ trainingCampName: [
|
|
|
+ {required: true, message: '训练营名称不能为空', trigger: 'blur'},
|
|
|
+ {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 滚动节流标志
|
|
|
+ scrollThrottle: false,
|
|
|
+ // 加载更多状态
|
|
|
+ loadingMore: false,
|
|
|
+ // 设置红包对话框
|
|
|
+ redPacketVisible: false,
|
|
|
+ periodCompanyList: [],
|
|
|
+ currentRedPacketData: {
|
|
|
+ periodId: '',
|
|
|
+ videoId: ''
|
|
|
+ },
|
|
|
+ // 营期相关设置抽屉
|
|
|
+ periodSettingsVisible: false,
|
|
|
+ activeTab: 'course',
|
|
|
+ periodSettingsData: {},
|
|
|
+ companyList: [],
|
|
|
+ courseDialogVisible: false,
|
|
|
+ redPacketList: [],
|
|
|
+ currentCompany: null,
|
|
|
+ // 选中的营期数据
|
|
|
+ selectedPeriods: [],
|
|
|
+ // 批量设置红包按钮是否禁用
|
|
|
+ batchSetRedPacketDisabled: true,
|
|
|
+ // 批量设置红包弹出框
|
|
|
+ batchRedPacketVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ courseList().then(response => {
|
|
|
+ this.courseList = response.list;
|
|
|
+ });
|
|
|
+ this.getCompanyList();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询会员营期列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ const params = {...this.queryParams};
|
|
|
+ pagePeriod(params).then(response => {
|
|
|
+ this.periodList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 查询左侧列表 */
|
|
|
+ getLeftList() {
|
|
|
+ this.leftLoading = true;
|
|
|
+ // 重置页码和加载更多状态
|
|
|
+ this.leftQueryParams.pageNum = 1;
|
|
|
+ this.loadingMore = false;
|
|
|
+
|
|
|
+ // 训练营数据
|
|
|
+ listCamp(this.leftQueryParams).then(response => {
|
|
|
+ if (response && response.code === 200) {
|
|
|
+ this.campList = response.data.list || [];
|
|
|
+ this.leftQueryParams.hasNextPage = response.data.hasNextPage;
|
|
|
+ this.activeCampIndex = this.campList.length > 0 ? 0 : null;
|
|
|
+ this.selectCamp(this.activeCampIndex);
|
|
|
+ // 如果当前显示的列表高度不足以触发滚动,但还有更多数据,自动加载下一页
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const scrollEl = this.$refs.campList;
|
|
|
+ if (scrollEl && this.leftQueryParams.hasNextPage && scrollEl.scrollHeight <= scrollEl.clientHeight) {
|
|
|
+ this.loadMoreCamps();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '获取训练营列表失败');
|
|
|
+ this.campList = [];
|
|
|
+ this.leftQueryParams.hasNextPage = false;
|
|
|
+ }
|
|
|
+ this.leftLoading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('获取训练营列表失败:', error);
|
|
|
+ this.$message.error('获取训练营列表失败');
|
|
|
+ this.campList = [];
|
|
|
+ this.leftQueryParams.hasNextPage = false;
|
|
|
+ this.leftLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 左侧搜索按钮操作 */
|
|
|
+ handleLeftQuery() {
|
|
|
+ // 重置页码和列表
|
|
|
+ this.leftQueryParams.pageNum = 1;
|
|
|
+ this.campList = [];
|
|
|
+ this.getLeftList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.queryParams.companyIdList = [];
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 多选框选中数据 */
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.periodId)
|
|
|
+ this.single = selection.length !== 1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ // 更新批量设置红包相关数据
|
|
|
+ this.selectedPeriods = selection;
|
|
|
+ this.batchSetRedPacketDisabled = selection.length === 0;
|
|
|
+ },
|
|
|
+ handleSelectionCourseChange(selection) {
|
|
|
+ this.updateCourse.ids = selection.map(item => item.id)
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset();
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加会员营期";
|
|
|
+ this.isDisabledDateRange = false;
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset();
|
|
|
+ const periodId = row.periodId || this.ids
|
|
|
+ getPeriod(periodId).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ if (this.form.companyId) {
|
|
|
+ this.form.companyId = this.form.companyId.split(',').map(id => Number(id));
|
|
|
+ }
|
|
|
+ // 设置看课时间范围(回显)
|
|
|
+ if (this.form.viewStartTime && this.form.viewEndTime) {
|
|
|
+ this.form.timeRange = [this.form.viewStartTime, this.form.viewEndTime];
|
|
|
+ }
|
|
|
+ if (this.form.periodType == 1) {
|
|
|
+ this.form.dateRange = [this.form.periodStartingTime, this.form.periodEndTime];
|
|
|
+ }
|
|
|
+ if (this.form.periodType == 1) {
|
|
|
+ this.form.date = this.form.periodStartingTime;
|
|
|
+ }
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改会员营期";
|
|
|
+ this.isDisabledDateRange = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.form));
|
|
|
+ // 处理看课时间范围
|
|
|
+ if (data.timeRange && data.timeRange.length === 2) {
|
|
|
+ data.viewStartTime = data.timeRange[0];
|
|
|
+ data.viewEndTime = data.timeRange[1];
|
|
|
+ }
|
|
|
+ data.companyId = data.companyId.join()
|
|
|
+ data.trainingCampId = this.queryParams.trainingCampId
|
|
|
+ if (data.periodId != null) {
|
|
|
+ updatePeriod(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addPeriod(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ //添加删除判断,只能删除未开始的营期
|
|
|
+ console.log(row.periodStatus)
|
|
|
+ if (row.periodStatus !== 1) {
|
|
|
+ this.$message.error('营期处于进行中或者结束,不能删除');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const periodIds = row.periodId || this.ids;
|
|
|
+ this.$confirm('是否确认删除该营期?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function () {
|
|
|
+ return delPeriod(periodIds);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ }).catch(function () {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有会员营期数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function () {
|
|
|
+ return exportPeriod(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(function () {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 批量设置红包 */
|
|
|
+ handleBatchSetRedPacket() {
|
|
|
+ if (this.selectedPeriods.length === 0) {
|
|
|
+ this.$message.warning('请至少选择一个营期');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.batchRedPacketVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 处理批量设置红包保存 */
|
|
|
+ // handleBatchRedPacketSave(data) {
|
|
|
+ // // 这里等待接口提供后补充具体实现
|
|
|
+ // // 示例代码:
|
|
|
+ // // batchSetRedPacket(data).then(response => {
|
|
|
+ // // if (response.code === 200) {
|
|
|
+ // // this.$message.success('批量设置成功');
|
|
|
+ // // this.getList();
|
|
|
+ // // }
|
|
|
+ // // });
|
|
|
+ // this.batchRedPacketVisible = false;
|
|
|
+ // },
|
|
|
+
|
|
|
+ /** 获取公司下拉列表*/
|
|
|
+ getCompanyList() {
|
|
|
+ this.loading = true;
|
|
|
+ getCompanyList().then(response => {
|
|
|
+ this.companyOptions = response.data;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ periodId: null,
|
|
|
+ periodName: null,
|
|
|
+ companyId: null,
|
|
|
+ courseId: null,
|
|
|
+ videoId: null,
|
|
|
+ trainingCampId: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ courseStyle: null,
|
|
|
+ liveRoomStyle: null,
|
|
|
+ redPacketGrantMethod: 1,
|
|
|
+ periodType: 1,
|
|
|
+ periodStartingTime: null,
|
|
|
+ dateRange: [],
|
|
|
+ date: null,
|
|
|
+ days: [],
|
|
|
+ periodEndTime: null,
|
|
|
+ timeRange: [], // 看课时间范围
|
|
|
+ viewStartTime: null, // 看课开始时间
|
|
|
+ viewEndTime: null, // 看课结束时间
|
|
|
+ lastJoinTime: null // 领取红包时间
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ // 处理训练营列表的逻辑
|
|
|
+ handleDeleteCamp(item) {
|
|
|
+ this.$confirm(`确定要删除训练营"${item.trainingCampName}"吗?`, '提示', {
|
|
|
+ confirmButtonText: '删除',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 调用删除训练营API
|
|
|
+ const trainingCampId = item.trainingCampId;
|
|
|
+ this.leftLoading = true;
|
|
|
+
|
|
|
+ delCamp(trainingCampId).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ // 从列表中移除
|
|
|
+ const index = this.campList.findIndex(camp => camp.trainingCampId === trainingCampId);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.campList.splice(index, 1);
|
|
|
+ }
|
|
|
+ // 如果删除的是当前选中的训练营,则重置选中状态
|
|
|
+ if (this.activeCampIndex === index) {
|
|
|
+ this.activeCampIndex = this.campList.length > 0 ? 0 : null;
|
|
|
+ if (this.activeCampIndex !== null) {
|
|
|
+ // 更新右侧列表
|
|
|
+ this.selectCamp(this.activeCampIndex);
|
|
|
+ } else {
|
|
|
+ // 没有训练营了,清空右侧列表
|
|
|
+ this.periodList = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '删除失败');
|
|
|
+ }
|
|
|
+ this.leftLoading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('删除失败: ' + error.message);
|
|
|
+ this.leftLoading = false;
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消删除');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 复制训练营 */
|
|
|
+ handleCopyCamp(item) {
|
|
|
+ // 调用添加训练营API
|
|
|
+ copyCamp(item.trainingCampId).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('复制成功');
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getLeftList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '复制训练营失败');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('复制训练营失败: ' + error.message);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 修改训练营按钮操作 */
|
|
|
+ handleEditCamp(item) {
|
|
|
+ this.resetCampForm();
|
|
|
+ this.leftLoading = true;
|
|
|
+
|
|
|
+ // 获取最新的训练营数据
|
|
|
+ const trainingCampId = item.trainingCampId;
|
|
|
+ // 应该调用获取训练营详情的API
|
|
|
+ setTimeout(() => {
|
|
|
+ // 填充表单数据
|
|
|
+ this.campForm = {
|
|
|
+ trainingCampId: item.trainingCampId,
|
|
|
+ trainingCampName: item.trainingCampName,
|
|
|
+ orderNumber: item.orderNumber || 1,
|
|
|
+ status: item.status !== undefined ? item.status : 1
|
|
|
+ };
|
|
|
+ this.campDialogVisible = true;
|
|
|
+ this.leftLoading = false;
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
+ /** 新建训练营按钮操作 */
|
|
|
+ handleAddTrainingCamp() {
|
|
|
+ this.resetCampForm();
|
|
|
+ this.campDialogVisible = true;
|
|
|
+ },
|
|
|
+ /** 重置训练营表单 */
|
|
|
+ resetCampForm() {
|
|
|
+ this.campForm = {
|
|
|
+ trainingCampId: null,
|
|
|
+ trainingCampName: ''
|
|
|
+ };
|
|
|
+ // 如果表单已经创建,则重置校验结果
|
|
|
+ if (this.$refs.campForm) {
|
|
|
+ this.$refs.campForm.resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 取消训练营表单 */
|
|
|
+ cancelCampForm() {
|
|
|
+ this.campDialogVisible = false;
|
|
|
+ this.resetCampForm();
|
|
|
+ },
|
|
|
+ /** 提交训练营表单 */
|
|
|
+ submitCampForm() {
|
|
|
+ this.$refs.campForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ // 显示加载中
|
|
|
+ this.leftLoading = true;
|
|
|
+
|
|
|
+ // 准备提交的数据
|
|
|
+ const submitData = JSON.parse(JSON.stringify(this.campForm));
|
|
|
+
|
|
|
+ // 判断是新增还是修改
|
|
|
+ if (submitData.trainingCampId) {
|
|
|
+ // 修改训练营
|
|
|
+ editCamp(submitData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('修改训练营成功');
|
|
|
+ this.campDialogVisible = false;
|
|
|
+
|
|
|
+ // 更新列表中的数据
|
|
|
+ const index = this.campList.findIndex(camp => camp.trainingCampId === submitData.trainingCampId);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.campList[index] = {...this.campList[index], ...submitData};
|
|
|
+ // 如果修改的是当前选中的训练营,更新右侧列表
|
|
|
+ if (this.activeCampIndex === index) {
|
|
|
+ this.selectCamp(index);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getLeftList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '修改训练营失败');
|
|
|
+ this.leftLoading = false;
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('修改训练营失败: ' + (error.message || '未知错误'));
|
|
|
+ this.leftLoading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 新增训练营
|
|
|
+ addCamp(submitData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('新建训练营成功');
|
|
|
+ this.campDialogVisible = false;
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getLeftList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '新建训练营失败');
|
|
|
+ this.leftLoading = false;
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('新建训练营失败: ' + (error.message || '未知错误'));
|
|
|
+ this.leftLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 排序方式改变 */
|
|
|
+ handleSortChange(value) {
|
|
|
+ this.leftQueryParams.scs = value;
|
|
|
+ // 重置页码和列表
|
|
|
+ this.leftQueryParams.pageNum = 1;
|
|
|
+ this.campList = [];
|
|
|
+ this.getLeftList();
|
|
|
+ },
|
|
|
+ /** 选中训练营 */
|
|
|
+ selectCamp(index) {
|
|
|
+ if (index == null || index == undefined) return;
|
|
|
+ this.activeCampIndex = index;
|
|
|
+ // 加载对应的训练营营期数据
|
|
|
+ const selectedCamp = this.campList[index];
|
|
|
+ this.queryParams.trainingCampId = selectedCamp.trainingCampId;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 处理滚动事件,实现滚动到底部加载更多 */
|
|
|
+ handleScroll() {
|
|
|
+ // 如果正在节流中或者正在加载中,则不处理
|
|
|
+ if (this.scrollThrottle || this.loadingMore) return;
|
|
|
+
|
|
|
+ // 设置节流,200ms内不再处理滚动事件
|
|
|
+ this.scrollThrottle = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.scrollThrottle = false;
|
|
|
+ }, 200);
|
|
|
+
|
|
|
+ const scrollEl = this.$refs.campList;
|
|
|
+ if (!scrollEl) return;
|
|
|
+
|
|
|
+ // 判断是否滚动到底部:滚动高度 + 可视高度 >= 总高度 - 30(添加30px的容差,提前触发加载)
|
|
|
+ const isBottom = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 30;
|
|
|
+
|
|
|
+ // 如果滚动到底部,且有下一页数据,且当前不在加载中,则加载更多
|
|
|
+ if (isBottom && this.leftQueryParams.hasNextPage && !this.leftLoading && !this.loadingMore) {
|
|
|
+ this.loadMoreCamps();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 加载更多训练营数据 */
|
|
|
+ loadMoreCamps() {
|
|
|
+ // 已在加载中,防止重复加载
|
|
|
+ if (this.leftLoading || this.loadingMore) return;
|
|
|
+
|
|
|
+ // 设置加载状态
|
|
|
+ this.loadingMore = true;
|
|
|
+
|
|
|
+ // 页码加1
|
|
|
+ this.leftQueryParams.pageNum += 1;
|
|
|
+
|
|
|
+ // 加载下一页数据
|
|
|
+ listCamp(this.leftQueryParams).then(response => {
|
|
|
+ if (response && response.code === 200) {
|
|
|
+ // 将新数据追加到列表中
|
|
|
+ const newList = response.data.list || [];
|
|
|
+ if (newList.length > 0) {
|
|
|
+ this.campList = [...this.campList, ...newList];
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新是否有下一页的标志
|
|
|
+ this.leftQueryParams.hasNextPage = response.data.hasNextPage;
|
|
|
+
|
|
|
+ // 如果当前显示的列表高度不足以触发滚动,但还有更多数据,自动加载下一页
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const scrollEl = this.$refs.campList;
|
|
|
+ if (scrollEl && this.leftQueryParams.hasNextPage && scrollEl.scrollHeight <= scrollEl.clientHeight) {
|
|
|
+ // 延迟一点再加载下一页,避免过快加载
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loadMoreCamps();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '加载更多训练营失败');
|
|
|
+ }
|
|
|
+ this.loadingMore = false;
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('加载更多训练营失败:', error);
|
|
|
+ this.$message.error('加载更多训练营失败');
|
|
|
+ this.loadingMore = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ timeChange(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.form.periodStartingTime = this.form.dateRange[0];
|
|
|
+ this.form.periodEndTime = this.form.dateRange[1];
|
|
|
+
|
|
|
+
|
|
|
+ // 转换为天数
|
|
|
+ let days = this.getDiff(this.form.periodStartingTime, this.form.periodEndTime);
|
|
|
+ for (let i = 0; i < days; i++) {
|
|
|
+ this.form.days.push({lesson: i + 1});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ this.form.periodStartingTime = this.form.date;
|
|
|
+ this.form.periodEndTime = this.form.date;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDiff(start, end) {
|
|
|
+ if (start == null || start == undefined || start == '') return 0;
|
|
|
+ if (end == null || end == undefined || end == '') return 0;
|
|
|
+ if (start == end) 1;
|
|
|
+ const startDate = this.getUTCDate(start);
|
|
|
+ const endDate = this.getUTCDate(end);
|
|
|
+
|
|
|
+ const timeDiff = endDate - startDate;
|
|
|
+ return (Math.floor(timeDiff / (1000 * 3600 * 24))) + 1; // 直接取整
|
|
|
+ },
|
|
|
+ getUTCDate(dateStr) {
|
|
|
+ const [year, month, day] = dateStr.split('-').map(Number);
|
|
|
+ return new Date(Date.UTC(year, month - 1, day)); // 月份从0开始
|
|
|
+ },
|
|
|
+ handleCourse(row) {
|
|
|
+ this.course = {
|
|
|
+ open: false,
|
|
|
+ row: {},
|
|
|
+ list: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ },
|
|
|
+ loading: true,
|
|
|
+ total: 0,
|
|
|
+ addOpen: false,
|
|
|
+ form: {},
|
|
|
+ };
|
|
|
+ this.course.open = true;
|
|
|
+ this.course.row = row;
|
|
|
+ this.course.queryParams.periodId = row.periodId;
|
|
|
+ this.getCourseList();
|
|
|
+ },
|
|
|
+ getCourseList() {
|
|
|
+ this.course.loading = true;
|
|
|
+ getDays(this.course.queryParams).then(e => {
|
|
|
+ this.course.list = e.rows;
|
|
|
+ this.course.total = e.total;
|
|
|
+ this.course.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleAddCourse() {
|
|
|
+ this.course.addOpen = true;
|
|
|
+ this.course.form = {
|
|
|
+ periodId: this.course.queryParams.periodId,
|
|
|
+ courseId: null,
|
|
|
+ videoIds: []
|
|
|
+ };
|
|
|
+ // 重置表单
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.courseAddForm) {
|
|
|
+ this.$refs.courseAddForm.resetFields();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleUpdateCourse() {
|
|
|
+ this.updateCourse.open = true;
|
|
|
+ this.updateCourse.form = {
|
|
|
+ ids: this.updateCourse.ids,
|
|
|
+ joinTime: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ closeAddCourse() {
|
|
|
+ this.course.addOpen = false;
|
|
|
+ this.course.form = {
|
|
|
+ periodId: null,
|
|
|
+ courseId: null,
|
|
|
+ videoIds: []
|
|
|
+ };
|
|
|
+ // 重置表单
|
|
|
+ if (this.$refs.courseAddForm) {
|
|
|
+ this.$refs.courseAddForm.resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeUpdateCourse() {
|
|
|
+ this.course.open = false;
|
|
|
+ },
|
|
|
+ courseChange(row) {
|
|
|
+ this.course.form.videoIds = [];
|
|
|
+ videoList(row).then(response => {
|
|
|
+ this.videoList = response.list
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitCourseForm() {
|
|
|
+ this.$refs.courseAddForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.course.form.timeRange != null && this.course.form.timeRange.length === 2) {
|
|
|
+ this.course.form.startTime = this.course.form.timeRange[0];
|
|
|
+ this.course.form.endTime1 = this.course.form.timeRange[1];
|
|
|
+ }
|
|
|
+ // 提交数据
|
|
|
+ addCourse(this.course.form).then(response => {
|
|
|
+ this.$message.success('添加成功');
|
|
|
+ this.course.addOpen = false;
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getCourseList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitUpdateCourseForm() {
|
|
|
+ this.$refs.courseUpdateForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.updateCourse.form.timeRange != null && this.updateCourse.form.timeRange.length === 2) {
|
|
|
+ this.updateCourse.form.startTime = this.updateCourse.form.timeRange[0];
|
|
|
+ this.updateCourse.form.endTime1 = this.updateCourse.form.timeRange[1];
|
|
|
+ }
|
|
|
+ // 提交数据
|
|
|
+ updateCourseTime(this.updateCourse.form).then(response => {
|
|
|
+ this.$message.success('添加成功');
|
|
|
+ this.updateCourse.open = false;
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getCourseList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateDate() {
|
|
|
+ updateCourseDate(this.form).then(response => {
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ this.updateDateOpen = false;
|
|
|
+ // 重新加载训练营列表
|
|
|
+ this.getCourseList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ saveCourseData() {
|
|
|
+ updateListCourseData(this.course.list).then(response => {
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ this.getCourseList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setRedPacket(row) {
|
|
|
+ this.currentRedPacketData = {
|
|
|
+ periodId: row.periodId
|
|
|
+ // videoId: row.videoId
|
|
|
+ };
|
|
|
+ this.redPacketVisible = true;
|
|
|
+ },
|
|
|
+ handleRedPacketSuccess() {
|
|
|
+ this.getCourseList();
|
|
|
+ },
|
|
|
+ handlePeriodSettings(row) {
|
|
|
+ this.periodSettingsData = row;
|
|
|
+ this.periodSettingsVisible = true;
|
|
|
+ // 初始化课程列表
|
|
|
+ this.course.queryParams.periodId = row.periodId;
|
|
|
+ // 根据当前激活的tab加载对应数据
|
|
|
+ this.handleTabClick({name: this.activeTab});
|
|
|
+ },
|
|
|
+ // 结束营期
|
|
|
+ handleClosePeriod(row) {
|
|
|
+ const msg = `注: 1.确认结束营期,该营期的开营结束时间改为当天24点。2.当天正在播放中的课程不变。3.第二天如有未开始的课程,统一改为已结束。是否确认结束 ${row.periodName} 营期吗?`
|
|
|
+ this.$confirm(msg, "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ closePeriod({id: row.periodId}).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleBatchRedPacketSuccess() {
|
|
|
+ this.batchRedPacketVisible = false;
|
|
|
+ this.getCourseList();
|
|
|
+ },
|
|
|
+ /** 处理tab切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ if (tab.name === 'course') {
|
|
|
+ this.getCourseList();
|
|
|
+ } else if (tab.name === 'company') {
|
|
|
+ this.redPacketVisible = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 上移课程 */
|
|
|
+ handleTop(row) {
|
|
|
+ const currentIndex = this.course.list.findIndex(item => item.id === row.id);
|
|
|
+ if (currentIndex <= 0) {
|
|
|
+ this.$message.warning('已经是第一条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取上一条数据
|
|
|
+ const prevRow = this.course.list[currentIndex - 1];
|
|
|
+ console.log({
|
|
|
+ id: row.id,
|
|
|
+ targetId: prevRow.id,
|
|
|
+ type: 1 //上移
|
|
|
+ })
|
|
|
+ periodCourseMove({
|
|
|
+ id: row.id,
|
|
|
+ targetId: prevRow.id,
|
|
|
+ type: 1 //上移
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('上移成功');
|
|
|
+ this.getCourseList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '上移失败');
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('上移失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 下移课程 */
|
|
|
+ handleBottom(row) {
|
|
|
+ const currentIndex = this.course.list.findIndex(item => item.id === row.id);
|
|
|
+ if (currentIndex === -1 || currentIndex >= this.course.list.length - 1) {
|
|
|
+ this.$message.warning('已经是最后一条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取下一条数据
|
|
|
+ const nextRow = this.course.list[currentIndex + 1];
|
|
|
+
|
|
|
+ periodCourseMove({
|
|
|
+ id: row.id,
|
|
|
+ targetId: nextRow.id,
|
|
|
+ type: 2 //下移
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('下移成功');
|
|
|
+ this.getCourseList(); // 重新加载列表
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '下移失败');
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('下移失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 营期状态格式化 */
|
|
|
+ periodStatusFormatter(row) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: '未开始',
|
|
|
+ 2: '进行中',
|
|
|
+ 3: '已结束'
|
|
|
+ };
|
|
|
+ return statusMap[row.periodStatus] || '未知状态';
|
|
|
+ },
|
|
|
+ /** 开课状态格式化 */
|
|
|
+ courseStatusFormatter(row) {
|
|
|
+ const statusMap = {
|
|
|
+ 0: '未开始',
|
|
|
+ 1: '进行中',
|
|
|
+ 2: '已结束'
|
|
|
+ };
|
|
|
+ return statusMap[row.status] || '未知状态';
|
|
|
+ },
|
|
|
+ /** 营期状态格式化 */
|
|
|
+ handleUpdateDate(row) {
|
|
|
+ this.form = {id: row.id, dayDate: row.dayDate};
|
|
|
+ this.updateDateOpen = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.left-aside {
|
|
|
+ background-color: #fff;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
+
|
|
|
+.left-header {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+}
|
|
|
+
|
|
|
+.left-header-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-btn {
|
|
|
+ width: 50%;
|
|
|
+ height: 36px;
|
|
|
+ background-color: #409EFF;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input-wrapper {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-label {
|
|
|
+ width: 70px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.sort-select {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 280px;
|
|
|
+}
|
|
|
+
|
|
|
+.color-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.color-label {
|
|
|
+ width: 70px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.color-hint {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.color-help {
|
|
|
+ margin-left: 5px;
|
|
|
+ color: #909399;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.hint-text {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-item {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border: 1px solid #eaedf2;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-item:hover {
|
|
|
+ background-color: #f5f9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-item.active {
|
|
|
+ background-color: #eaf4ff;
|
|
|
+ border-left: 1px solid #75b8fc;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-content {
|
|
|
+ flex: 1;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #c4c1c1;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-stats {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ background-color: #f5f9ff;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item i {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.camp-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+ border-left: 1px dashed #eaedf2;
|
|
|
+ padding-left: 12px;
|
|
|
+ min-width: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ padding: 2px 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn:hover {
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn:hover {
|
|
|
+ background-color: rgba(245, 108, 108, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.copy-btn {
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.copy-btn:hover {
|
|
|
+ background-color: rgba(64, 158, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-icon {
|
|
|
+ color: #E6A23C;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-main {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加训练营表单样式 */
|
|
|
+.drawer-footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ text-align: right;
|
|
|
+ border-top: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+
|
|
|
+.el-input-number {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 加载更多样式 */
|
|
|
+.loading-more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-more i {
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 无更多数据提示 */
|
|
|
+.no-more-data {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ color: #c0c4cc;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.no-more-data span {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|