@kyfe/fms-vue2-components 0.0.2 → 0.0.4

package/src/components/datetime-popup/date-picker.js

@@ -0,0 +1,217 @@
+import { isDate, getMonthEndDay, padZero, transform } from './utils'
+import { sharedProps, TimePickerMixin } from './mixin'
+import dayjs from 'dayjs'
+
+const currentYear = dayjs().year()
+const currentMonth = dayjs().month() + 1
+
+export default {
+  mixins: [TimePickerMixin],
+  props: {
+    ...sharedProps,
+    type: {
+      type: String,
+      default: 'datetime'
+    },
+    minDate: {
+      type: Date,
+      default: () => new Date(currentYear - 10, 0, 1)
+    },
+    maxDate: {
+      type: Date,
+      default: () => new Date(currentYear + 10, 11, 31)
+    }
+  },
+  watch: {
+    filter: 'updateInnerValue',
+    minDate: 'updateInnerValue',
+    maxDate: 'updateInnerValue',
+    value (val) {
+      val = this.formatValue(val)
+      if (val.valueOf() !== this.innerValue.valueOf()) {
+        this.innerValue = val
+      }
+    }
+  },
+
+  computed: {
+    ranges () {
+      const {
+        maxYear,
+        maxDate,
+        maxMonth,
+        maxHour,
+        maxMinute
+      } = this.getBoundary('max', this.innerValue)
+
+      const {
+        minYear,
+        minDate,
+        minMonth,
+        minHour,
+        minMinute
+      } = this.getBoundary('min', this.innerValue)
+
+      let dataRange = [`${minYear}-${padZero(minMonth)}-${padZero(minDate)}`, `${maxYear}-${padZero(maxMonth)}-${padZero(maxDate)}`]
+
+      let result = [
+        {
+          type: 'year',
+          range: [minYear, maxYear]
+        },
+        {
+          type: 'month',
+          range: [minMonth, maxMonth]
+        },
+        {
+          type: 'day',
+          range: [minDate, maxDate]
+        },
+        {
+          type: 'hour',
+          range: [minHour, maxHour]
+        },
+        {
+          type: 'minute',
+          range: [minMinute, maxMinute]
+        }
+      ]
+      if (this.type === 'datetime') {
+        result = [{ type: 'week', range: [...dataRange] }, ...result.splice(3, 2)]
+      } else if (this.type === 'date') {
+        result.splice(3, 2)
+      } else if (this.type === 'year-month') {
+        result.splice(2, 3)
+      }
+      console.log('ranges', result)
+      return result
+    }
+  },
+  methods: {
+    formatValue (value) {
+      if (!isDate(value)) {
+        value = this.minDate
+      }
+      let minDate = this.minDate.getTime()
+      let maxDate = this.maxDate.getTime()
+
+      value = Math.max(value, minDate)
+      value = Math.min(value, maxDate)
+      return dayjs(value).toDate()
+    },
+    getBoundary (type, value) {
+      let boundary = this[`${type}Date`]
+      if (this.type === 'datetime') {
+        let lastMonth = boundary ? boundary.getTime() : new Date(currentYear, currentMonth - 2, 1).getTime()
+        let nextMonth = boundary ? boundary.getTime() : new Date(currentYear, currentMonth, 31).getTime()
+        boundary = type === 'max' ? dayjs(nextMonth).toDate() : dayjs(lastMonth).toDate()
+      }
+      const year = boundary.getFullYear()
+      let month = 1
+      let date = 1
+      let hour = 0
+      let minute = 0
+
+      if (type === 'max') {
+        month = 12
+        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
+        hour = 23
+        minute = 59
+      }
+
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1
+        if (value.getMonth() + 1 === month) {
+          date = boundary.getDate()
+          if (value.getDate() === date) {
+            hour = boundary.getHours()
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes()
+            }
+          }
+        }
+      }
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute
+      }
+    },
+    updateInnerValue () {
+      const indexes = this.getPicker().getIndexes()
+
+      const getValue = index => {
+        const { originValues } = this.originColumns[index]
+        return originValues[indexes[index]]
+      }
+
+      const year = getValue(0)
+      const month = getValue(1)
+      const maxDate = getMonthEndDay(year, month)
+
+      let value
+      let date
+      let yearMonthDay = getValue(0)
+      console.log('updateInnerValue', indexes, yearMonthDay)
+      if (this.type === 'year-month') {
+        date = 1
+      } else {
+        date = getValue(2)
+      }
+
+      date = date > maxDate ? maxDate : date;
+      let hour = 0
+      let minute = 0
+
+      if (this.type === 'datetime') {
+        hour = getValue(1)
+        minute = getValue(2)
+        value = new Date(`${yearMonthDay} ${hour}:${minute}:00`.replace(/-/g, '/'))
+      } else {
+        value = new Date(year, month - 1, date, hour, minute)
+      }
+      this.innerValue = this.formatValue(value)
+    },
+    onChange(picker) {
+      this.updateInnerValue()
+
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$emit('change', picker)
+        })
+      })
+    },
+    updateColumnValue () {
+      const value = this.innerValue
+      const { formatter } = this
+
+
+      let values = [
+        formatter('year', `${value.getFullYear()}`),
+        formatter('month', padZero(value.getMonth() + 1)),
+        formatter('day', padZero(value.getDate()))
+      ]
+
+
+      if (this.type === 'datetime') {
+        values = [
+          formatter('yearMonthDay', transform(`${padZero(value.getFullYear())}-${padZero(value.getMonth() + 1)}-${padZero(value.getDate())}`)),
+          formatter('hour', padZero(value.getHours())),
+          formatter('minute', padZero(value.getMinutes()))
+        ]
+        console.log('updateColumnValue', values)
+      }
+
+      if (this.type === 'year-month') {
+        values = values.slice(0, 2)
+      }
+
+      this.$nextTick(() => {
+        this.getPicker() && this.getPicker().setValues && this.getPicker().setValues(values)
+      })
+    },
+
+  }
+}

