t20-common-lib 0.9.14 → 0.10.1

package/packages/common-collapse/src/main.vue

@@ -1,148 +1,148 @@
-<template>
-  <div class="collapse" :class="{ 'm-b-s': !_isCollapse }">
-    <el-collapse-transition v-if="$slots.default && showCard">
-      <div class="collapse-content" v-show="!_isCollapse">
-        <slot />
-      </div>
-    </el-collapse-transition>
-    <div class="collapse-slot">
-      <el-button v-if="showCard" class="rotate90" :icon="_isCollapse? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left'" plain onlyicon size="mini"  @click="handleToggle"/>
-      <el-button icon="el-icon-setting" plain onlyicon size="mini"  @click="toSettings" />
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CommonCollapse',
-  props: {
-    permission: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    showCard: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      isCollapse: false
-    }
-  },
-  computed: {
-    hasUsedVModel() {
-      return 'value' in this.$options.propsData
-    },
-    _isCollapse: {
-      get() {
-        return this.hasUsedVModel ? this.value : this.isCollapse
-      },
-      set(val) {
-        if (this.hasUsedVModel) {
-          this.$emit('input', val)
-        } else {
-          this.isCollapse = val
-        }
-      }
-    }
-  },
-  methods: {
-    toSettings() {
-      this.$emit('toSettings')
-    },
-    // 切换 显示/隐藏
-    handleToggle() {
-      this._isCollapse = !this._isCollapse
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.collapse {
-  position: relative;
-  &-slot {
-    z-index: 99999;
-    position: absolute;
-    top: -28px;
-    right: 0;
-    height: 24px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .el-icon {
-      color: var(--color-text-regular);
-      cursor: pointer;
-      font-weight: bold;
-      font-size: 18px;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-$--button-margin-left: 6px;
-
-.el-button--primary,
-.el-button--default,
-.el-button--default.is-plain,
-.el-button--warning.is-plain,
-.el-button--danger.is-plain {
-  min-width: 72px;
-}
-
-.el-dropdown__caret-button,
-.el-button[onlyicon] {
-  min-width: auto;
-}
-
-.el-button.button-4em {
-  min-width: 72px;
-}
-
-.el-button+.el-button {
-  margin-left: $--button-margin-left;
-}
-
-.el-button+.el-dropdown {
-  margin-left: $--button-margin-left;
-}
-
-.el-button--mini+.el-button--mini {
-  margin-left: $--button-margin-left;
-}
-
-.el-button[onlyicon] {
-
-  &.el-button--default,
-  &.el-button--medium,
-  &.el-button--small {
-    padding: 8px;
-  }
-
-  &.el-button--mini {
-    padding: 5px;
-  }
-}
-
-.el-button--info {
-
-  &,
-  &:focus {
-    background-color: var(--color-info);
-    border-color: var(--color-info);
-  }
-
-  &:hover {
-    background: var(--color-info-hover);
-    border-color: var(--color-info-hover);
-  }
-}
-
+<template>
+  <div class="collapse" :class="{ 'm-b-s': !_isCollapse }">
+    <el-collapse-transition v-if="$slots.default && showCard">
+      <div class="collapse-content" v-show="!_isCollapse">
+        <slot />
+      </div>
+    </el-collapse-transition>
+    <div class="collapse-slot">
+      <el-button v-if="showCard" class="rotate90" :icon="_isCollapse? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left'" plain onlyicon size="mini"  @click="handleToggle"/>
+      <el-button icon="el-icon-setting" plain onlyicon size="mini"  @click="toSettings" />
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommonCollapse',
+  props: {
+    permission: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    showCard: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isCollapse: false
+    }
+  },
+  computed: {
+    hasUsedVModel() {
+      return 'value' in this.$options.propsData
+    },
+    _isCollapse: {
+      get() {
+        return this.hasUsedVModel ? this.value : this.isCollapse
+      },
+      set(val) {
+        if (this.hasUsedVModel) {
+          this.$emit('input', val)
+        } else {
+          this.isCollapse = val
+        }
+      }
+    }
+  },
+  methods: {
+    toSettings() {
+      this.$emit('toSettings')
+    },
+    // 切换 显示/隐藏
+    handleToggle() {
+      this._isCollapse = !this._isCollapse
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  position: relative;
+  &-slot {
+    z-index: 99999;
+    position: absolute;
+    top: -28px;
+    right: 0;
+    height: 24px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .el-icon {
+      color: var(--color-text-regular);
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+$--button-margin-left: 6px;
+
+.el-button--primary,
+.el-button--default,
+.el-button--default.is-plain,
+.el-button--warning.is-plain,
+.el-button--danger.is-plain {
+  min-width: 72px;
+}
+
+.el-dropdown__caret-button,
+.el-button[onlyicon] {
+  min-width: auto;
+}
+
+.el-button.button-4em {
+  min-width: 72px;
+}
+
+.el-button+.el-button {
+  margin-left: $--button-margin-left;
+}
+
+.el-button+.el-dropdown {
+  margin-left: $--button-margin-left;
+}
+
+.el-button--mini+.el-button--mini {
+  margin-left: $--button-margin-left;
+}
+
+.el-button[onlyicon] {
+
+  &.el-button--default,
+  &.el-button--medium,
+  &.el-button--small {
+    padding: 8px;
+  }
+
+  &.el-button--mini {
+    padding: 5px;
+  }
+}
+
+.el-button--info {
+
+  &,
+  &:focus {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  &:hover {
+    background: var(--color-info-hover);
+    border-color: var(--color-info-hover);
+  }
+}
+
 </style>

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,306 @@
+<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="$l('选择日期')"
+    :start-placeholder="$l('开始日期')"
+    :end-placeholder="$l('结束日期')"
+    :picker-options="pickerOptionsAs"
+    :clearable="clearable"
+    v-bind="$attrs"
+    v-on="listeners"
+  />
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+const getShortcutDefinitions = () => ({
+  'today': {
+    text: this.$l('今天'),
+    onClick(picker) {
+      const start = new Date()
+      const end = new Date()
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'recent-week': {
+    text: this.$l('最近一周'),
+    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: this.$l('最近一月'),
+    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: this.$l('最近三月'),
+    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: this.$l('最近六月'),
+    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: this.$l('最近一年'),
+    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: this.$l('最近三年'),
+    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: this.$l('今天开始'),
+    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: this.$l('今天截止'),
+    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: this.$l('当月'),
+    onClick(picker) {
+      const start = dayjs().startOf('month').toDate()
+      const end = dayjs().endOf('month').toDate()
+      picker.$emit('pick', [start, end])
+    }
+  },
+  'current-year': {
+    text: this.$l('当年'),
+    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)
+    }
+
+    this.pickerOptionsAs = Object.assign(
+      {
+        disabledDate: this.minNow ? disabledDate_1 : this.maxNow ? disabledDate_2 : undefined,
+        shortcuts
+      },
+      this.pickerOptions
+    )
+
+    this.listeners = Object.assign({}, this.$listeners, {
+      input: () => {},
+      change: () => {}
+    })
+    return {}
+  },
+  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/packages/form-page/index.js

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