【PC端优化】前端优化（时间框控件替换）-王公峰-2020-07-28

src/views/modules/user/alluser.vue

@@ -5,36 +5,48 @@
       <el-form :inline="true"
                :model="dataForm"
                @keyup.enter.native="getDataListSearch()">
-        <el-form-item label="昵称" label-width="52px">
+        <el-form-item label="昵称" label-width="70px">
           <el-input v-model="dataForm.nickname" @keyup.native="btKeyUpnickname"
                     placeholder="请输入"
                     clearable></el-input>
         </el-form-item>
-        <el-form-item label="姓名" label-width="68px">
+        <el-form-item label="真实姓名" label-width="70px">
           <el-input v-model="dataForm.realName" @keyup.native="btKeyUprealName"
                     placeholder="请输入"
                     clearable></el-input>
         </el-form-item>
-        <br/>
         <el-form-item label="手机号">
           <el-input v-model="dataForm.mobile" @keyup.native="btKeyUpmobile"
                     placeholder="请输入"
                     clearable></el-input>
         </el-form-item>
-        <el-form-item label="身份证号">
+        <br/>
+        <el-form-item label="身份证号" label-width="70px">
           <el-input v-model="dataForm.identityNo" @keyup.native="btKeyUpidentityNo"
                     placeholder="请输入"
                     clearable></el-input>
         </el-form-item>
         <!-- <div class="block"> -->
-          <span class="demonstration">注册时间</span>&nbsp;&nbsp;
-          <el-date-picker @change='setRegistTime'
-                          v-model="time"
+          <el-form-item label="注册时间" prop="startTime" label-width="70px">
+          <el-date-picker v-model="dataForm.startTime"
+                          type="date"
+                          :picker-options="pickerBeginDateBefore"
+                          value-format="yyyy-MM-dd"
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px">
+          </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"
-                          type="daterange"
-                          range-separator="至"
-                          start-placeholder="开始日期"
-                          end-placeholder="结束日期"></el-date-picker>&nbsp;
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px">
+          </el-date-picker>
+        </el-form-item>
           <el-form-item>
             <el-button @click="getDataListSearch()" type="success">{{ $t('query') }}</el-button>
           </el-form-item>
@@ -152,6 +164,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()
+          }
+        }
+      },
       deptIdList: [],
       options: [],
       userDetailVisible: false,
@@ -234,10 +262,6 @@ export default {
         }).catch(() => { })
       }
     },
-    setRegistTime () {
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatPartyFlag: function (row, column) {
       return row.partyFlag === '1' ? '是' : row.state === '0' ? '未知' : '否'
     },

src/views/modules/user/fail-authentication.vue

@@ -58,16 +58,28 @@
                     clearable></el-input>
         </el-form-item>
         <div class="block">
-          <span class="demonstration">注册时间</span>&nbsp;&nbsp;
-          <el-date-picker @change='setRegistTime'
-                          v-model="time"
+          <el-form-item label="注册时间" prop="startTime" label-width="90px">
+            <el-date-picker v-model="dataForm.startTime"
+                            type="date"
+                            :picker-options="pickerBeginDateBefore"
                             value-format="yyyy-MM-dd"
-                          type="daterange"
-                          range-separator="至"
-                          start-placeholder="开始日期"
-                          end-placeholder="结束日期"></el-date-picker>&nbsp;
+                            format="yyyy-MM-dd"
+                            placeholder="选择日期时间"
+                            style="width:200px">
+            </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">
+            </el-date-picker>
+          </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+            <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
           </el-form-item>
           <el-form-item>
             <el-button v-if="$hasPermission('epdc:user:export')"
@@ -183,6 +195,22 @@ export default {
         partyFlag: '0', // 是否是党员(0-否，1-是)
         state: '2'
       },
+      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()
+          }
+        }
+      },
       deptIdList: [],
       options: [],
       userDetailVisible: false,