package/src/components/datetime-popup/index.js

@@ -0,0 +1,37 @@
+import TimePicker from './time-picker.js'
+import DatePicker from './date-picker.js'
+export default {
+  props: {
+    ...TimePicker.props,
+    ...DatePicker.props,
+  },
+
+  methods: {
+    getPicker () {
+      return this.$refs.root.getPicker()
+    },
+    getInnerValue () {
+      return this.$refs.root.innerValue
+    }
+  },
+
+  render (h) {
+    return this.type === 'time' ? (
+      <TimePicker
+        ref="root"
+        {...{
+          props: this.$props,
+          on: this.$listeners
+        }}
+      />
+    ) : (
+      <DatePicker
+        ref="root"
+        {...{
+          props: this.$props,
+          on: this.$listeners
+        }}
+      />
+    )
+  }
+}

package/src/components/datetime-popup/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="ksui-datatime">
+    <van-popup :value="value" position="bottom" @input="onInput">
+      <div class="ksui-datatime-header">
+        <span>{{ currentDate | date }}</span>
+        <div class="icon-box" @click="onClose">
+          <van-icon name="cross" />
+        </div>
+      </div>
+      <datetime-picker
+        ref="datetimePicker"
+        v-model="currentDate"
+        v-bind="$attrs"
+        :showToolbar="false"
+        @change="onChange">
+      </datetime-picker>
+      <div class="ksui-datatime-footer">
+        <van-button
+          type="primary"
+          @click="onConfirm"
+          size="large">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import DatetimePicker from './index.js'
+
+  export default {
+    components: {
+      DatetimePicker
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: () => false
+      },
+      defaultValue: {
+        type: [Date, String, Number],
+        default: new Date()
+      }
+    },
+    data () {
+      return {
+        currentDate: this.defaultValue
+      }
+    },
+    created () {
+      console.log('currentDate', this.currentDate)
+    },
+    methods: {
+      onInput () {
+        this.$emit('input', false)
+      },
+      onClose () {
+        this.$emit('input', false)
+      },
+      onConfirm () {
+        let innerValue = this.$refs.datetimePicker.getInnerValue()
+        this.$emit('input', false)
+        this.$emit('confirm', innerValue)
+      },
+      onChange () {
+        let picker = this.$refs.datetimePicker.getPicker()
+        this.$emit('change', picker)
+      }
+    }
+}
+</script>
+
+<style lang="less">
+  .ksui-datatime {
+    &-header {
+      height: 54px;
+      font-weight: 500;
+      display: flex;
+      flex-shrink: 0;
+      padding: 0 16px 0 20px;
+      font-size: 18px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #EDEDED;
+    }
+    &-footer {
+      padding: 16px;
+      position: relative;
+      // &::after {
+      //   position: absolute;
+      //   box-sizing: border-box;
+      //   content: ' ';
+      //   pointer-events: none;
+      //   right: 0;
+      //   top: 0;
+      //   left: 0;
+      //   border-top: 1px solid #EDEDED;
+      //   transform: scaleY(0.5);
+      // }
+    }
+    .van-picker {
+      padding: 0 20px;
+    }
+    .van-picker__frame {
+      background: rgba(121,114,254,0.10);
+      border-radius: 8px;
+    }
+    .van-hairline-unset--top-bottom:after {
+      border: 0;
+    }
+  }
+</style>

