更改选择时间样式

src/views/course/courseWatchLog/deptWatchLog.vue

@@ -119,7 +119,7 @@
 <!--        />-->
 <!--      </el-form-item>-->
       <!-- 营期时间 -->
-      <el-form-item label="营期时间" prop="scheduleTime">
+      <!-- <el-form-item label="营期时间" prop="scheduleTime">
         <el-input
           v-model="scheduleTimeText"
           placeholder="请选择营期时间"
@@ -133,9 +133,21 @@
           @change="handleScheduleTimeChange"
           :key="scheduleCalendarKey"
         />
+      </el-form-item> -->
+       <el-form-item label="营期时间" prop="scheduleTime">
+        <el-date-picker
+          v-model="scheduleTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="handleScheduleTimeChange"
+        />
       </el-form-item>
       <!-- 创建时间 -->
-      <el-form-item label="创建时间" prop="createTime">
+      <!-- <el-form-item label="创建时间" prop="createTime">
         <el-input
           v-model="createTimeText"
           placeholder="请选择创建时间"
@@ -149,9 +161,21 @@
           @change="createChange"
           :key="createCalendarKey"
         />
+      </el-form-item> -->
+        <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="createTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="createChange"
+        />
       </el-form-item>
       <!-- 最新更新时间 -->
-      <el-form-item label="最新更新时间" prop="updateTime">
+      <!-- <el-form-item label="最新更新时间" prop="updateTime">
         <el-input
           v-model="updateTimeText"
           placeholder="请选择更新时间"
@@ -165,9 +189,21 @@
           @change="updateChange"
           :key="updateCalendarKey"
         />
+      </el-form-item> -->
+       <el-form-item label="最新更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="updateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="updateChange"
+        />
       </el-form-item>
       <!-- 进线时间 -->
-      <el-form-item label="进线时间" prop="qecCreateTime">
+      <!-- <el-form-item label="进线时间" prop="qecCreateTime">
         <el-input
           v-model="qecCreateTimeText"
           placeholder="请选择进线时间"
@@ -181,8 +217,19 @@
           @change="qecCreateTimeChange"
           :key="qecCalendarKey"
         />
+      </el-form-item> -->
+      <el-form-item label="进线时间" prop="qecCreateTime">
+        <el-date-picker
+          v-model="qecCreateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+          @change="qecCreateTimeChange"
+        />
       </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>
@@ -774,11 +821,11 @@ 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;
+        // this.scheduleTimeText = this.formatDateRange(scheduleTime);
+        this.queryParams.scheduleStartTime = scheduleTime[0] || null;
+        this.queryParams.scheduleEndTime = scheduleTime[1] || null;
       } else {
-        this.scheduleTimeText = '';
+        this.scheduleTimeText = [];
         this.queryParams.scheduleStartTime = null;
         this.queryParams.scheduleEndTime = null;
       }
