|
|
@@ -0,0 +1,1025 @@
|
|
|
+<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="companyIdList">
|
|
|
+ <el-select v-model="queryParams.companyIdList" placeholder="请选择公司" clearable size="small" multiple>
|
|
|
+ <el-option v-for="item in companyOptions" :key="item.companyId" :label="item.companyName"
|
|
|
+ :value="item.companyId" />
|
|
|
+ </el-select>
|
|
|
+ </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"
|
|
|
+ v-hasPermi="['course:period:list']">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="periodList" @selection-change="handleSelectionChange" border>
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="营期名称" align="center" prop="periodName" />
|
|
|
+ <el-table-column label="公司名称" align="center" prop="companyName" />
|
|
|
+ <el-table-column label="营期状态" align="center" prop="periodStatus" width="100"
|
|
|
+ :formatter="periodStatusFormatter" />
|
|
|
+ <el-table-column label="营期线" align="center" prop="periodLine" width="180" />
|
|
|
+ <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-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="营期相关设置" :visible.sync="periodSettingsVisible" direction="rtl" size="74%"
|
|
|
+ :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 ref="courseTable" v-loading="course.loading" :data="course.list"
|
|
|
+ @selection-change="handleSelectionCourseChange" border>
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <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="status" width="100"
|
|
|
+ :formatter="courseStatusFormatter" />
|
|
|
+ <el-table-column label="营期时间" align="center" prop="dayDate" width="100" />
|
|
|
+ <el-table-column label="开始时间" align="center" prop="startDateTime" width="100">
|
|
|
+ <!-- <template slot-scope="scope">-->
|
|
|
+ <!-- <el-tag>{{scope.row.startDateTime}}</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="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="danger">{{ scope.row.lastJoinTime }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="text" @click="handleSend(scope.row)"
|
|
|
+ v-hasPermi="['course:period:courseMove']">发送</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="course.total > 0" :total="course.total"
|
|
|
+ :page.sync="course.queryParams.pageNum" :limit.sync="course.queryParams.pageSize"
|
|
|
+ @pagination="getCourseList" style="height: 40px" />
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <el-dialog title="IM发送" :visible.sync="imOpen" width="800px" append-to-body>
|
|
|
+ <el-form ref="imSendForm" :model="imSendForm" :rules="imRules" label-width="220px">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="imSendForm.title" placeholder="请输入标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送消息时间" prop="sendTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="imSendForm.sendTime" type="datetime" placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="有效时长（分钟）" prop="effectiveDuration">
|
|
|
+ <el-input-number v-model="imSendForm.effectiveDuration" :min="0"
|
|
|
+ label="链接有效时长（分钟）"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="imSubmit">确 定</el-button>
|
|
|
+ <el-button @click="imCancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import { addPeriod, delPeriod, exportPeriod, getPeriod, pagePeriod, updatePeriod, getDays, addCourse, delPeriodDay, updateCourseTime, updateCourseDate, updateListCourseData, periodCourseMove, closePeriod } from "@/api/course/userCoursePeriod";
|
|
|
+import { getCompanyList } from "@/api/company/company";
|
|
|
+import { batchSendCourse } from "@/api/user/fsUser";
|
|
|
+import { listCamp, addCamp, editCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
|
|
|
+import { courseList, videoList } from '@/api/course/courseRedPacketLog'
|
|
|
+import Da from "element-ui/src/locale/lang/da";
|
|
|
+import { getConfigByKey } from '@/api/system/config'
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ userIds: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ companyId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ companyUserId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ name: "Period",
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imSendForm: {
|
|
|
+
|
|
|
+ },
|
|
|
+ imOpen: false,
|
|
|
+ // 遮罩层
|
|
|
+ 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: {},
|
|
|
+ },
|
|
|
+ //修改营期时间参数
|
|
|
+ updatePeriodDate: {
|
|
|
+ open: false,
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ form: {},
|
|
|
+ },
|
|
|
+ joinTimeSwitch: true,
|
|
|
+ updateCourse: {
|
|
|
+ open: false,
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ form: {
|
|
|
+ timeRange: null,
|
|
|
+ joinTime: null
|
|
|
+ },
|
|
|
+ },
|
|
|
+ imRules: {
|
|
|
+ title: [
|
|
|
+ { required: true, message: "发送标题不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ periodName: [
|
|
|
+ { required: true, message: '营期名称不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ companyId: [
|
|
|
+ { required: true, message: '公司不能为空', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ courseStyle: [
|
|
|
+ { required: true, message: '课程风格不能为空', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ // redPacketGrantMethod: [
|
|
|
+ // { required: true, message: '红包发放方式不能为空', trigger: 'change' }
|
|
|
+ // ],
|
|
|
+ periodType: [
|
|
|
+ { required: true, message: '营期类型不能为空', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ maxViewNum: [
|
|
|
+ { required: true, message: '销售可查看天数不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ periodStartingTime: [
|
|
|
+ { required: true, message: '开营日期不能为空', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 公司选项
|
|
|
+ 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' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 添加课程表单校验
|
|
|
+ courseAddRules: {
|
|
|
+ courseId: [
|
|
|
+ { required: true, message: '请选择课程', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ videoIds: [
|
|
|
+ { required: true, message: '请选择小节', trigger: 'change' },
|
|
|
+ { type: 'array', min: 1, message: '请至少选择一个小节', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 修改看课时间表单校验
|
|
|
+ courseUpdateRules: {
|
|
|
+ timeRange: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (!value || !Array.isArray(value) || value.length !== 2) {
|
|
|
+ callback(new Error('请选择完整的看课时间范围'));
|
|
|
+ } else {
|
|
|
+ // 检查时间格式是否正确（yyyy-MM-dd HH:mm:ss）
|
|
|
+ const timeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
|
|
|
+ if (!timeRegex.test(value[0]) || !timeRegex.test(value[1])) {
|
|
|
+ callback(new Error('时间格式不正确'));
|
|
|
+ } else if (value[0] >= value[1]) {
|
|
|
+ callback(new Error('结束时间必须大于开始时间'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ joinTime: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请选择领取红包时间'));
|
|
|
+ } else {
|
|
|
+ // 检查时间格式是否正确（yyyy-MM-dd HH:mm:ss）
|
|
|
+ const timeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
|
|
|
+ if (!timeRegex.test(value)) {
|
|
|
+ callback(new Error('时间格式不正确'));
|
|
|
+ } else {
|
|
|
+ // 检查领取红包时间是否在看课时间范围内
|
|
|
+ const timeRange = this.updateCourse.form.timeRange;
|
|
|
+ if (timeRange && Array.isArray(timeRange) && timeRange.length === 2) {
|
|
|
+ if (value < timeRange[0] || value > timeRange[1]) {
|
|
|
+ callback(new Error('领取红包时间必须在看课时间范围内'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 滚动节流标志
|
|
|
+ scrollThrottle: false,
|
|
|
+ // 加载更多状态
|
|
|
+ loadingMore: false,
|
|
|
+ // 设置红包对话框
|
|
|
+ redPacketVisible: false,
|
|
|
+ periodCompanyList: [],
|
|
|
+ currentRedPacketData: {
|
|
|
+ periodId: '',
|
|
|
+ videoId: ''
|
|
|
+ },
|
|
|
+ // 营期相关设置抽屉
|
|
|
+ periodSettingsVisible: false,
|
|
|
+ activeTab: 'course',
|
|
|
+ periodSettingsData: {},
|
|
|
+ companyList: [],
|
|
|
+ courseDialogVisible: false,
|
|
|
+ redPacketList: [],
|
|
|
+ currentCompany: null,
|
|
|
+ // 选中的营期数据
|
|
|
+ selectedPeriods: [],
|
|
|
+ // 批量设置红包按钮是否禁用
|
|
|
+ batchSetRedPacketDisabled: true,
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ courseList().then(response => {
|
|
|
+ this.courseList = response.list;
|
|
|
+ });
|
|
|
+ // this.getList();
|
|
|
+ this.getLeftList();
|
|
|
+ this.getCompanyList();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ imSubmit() {
|
|
|
+ console.log("imSendForm:",this.imSendForm)
|
|
|
+ this.$refs["imSendForm"].validate(valid => {
|
|
|
+ batchSendCourse(this.imSendForm).then(res=>{
|
|
|
+ this.imCancel();
|
|
|
+ this.$message.success('发送成功')
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSend(row) {
|
|
|
+ this.imOpen = true;
|
|
|
+ this.imSendForm = {
|
|
|
+ userIds:this.userIds,
|
|
|
+ companyUserId: this.companyUserId,
|
|
|
+ companyId: this.companyId,
|
|
|
+ id:row.id,
|
|
|
+ periodId:row.periodId,
|
|
|
+ courseId:row.courseId,
|
|
|
+ videoId:row.videoId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imCancel() {
|
|
|
+ this.imOpen = false;
|
|
|
+ this.imRest();
|
|
|
+ },
|
|
|
+ imRest() {
|
|
|
+ this.imSendForm = {
|
|
|
+ userIds: [],
|
|
|
+ companyUserId: null,
|
|
|
+ companyId: null,
|
|
|
+ periodId: null,
|
|
|
+ courseId: null,
|
|
|
+ videoId: null,
|
|
|
+ tagIds: [],
|
|
|
+ sendTime: null,
|
|
|
+ title: null,
|
|
|
+ effectiveDuration: null,
|
|
|
+ id: null,
|
|
|
+ };
|
|
|
+ this.resetForm("imSendForm")
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ async handleDeleteCourse(row) {
|
|
|
+ const periodDayIds = row.id || this.updateCourse.ids;
|
|
|
+ try {
|
|
|
+ await this.$confirm('是否确认删除该课程？', "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ });
|
|
|
+
|
|
|
+ const res = await delPeriodDay(periodDayIds);
|
|
|
+
|
|
|
+ if (res && res.code === 200) {
|
|
|
+ this.getCourseList();// 刷新列表
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 查询会员营期列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ const params = { ...this.queryParams };
|
|
|
+ params.trainingCampId = null,
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /** 获取公司下拉列表*/
|
|
|
+ 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: [],
|
|
|
+ maxViewNum: 0,
|
|
|
+ periodEndTime: null,
|
|
|
+ timeRange: [], // 看课时间范围
|
|
|
+ viewStartTime: null, // 看课开始时间
|
|
|
+ viewEndTime: null, // 看课结束时间
|
|
|
+ lastJoinTime: null // 领取红包时间
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /** 重置训练营表单 */
|
|
|
+ resetCampForm() {
|
|
|
+ this.campForm = {
|
|
|
+ trainingCampId: null,
|
|
|
+ trainingCampName: ''
|
|
|
+ };
|
|
|
+ // 如果表单已经创建，则重置校验结果
|
|
|
+ if (this.$refs.campForm) {
|
|
|
+ this.$refs.campForm.resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /** 选中训练营 */
|
|
|
+ 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];
|
|
|
+ if (!Array.isArray(this.form.days)) {
|
|
|
+ this.form.days = [];
|
|
|
+ }
|
|
|
+ this.form.days = [];
|
|
|
+ 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;
|
|
|
+ this.form.days = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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开始
|
|
|
+ },
|
|
|
+
|
|
|
+ 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;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ handlePeriodSettings(row) {
|
|
|
+ console.log("公司id：",this.companyId,this.companyUserId)
|
|
|
+ this.periodSettingsData = row;
|
|
|
+ this.periodSettingsVisible = true;
|
|
|
+ // 初始化课程列表
|
|
|
+ this.course.queryParams.periodId = row.periodId;
|
|
|
+ // 根据当前激活的tab加载对应数据
|
|
|
+ this.handleTabClick({ name: this.activeTab });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /** 处理tab切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ if (tab.name === 'course') {
|
|
|
+ this.getCourseList();
|
|
|
+ } else if (tab.name === 'company') {
|
|
|
+ this.redPacketVisible = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /** 营期状态格式化 */
|
|
|
+ periodStatusFormatter(row) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: '未开始',
|
|
|
+ 2: '进行中',
|
|
|
+ 3: '已结束'
|
|
|
+ };
|
|
|
+ return statusMap[row.periodStatus] || '未知状态';
|
|
|
+ },
|
|
|
+ /** 开课状态格式化 */
|
|
|
+ courseStatusFormatter(row) {
|
|
|
+ const statusMap = {
|
|
|
+ 0: '未开始',
|
|
|
+ 1: '进行中',
|
|
|
+ 2: '已结束'
|
|
|
+ };
|
|
|
+ return statusMap[row.status] || '未知状态';
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</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>
|
