1.修改看课记录日期时间选择在移动端无法完全展示的问题

package.json

@@ -94,6 +94,7 @@
     "vue-jsonp": "^2.1.0",
     "vue-meta": "^2.4.0",
     "vue-mobile-audio": "^0.1.3",
+    "vue-mobile-calendar": "^3.3.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vue2-ace-editor": "0.0.15",

src/views/course/courseWatchLog/index.vue

@@ -58,44 +58,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 v-model="qecCreateTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange"-->
-<!--                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="qecCreateTimeChange"></el-date-picker>-->
-<!--      </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>
@@ -415,19 +440,41 @@ import {myListLogs} from "@/api/course/courseAnswerlogs";
 import {allListTagGroup} from "../../../api/qw/tagGroup";
 import {searchTags} from "../../../api/qw/tag";
 import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
+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天）
@@ -548,7 +595,6 @@ export default {
       // 表单校验
       rules: {
       },
-      scheduleTime: null,
     };
   },
   created() {
@@ -561,6 +607,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 === ''){
@@ -571,31 +639,55 @@ export default {
         this.videoList=response.list
       });
     },
-    createChange() {
-      if (this.createTime != null) {
-        this.queryParams.sTime = this.createTime[0];
-        this.queryParams.eTime = this.createTime[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(){
-      if (this.updateTime != null) {
-        this.queryParams.upSTime = this.updateTime[0];
-        this.queryParams.upETime = this.updateTime[1];
+    // 更新时间
+    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(){
-      if (this.qecCreateTime != null) {
-        this.queryParams.qecSTime = this.qecCreateTime[0];
-        this.queryParams.qecETime = this.qecCreateTime[1];
+    // 进线时间
+    qecCreateTimeChange(qecCreateTime) {
+      if (qecCreateTime && qecCreateTime.length >= 2) {
+        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;
       }
@@ -646,10 +738,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");
     },
     /** 搜索按钮操作 */
@@ -660,8 +759,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;
@@ -670,8 +767,10 @@ export default {
       this.queryParams.qecETime = null;
       this.queryParams.scheduleStartTime = null;
       this.queryParams.scheduleEndTime = null;
-      this.scheduleTime=null;
-      this.updateTime=null;
+
+      // 统一重置日历组件
+      this.resetCalendars();
+
       this.handleQuery();
     },
     // 多选框选中数据
@@ -774,16 +873,7 @@ export default {
         this.loadingRedLog = false;
       })
     },
-    
-    handleScheduleTimeChange(val) {
-      if (val) {
-        this.queryParams.scheduleStartTime = val[0];
-        this.queryParams.scheduleEndTime = val[1];
-      } else {
-        this.queryParams.scheduleStartTime = null;
-        this.queryParams.scheduleEndTime = null;
-      }
-    },
+
     handleSendTypeChange() {
       this.handleQuery(); // 重新查询列表
     },