@kyfe/fms-vue2-components 0.0.2 → 0.0.4

package/src/components/oa-datetime-picker/index.vue

@@ -0,0 +1,169 @@
+// 旧版本的日期选择组件
+// 09-15: 增加displayFormat属性可以自定义显示的格式,如果没传,默认根据type进行格式化,统一处理为/间隔
+<template>
+  <div class="oa-datetime-picker">
+    <van-field readonly
+               name="datetimePicker"
+               input-align="right"
+               error-message-align="right"
+               :required="required"
+               :rules="[{ required: required, message: `请选择${label}` }]"
+               :value="displayValue"
+               :label="label"
+               v-bind="$attrs"
+               :placeholder="placeholder"
+               @click="show">
+      <template #label>
+        <slot name="label" />
+      </template>\
+    </van-field>
+
+    <van-popup v-model="showPicker"
+               get-container="body"
+               position="bottom">
+      <van-datetime-picker v-model="timeVal"
+                           :type="type"
+                           :formatter="formatter"
+                           @confirm="onConfirm"
+                           v-bind="$attrs"
+                           @cancel="showPicker = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import moment from 'dayjs'
+
+  const DEFAULT_FORMATS = {
+    'year-month': 'YYYY/MM',
+    date: 'YYYY/MM/DD',
+    datetime: 'YYYY/MM/DD HH:mm',
+    // months: 'yyyy-MM',
+    // time: 'HH:mm:ss',
+    // week: 'yyyywWW',
+    // timerange: 'HH:mm:ss',
+    // daterange: 'yyyy-MM-dd',
+    // monthrange: 'yyyy-MM',
+    // datetimerange: 'yyyy-MM-dd HH:mm:ss',
+    // year: 'yyyy',
+    // years: 'yyyy'
+  };
+
+  const formatAsFormatAndType = (value, customFormat, type) => {
+    if (!value) return null
+    const format = customFormat || DEFAULT_FORMATS[type]
+    return momentFormatUtil(value, format)
+  }
+
+  const momentFormatUtil = (value, format) => {
+    return moment(value).format(format)
+  }
+
+  export default {
+    name: 'oa-datetime-picker',
+    props: {
+      type: {
+        type: String,
+        default: 'datetime'
+      },
+      value: [String, Number],
+      label: String,
+      placeholder: String,
+      required: Boolean,
+      disabled: Boolean,
+      // 提交的数据格式是否需要为时间戳
+      isTimestamp: {
+        type: Boolean,
+        default: false
+      },
+      displayFormat: String // 显示的格式
+    },
+    computed: {
+      // 用于页面显示的值
+      displayValue () {
+        console.log(formatAsFormatAndType)
+        const formattedValue = formatAsFormatAndType(this.parsedValue, this.displayFormat, this.type)
+        // return this.value.replace(/-/g, '/')
+        return formattedValue
+      },
+      // 兜底逻辑,支持更多的传入类型,不至于报错
+      parsedValue () {
+        if (!this.value) return this.value
+        // 兼容问题:这里不要用new Date(),IOS机型如果传入'2020-01',会变成invalid date
+        // return new Date(this.value)
+        return moment(this.value)
+      }
+    },
+    data () {
+      return {
+        showPicker: false,
+        timeVal: new Date()
+      }
+    },
+    methods: {
+      show () {
+        // 禁用选择
+        if (this.disabled) {
+          return false
+        }
+        this.showPicker = true
+      },
+      formatter (type, val) {
+        if (type === 'year') {
+          return `${val}年`
+        } else if (type === 'month') {
+          return `${val}月`
+        } else if (type === 'day') {
+          return `${val}日`
+        } else if (type === 'hour') {
+          return `${val}时`
+        } else if (type === 'minute') {
+          return `${val}分`
+        }
+        return val
+      },
+      onConfirm () {
+        // 恢复之前的日期格式
+        let formatMap = [
+          {
+            label: 'year-month',
+            value: 'YYYY-MM'
+          },
+          {
+            label: 'date',
+            value: 'YYYY-MM-DD'
+          },
+          {
+            label: 'datetime',
+            value: 'YYYY-MM-DD HH:mm'
+          }
+        ]
+        let format = formatMap.find(t => t.label === this.type) || {}
+        console.log('format---', format, this.timeVal, format.value)
+        // 这里不要修改父组件传进来的值,this.value
+        // const newValue = moment(this.timeVal).format(format ? format.value : 'YYYY-MM-DD HH:mm')
+        const newValue = momentFormatUtil(this.timeVal, format ? format.value : 'YYYY-MM-DD HH:mm')
+        console.log('newValue', newValue)
+        this.showPicker = false
+        this.$emit('input', this.isTimestamp ? new Date(newValue).getTime() : newValue)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="less">
+  .oa-datetime-picker {
+    .van-cell:after {
+      position: absolute;
+      content: " ";
+      pointer-events: none;
+      right: 0;
+      bottom: 0;
+      left: 16px;
+      right: 16px;
+      border-bottom: 1px solid #d9d9d9;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
+</style>

package/src/components/oa-datetime-picker-new/components/date-picker/README.md

@@ -0,0 +1,21 @@
+## 日期选择组件
+
+### 参数
+参数名 | 类型 | 说明 | 可选值 | 默认值
+--------|-----|--------|--------|--------
+v-model | boolean | 是否显示 | true、false | false
+horizontal | boolean | 是否横屏 | true、false | false
+position | string | 弹出位置 | top、bottom、dropdown | bottom
+top | number | position为dropdown时需传入距屏幕顶部高度 |  | 
+default-value | date、number、string、array(范围) | 默认时间 | |
+year-range | array | 可选时间年限范围 | |
+min | date、number、string | 最小可选日期(月份) | |
+max | date、number、string | 最大可选日期(月份) | |
+showConfirm | boolean | 是否显示确认按钮 | true、false | true
+type | string | 时间控件类型 | date、daterange、month、monthrange、week、quarter、dateweekmonth | date
+
+### 事件
+事件名 | 说明
+-----------|--------
+select | 选中日期或月份等触发，返回时间对象、范围选择返回数组
+confirm | 点击确认按钮触发，返回时间对象、范围选择返回数组

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

@@ -0,0 +1,121 @@
+<template>
+  <van-popup :value="value"
+             position="bottom"
+             get-container="body"
+             class="ks-date-picker-bottom-popup"
+             duration="0.2"
+             :closeable="true"
+             :close-on-click-overlay="false"
+             @input="handleClosePopup"
+             @open="handleOpenPopup">
+    <div class="ks-date-picker ks-date-picker-bottom">
+      <div class="ks-date-picker-bottom__header">
+        <div class="ks-date-picker-bottom__header-title">
+          <span class="ks-date-picker-bottom__header-title-text">{{title}}</span>
+          <span class="ks-date-picker-bottom__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText"
+                class="ks-date-picker-bottom__header-title-split"> - </span>
+          <span v-show="type.includes('range') && startText"
+                class="ks-date-picker-bottom__header-title-end"
+                :class="{'ks-date-picker-bottom__header-title-end-not': startText && !endText}">
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component ref="selector"
+                   :is="currentCom"
+                   v-bind="$attrs"
+                   @select="handleSelect"
+                   @change-type="changeType" />
+      </div>
+      <div v-if="showConfirm"
+           class="ks-date-picker-bottom__footer">
+        <van-button type="primary"
+                    :disabled="!currentSelectedValue"
+                    block
+                    class="van-calendar__confirm"
+                    @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+  import Mixins from './mixin.js'
+
+  const titleMap = {
+    'date': '日期选择',
+    'daterange': '日期选择',
+    'month': '月份选择',
+    'monthrange': '月份选择',
+    'week': '周选择',
+    'quarter': '季度选择',
+  }
+
+  export default {
+    name: 'date-picker-bottom',
+    mixins: [Mixins],
+    data () {
+      return {
+        dateweekmonthType: 'date'
+      }
+    },
+    computed: {
+      title () {
+        if (this.type === 'dateweekmonth') {
+          return titleMap[this.dateweekmonthType]
+        } else {
+          return titleMap[this.type]
+        }
+      }
+    },
+    methods: {
+      changeType (e) {
+        this.dateweekmonthType = e
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  @import url("./style.less");
+  .ks-date-picker-bottom-popup {
+    height: 82%;
+    border-radius: 6px 6px 0 0;
+    .ks-date-picker-bottom__footer {
+      height: auto;
+      padding: 16px;
+    }
+  }
+  .ipx {
+    .ks-date-picker-bottom__footer {
+      padding-bottom: 25px;
+    }
+  }
+  .ks-date-picker-bottom {
+    height: 82vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    &__header {
+      height: 54px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow: 0 3px 8px 0 rgba(235, 235, 235, 0.3);
+      &-title {
+        position: relative;
+        .header-title-text(54px);
+        &-text {
+          font-size: 18px;
+          font-weight: bold;
+          position: absolute;
+          left: 16px;
+          color: #333;
+        }
+      }
+    }
+    &__footer {
+      .footer-btn();
+    }
+  }
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div v-show="value" ref="datepickerDropdown" class="ks-date-picker-dropdown-warpper" :style="{top: `${top}px`}">
+    <van-popup
+      :value="value"
+      position="top"
+      :overlay-style="{position: 'absolute'}"
+      :get-container="getContainer"
+      class="ks-date-picker-dropdown-popup"
+      duration="0.2"
+      :closeable="false"
+      :close-on-click-overlay="false"
+      @input="handleClosePopup"
+      @open="handleOpenPopup"
+    >
+      <div class="ks-date-picker ks-date-picker-dropdown">
+        <div class="ks-date-picker__body">
+          <component
+            ref="selector"
+            :is="currentCom"
+            v-bind="$attrs"
+            @select="handleSelect"
+          />
+        </div>
+        <div v-if="showConfirm" class="ks-date-picker-dropdown__footer">
+          <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-dropdown',
+  mixins: [Mixins],
+  props: {
+    top: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    getContainer () {
+      return this.$refs.datepickerDropdown
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-dropdown-warpper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  overflow: hidden;
+}
+.ks-date-picker-dropdown-popup {
+  position: absolute;
+  height: 88%;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+  }
+}
+.ks-date-picker-dropdown {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__footer {
+    .footer-btn();
+  }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <van-popup
+    :value="value"
+    position="right"
+    get-container="body"
+    class="ks-date-picker-right-popup"
+    duration="0.2"
+    :closeable="true"
+    :close-on-click-overlay="false"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="ks-date-picker ks-date-picker-right">
+      <div class="ks-date-picker-right__header">
+        <div class="ks-date-picker-right__header-title">
+          <span class="ks-date-picker-right__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText" class="ks-date-picker-right__header-title-split"> - </span>
+          <span
+            v-show="type.includes('range') && startText"
+            class="ks-date-picker-right__header-title-end"
+            :class="{'ks-date-picker-right__header-title-end-not': startText && !endText}"
+          >
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component
+          ref="selector"
+          :is="currentCom"
+          v-bind="$attrs"
+          @select="handleSelect"
+        />
+      </div>
+      <div v-if="showConfirm" class="ks-date-picker-right__footer">
+        <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-right',
+  mixins: [Mixins]
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-right-popup {
+  width: 70%;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+  }
+}
+.ks-date-picker-right {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    height: 40px;
+    width: 375px;
+    margin: 0 auto;
+    &-title {
+      .header-title-text();
+      box-shadow: 0 3px 10px 0 rgba(235,235,235,0.30);
+    }
+  }
+  .ks-date-picker__body {
+    width: 375px;
+    margin: 0 auto;
+  }
+  &__footer {
+    height: 60px;
+    padding: 16px 80px 0 80px;
+    box-shadow: 0 0 4px 0 rgba(158,155,218,0.22);
+    z-index: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+  <van-popup
+    :value="value"
+    position="top"
+    get-container="body"
+    class="ks-date-picker-top-popup"
+    duration="0.2"
+    :closeable="false"
+    :close-on-click-overlay="false"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="ks-date-picker ks-date-picker-top">
+      <div class="ks-date-picker-top__header">
+        <div class="ks-date-picker-top__header-title">
+          <span class="ks-date-picker-top__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText" class="ks-date-picker-top__header-title-split"> - </span>
+          <span
+            v-show="type.includes('range') && startText"
+            class="ks-date-picker-top__header-title-end"
+            :class="{'ks-date-picker-top__header-title-end-not': startText && !endText}"
+          >
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component
+          ref="selector"
+          :is="currentCom"
+          v-bind="$attrs"
+          @select="handleSelect"
+        />
+      </div>
+      <div v-if="showConfirm" class="ks-date-picker-top__footer">
+        <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-top',
+  mixins: [Mixins]
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-top-popup {
+  height: 85%;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+  }
+}
+.ks-date-picker-top {
+  height: 85vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    height: 40px;
+    &-title {
+      .header-title-text();
+    }
+  }
+  &__footer {
+    .footer-btn();
+  }
+}
+.ios .ks-date-picker-top-popup {
+  padding-top: 20px;
+}
+.ipx .ks-date-picker-top-popup {
+  padding-top: 44px;
+}
+</style>

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

@@ -0,0 +1,12 @@
+import { DatePickerBottom, DatePickerTop, DatePickerRight, DatePickerDropdown } from './index.js'
+export default {
+  functional: true,
+  name: 'date-picker',
+  render (h, ctx) {
+    if (ctx.props.horizontal) {
+      return h(DatePickerRight, ctx.data)
+    } else {
+      return h(ctx.props.position === 'dropdown' ? DatePickerDropdown : ctx.props.position === 'top' ? DatePickerTop : DatePickerBottom, ctx.data)
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+<template>
+  <van-calendar class="ks-daterange-select"
+                :default-date="currentDate"
+                :poppable="false"
+                :show-confirm="false"
+                :show-title="false"
+                :show-subtitle="false"
+                :min-date="currentMin"
+                :max-date="currentMax"
+                :lazy-render="false"
+                :allow-same-day="true"
+                :safe-area-inset-bottom="true"
+                row-height="44"
+                type="range"
+                @select="handleSelect" />
+</template>
+
+<script>
+  import { formatToDate, formatToString } from './utils'
+
+  export default {
+    name: 'date-range-select',
+    props: {
+      defaultValue: {
+        type: Array,
+        default: () => ([])
+      },
+      min: [String, Number, Date],
+      max: [String, Number, Date],
+    },
+    data () {
+      return {
+        currentDate: [],
+        currentMin: new Date(),
+        currentMax: new Date()
+      }
+    },
+    created () {
+      this.init()
+      this.handleSelect(this.currentDate)
+
+      // 重新定位一下选中日期
+      setTimeout(() => {
+        this.$nextTick(() => {
+          let top = this.$el.querySelector('.van-calendar__day--start')
+          if (top) {
+            top.scrollIntoView()
+          } else {
+            const end = this.$el.querySelector('.van-calendar__day--start-end')
+            end && end.scrollIntoView()
+          }
+        })
+      })
+    },
+    methods: {
+      init () {
+        if (this.defaultValue.length) {
+          this.currentDate = [formatToDate(this.defaultValue[0]), formatToDate(this.defaultValue[1])]
+        }
+        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)
+        }
+      },
+      handleSelect (e) {
+        this.$emit('select', { date: e, str: [formatToString(e[0]), formatToString(e[1])] })
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ks-daterange-select {
+    .van-calendar__day {
+      margin: 3px 0;
+    }
+    .van-calendar__day--middle {
+      color: #7972fe !important;
+      &::after {
+        top: 0 !important;
+        bottom: 0 !important;
+      }
+    }
+    .van-calendar__day--start,
+    .van-calendar__day--end {
+      margin-left: calc((14.285% - 44px) / 2);
+      margin-right: calc((14.285% - 44px) / 2);
+    }
+    .van-calendar__day--start-end {
+      margin-left: calc((14.285% - 54px) / 2);
+      margin-right: calc((14.285% - 54px) / 2);
+    }
+  }
+</style>