package/src/components/datetime-popup/mixin.js

@@ -0,0 +1,125 @@
+import { times, padZero, getAllDate, setConent } from './utils'
+
+export const pickerProps = {
+  title: String,
+  loading: Boolean,
+  readonly: Boolean,
+  allowHtml: Boolean,
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  cancelButtonText: String,
+  confirmButtonText: String,
+  itemHeight: {
+    type: [Number, String],
+    default: 44,
+  },
+  visibleItemCount: {
+    type: [Number, String],
+    default: 6,
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1000,
+  }
+}
+
+export const sharedProps = {
+  ...pickerProps,
+  value: null,
+  filter: Function,
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  formatter: {
+    type: Function,
+    default: (type, value) => value,
+  },
+}
+
+export const TimePickerMixin = {
+  data () {
+    return {
+      innerValue: this.formatValue(this.value)
+    }
+  },
+  computed: {
+    originColumns () {
+      return this.ranges.map(({ type, range }) => {
+        let values = []
+        if (type === 'week') {
+          values = getAllDate(range[0], range[1])
+        } else {
+          values = times(range[1] - range[0] + 1, (index) =>
+            padZero(range[0] + index)
+          )
+        }
+
+        if (this.filter) {
+          values = this.filter(type, values)
+        }
+        let obj = {
+          type,
+          values: type === 'week' ? setConent(values) : values,
+          originValues: values
+        }
+        // 给年月日 周 时分的选择器添加一个class名
+        if (type === 'week') {
+          obj.className = 'flow-fms-datetime-week'
+        }
+        return obj
+      })
+    },
+    columns () {
+      return this.originColumns.map(column => ({ values: column.values.map(value => this.formatter(column.type, value)), className: column.className }))
+    }
+  },
+  watch: {
+    columns: 'updateColumnValue',
+    innerValue (val) {
+      this.$emit('input', val)
+    }
+  },
+
+  mounted() {
+    this.updateColumnValue()
+
+    this.$nextTick(() => {
+      this.updateInnerValue()
+    })
+  },
+
+  methods: {
+    getPicker () {
+      return this.$refs.picker
+    },
+    onConfirm () {
+      this.$emit('confirm', this.innerValue)
+    },
+    onCancel () {
+      this.$emit('cancel')
+    }
+  },
+
+  render (h) {
+    const props = {};
+    Object.keys(pickerProps).forEach(key => {
+      props[key] = this[key]
+    })
+
+    console.log('columns', this.columns)
+
+    return (
+      <van-picker
+        ref="picker"
+        columns={this.columns}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={this.onCancel}
+        {...{ props }}
+      />
+    )
+  }
+}

package/src/components/datetime-popup/time-picker.js

