t20-common-lib 0.10.2 → 0.10.3

package/package.json

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

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

@@ -21,6 +21,7 @@
     :clearable="clearable"
     v-bind="$attrs"
     v-on="listeners"
+    @focus="onFocus"
   />
 </template>
 
@@ -218,6 +219,7 @@ export default {
   },
   data() {
     let shortcuts = undefined
+    let shortcutKeys = []
     const allShortcuts = getShortcutDefinitions()
     
     let config = this.shortcutConfig
@@ -230,8 +232,10 @@ 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)
     }
@@ -250,9 +254,13 @@ export default {
     })
     return {
       pickerOptionsAs,
-      listeners
+      listeners,
+      shortcutKeys
     }
   },
+  mounted() {
+    this.applyDefaultShortcut()
+  },
   computed: {
     valueC: {
       get() {
@@ -305,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>