feat: pc端时间筛选组件扩展

apps/bigmember_pc/src/components/selector/SearchTimeScopeSelector.vue

@@ -2,6 +2,7 @@
   <div class="search-time-scope-selector">
     <TimeSelectorContent
       ref="content"
+      :options="options"
       :selectorTime="type"
       selectorType="line"
       :defaultSelectedKey="value"
@@ -22,6 +23,12 @@ export default {
     event: 'input'
   },
   props: {
+    options: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
     value: {
       type: String,
       default: 'thisyear'

apps/bigmember_pc/src/components/selector/TimeSelectorContent.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <div
-      v-if="showExact"
+      v-if="showExactConf"
       class="date-time-container"
       :class="{ active: state.exact === 'exact' }"
     >
@@ -62,6 +62,8 @@ import { DatePicker } from 'element-ui'
 import { dateFormatter } from '@/utils/'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
+import { uniqWith } from 'lodash'
+
 moment.locale('zh-cn')
 const timeSelectMap = {
   default: [
@@ -207,6 +209,24 @@ const timeSelectMap = {
     }
   ]
 }
+
+function getTimeSelectList(map) {
+  let arr = []
+  for (const key in map) {
+    const item = map[key]
+    if (Array.isArray(item)) {
+      arr = arr.concat(item)
+    }
+  }
+  // 数组去重
+  const uniqed = uniqWith(arr, function (a, b) {
+    return a.value === b.value
+  })
+  return uniqed
+}
+
+const timeSelectListAll = getTimeSelectList(timeSelectMap)
+
 export default {
   name: 'time-selector-content',
   components: {
@@ -221,6 +241,10 @@ export default {
       type: String,
       default: 'default' // default/sub/more/bidSearch
     },
+    options: {
+      type: Array,
+      default: () => []
+    },
     defaultSelectedKey: {
       type: String,
       default: 'all' // all/lately30/lately90...
@@ -233,7 +257,7 @@ export default {
   data() {
     return {
       debug: false,
-      timeSelectList: timeSelectMap[this.selectorTime],
+      timeSelectList: [],
       dateTimePickerConf: {
         type: 'date',
         editable: false,
@@ -266,15 +290,40 @@ export default {
     }
   },
   computed: {
+    showExactConf() {
+      // 如果传了options，则默认不展示exact
+      if (this.options.length) {
+        return this.options.includes('exact')
+      } else {
+        return this.showExact
+      }
+    },
     state() {
       return this.getState()
     }
   },
   created() {
+    this.timeSelectList = this.calcTimeSelectList()
     this.calcLastTime()
   },
   methods: {
     dateFormatter,
+    calcTimeSelectList() {
+      let timeSelectList = []
+      if (this.options.length) {
+        timeSelectList = this.options
+          .map((item) => {
+            const conf = timeSelectListAll.find((t) => {
+              return t.value === item
+            })
+            return conf
+          })
+          .filter((v) => !!v)
+      } else {
+        timeSelectList = timeSelectMap[this.selectorTime]
+      }
+      return timeSelectList
+    },
     calcLastTime() {
       if (this.selectorTime === 'more') {
         const renameList = [
@@ -366,6 +415,10 @@ export default {
           timeState.end =
             this.dateTimePickerState.end.getTime() + (durations.day1 - 1000)
         }
+        // 什么都未选择的情况
+        if (!timeState.start && !timeState.end) {
+          timeState.exact = ''
+        }
       }
       return timeState
     },