1.修改看课记录进线时间只能选择7天

src/views/course/courseWatchLog/index.vue

@@ -683,6 +683,29 @@ export default {
     // 进线时间
     qecCreateTimeChange(qecCreateTime) {
       if (qecCreateTime && qecCreateTime.length >= 2) {
+        // 检查选择的日期范围是否超过7天（包括起始和结束日期）
+        const startDate = new Date(qecCreateTime[0]);
+        const endDate = new Date(qecCreateTime[1]);
+
+        // 设置时间为当天开始，避免时间部分影响计算
+        startDate.setHours(0, 0, 0, 0);
+        endDate.setHours(0, 0, 0, 0);
+
+        const timeDiff = Math.abs(endDate - startDate);
+        const diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+
+        // 如果超过6天的范围（总共7天，包括起始日）
+        if (diffDays > 6) {
+          this.$message.error('进线时间选择范围不能超过7天');
+          // 清空选择
+          this.qecCreateTime = [];
+          this.qecCreateTimeText = '';
+          this.queryParams.qecSTime = null;
+          this.queryParams.qecETime = null;
+          this.qecCalendarKey++;
+          return;
+        }
+
         this.qecCreateTimeText = this.formatDateRange(qecCreateTime);
         this.queryParams.qecSTime = qecCreateTime.map(date => date.format('YYYY-MM-DD'))[0] || null;
         this.queryParams.qecETime = qecCreateTime.map(date => date.format('YYYY-MM-DD'))[1] || null;

src/views/course/courseWatchLog/watchLog.vue

@@ -79,42 +79,69 @@
           />
         </el-select>
       </el-form-item>
+      <!-- 营期时间 -->
       <el-form-item label="营期时间" prop="scheduleTime">
-        <el-date-picker
+        <el-input
+          v-model="scheduleTimeText"
+          placeholder="请选择营期时间"
+          readonly
+          @click.native="showScheduleCalendar = true"
+        />
+        <calendar
           v-model="scheduleTime"
-          type="daterange"
-          size="small"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          @change="handleScheduleTimeChange">
-        </el-date-picker>
+          mode="during"
+          :show.sync="showScheduleCalendar"
+          @change="handleScheduleTimeChange"
+          :key="scheduleCalendarKey"
+        />
       </el-form-item>
+      <!-- 创建时间 -->
       <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd"
-                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                        @change="createChange"></el-date-picker>
+        <el-input
+          v-model="createTimeText"
+          placeholder="请选择创建时间"
+          readonly
+          @click.native="showCreateCalendar = true"
+        />
+        <calendar
+          v-model="createTime"
+          mode="during"
+          :show.sync="showCreateCalendar"
+          @change="createChange"
+          :key="createCalendarKey"
+        />
       </el-form-item>
+      <!-- 最新更新时间 -->
       <el-form-item label="最新更新时间" prop="updateTime">
-        <el-date-picker v-model="updateTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange"
-                        range-separator="-" start-placeholder="开始日期"
-                        end-placeholder="结束日期" @change="updateChange"></el-date-picker>
+        <el-input
+          v-model="updateTimeText"
+          placeholder="请选择更新时间"
+          readonly
+          @click.native="showUpdateCalendar = true"
+        />
+        <calendar
+          v-model="updateTime"
+          mode="during"
+          :show.sync="showUpdateCalendar"
+          @change="updateChange"
+          :key="updateCalendarKey"
+        />
       </el-form-item>
-      <el-form-item label="进线时间" prop="updateTime">
-        <el-date-picker
+      <!-- 进线时间 -->
+      <el-form-item label="进线时间" prop="qecCreateTime">
+        <el-input
+          v-model="qecCreateTimeText"
+          placeholder="请选择进线时间"
+          readonly
+          @click.native="showQecCalendar = true"
+        />
+        <calendar
           v-model="qecCreateTime"
-          size="small"
-          style="width: 220px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
+          mode="during"
+          :show.sync="showQecCalendar"
           @change="qecCreateTimeChange"
-          :picker-options="pickerOptions"
-        ></el-date-picker>
+          :key="qecCalendarKey"
+        />
       </el-form-item>
 
       <el-form-item>
@@ -432,22 +459,41 @@ import {getMyQwUserList} from "@/api/qw/user";
 import {searchTags} from "../../../api/qw/tag";
 import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
 import {allListTagGroup} from "../../../api/qw/tagGroup";
-
+import Vue from 'vue'
+import Calendar from 'vue-mobile-calendar'
+Vue.use(Calendar)
 
 export default {
   name: "CourseWatchLog",
   data() {
     return {
+      // 日历 key 控制刷新
+      scheduleCalendarKey: 0,
+      createCalendarKey: 0,
+      updateCalendarKey: 0,
+      qecCalendarKey: 0,
+
+      createTimeText: '',
+      scheduleTimeText: '',  // 新增
+      updateTimeText: '',    // 新增
+      qecCreateTimeText: '', // 新增
+
+      scheduleTime: [],  // 改为数组
+      createTime: [],    // 改为数组
+      updateTime: [],    // 改为数组
+      qecCreateTime: [], // 改为数组
+
+      // 控制日历显隐
+      showScheduleCalendar: false,
+      showCreateCalendar: false,
+      showUpdateCalendar: false,
+      showQecCalendar: false,
 
       resultDialogVisible: false,
       resultMessage: '',
       resultTitle:'',
 
       activeName:"2",
-      createTime: null,
-      updateTime:null,
-
-      qecCreateTime:null,
       pickerOptions: {
         disabledDate(time) {
           // 获取6天前的日期（加上今天就是7天）
@@ -475,7 +521,6 @@ export default {
       ids: [],
       // 非单个禁用
       single: true,
-      scheduleTime: null,
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
@@ -589,6 +634,28 @@ export default {
     });
   },
   methods: {
+    // 重置日历组件
+    resetCalendars() {
+      this.scheduleTime = [];
+      this.createTime = [];
+      this.updateTime = [];
+      this.qecCreateTime = [];
+
+      this.scheduleTimeText = '';
+      this.createTimeText = '';
+      this.updateTimeText = '';
+      this.qecCreateTimeText = '';
+
+      // 强制刷新日历组件
+      this.scheduleCalendarKey++;
+      this.createCalendarKey++;
+      this.updateCalendarKey++;
+      this.qecCalendarKey++;
+    },
+    formatDateRange(dates) {
+      if (!dates || dates.length < 2) return '';
+      return dates.map(date => date.format('YYYY-MM-DD')).join(' ~ ');
+    },
     courseChange(row) {
       this.queryParams.videoId = null;
       if (row === '') {
@@ -608,34 +675,6 @@ export default {
       }
       this.getList();
     },
-    createChange() {
-      if (this.createTime != null) {
-        this.queryParams.sTime = this.createTime[0];
-        this.queryParams.eTime = this.createTime[1];
-      } else {
-        this.queryParams.sTime = null;
-        this.queryParams.eTime = null;
-      }
-    },
-    updateChange(){
-      if (this.updateTime != null) {
-        this.queryParams.upSTime = this.updateTime[0];
-        this.queryParams.upETime = this.updateTime[1];
-      } else {
-        this.queryParams.upSTime = null;
-        this.queryParams.upETime = null;
-      }
-    },
-
-    qecCreateTimeChange(){
-      if (this.qecCreateTime != null) {
-        this.queryParams.qecSTime = this.qecCreateTime[0];
-        this.queryParams.qecETime = this.qecCreateTime[1];
-      } else {
-        this.queryParams.qecSTime = null;
-        this.queryParams.qecETime = null;
-      }
-    },
 
     handleClickX(tab) {
       this.activeName=tab.name;
@@ -647,15 +686,81 @@ export default {
       this.getList()
     },
 
-    handleScheduleTimeChange(val) {
-      if (val) {
-        this.queryParams.scheduleStartTime = val[0];
-        this.queryParams.scheduleEndTime = val[1];
+    // 营期时间
+    handleScheduleTimeChange(scheduleTime) {
+      if (scheduleTime && scheduleTime.length >= 2) {
+        this.scheduleTimeText = this.formatDateRange(scheduleTime);
+        this.queryParams.scheduleStartTime = scheduleTime.map(date => date.format('YYYY-MM-DD'))[0] || null;
+        this.queryParams.scheduleEndTime = scheduleTime.map(date => date.format('YYYY-MM-DD'))[1] || null;
+        console.log(this.queryParams.scheduleStartTime)
+        console.log(this.queryParams.scheduleEndTime)
       } else {
+        this.scheduleTimeText = '';
         this.queryParams.scheduleStartTime = null;
         this.queryParams.scheduleEndTime = null;
       }
     },
+    // 创建时间
+    createChange(createTime) {
+      if (createTime && createTime.length >= 2) {
+        this.createTimeText = this.formatDateRange(createTime);
+        this.queryParams.sTime = createTime.map(date => date.format('YYYY-MM-DD'))[0] || null;
+        this.queryParams.eTime = createTime.map(date => date.format('YYYY-MM-DD'))[1] || null;
+      } else {
+        this.createTimeText = '';
+        this.queryParams.sTime = null;
+        this.queryParams.eTime = null;
+      }
+    },
+
+    // 更新时间
+    updateChange(updateTime) {
+      if (updateTime && updateTime.length >= 2) {
+        this.updateTimeText = this.formatDateRange(updateTime);
+        this.queryParams.upSTime = updateTime.map(date => date.format('YYYY-MM-DD'))[0] || null;
+        this.queryParams.upETime = updateTime.map(date => date.format('YYYY-MM-DD'))[1] || null;
+      } else {
+        this.updateTimeText = '';
+        this.queryParams.upSTime = null;
+        this.queryParams.upETime = null;
+      }
+    },
+
+    // 进线时间
+    qecCreateTimeChange(qecCreateTime) {
+      if (qecCreateTime && qecCreateTime.length >= 2) {
+        // 检查选择的日期范围是否超过7天（包括起始和结束日期）
+        const startDate = new Date(qecCreateTime[0]);
+        const endDate = new Date(qecCreateTime[1]);
+
+        // 设置时间为当天开始，避免时间部分影响计算
+        startDate.setHours(0, 0, 0, 0);
+        endDate.setHours(0, 0, 0, 0);
+
+        const timeDiff = Math.abs(endDate - startDate);
+        const diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+
+        // 如果超过6天的范围（总共7天，包括起始日）
+        if (diffDays > 6) {
+          this.$message.error('进线时间选择范围不能超过7天');
+          // 清空选择
+          this.qecCreateTime = [];
+          this.qecCreateTimeText = '';
+          this.queryParams.qecSTime = null;
+          this.queryParams.qecETime = null;
+          this.qecCalendarKey++;
+          return;
+        }
+
+        this.qecCreateTimeText = this.formatDateRange(qecCreateTime);
+        this.queryParams.qecSTime = qecCreateTime.map(date => date.format('YYYY-MM-DD'))[0] || null;
+        this.queryParams.qecETime = qecCreateTime.map(date => date.format('YYYY-MM-DD'))[1] || null;
+      } else {
+        this.qecCreateTimeText = '';
+        this.queryParams.qecSTime = null;
+        this.queryParams.qecETime = null;
+      }
+    },
     /** 查询短链课程看课记录列表 */
     getList() {
       this.loading = true;
@@ -690,10 +795,17 @@ export default {
         companyUserId: null,
         companyId: null,
         courseId: null,
+        sTime:null,
+        eTime:null,
+        upSTime:null,
+        upETime:null,
+        qecSTime:null,
+        qecETime:null,
         scheduleStartTime: null,
         scheduleEndTime: null,
       };
-      this.scheduleTime=null;
+      // 统一重置日历组件
+      this.resetCalendars();
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -704,8 +816,6 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.createTime = null;
-      this.qecCreateTime=null;
       this.queryParams.sTime = null;
       this.queryParams.eTime = null;
       this.queryParams.upSTime = null;
@@ -714,8 +824,9 @@ export default {
       this.queryParams.qecETime = null;
       this.queryParams.scheduleStartTime = null;
       this.queryParams.scheduleEndTime = null;
-      this.scheduleTime=null;
-      this.updateTime=null;
+      // 统一重置日历组件
+      this.resetCalendars();
+
       this.handleQuery();
     },
     // 多选框选中数据