t20-common-lib 0.10.1 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

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

@@ -14,22 +14,24 @@
     "
     :type="type"
     :value-format="valueFormat"
-    :placeholder="$l('选择日期')"
-    :start-placeholder="$l('开始日期')"
-    :end-placeholder="$l('结束日期')"
+    :placeholder="$lc('选择日期')"
+    :start-placeholder="$lc('开始日期')"
+    :end-placeholder="$lc('结束日期')"
     :picker-options="pickerOptionsAs"
     :clearable="clearable"
     v-bind="$attrs"
     v-on="listeners"
+    @focus="onFocus"
   />
 </template>
 
 <script>
+import { $lc } from '../../../src/utils/i18n/index'
 import dayjs from 'dayjs'
 
 const getShortcutDefinitions = () => ({
   'today': {
-    text: this.$l('今天'),
+    text: $lc('今天'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -37,7 +39,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-week': {
-    text: this.$l('最近一周'),
+    text: $lc('最近一周'),
     onClick(picker) {
       const end = new Date()
       const start = new Date()
@@ -46,7 +48,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-month': {
-    text: this.$l('最近一月'),
+    text: $lc('最近一月'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -57,7 +59,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-3-months': {
-    text: this.$l('最近三月'),
+    text: $lc('最近三月'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -68,7 +70,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-6-months': {
-    text: this.$l('最近六月'),
+    text: $lc('最近六月'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -79,7 +81,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-year': {
-    text: this.$l('最近一年'),
+    text: $lc('最近一年'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -90,7 +92,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'recent-3-years': {
-    text: this.$l('最近三年'),
+    text: $lc('最近三年'),
     onClick(picker) {
       const start = new Date()
       const end = new Date()
@@ -101,7 +103,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'start-from-today': {
-    text: this.$l('今天开始'),
+    text: $lc('今天开始'),
     onClick(picker) {
       const start = dayjs().format('YYYY-MM-DD')
       const end = dayjs().add(99, 'year').format('YYYY-MM-DD')
@@ -109,7 +111,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'end-today': {
-    text: this.$l('今天截止'),
+    text: $lc('今天截止'),
     onClick(picker) {
       const end = dayjs().format('YYYY-MM-DD')
       const start = dayjs().subtract(100, 'year').format('YYYY-MM-DD')
@@ -117,7 +119,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'current-month': {
-    text: this.$l('当月'),
+    text: $lc('当月'),
     onClick(picker) {
       const start = dayjs().startOf('month').toDate()
       const end = dayjs().endOf('month').toDate()
@@ -125,7 +127,7 @@ const getShortcutDefinitions = () => ({
     }
   },
   'current-year': {
-    text: this.$l('当年'),
+    text: $lc('当年'),
     onClick(picker) {
       const start = dayjs().startOf('year').toDate()
       const end = dayjs().endOf('year').toDate()
@@ -217,6 +219,7 @@ export default {
   },
   data() {
     let shortcuts = undefined
+    let shortcutKeys = []
     const allShortcuts = getShortcutDefinitions()
     
     let config = this.shortcutConfig
@@ -229,13 +232,15 @@ export default {
     if (config) {
       shortcuts = config.map(item => {
         if (typeof item === 'string') {
+          shortcutKeys.push(item)
           return allShortcuts[item]
         }
+        shortcutKeys.push(null)
         return item
       }).filter(Boolean)
     }
 
-    this.pickerOptionsAs = Object.assign(
+    const pickerOptionsAs = Object.assign(
       {
         disabledDate: this.minNow ? disabledDate_1 : this.maxNow ? disabledDate_2 : undefined,
         shortcuts
@@ -243,11 +248,18 @@ export default {
       this.pickerOptions
     )
 
-    this.listeners = Object.assign({}, this.$listeners, {
+    const listeners = Object.assign({}, this.$listeners, {
       input: () => {},
       change: () => {}
     })
-    return {}
+    return {
+      pickerOptionsAs,
+      listeners,
+      shortcutKeys
+    }
+  },
+  mounted() {
+    this.applyDefaultShortcut()
   },
   computed: {
     valueC: {
@@ -301,6 +313,78 @@ export default {
     }
   },
   methods: {
+    applyDefaultShortcut() {
+      const defaultKey = localStorage.getItem('t20-datepicker-default-shortcut')
+      if (defaultKey && !this.value) {
+        const allShortcuts = getShortcutDefinitions()
+        const shortcut = allShortcuts[defaultKey]
+        if (shortcut) {
+          const picker = {
+            $emit: (event, val) => {
+              if (event === 'pick') {
+                this.valueC = val
+              }
+            }
+          }
+          shortcut.onClick(picker)
+        }
+      }
+    },
+    onFocus() {
+      setTimeout(() => {
+        this.injectDefaultButtons()
+      }, 100)
+    },
+    injectDefaultButtons() {
+      const picker = this.$refs['date-picker'] && this.$refs['date-picker'].picker
+      if (!picker || !picker.$el) return
+
+      const sidebar = picker.$el.querySelector('.el-picker-panel__sidebar')
+      if (!sidebar) return
+
+      const shortcuts = sidebar.querySelectorAll('.el-picker-panel__shortcut')
+      const defaultKey = localStorage.getItem('t20-datepicker-default-shortcut')
+
+      shortcuts.forEach((el, index) => {
+        const key = this.shortcutKeys[index]
+        if (!key) return
+
+        if (el.querySelector('.shortcut-default-icon')) return
+
+        const icon = document.createElement('i')
+        const isDefault = defaultKey === key
+        icon.className = isDefault ? 'el-icon-star-on shortcut-default-icon' : 'el-icon-star-off shortcut-default-icon'
+        icon.style.marginLeft = '10px'
+        icon.style.cursor = 'pointer'
+        icon.style.color = isDefault ? '#E6A23C' : '#C0C4CC'
+        icon.title = '设为默认'
+
+        icon.onclick = (e) => {
+          e.stopPropagation()
+          this.setDefaultShortcut(key, index)
+        }
+
+        el.appendChild(icon)
+      })
+    },
+    setDefaultShortcut(key, index) {
+      localStorage.setItem('t20-datepicker-default-shortcut', key)
+      this.$message.success('已设置为默认快捷选项')
+
+      const picker = this.$refs['date-picker'].picker
+      if (picker && picker.$el) {
+        const icons = picker.$el.querySelectorAll('.shortcut-default-icon')
+        icons.forEach((icon, i) => {
+          if (i === index) {
+            icon.className = 'el-icon-star-on shortcut-default-icon'
+            icon.style.color = '#E6A23C'
+          } else {
+            icon.className = 'el-icon-star-off shortcut-default-icon'
+            icon.style.color = '#C0C4CC'
+          }
+        })
+      }
+    }
   }
 }
 </script>