【PC端优化】【活动管理】查询时间控件替换-王公峰-2020-07-30

src/views/modules/heart/actuserclocklog.vue

@@ -38,14 +38,28 @@
           </el-form-item>
         </div>
         <div class="block">
-          <span class="demonstration">注册时间</span>&nbsp;&nbsp;
+          <el-form-item label="注册时间" prop="startTime" label-width="70px">
-          <el-date-picker @change='setRegistTime'
+          <el-date-picker v-model="dataForm.startTime"
-                          v-model="time"
+                          type="date"
+                          :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
-                          type="daterange"
+                          format="yyyy-MM-dd"
-                          range-separator="至"
+                          placeholder="选择日期时间"
-                          start-placeholder="开始日期"
+                          style="width:200px"
-                          end-placeholder="结束日期"></el-date-picker>&nbsp;
+                          @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="至" prop="endTime">
+          <el-date-picker v-model="dataForm.endTime"
+                          type="date"
+                          :picker-options="pickerBeginDateAfter"
+                          value-format="yyyy-MM-dd"
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px"
+                          @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
           <el-form-item>
             <el-button @click="getDataListSearch()" type="primary">{{ $t('query') }}</el-button>
           </el-form-item>
@@ -148,6 +162,22 @@ export default {
         startTime: '',
         endTime: ''
       },
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          let beginDateVal = this.dataForm.endTime
+          if (beginDateVal) {
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
+      pickerBeginDateAfter: {
+        disabledDate: (time) => {
+          let EndDateVal = this.dataForm.startTime
+          if (EndDateVal) {
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
       detailVisible: false,
       time: ''
     }
@@ -174,14 +204,6 @@ export default {
       this.$parent.selectComponent = 'ActUserClockDetail'
       this.$router.push({ path: '/heart-actinfo', query: { id: id, actId: this.dataForm.actId } })
     },
-    setRegistTime () {
-      if (this.time === null) {
-        this.dataForm.startTime = ''
-        this.dataForm.endTime = ''
-      }
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.status
       if (state === '0') {

src/views/modules/heart/actuserrelation.vue

@@ -23,16 +23,26 @@
           </el-form-item>
         </div>
         <div class="block">
-          <span class="demonstration">注册时间</span>&nbsp;&nbsp;
+          <el-form-item label="注册时间" prop="startTime" label-width="90px">
-          <el-date-picker
+          <el-date-picker v-model="dataForm.startTime"
-            @change="setRegistTime"
+                          type="date"
-            v-model="time"
+                          :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
-            type="daterange"
+                          format="yyyy-MM-dd"
-            range-separator="至"
+                          placeholder="选择日期时间"
-            start-placeholder="开始日期"
+                          style="width:200px" @change="changeTime">
-            end-placeholder="结束日期"
+          </el-date-picker>
-          ></el-date-picker>&nbsp;
+        </el-form-item>
+        <el-form-item label="至" prop="endTime">
+          <el-date-picker v-model="dataForm.endTime"
+                          type="date"
+                          :picker-options="pickerBeginDateAfter"
+                          value-format="yyyy-MM-dd"
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px" @change="changeTime">
+          </el-date-picker>
+        </el-form-item>
           <el-form-item>
             <el-button @click="getDataListSearch()" type="primary">{{ $t('query') }}</el-button>
           </el-form-item>
@@ -123,7 +133,6 @@ export default {
         deleteURL: '/heart/actuserrelation',
         deleteIsBatch: true
       },
-
       dataForm: {
         id: '',
         actId: '',
@@ -132,6 +141,22 @@ export default {
         realName: '',
         mobile: ''
       },
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          let beginDateVal = this.dataForm.endTime
+          if (beginDateVal) {
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
+      pickerBeginDateAfter: {
+        disabledDate: (time) => {
+          let EndDateVal = this.dataForm.startTime
+          if (EndDateVal) {
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
       time: '',
       addOrUpdateVisible: false,
       detailVisible: false
@@ -163,14 +188,6 @@ export default {
         this.$refs.actuserrelationDetail.init()
       })
     },
-    setRegistTime () {
-      if (this.time === null) {
-        this.dataForm.startTime = ''
-        this.dataForm.endTime = ''
-      }
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.status