1.提交部门看课记录适配移动端显示

src/views/course/courseWatchLog/deptWatchLog.vue

@@ -88,41 +88,71 @@
 <!--          @keyup.enter.native="handleQuery"-->
 <!--        />-->
 <!--      </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>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -320,13 +350,39 @@ import {courseList, myListCourseRedPacketLog, videoList} from '@/api/course/cour
 import {myListLogs} from "@/api/course/courseAnswerlogs";
 import { getCompanyUserListLikeName } from "@/api/company/companyUser";
 import {getTask} from "@/api/common";
+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,
+
+
       activeName:"00",
-      createTime:null,
-      updateTime:null,
       courseLists:[],
       videoList:[],
       logTypeOptions:[],
@@ -371,7 +427,6 @@ export default {
         pageSize: 10,
       },
 
-      qecCreateTime:null,
       pickerOptions: {
         disabledDate(time) {
           // 获取6天前的日期（加上今天就是7天）
@@ -419,7 +474,6 @@ export default {
       // 表单校验
       rules: {
       },
-      scheduleTime: null,
       // 员工选项列表
       companyUserOptionsParams: {
         name: undefined,
@@ -441,6 +495,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 === ''){
@@ -451,35 +527,7 @@ export default {
         this.videoList=response.list
       });
     },
-    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,event){
       this.activeName=tab.name;
       if(tab.name=="00"){
@@ -669,15 +717,79 @@ export default {
       })
     },
 
-    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;
       } 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;
+      }
+    },
     /**
      * 根据名称模糊查询用户列表
      * @param query 参数