@kyfe/fms-vue2-components 0.0.2 → 0.0.4

package/src/components/oa-datetime-picker-new/components/date-picker/date-select.vue

@@ -0,0 +1,66 @@
+<template>
+  <van-calendar
+    :default-date="currentDate"
+    :poppable="false"
+    :show-confirm="false"
+    :show-title="false"
+    :show-subtitle="false"
+    :min-date="currentMin"
+    :max-date="currentMax"
+    :lazy-render="false"
+    row-height="50"
+    type="single"
+    @select="handleSelect"
+  />
+</template>
+
+<script>
+import { formatToDate, formatToString } from './utils'
+
+export default {
+  name: 'date-select',
+  props: {
+    defaultValue: {
+      type: [Date, String, Number],
+      default: new Date()
+    },
+    min: [String, Number, Date],
+    max: [String, Number, Date]
+  },
+  data () {
+    return {
+      currentDate: null,
+      currentMin: new Date(),
+      currentMax: new Date()
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      this.currentDate = formatToDate(this.defaultValue)
+      if (!this.min) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMin = (m - 6) < 1 ? new Date(y - 1, 12 + m - 5, 1) : new Date(y, m - 5, 1)
+      } else {
+        this.currentMin = formatToDate(this.min)
+      }
+      if (!this.max) {
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth() + 1
+        this.currentMax = (m + 6) > 12 ? new Date(y + 1, m + 6 - 12, 0) : new Date(y, m + 6, 0)
+      } else {
+        this.currentMax = formatToDate(this.max)
+      }
+      this.handleSelect(this.currentDate)
+    },
+    handleSelect (e) {
+      this.$emit('select', {date: e, str: formatToString(e)})
+    }
+  }
+}
+</script>