@@ -293,10 +321,6 @@ export default {
         }).catch(() => { })
       }
     },
-    setRegistTime () {
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.state
       if (state === '1') {

src/views/modules/user/pass-authentication.vue

@@ -58,16 +58,28 @@
                     clearable></el-input>
         </el-form-item>
         <div class="block">
-          <span class="demonstration">注册时间</span>&nbsp;&nbsp;
-          <el-date-picker @change='setRegistTime'
-                          v-model="time"
+          <el-form-item label="注册时间" prop="startTime">
+            <el-date-picker v-model="dataForm.startTime"
+                            type="date"
+                            :picker-options="pickerBeginDateBefore"
                             value-format="yyyy-MM-dd"
-                          type="daterange"
-                          range-separator="至"
-                          start-placeholder="开始日期"
-                          end-placeholder="结束日期"></el-date-picker>&nbsp;
+                            format="yyyy-MM-dd"
+                            placeholder="选择日期时间"
+                            style="width:200px">
+            </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">
+            </el-date-picker>
+          </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+            <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
           </el-form-item>
           <el-form-item>
             <el-button v-if="$hasPermission('epdc:user:export')"
@@ -177,6 +189,22 @@ export default {
         partyFlag: '0', // 是否是党员(0-否，1-是)
         state: '3'
       },
+      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()
+          }
+        }
+      },
       deptIdList: [],
       options: [],
       userDetailVisible: false,
@@ -288,10 +316,6 @@ export default {
         }).catch(() => { })
       }
     },
-    setRegistTime () {
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.state
       if (state === '1') {

src/views/modules/user/unauthorized.vue

@@ -59,16 +59,28 @@
         </el-form-item>
         <!-- <div class="block"> -->
         <br>
-        <span class="demonstration">注册时间</span>&nbsp;&nbsp;
-        <el-date-picker @change='setRegistTime'
-                        v-model="time"
+        <el-form-item label="注册时间" prop="startTime">
+          <el-date-picker v-model="dataForm.startTime"
+                          type="date"
+                          :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
-                        type="daterange"
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"></el-date-picker>&nbsp;
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px">
+          </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">
+          </el-date-picker>
+        </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+          <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
           <el-button v-if="$hasPermission('epdc:user:export')"
@@ -181,6 +193,22 @@ export default {
         state: '0',
         nickname: ''
       },
+      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()
+          }
+        }
+      },
       deptIdList: [],
       options: [],
       userDetailVisible: false,
@@ -291,10 +319,6 @@ export default {
         }).catch(() => { })
       }
     },
-    setRegistTime () {
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.state
       if (state === '1') {

src/views/modules/user/wait-authentication.vue

@@ -58,16 +58,28 @@
                     clearable></el-input>
         </el-form-item>
         <br>
-        <span class="demonstration">注册时间</span>&nbsp;&nbsp;
-        <el-date-picker @change='setRegistTime'
-                        v-model="time"
+        <el-form-item label="注册时间" prop="startTime">
+          <el-date-picker v-model="dataForm.startTime"
+                          type="date"
+                          :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
-                        type="daterange"
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"></el-date-picker>&nbsp;
+                          format="yyyy-MM-dd"
+                          placeholder="选择日期时间"
+                          style="width:200px">
+          </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">
+          </el-date-picker>
+        </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+          <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
           <el-button v-if="$hasPermission('epdc:user:export')"
@@ -170,6 +182,22 @@ export default {
         partyFlag: '0', // 是否是党员(0-否，1-是)
         state: '1'
       },
+      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()
+          }
+        }
+      },
       deptIdList: [],
       options: [],
       userDetailVisible: false,
@@ -280,10 +308,6 @@ export default {
         }).catch(() => { })
       }
     },
-    setRegistTime () {
-      this.dataForm.startTime = this.time[0]
-      this.dataForm.endTime = this.time[1]
-    },
     formatState: function (row, column) {
       let state = row.state
       if (state === '1') {