时间格式修改 看课记录

src/views/course/courseWatchLog/index.vue

@@ -94,67 +94,59 @@
 
       <!-- 营期时间 -->
       <el-form-item label="营期时间" prop="scheduleTime">
-        <el-input
-          v-model="scheduleTimeText"
-          placeholder="请选择营期时间"
-          readonly
-          @click.native="showScheduleCalendar = true"
-        />
-        <calendar
-          v-model="scheduleTime"
-          mode="during"
-          :show.sync="showScheduleCalendar"
-          @change="handleScheduleTimeChange"
-          :key="scheduleCalendarKey"
-        />
+        <el-date-picker 
+          v-model="scheduleTime" 
+          size="small" 
+          style="width: 220px" 
+          value-format="yyyy-MM-dd" 
+          type="daterange"
+          range-separator="-" 
+          start-placeholder="开始日期" 
+          end-placeholder="结束日期" 
+          @change="handleScheduleTimeChange">
+        </el-date-picker>
       </el-form-item>
       <!-- 创建时间 -->
       <el-form-item label="创建时间" prop="createTime">
-        <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-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-form-item>
       <!-- 最新更新时间 -->
       <el-form-item label="最新更新时间" prop="updateTime">
-        <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-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-form-item>
       <!-- 进线时间 -->
       <el-form-item label="进线时间" prop="qecCreateTime">
-        <el-input
-          v-model="qecCreateTimeText"
-          placeholder="请选择进线时间"
-          readonly
-          @click.native="showQecCalendar = true"
-        />
-        <calendar
-          v-model="qecCreateTime"
-          mode="during"
-          :show.sync="showQecCalendar"
-          @change="qecCreateTimeChange"
-          :key="qecCalendarKey"
-        />
+        <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="isVip">
         <el-select
@@ -488,38 +480,13 @@ import {listLogs} 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'
 import {infoSop} from "@/api/qw/sop";
 import {getCompanyUserListLikeName} from "../../../api/company/companyUser";
-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:'',
@@ -664,6 +631,12 @@ export default {
       },
       companyUserOptions: [],
       companyUserOptionsLoading: false,
+      
+      // 时间选择器数据
+      scheduleTime: [],
+      createTime: [],
+      updateTime: [],
+      qecCreateTime: [],
     };
   },
   created() {
@@ -714,61 +687,22 @@ export default {
       });
     },
 
-    // 重置日历组件
-    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 === ''){
-        this.videoList=[];
-        return
-      }
-      videoList(row).then(response => {
-        this.videoList=response.list
-      });
-    },
-
     // 营期时间
     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)
+      if (scheduleTime && scheduleTime.length === 2) {
+        this.queryParams.scheduleStartTime = scheduleTime[0];
+        this.queryParams.scheduleEndTime = scheduleTime[1];
       } 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;
+      if (createTime && createTime.length === 2) {
+        this.queryParams.sTime = createTime[0];
+        this.queryParams.eTime = createTime[1];
       } else {
-        this.createTimeText = '';
         this.queryParams.sTime = null;
         this.queryParams.eTime = null;
       }