package/src/components/oa-datetime-picker-new/components/date-picker/date-week-month.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="ks-date-week-month-picker">
+    <div class="ks-date-week-month-picker__header">
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'date'}"
+          round
+          @click="handleChangeType('date')"
+        >
+          日期选择
+        </van-button>
+      </div>
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'week'}"
+          round
+          @click="handleChangeType('week')"
+        >
+          周选择
+        </van-button>
+      </div>
+      <div class="ks-date-week-month-picker__header-btn">
+        <van-button
+          :class="{'ks-date-week-month-picker__header-btn__action': currentType === 'month'}"
+          round
+          @click="handleChangeType('month')"
+        >
+          月份选择
+        </van-button>
+      </div>
+    </div>
+    <div class="ks-date-week-month-picker__body">
+      <component
+        ref="com"
+        :is="currentCom"
+        v-bind="$attrs"
+        @select="handleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  DateSelect,
+  MonthSelect,
+  WeekSelect
+} from './index'
+import { typeToSelectotMap } from './utils'
+
+export default {
+  name: 'date-week-month',
+  components: {
+    DateSelect,
+    MonthSelect,
+    WeekSelect
+  },
+  data () {
+    return {
+      currentType: 'date'
+    }
+  },
+  computed: {
+    currentCom () {
+      return typeToSelectotMap[this.currentType]
+    }
+  },
+  methods: {
+    init () {
+      this.$refs.com.init()
+    },
+    handleChangeType (e) {
+      this.currentType = e
+      this.$emit('change-type', e)
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    handleSelect (e) {
+      this.$emit('select', e, this.currentType)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-date-week-month-picker {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &__header {
+    height: 62px;
+    display: flex;
+    box-shadow: 0 3px 10px 0 rgba(235,235,235,0.30);
+    &-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .van-button--normal {
+        font-size: 14px;
+        color: #2F2F2F;
+      }
+      .van-button--default {
+        background-color: #F3F4F6;
+        border-color: #F3F4F6;
+      }
+      &__action {
+        background-color: #F1F0FE !important;
+        border-color: rgba(121,114,254,0.30) !important;
+      }
+    }
+  }
+  &__body {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    > .van-calendar, > .van-calendar__body {
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+</style>

package/src/components/oa-datetime-picker-new/components/date-picker/index.js

@@ -0,0 +1,39 @@
+// export { default as DateSelect } from './date-select.vue'
+// export { default as DateRangeSelect } from './date-range-select.vue'
+// export { default as MonthSelect } from './month-select.vue'
+// export { default as MonthRangeSelect } from './month-range-select.vue'
+// export { default as WeekSelect } from './week-select.vue'
+// export { default as QuarterSelect } from './quarter-select.vue'
+// export { default as DateWeekMonth } from './date-week-month.vue'
+// export { default as DatePickerBottom } from './date-picker-bottom.vue'
+// export { default as DatePickerTop } from './date-picker-top.vue'
+// export { default as DatePickerRight } from './date-picker-right.vue'
+// export { default as DatePickerDropdown } from './date-picker-dropdown.vue'
+// export { default } from './date-picker.js'
+
+const dateSelect = () => import( /* webpackChunkName: "date-select" */ './date-select.vue')
+const dateRangeSelect = () => import( /* webpackChunkName: "date-range-select" */ './date-range-select.vue')
+const monthSelect = () => import( /* webpackChunkName: "month-select" */ './month-select.vue')
+const monthRangeSelect = () => import( /* webpackChunkName: "month-range-select" */ './month-range-select.vue')
+
+const weekSelect = () => import( /* webpackChunkName: "week-select" */ './week-select.vue')
+const quarterSelect = () => import( /* webpackChunkName: "quarter-select" */ './quarter-select.vue')
+const dateWeekMonth = () => import( /* webpackChunkName: "date-week-month" */ './date-week-month.vue')
+const datePickerBottom = () => import( /* webpackChunkName: "date-picker-bottom" */ './date-picker-bottom.vue')
+const datePickerTop = () => import( /* webpackChunkName: "date-picker-top" */ './date-picker-top.vue')
+const datePickerRight = () => import( /* webpackChunkName: "date-picker-right" */ './date-picker-right.vue')
+const datePickerDropdown = () => import( /* webpackChunkName: "date-picker-dropdown" */ './date-picker-dropdown.vue')
+
+export { default } from './date-picker.js'
+export const DateSelect = dateSelect
+export const DateRangeSelect = dateRangeSelect
+export const MonthSelect = monthSelect
+export const MonthRangeSelect = monthRangeSelect
+export const WeekSelect = weekSelect
+export const QuarterSelect = quarterSelect
+export const DateWeekMonth = dateWeekMonth
+export const DatePickerBottom = datePickerBottom
+export const DatePickerTop = datePickerTop
+export const DatePickerRight = datePickerRight
+export const DatePickerDropdown = datePickerDropdown
+

package/src/components/oa-datetime-picker-new/components/date-picker/mixin.js

@@ -0,0 +1,85 @@
+import { typeToSelectotMap } from './utils'
+import {
+  DateSelect,
+  DateRangeSelect,
+  MonthSelect,
+  MonthRangeSelect,
+  WeekSelect,
+  QuarterSelect,
+  DateWeekMonth
+} from './index'
+
+export default {
+  components: {
+    DateSelect,
+    DateRangeSelect,
+    MonthSelect,
+    MonthRangeSelect,
+    WeekSelect,
+    QuarterSelect,
+    DateWeekMonth
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'date'
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      currentCom: null,
+      currentSelectedValue: null,
+      startText: '',
+      endText: ''
+    }
+  },
+  methods: {
+    init () {
+      this.currentCom = typeToSelectotMap[this.type]
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.$refs.selector && this.$refs.selector.init()
+        })
+      }, 100)
+    },
+    handleOpenPopup () {
+      this.init()
+    },
+    handleClosePopup (e) {
+      this.$emit('input', e)
+      this.currentCom = null
+      this.currentSelectedValue = null
+      this.startText = ''
+      this.endText = ''
+    },
+    handleSelect (e, type = this.type) {
+      this.$emit('select', e)
+      this.currentSelectedValue = e
+      if (this.type === 'dateweekmonth') {
+        this.dateweekmonthType = type
+      }
+      if (type === 'week') {
+        this.startText = `${e.year}年 ${e.num < 10 ? '0' + e.num : e.num}周(${e.week.startDayStr}~${e.week.endDayStr})`
+      } else if (type === 'quarter') {
+        this.startText = `${e.year}年 ${e.cn}`
+      } else if (type === 'month' || type === 'date') {
+        this.startText = e.str
+      } else if (type === 'monthrange' || type === 'daterange') {
+        this.startText = e.str[0]
+        this.endText = e.str[1]
+      }
+    },
+    handleConfirm () {
+      this.$emit('confirm', this.currentSelectedValue)
+      // this.handleClosePopup(false)
+    }
+  }
+}

package/src/components/oa-datetime-picker-new/components/date-picker/month-range-select.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="van-calendar__body"
+       ref="body">
+    <div class="van-calendar__month"
+         v-for="y of years"
+         :key="y">
+      <div class="van-calendar__month-title">{{y}}年</div>
+      <div class="van-calendar__days">
+        <div class="van-calendar__day ks-month__day"
+             v-for="m of months"
+             :key="m"
+             :class="{
+            'van-calendar__day--disabled': (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax)
+          }"
+             @click="handleSelect(y, m, (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax))">
+          <div :class="{
+              'van-calendar__day--start': +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd !== +new Date(`${y}/${m}/1`),
+              'van-calendar__day--end': +currentEnd === +new Date(`${y}/${m}/1`) && +currentStart !== +new Date(`${y}/${m}/1`),
+              'van-calendar__day--middle': +currentStart < +new Date(`${y}/${m}/1`) && +currentEnd > +new Date(`${y}/${m}/1`),
+              'van-calendar__day--start-end': +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd === +new Date(`${y}/${m}/1`)
+            }">
+            {{m}}月
+            <div v-if="+currentStart === +new Date(`${y}/${m}/1`) || +currentEnd === +new Date(`${y}/${m}/1`)"
+                 class="van-calendar__bottom-info">
+              {{
+                +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd === +new Date(`${y}/${m}/1`)
+                  ? '开始/结束'
+                  : +currentStart === +new Date(`${y}/${m}/1`) && +currentEnd !== +new Date(`${y}/${m}/1`)
+                  ? '开始'
+                  : '结束'
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getRangeYears, foramtToMonth, formatToString } from './utils'
+
+  export default {
+    name: 'month-range-select',
+    props: {
+      defaultValue: {
+        type: Array,
+        default: () => ([])
+      },
+      yearRange: {
+        type: Array,
+        default: () => [new Date().getFullYear() - 5, new Date().getFullYear()],
+      },
+      horizontal: {
+        type: Boolean,
+        default: false
+      },
+      min: [String, Number, Date],
+      max: [String, Number, Date]
+    },
+    data () {
+      return {
+        years: getRangeYears(this.yearRange),
+        months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        currentStart: null,
+        currentEnd: null,
+        currentMin: null,
+        currentMax: null
+      }
+    },
+    methods: {
+      init () {
+        this.currentMin = this.min ? +foramtToMonth(this.min) : null
+        this.currentMax = this.max ? +foramtToMonth(this.max) : null
+        if (this.defaultValue.length === 2) {
+          let _start = foramtToMonth(this.defaultValue[0])
+          let _end = foramtToMonth(this.defaultValue[1])
+          if (_start && _end) {
+            this.currentStart = _start
+            let monthStr = formatToString(_end, 'month')
+            let arr = monthStr.split('/')
+            this.handleSelect(arr[0], arr[1], false)
+          } else if (_start && !_end) {
+            let monthStr = formatToString(_start, 'month')
+            let arr = monthStr.split('/')
+            this.handleSelect(arr[0], arr[1], false)
+          }
+          this.scrollInto()
+        }
+      },
+      scrollInto () {
+        setTimeout(() => {
+          if (this.currentMonth) {
+            let top = this.$el.querySelector('.van-calendar__day--start')
+            this.$refs.body && (this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0)
+          }
+        }, 240)
+      },
+      handleSelect (y, m, disabled) {
+        if (!disabled) {
+          let _month = foramtToMonth(`${y}/${m}`)
+          if (this.currentStart && !this.currentEnd && +this.currentStart <= +_month) {
+            this.currentEnd = _month
+            this.$emit('select', {
+              date: [this.currentStart, this.currentEnd],
+              str: [formatToString(this.currentStart, 'month'), formatToString(this.currentEnd, 'month')]
+            })
+          } else {
+            this.currentEnd = null
+            this.currentStart = _month
+            this.$emit('select', {
+              date: [this.currentStart, null],
+              str: [formatToString(this.currentStart, 'month'), '']
+            })
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ks-month__day {
+    width: 16.666%;
+    height: 50px;
+  }
+</style>

package/src/components/oa-datetime-picker-new/components/date-picker/month-select.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="van-calendar__body"
+       ref="body">
+    <div class="van-calendar__month"
+         v-for="y of years"
+         :key="y">
+      <div class="van-calendar__month-title">{{ y }}年</div>
+      <div class="van-calendar__days">
+        <div class="van-calendar__day ks-month__day"
+             v-for="m of months"
+             :class="{'van-calendar__day--disabled': (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax)}"
+             :key="m"
+             @click="handleSelect(y, m, (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax))">
+          <div :class="{'van-calendar__selected-day': +currentMonth === +new Date(`${y}/${m}/1`)}">{{ m }}月</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { getRangeYears, foramtToMonth, formatToString } from './utils'
+
+  export default {
+    name: "month-select",
+    props: {
+      defaultValue: {
+        type: [Date, String, Number],
+        default: new Date()
+      },
+      yearRange: {
+        type: Array,
+        default: () => [new Date().getFullYear() - 5, new Date().getFullYear()],
+      },
+      horizontal: {
+        type: Boolean,
+        default: false
+      },
+      min: [String, Number, Date],
+      max: [String, Number, Date]
+    },
+    data () {
+      return {
+        years: getRangeYears(this.yearRange),
+        months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        currentMonth: null,
+        currentMin: null,
+        currentMax: null
+      }
+    },
+    methods: {
+      init () {
+        this.currentMonth = foramtToMonth(this.defaultValue)
+        console.log('this.currentMonth111', this.currentMonth)
+        this.currentMin = this.min ? +foramtToMonth(this.min) : null
+        this.currentMax = this.max ? +foramtToMonth(this.max) : null
+        let monthStr = formatToString(this.currentMonth, 'month')
+        let arr = monthStr.split('/')
+        this.handleSelect(arr[0], arr[1], false)
+        this.scrollInto()
+      },
+      scrollInto () {
+        setTimeout(() => {
+          if (this.currentMonth) {
+            let top = this.$el.querySelector('.van-calendar__selected-day')
+            this.$refs.body && (this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0)
+          }
+        }, 240)
+      },
+      handleSelect (y, m, disabled) {
+        if (!disabled) {
+          this.currentMonth = foramtToMonth(`${y}/${m}`)
+          this.$emit("select", { date: this.currentMonth, str: formatToString(this.currentMonth, 'month') })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ks-month__day {
+    width: 16.666%;
+    height: 50px;
+    // .van-calendar__day--start::after, .van-calendar__day--end::after {
+    //   width:  !important;
+    // }
+  }
+</style>

package/src/components/oa-datetime-picker-new/components/date-picker/quarter-select.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="van-calendar__body"
+       ref="body">
+    <div class="van-calendar__month"
+         v-for="y of years"
+         :key="y">
+      <div class="van-calendar__month-title">{{ y }}年</div>
+      <div class="van-calendar__days">
+        <div class="van-calendar__day ks-quarter__day"
+             v-for="(value, key) of cnQuarters"
+             :key="key"
+             @click="handleSelect(y, key)">
+          <div :class="{'ks-quarter__selected-day': String(y) === String(currentYear) && String(key) === String(currentQuarter)}">
+            {{value}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getRangeYears } from './utils'
+
+  export default {
+    name: 'quarter-select',
+    props: {
+      defaultValue: {
+        type: String,
+        default: (function () {
+          let _quarters = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4]
+          let _date = new Date()
+          let y = _date.getFullYear()
+          let m = _date.getMonth()
+          return `${y}-${_quarters[m]}`
+        }())
+      },
+      yearRange: {
+        type: Array,
+        default: () => ([new Date().getFullYear() - 2, new Date().getFullYear()])
+      },
+      horizontal: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        years: getRangeYears(this.yearRange),
+        cnQuarters: {
+          '1': '一季度',
+          '2': '二季度',
+          '3': '三季度',
+          '4': '四季度'
+        },
+        currentYear: null,
+        currentQuarter: null
+      }
+    },
+    methods: {
+      init () {
+        let arr = this.defaultValue.split('-')
+        this.handleSelect(arr[0], arr[1])
+        this.scrollInto()
+      },
+      scrollInto () {
+        setTimeout(() => {
+          let top = this.$el.querySelector('.ks-quarte__selected-day')
+          this.$refs.body && (this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0)
+        }, 240)
+      },
+      handleSelect (y, q) {
+        this.currentYear = y
+        this.currentQuarter = q
+        this.$emit('select', { year: y, quarter: q, cn: this.cnQuarters[q] })
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ks-quarter__day {
+    width: 25%;
+    height: 74px;
+  }
+  .ks-quarter__selected-day {
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    background-color: #7972fe;
+    color: #fff;
+    padding: 0 16px;
+    border-radius: 999px;
+  }
+</style>