@@ -786,9 +833,9 @@ export default {
     // 创建时间
     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;
+        // this.createTimeText = this.formatDateRange(createTime);
+        this.queryParams.sTime = createTime[0] || null;
+        this.queryParams.eTime = createTime[1] || null;
       } else {
         this.createTimeText = '';
         this.queryParams.sTime = null;
@@ -800,8 +847,8 @@ 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;
+        this.queryParams.upSTime = updateTime[0] || null;
+        this.queryParams.upETime = updateTime[1] || null;
       } else {
         this.updateTimeText = '';
         this.queryParams.upSTime = null;
@@ -828,16 +875,16 @@ export default {
           this.$message.error('进线时间选择范围不能超过7天');
           // 清空选择
           this.qecCreateTime = [];
-          this.qecCreateTimeText = '';
+          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.qecCreateTimeText = this.formatDateRange(qecCreateTime);
+        this.queryParams.qecSTime = qecCreateTime[0] || null;
+        this.queryParams.qecETime = qecCreateTime[1] || null;
       } else {
         this.qecCreateTimeText = '';
         this.queryParams.qecSTime = null;

src/views/course/courseWatchLog/index.vue

@@ -103,7 +103,7 @@
     </el-form-item>
 
       <!-- 营期时间 -->
-      <el-form-item label="营期时间" prop="scheduleTime">
+      <!-- <el-form-item label="营期时间" prop="scheduleTime">
         <el-input
           v-model="scheduleTimeText"
           placeholder="请选择营期时间"
@@ -116,10 +116,22 @@
           :show.sync="showScheduleCalendar"
           @change="handleScheduleTimeChange"
           :key="scheduleCalendarKey"
+        /> 
+      </el-form-item>-->
+      <el-form-item label="营期时间" prop="scheduleTime">
+        <el-date-picker
+          v-model="scheduleTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="handleScheduleTimeChange"
         />
       </el-form-item>
       <!-- 创建时间 -->
-      <el-form-item label="创建时间" prop="createTime">
+      <!-- <el-form-item label="创建时间" prop="createTime">
         <el-input
           v-model="createTimeText"
           placeholder="请选择创建时间"
@@ -133,9 +145,22 @@
           @change="createChange"
           :key="createCalendarKey"
         />
+      </el-form-item> -->
+
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="createTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="createChange"
+        />
       </el-form-item>
       <!-- 最新更新时间 -->
-      <el-form-item label="最新更新时间" prop="updateTime">
+      <!-- <el-form-item label="最新更新时间" prop="updateTime">
         <el-input
           v-model="updateTimeText"
           placeholder="请选择更新时间"
@@ -149,9 +174,21 @@
           @change="updateChange"
           :key="updateCalendarKey"
         />
+      </el-form-item> -->
+       <el-form-item label="最新更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="updateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="updateChange"
+        />
       </el-form-item>
       <!-- 进线时间 -->
-      <el-form-item label="进线时间" prop="qecCreateTime">
+      <!-- <el-form-item label="进线时间" prop="qecCreateTime">
         <el-input
           v-model="qecCreateTimeText"
           placeholder="请选择进线时间"
@@ -165,7 +202,20 @@
           @change="qecCreateTimeChange"
           :key="qecCalendarKey"
         />
+      </el-form-item> -->
+       <el-form-item label="进线时间" prop="qecCreateTime">
+        <el-date-picker
+          v-model="qecCreateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="qecCreateTimeChange"
+        />
       </el-form-item>
+
       <el-form-item label="是否为会员" prop="isVip">
         <el-select
           filterable
@@ -736,10 +786,10 @@ export default {
       this.updateTime = [];
       this.qecCreateTime = [];
 
-      this.scheduleTimeText = '';
-      this.createTimeText = '';
-      this.updateTimeText = '';
-      this.qecCreateTimeText = '';
+      this.scheduleTimeText = [];
+      this.createTimeText = [];
+      this.updateTimeText = [];
+      this.qecCreateTimeText = [];
 
       // 强制刷新日历组件
       this.scheduleCalendarKey++;
@@ -765,9 +815,9 @@ 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;
+        // this.scheduleTimeText = this.formatDateRange(scheduleTime);
+        this.queryParams.scheduleStartTime = scheduleTime[0] || null;
+        this.queryParams.scheduleEndTime = scheduleTime[1] || null;
         console.log(this.queryParams.scheduleStartTime)
         console.log(this.queryParams.scheduleEndTime)
       } else {
@@ -779,9 +829,9 @@ export default {
     // 创建时间
     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;
+        // this.createTimeText = this.formatDateRange(createTime);
+        this.queryParams.sTime = createTime[0] || null;
+        this.queryParams.eTime = createTime[1] || null;
       } else {
         this.createTimeText = '';
         this.queryParams.sTime = null;
@@ -792,9 +842,9 @@ 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;
+        // this.updateTimeText = this.formatDateRange(updateTime);
+        this.queryParams.upSTime = updateTime[0] || null;
+        this.queryParams.upETime = updateTime[1] || null;
       } else {
         this.updateTimeText = '';
         this.queryParams.upSTime = null;
@@ -821,16 +871,18 @@ export default {
           this.$message.error('进线时间选择范围不能超过7天');
           // 清空选择
           this.qecCreateTime = [];
-          this.qecCreateTimeText = '';
+          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.qecCreateTimeText = this.formatDateRange(qecCreateTime);
+        this.queryParams.qecSTime = qecCreateTime[0] || null;
+        this.queryParams.qecETime = qecCreateTime[1] || null;
+        console.log(this.queryParams.qecSTime);
+        console.log(this.queryParams.qecETime);
       } else {
         this.qecCreateTimeText = '';
         this.queryParams.qecSTime = null;

src/views/course/courseWatchLog/watchLog.vue

@@ -111,7 +111,7 @@
         </el-autocomplete>
       </el-form-item>
       <!-- 营期时间 -->
-      <el-form-item label="营期时间" prop="scheduleTime">
+      <!-- <el-form-item label="营期时间" prop="scheduleTime">
         <el-input
           v-model="scheduleTimeText"
           placeholder="请选择营期时间"
@@ -125,9 +125,21 @@
           @change="handleScheduleTimeChange"
           :key="scheduleCalendarKey"
         />
+      </el-form-item> -->
+      <el-form-item label="营期时间" prop="scheduleTime">
+        <el-date-picker
+          v-model="scheduleTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="handleScheduleTimeChange"
+        />
       </el-form-item>
       <!-- 创建时间 -->
-      <el-form-item label="创建时间" prop="createTime">
+      <!-- <el-form-item label="创建时间" prop="createTime">
         <el-input
           v-model="createTimeText"
           placeholder="请选择创建时间"
@@ -141,9 +153,21 @@
           @change="createChange"
           :key="createCalendarKey"
         />
+      </el-form-item> -->
+        <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="createTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="createChange"
+        />
       </el-form-item>
       <!-- 最新更新时间 -->
-      <el-form-item label="最新更新时间" prop="updateTime">
+      <!-- <el-form-item label="最新更新时间" prop="updateTime">
         <el-input
           v-model="updateTimeText"
           placeholder="请选择更新时间"
@@ -157,9 +181,21 @@
           @change="updateChange"
           :key="updateCalendarKey"
         />
+      </el-form-item> -->
+        <el-form-item label="最新更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="updateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+           @change="updateChange"
+        />
       </el-form-item>
       <!-- 进线时间 -->
-      <el-form-item label="进线时间" prop="qecCreateTime">
+      <!-- <el-form-item label="进线时间" prop="qecCreateTime">
         <el-input
           v-model="qecCreateTimeText"
           placeholder="请选择进线时间"
@@ -173,6 +209,18 @@
           @change="qecCreateTimeChange"
           :key="qecCalendarKey"
         />
+      </el-form-item> -->
+       <el-form-item label="进线时间" prop="qecCreateTime">
+        <el-date-picker
+          v-model="qecCreateTimeText"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+          @change="qecCreateTimeChange"
+        />
       </el-form-item>
       <el-form-item label="是否为会员" prop="isVip">
         <el-select
@@ -757,13 +805,13 @@ 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;
+        // this.scheduleTimeText = this.formatDateRange(scheduleTime);
+        this.queryParams.scheduleStartTime = scheduleTime[0] || null;
+        this.queryParams.scheduleEndTime = scheduleTime[1] || null;
         console.log(this.queryParams.scheduleStartTime)
         console.log(this.queryParams.scheduleEndTime)
       } else {
-        this.scheduleTimeText = '';
+        this.scheduleTimeText = [];
         this.queryParams.scheduleStartTime = null;
         this.queryParams.scheduleEndTime = null;
       }
@@ -771,11 +819,11 @@ export default {
     // 创建时间
     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;
+        // this.createTimeText = this.formatDateRange(createTime);
+        this.queryParams.sTime = createTime[0] || null;
+        this.queryParams.eTime = createTime[1] || null;
       } else {
-        this.createTimeText = '';
+        this.createTimeText = [];
         this.queryParams.sTime = null;
         this.queryParams.eTime = null;
       }
@@ -784,11 +832,11 @@ 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;
+        // this.updateTimeText = this.formatDateRange(updateTime);
+        this.queryParams.upSTime = updateTime[0] || null;
+        this.queryParams.upETime = updateTime[1] || null;
       } else {
-        this.updateTimeText = '';
+        this.updateTimeText = [];
         this.queryParams.upSTime = null;
         this.queryParams.upETime = null;
       }
@@ -813,7 +861,7 @@ export default {
           this.$message.error('进线时间选择范围不能超过7天');
           // 清空选择
           this.qecCreateTime = [];
-          this.qecCreateTimeText = '';
+          this.qecCreateTimeText = [];
           this.queryParams.qecSTime = null;
           this.queryParams.qecETime = null;
           this.qecCalendarKey++;
@@ -821,10 +869,10 @@ export default {
         }
 
         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] || null;
+        this.queryParams.qecETime = qecCreateTime[1] || null;
       } else {
-        this.qecCreateTimeText = '';
+        this.qecCreateTimeText = [];
         this.queryParams.qecSTime = null;
         this.queryParams.qecETime = null;
       }