@@ -776,12 +710,10 @@ export default {
 
     // 更新时间
     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;
+      if (updateTime && updateTime.length === 2) {
+        this.queryParams.upSTime = updateTime[0];
+        this.queryParams.upETime = updateTime[1];
       } else {
-        this.updateTimeText = '';
         this.queryParams.upSTime = null;
         this.queryParams.upETime = null;
       }
@@ -789,7 +721,7 @@ export default {
 
     // 进线时间
     qecCreateTimeChange(qecCreateTime) {
-      if (qecCreateTime && qecCreateTime.length >= 2) {
+      if (qecCreateTime && qecCreateTime.length === 2) {
         // 检查选择的日期范围是否超过7天（包括起始和结束日期）
         const startDate = new Date(qecCreateTime[0]);
         const endDate = new Date(qecCreateTime[1]);
@@ -806,18 +738,14 @@ export default {
           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;
+        
+        this.queryParams.qecSTime = qecCreateTime[0];
+        this.queryParams.qecETime = qecCreateTime[1];
       } else {
-        this.qecCreateTimeText = '';
         this.queryParams.qecSTime = null;
         this.queryParams.qecETime = null;
       }
@@ -877,8 +805,6 @@ export default {
         scheduleStartTime: null,
         scheduleEndTime: null,
       };
-      // 统一重置日历组件
-      this.resetCalendars();
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -902,8 +828,11 @@ export default {
       // 重置SOP搜索
       this.handleSopClear();
 
-      // 统一重置日历组件
-      this.resetCalendars();
+      // 重置日期选择器
+      this.scheduleTime = [];
+      this.createTime = [];
+      this.updateTime = [];
+      this.qecCreateTime = [];
 
       this.handleQuery();
     },
@@ -1341,4 +1270,4 @@ export default {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
-</style>
+</style>

src/views/course/courseWatchLog/watchLog.vue

@@ -102,67 +102,59 @@
       </el-form-item>
       <!-- 营期时间 -->
       <el-form-item label="营期时间" prop="scheduleTime">
-        <el-input
-          v-model="scheduleTimeText"
-          placeholder="请选择营期时间"
-          readonly
-          @click.native="showScheduleCalendar = true"
-        />
-        <calendar
-          v-model="scheduleTime"
-          mode="during"
-          :show.sync="showScheduleCalendar"
-          @change="handleScheduleTimeChange"
-          :key="scheduleCalendarKey"
-        />
+        <el-date-picker 
+          v-model="scheduleTime" 
+          size="small" 
+          style="width: 220px" 
+          value-format="yyyy-MM-dd" 
+          type="daterange"
+          range-separator="-" 
+          start-placeholder="开始日期" 
+          end-placeholder="结束日期" 
+          @change="handleScheduleTimeChange">
+        </el-date-picker>
       </el-form-item>
       <!-- 创建时间 -->
       <el-form-item label="创建时间" prop="createTime">
-        <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-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-form-item>
       <!-- 最新更新时间 -->
       <el-form-item label="最新更新时间" prop="updateTime">
-        <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-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-form-item>
       <!-- 进线时间 -->
       <el-form-item label="进线时间" prop="qecCreateTime">
-        <el-input
-          v-model="qecCreateTimeText"
-          placeholder="请选择进线时间"
-          readonly
-          @click.native="showQecCalendar = true"
-        />
-        <calendar
-          v-model="qecCreateTime"
-          mode="during"
-          :show.sync="showQecCalendar"
-          @change="qecCreateTimeChange"
-          :key="qecCalendarKey"
-        />
+        <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="isVip">
         <el-select
@@ -228,9 +220,9 @@
       <el-table-column label="记录编号" align="center" prop="logId"/>
      <el-table-column label="客户昵称" align="center" prop="externalUserName" v-if="queryParams.sendType == 2"/>
 
-      &lt;!&ndash;
+      <!--
       <el-table-column label="会员ID" align="center" prop="userId" v-if="queryParams.sendType == 1"/>
-      &ndash;&gt;
+      -->
      <el-table-column label="客户头像" align="center" prop="externalUserAvatar" v-if="queryParams.sendType == 2">
        <template slot-scope="scope">
          <el-popover
@@ -496,37 +488,12 @@ 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'
 import {infoSop} from "@/api/qw/sop";
-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:'',
@@ -662,7 +629,13 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {},
+      
+      // 时间选择器数据
+      scheduleTime: [],
+      createTime: [],
+      updateTime: [],
+      qecCreateTime: [],
     };
   },
   created() {
@@ -687,28 +660,6 @@ export default {
       this.handleQuery(); // 重新查询列表
     },
 
-    // 重置日历组件
-    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 === '') {
@@ -741,26 +692,20 @@ export default {
 
     // 营期时间
     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)
+      if (scheduleTime && scheduleTime.length === 2) {
+        this.queryParams.scheduleStartTime = scheduleTime[0];
+        this.queryParams.scheduleEndTime = scheduleTime[1];
       } 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;
+      if (createTime && createTime.length === 2) {
+        this.queryParams.sTime = createTime[0];
+        this.queryParams.eTime = createTime[1];
       } else {
-        this.createTimeText = '';
         this.queryParams.sTime = null;
         this.queryParams.eTime = null;
       }
@@ -768,12 +713,10 @@ export default {
 
     // 更新时间
     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;
+      if (updateTime && updateTime.length === 2) {
+        this.queryParams.upSTime = updateTime[0];
+        this.queryParams.upETime = updateTime[1];
       } else {
-        this.updateTimeText = '';
         this.queryParams.upSTime = null;
         this.queryParams.upETime = null;
       }
@@ -781,7 +724,7 @@ export default {
 
     // 进线时间
     qecCreateTimeChange(qecCreateTime) {
-      if (qecCreateTime && qecCreateTime.length >= 2) {
+      if (qecCreateTime && qecCreateTime.length === 2) {
         // 检查选择的日期范围是否超过7天（包括起始和结束日期）
         const startDate = new Date(qecCreateTime[0]);
         const endDate = new Date(qecCreateTime[1]);
@@ -798,18 +741,14 @@ export default {
           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;
+        this.queryParams.qecSTime = qecCreateTime[0];
+        this.queryParams.qecETime = qecCreateTime[1];
       } else {
-        this.qecCreateTimeText = '';
         this.queryParams.qecSTime = null;
         this.queryParams.qecETime = null;
       }
@@ -857,8 +796,6 @@ export default {
         scheduleStartTime: null,
         scheduleEndTime: null,
       };
-      // 统一重置日历组件
-      this.resetCalendars();
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -881,8 +818,12 @@ export default {
 
       // 重置SOP搜索
       this.handleSopClear();
-      // 统一重置日历组件
-      this.resetCalendars();
+      
+      // 重置日期选择器
+      this.scheduleTime = [];
+      this.createTime = [];
+      this.updateTime = [];
+      this.qecCreateTime = [];
 
       this.handleQuery();
     },
@@ -1314,4 +1255,4 @@ export default {
   font-size: 14px;
   color: #606266;
 }
-</style>
+</style>