t20-common-lib 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",
@@ -61,4 +61,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

package/packages/date-picker-por/index.js

@@ -0,0 +1,8 @@
+import DatePickerPor from './src/main';
+
+/* istanbul ignore next */
+DatePickerPor.install = function(Vue) {
+  Vue.component(DatePickerPor.name, DatePickerPor);
+};
+
+export default DatePickerPor;

package/packages/date-picker-por/src/main.vue

@@ -0,0 +1,310 @@
+<template>
+  <el-date-picker
+    ref="date-picker"
+    v-model="valueC"
+    class="n20-date-editor"
+    :class="{
+      'has-value': clearable && valueC,
+      [this.$attrs && this.$attrs['rule-form']]: !valueC
+    }"
+    :popper-class="
+      !clearable && type === 'datetimerange'
+        ? 'clearable-datetimerange' + ' ' + $attrs['popper-class']
+        : $attrs['popper-class']
+    "
+    :type="type"
+    :value-format="valueFormat"
+    :placeholder="$lc('选择日期')"
+    :start-placeholder="$lc('开始日期')"
+    :end-placeholder="$lc('结束日期')"
+    :picker-options="pickerOptionsAs"
+    :clearable="clearable"
+    v-bind="$attrs"
+    v-on="listeners"
+  />
+</template>
+
+<script>
+import { $lc } from '../../../src/utils/i18n/index'
+import dayjs from 'dayjs'
+
+const getShortcutDefinitions = () => ({
+  'today': {
+    text: $lc('今天'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-week': {
+    text: $lc('最近一周'),
+    onClick(picker) {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-month': {
+    text: $lc('最近一月'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      start.setMonth(start.getMonth() - 1)
+      start.setHours(0, 0, 0)
+      end.setHours(23, 59, 59)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-3-months': {
+    text: $lc('最近三月'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      start.setMonth(start.getMonth() - 3)
+      start.setHours(0, 0, 0)
+      end.setHours(23, 59, 59)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-6-months': {
+    text: $lc('最近六月'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      start.setMonth(start.getMonth() - 6)
+      start.setHours(0, 0, 0)
+      end.setHours(23, 59, 59)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-year': {
+    text: $lc('最近一年'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      start.setFullYear(start.getFullYear() - 1)
+      start.setHours(0, 0, 0)
+      end.setHours(23, 59, 59)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-3-years': {
+    text: $lc('最近三年'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      start.setFullYear(start.getFullYear() - 3)
+      start.setHours(0, 0, 0)
+      end.setHours(23, 59, 59)
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'start-from-today': {
+    text: $lc('今天开始'),
+    onClick(picker) {
+      const start = dayjs().format('YYYY-MM-DD')
+      const end = dayjs().add(99, 'year').format('YYYY-MM-DD')
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'end-today': {
+    text: $lc('今天截止'),
+    onClick(picker) {
+      const end = dayjs().format('YYYY-MM-DD')
+      const start = dayjs().subtract(100, 'year').format('YYYY-MM-DD')
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'current-month': {
+    text: $lc('当月'),
+    onClick(picker) {
+      const start = dayjs().startOf('month').toDate()
+      const end = dayjs().endOf('month').toDate()
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'current-year': {
+    text: $lc('当年'),
+    onClick(picker) {
+      const start = dayjs().startOf('year').toDate()
+      const end = dayjs().endOf('year').toDate()
+      picker.$emit('pick', [start, end])
+    }
+  }
+})
+
+const defaultShortcuts1Keys = [
+  'today',
+  'recent-week',
+  'recent-month',
+  'recent-3-months',
+  'recent-6-months',
+  'recent-year',
+  'recent-3-years'
+]
+
+const defaultShortcuts2Keys = [
+  'recent-month',
+  'recent-3-months',
+  'recent-6-months',
+  'recent-year',
+  'recent-3-years'
+]
+
+let disabledDate_1 = (t) => {
+  let now = new Date()
+  now.setHours(0, 0, -1)
+  return t < now
+}
+let disabledDate_2 = (t) => {
+  let now = new Date()
+  now.setHours(23, 59, 59)
+  return t > now
+}
+
+export default {
+  name: 'DatePickerPor',
+  props: {
+    type: {
+      type: String,
+      default: 'daterange'
+    },
+    value: {
+      type: [String, Number, Date],
+      default: undefined
+    },
+    startDate: {
+      type: [String, Number, Date],
+      default: null
+    },
+    endDate: {
+      type: [String, Number, Date],
+      default: null
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },
+    minNow: {
+      type: Boolean,
+      default: false
+    },
+    maxNow: {
+      type: Boolean,
+      default: false
+    },
+    shortcuts: {
+      type: Boolean,
+      default: true
+    },
+    startStop: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    pickerOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    shortcutConfig: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    let shortcuts = undefined
+    const allShortcuts = getShortcutDefinitions()
+    
+    let config = this.shortcutConfig
+    if (!config) {
+      if (this.shortcuts && ['daterange', 'datetimerange'].includes(this.type)) {
+        config = this.startStop ? defaultShortcuts2Keys : defaultShortcuts1Keys
+      }
+    }
+
+    if (config) {
+      shortcuts = config.map(item => {
+        if (typeof item === 'string') {
+          return allShortcuts[item]
+        }
+        return item
+      }).filter(Boolean)
+    }
+
+    const pickerOptionsAs = Object.assign(
+      {
+        disabledDate: this.minNow ? disabledDate_1 : this.maxNow ? disabledDate_2 : undefined,
+        shortcuts
+      },
+      this.pickerOptions
+    )
+
+    const listeners = Object.assign({}, this.$listeners, {
+      input: () => {},
+      change: () => {}
+    })
+    return {
+      pickerOptionsAs,
+      listeners
+    }
+  },
+  computed: {
+    valueC: {
+      get() {
+        if (['daterange', 'monthrange', 'datetimerange'].includes(this.type)) {
+          if (this.startDate && this.endDate) {
+            return [this.startDate, this.endDate]
+          } else {
+            return null
+          }
+        } else {
+          return this.value
+        }
+      },
+      set(val) {
+        if (['daterange', 'monthrange', 'datetimerange'].includes(this.type)) {
+          if (val && val[0]) {
+            if (this.type === 'monthrange' && ['yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss'].includes(this.valueFormat)) {
+              let end = new Date(val[1])
+              end.setMonth(end.getMonth() + 1)
+              end.setDate(0)
+              let Y = end.getFullYear()
+              let M = end.getMonth() + 1
+              let D = end.getDate()
+              let str = `${Y}-${M > 9 ? M : '0' + M}-${D > 9 ? D : '0' + D}`
+              if (this.valueFormat === 'yyyy-MM-dd HH:mm:ss') str = str + ' 23:59:59'
+              this.$emit('update:start-date', val[0])
+              this.$emit('update:end-date', str)
+              this.$emit('start', val[0])
+              this.$emit('end', str)
+              this.$emit('change', [val[0], str])
+            } else {
+              this.$emit('update:start-date', val[0])
+              this.$emit('update:end-date', val[1])
+              this.$emit('start', val[0])
+              this.$emit('end', val[1])
+              this.$emit('change', val)
+            }
+          } else {
+            this.$emit('update:start-date', null)
+            this.$emit('update:end-date', null)
+            this.$emit('start', null)
+            this.$emit('end', null)
+            this.$emit('change', val)
+          }
+        } else {
+          this.$emit('input', val)
+          this.$emit('change', val)
+        }
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>

package/src/index.js

@@ -15,6 +15,7 @@ import MultiCurrencyStatistics from '../packages/multi-currency-statistics/index
 import BranchBankSelect from '../packages/branch-bank-select/index.js'
 import TabPage from '../packages/tab-page/index.js'
 import InputNumber from '../packages/input-number/index.js'
+import DatePickerPor from '../packages/date-picker-por/index.js'
 
 // 存储组件列表
 const components = [
@@ -28,7 +29,8 @@ const components = [
   MultiCurrencyStatistics,
   BranchBankSelect,
   TabPage,
-  InputNumber
+  InputNumber,
+  DatePickerPor
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -68,6 +70,7 @@ export {
   MultiCurrencyStatistics,
   BranchBankSelect,
   InputNumber,
+  DatePickerPor,
   // 工具方法
   repairEl,
   getColumnWidth,