@@ -0,0 +1,102 @@
+import { sharedProps, TimePickerMixin } from './mixin'
+import { range, padZero } from './utils'
+
+export default {
+  mixins: [TimePickerMixin],
+  props: {
+    ...sharedProps,
+    minHour: {
+      type: [Number, String],
+      default: 0
+    },
+    maxHour: {
+      type: [Number, String],
+      default: 23
+    },
+    minMinute: {
+      type: [Number, String],
+      default: 0
+    },
+    maxMinute: {
+      type: [Number, String],
+      default: 59
+    }
+  },
+
+  computed: {
+    ranges () {
+      return [
+        {
+          type: 'hour',
+          range: [+this.minHour, +this.maxHour]
+        },
+        {
+          type: 'minute',
+          range: [+this.minMinute, +this.maxMinute]
+        },
+      ];
+    },
+  },
+
+  watch: {
+    filter: 'updateInnerValue',
+    minHour: 'updateInnerValue',
+    maxHour: 'updateInnerValue',
+    minMinute: 'updateInnerValue',
+    maxMinute: 'updateInnerValue',
+
+    value(val) {
+      val = this.formatValue(val)
+
+      if (val !== this.innerValue) {
+        this.innerValue = val
+        this.updateColumnValue()
+      }
+    }
+  },
+
+  methods: {
+    formatValue(value) {
+      if (!value) {
+        value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`
+      }
+
+      let [hour, minute] = value.split(':')
+      hour = padZero(range(hour, this.minHour, this.maxHour))
+      minute = padZero(range(minute, this.minMinute, this.maxMinute))
+
+      return `${hour}:${minute}`
+    },
+
+    updateInnerValue() {
+      const [hourIndex, minuteIndex] = this.getPicker().getIndexes()
+      const [hourColumn, minuteColumn] = this.originColumns
+
+      const hour = hourColumn.values[hourIndex] || hourColumn.values[0]
+      const minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0]
+
+      this.innerValue = this.formatValue(`${hour}:${minute}`)
+      this.updateColumnValue()
+    },
+
+    onChange(picker) {
+      this.updateInnerValue()
+
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$emit('change', picker)
+        })
+      })
+    },
+
+    updateColumnValue() {
+      const { formatter } = this
+      const pair = this.innerValue.split(':')
+      const values = [formatter('hour', pair[0]), formatter('minute', pair[1])]
+
+      this.$nextTick(() => {
+        this.getPicker() && this.getPicker().setValues && this.getPicker().setValues(values)
+      })
+    }
+  }
+}

package/src/components/datetime-popup/utils.js

@@ -0,0 +1,124 @@
+import dayjs from 'dayjs'
+
+export function isDate (val) {
+  return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime())
+}
+
+export function getMonthEndDay (year, month) {
+  return 32 - new Date(year, month - 1, 32).getDate()
+}
+
+export function padZero (num, targetLength = 2) {
+  let str = num + ''
+
+  while (str.length < targetLength) {
+    str = '0' + str
+  }
+
+  return str;
+}
+
+export function times (n, iteratee) {
+  let index = -1
+  const result = Array(n)
+
+  while (++index < n) {
+    result[index] = iteratee(index)
+  }
+
+  return result
+}
+
+export function getAllDate (min, max) {
+  min = min.replace(/-/g, '/')
+  max = max.replace(/-/g, '/')
+  let minDate = dayjs(min).toDate()
+  let maxDate = dayjs(max).toDate()
+  let result = [min]
+  while (maxDate.getTime() - minDate.getTime() > 0) {
+    minDate.setDate(minDate.getDate() + 1)
+    let temp = dayjs(minDate).toDate()
+    let cur = `${padZero(temp.getFullYear())}-${padZero(temp.getMonth() + 1)}-${padZero(temp.getDate())}`
+    // let obj = dateMap.find(v => v.date === cur)
+    // obj ? cur = obj.day : cur
+    result.push(cur)
+  }
+  return result
+}
+
+export const getCurrentWeek = (date) => {
+  let week = dayjs(date).day()
+  switch(week) {
+    case 1:
+      week = '周一'
+      break
+    case 2:
+      week = '周二'
+      break
+    case 3:
+      week = '周三'
+      break
+    case 4:
+      week = '周四'
+      break
+    case 5:
+      week = '周五'
+      break
+    case 6:
+      week = '周六'
+      break
+    case 0:
+      week = '周日'
+      break
+    }
+  return week
+}
+
+export const dateMap = (() => {
+  const oneday = 1000 * 60 * 60 * 24 // 代表一天的毫秒数
+  const getTime = (times = 0) => {
+    let date = dayjs(dayjs().valueOf() + oneday * times).toDate()
+    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`
+  }
+
+  return [
+    {
+      day: '前天',
+      date: getTime(-2)
+    },
+    {
+      day: '昨天',
+      date: getTime(-1)
+    },
+    {
+      day: '今天',
+      date: getTime()
+    },
+    {
+      day: '明天',
+      date: getTime(1)
+    },
+    {
+      day: '后天',
+      date: getTime(2)
+    }
+  ]
+})()
+
+export const transform = (value) => {
+  let _value = value
+  let obj = dateMap.find(v => v.date === _value)
+  return obj ? `${obj.day} ${getCurrentWeek(_value)}` : `${_value} ${getCurrentWeek(_value)}`
+}
+
+export const setConent = (value) => {
+  return value.map(str => {
+    let obj = dateMap.find(item => item.date === str)
+    let _value = obj ? obj.day : str
+    return /[0-9]+/.test(_value) ? `${_value} ${getCurrentWeek(_value)}` : `${_value} ${getCurrentWeek(dateMap.find(item => item.day === _value).date)}`
+  })
+}
+
+export function range (num, min, max) {
+  return Math.min(Math.max(num, min), max)
+}