feat:增加场景搜索的时间过滤

pc/src/page/manage/temp/components/filter.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="filterForm">
+    <div class="close-btn" @click="hide">
+      <h-icon type="guanbi" />
+    </div>
+    <div class="form-content">
+      <div class="select-w">
+        <p>相机类型</p>
+        <select class="city" v-model="form.sceneSource" @change="handleChange">
+          <option :value="item.id" v-for="(item) in sceneSources" :key="item.id">{{
+            item.name
+          }}</option>
+        </select>
+        <div class="sanjiao"></div>
+      </div>
+      <div class="select-w">
+        <p>场景类型</p>
+        <select class="city" v-model="form.sceneType" @change="handleChange">
+          <option :value="item.id" v-for="item in sceneTypes" :key="item.id">{{
+            item.name
+          }}</option>
+        </select>
+        <div class="sanjiao"></div>
+      </div>
+      <div class="date-w">
+        <p>拍摄时间</p>
+        <div class="date-range-w">
+          <date-pick v-model="startTime" placeholder="开始时间" :isDateDisabled="isAfter" :weekdays="weekdays" :months="months"></date-pick>
+          <span>至</span>
+          <date-pick class="endTime" v-model="endTime" placeholder="结束时间" :isDateDisabled="isBefore" :weekdays="weekdays" :months="months"></date-pick>
+        </div>
+      </div>
+    </div>
+    <div class="form-ctrls">
+      <div class="button" @click="resetForm">重置</div>
+      <div class="button primary-btn" @click="submitForm">确定</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DatePick from '@/components/common/vueDate/vueDatePick'
+import { TYPES } from '@/config/scene'
+export default {
+  props: {
+    form: {
+      type: Object,
+      default () {
+        return {
+          sceneType: '',
+          sceneSource: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      sceneSources: [
+        {
+          name: '全部',
+          id: ''
+        },
+        {
+          name: '四维看看Pro',
+          id: 1
+        },
+        {
+          name: '四维看看Lite',
+          id: 2
+        },
+      ],
+      sceneTypes: TYPES,
+      startTime: '',
+      endTime: '',
+      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
+      months: ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+    }
+  },
+  components: {
+    DatePick
+  },
+  methods: {
+    isBefore (date) {
+      const startDate = new Date(this.startTime)
+      return date < startDate
+    },
+    isAfter (date) {
+      const endDate = new Date(this.endTime)
+      return date > endDate
+    },
+    handleChange () {},
+    resetForm () {
+      this.startTime = ''
+      this.endTime = ''
+      this.$emit('reset')
+    },
+    submitForm () {
+      this.form.startTime = this.startTime ? new Date(this.startTime).getTime() : ''
+      this.form.endTime = this.endTime ? new Date(this.endTime).getTime() : ''
+      this.$emit('submit')
+    },
+    hide () {
+      this.$emit('hide')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.filterForm {
+  width: 720px;
+  height: 188px;
+  position: relative;
+  border-radius: 4px;
+  background: #FFFFFF;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  padding: 50px 0 20px;
+  line-height: 1;
+  z-index: 2;
+  .close-btn {
+    position: absolute;
+    right: 18px;
+    top: 15px;
+    font-size: 18px;
+    color: #909090;
+    line-height: 1;
+    cursor: pointer;
+    .iconfont {
+      font-size: 20px;
+    }
+  }
+  .form-content {
+    display: flex;
+    padding: 0 20px;
+    text-align: left;
+    font-size: 14px;
+    color: #202020;
+    p {
+      margin-bottom: 7px;
+    }
+    
+    .select-w {
+      position: relative;
+      select {
+      width: 155px;
+      height: 40px;
+      line-height: 40px;
+      border: 1px solid #909090;
+      padding: 0 20px;
+      margin-right: 20px;
+      font-size: 14px;
+      appearance: none;
+      background: transparent;
+    }
+    }
+    .sanjiao {
+      display: inline-block;
+      position: absolute;
+      right: 40px;
+      bottom: 0;
+      line-height: 1;
+      z-index: -1;
+      &::before {
+        content: "";
+        border: 10px solid transparent;
+        border-top-color: #909090;
+        border-left-width: 7px;
+        border-right-width: 7px;
+        z-index: 1;
+      }
+    }
+    .date-w {
+      flex: 1;
+    }
+    .date-range-w {
+      border: 1px solid #909090;
+      display: flex;
+      align-items: center;
+      width: 330px;
+      padding: 0 20px 0 51px;
+      background: url(~@/assets/images/refactor/usercenter/date-icon.png) no-repeat 15px center;
+      background-size: 16px 16px;
+      .vdpComponent {
+        flex: 1;
+      }
+      input {
+        height: 38px;
+        line-height: 38px;
+        border: none;
+        padding-right: 0;
+        width: 122px;
+      }
+      .endTime {
+        input {
+          text-align: right;
+        }
+      }
+    }
+  }
+  .form-ctrls {
+    padding: 20px 20px 0;
+    .button {
+      height: 32px;
+      line-height: 32px;
+      background: #ebebeb;
+      color: #202020;
+      width: 104px;
+      text-align: center;
+      padding: 0;
+      font-size: 14px;
+      cursor: pointer;
+      margin-left: 20px;
+      &.primary-btn {
+        background: #1FE4DC;
+      }
+    }
+  }
+}
+
+</style>

pc/src/page/manage/temp/scene.vue

@@ -24,9 +24,11 @@
       </div>
 
       <div class="search-w">
-        <div>
-          <span>拍摄时间</span>
-          <vueDate />
+        <div class="date-w">
+          <span class="label">拍摄时间</span>
+          <vueDate v-model="startTime" placeholder="开始时间" :isDateDisabled="isAfter" :weekdays="weekdays" :months="months"></vueDate>
+          <span>-</span>
+          <vueDate v-model="endTime" placeholder="结束时间" :isDateDisabled="isAfter" :weekdays="weekdays" :months="months"></vueDate>
         </div>
         <div class="tab-search">
           <input
@@ -35,8 +37,10 @@
             type="text"
             :placeholder="langScenes.placeholder.searchID"
           />
-          <i class="iconfont icon-sousuo" @click="gotoSearch(searchKey)"></i>
+          
+          <!-- <i class="iconfont icon-sousuo" @click="gotoSearch(searchKey)"></i> -->
         </div>
+        <div class="search-btn" @click="gotoSearch(searchKey)">查询</div>
       </div>
     </div>
 
@@ -233,7 +237,11 @@ export default {
           name: this.$t('manage.sceneAdmin.collaborativeScene'),
           id: 2
         }
-      ]
+      ],
+      startTime: '',
+      endTime: '',
+      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
+      months: ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
     }
   },
   watch: {
@@ -623,6 +631,10 @@ $font-color: #2d2d2d;
     .search-w {
       position: absolute;
       top: 0;
+      right: 40px;
+      top: 38px;
+      display: flex;
+      font-size: 12px;
     }
     .tab-search{
         position: relative;
@@ -1100,3 +1112,35 @@ $font-color: #2d2d2d;
   }
 }
 </style>
+
+<style lang="less">
+.scene-layout {
+  .search-w {
+    input {
+      line-height: 28px;
+      border: 1px solid #ccc;
+    }
+    .date-w {
+      margin-right: 20px;
+      .label {
+        margin-right: 10px;
+        font-size: 14px;
+      }
+    }
+    .vdpWithInput {
+      input {
+        width: 140px;
+        padding: 0 10px;
+      }
+    }
+    .search-btn {
+      padding: 0 20px;
+      line-height: 28px;
+      background: #1fe4dc;
+      margin-left: 20px;
+      cursor: pointer;
+      // font-weight: bold;
+    }
+  }
+}
+</style>