@aochuang/common 1.0.0 → 1.0.1

package/components/cascader/cascader.vue

@@ -0,0 +1,184 @@
+<template>
+  <el-cascader
+    ref="control"
+    class="ui-cascader"
+    v-model="innerValue"
+    :options="options"
+    :disabled="disabled"
+    :show-all-levels="showAllLevels"
+    :collapse-tags="collapseTags"
+    :clearable="clearable"
+    :props="props"
+    :placeholder="placeholder"
+    size="small"
+  >
+  </el-cascader>
+</template>
+
+<script>
+import ElCascader from 'element-ui/lib/cascader'
+import 'element-ui/lib/theme-chalk/cascader.css'
+import { getClosestNodes, removeEmptyChildren } from './util'
+import { clone } from '../../utils/json'
+
+export default {
+  name: 'UiCascader',
+  components: {
+    ElCascader
+  },
+  props: {
+    textField: {
+      type: String,
+      default: 'label'
+    },
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 保持完整路径
+    keepPath: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: [String, Number, Array]
+    },
+    queryMethod: {
+      type: Function
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: true
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      options: []
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (this.keepPath) {
+          return this.value
+        }
+        if (Array.isArray(this.value)) {
+          return this.value.map(v => getClosestNodes(v, this.options, this.valueField).map(v => v[this.valueField]))
+        } else {
+          return getClosestNodes(this.value, this.options, this.valueField).map(v => v[this.valueField])
+        }
+      },
+      set (val) {
+        if (this.keepPath) {
+          this.$emit('input', val)
+        } else {
+          if (val && Array.isArray(val)) {
+            if (this.multiple) {
+              val = val.map(v => v[v.length - 1])
+            } else {
+              val = val[val.length - 1]
+            }
+          }
+          this.$emit('input', val || null)
+          this.$emit('change', {
+            items: getClosestNodes(val, this.options, this.valueField)
+          })
+        }
+      }
+    },
+    props () {
+      return {
+        checkStrictly: this.checkStrictly,
+        multiple: this.multiple,
+        value: this.valueField,
+        label: this.textField
+      }
+    }
+  },
+  watch: {
+    items () {
+      this.syncItems()
+    }
+  },
+  mounted () {
+    this.syncItems()
+    this.loadOptions()
+  },
+  methods: {
+    loadOptions () {
+      if (!this.queryMethod) {
+        return
+      }
+      this.loading = true
+      this.queryMethod().then(rs => {
+        this.options = removeEmptyChildren(rs) || []
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    syncItems () {
+      this.options = removeEmptyChildren(clone(this.items)) || []
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-cascader{
+  width: 100%;
+  box-sizing: border-box;
+  .el-input__inner{
+    font-size: 14px;
+    padding-left: 11px;
+    transition: all 0.15s ease-in-out;
+    box-sizing: border-box;
+  }
+  .is-focus{
+    .el-input__inner{
+      border-color: #1aa2e8;
+      box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+    }
+  }
+}
+.el-cascader-panel{
+  .el-scrollbar__wrap{
+    min-height: 240px;
+    max-height: 360px;
+  }
+}
+body {
+  .el-cascader-node.in-active-path,
+  .el-cascader-node.is-active,
+  .el-cascader-node.is-selectable.in-checked-path{
+    font-weight: normal;
+  }
+}
+
+</style>

package/components/cascader/index.js

@@ -0,0 +1,7 @@
+import Cascader from './cascader.vue'
+
+Cascader.install = (Vue) => {
+  Vue.component(Cascader.name, Cascader)
+}
+
+export default Cascader

package/components/cascader/util.js

@@ -0,0 +1,50 @@
+export function getClosestNodes (value, data, valueField) {
+  const result = []
+  if (value === null || value === '' || value === undefined) {
+    return result
+  }
+  if (!data) {
+    return value
+  }
+  const loop = (data) => {
+    let rs = null
+    if (!data || !data.length) {
+      return rs
+    }
+    data.some(v => {
+      if (v[valueField] === value) {
+        rs = true
+        result.push(v)
+        return rs
+      }
+      if (v.children) {
+        if (loop(v.children)) {
+          result.push(v)
+          rs = v
+        }
+      }
+    })
+    return rs
+  }
+  loop(data)
+  return result.reverse()
+}
+
+export function removeEmptyChildren (options) {
+  if (!options || !options.length) {
+    return []
+  }
+  const loop = (data) => {
+    if (!data || !data.length) {
+      return
+    }
+    data.forEach(v => {
+      if (v.children && !v.children.length) {
+        delete v.children
+      }
+      loop(v.children)
+    })
+  }
+  loop(options)
+  return options
+}

package/components/checkbox/checkbox.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-checkbox :border="border" class="ui-checkbox" :indeterminate="indeterminate" :disabled="disabled" v-model="inputValue" :label="label">
+    <slot></slot>
+  </el-checkbox>
+</template>
+<script>
+import ElCheckbox from 'element-ui/lib/checkbox'
+import 'element-ui/lib/theme-chalk/checkbox.css'
+
+export default {
+  name: 'UiCheckbox',
+  components: {
+    ElCheckbox
+  },
+  props: {
+    value: {
+      type: Boolean
+    },
+    border: {
+      type: Boolean
+    },
+    indeterminate: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean
+    },
+    label: {
+      type: [String, Number]
+    }
+  },
+  computed: {
+    inputValue: {
+      get () {
+        return this.value || false
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+body {
+  .ui-checkbox-group{
+    .el-checkbox{
+      &:not(.is-bordered) {
+        margin-right: 20px;
+      }
+    }
+  }
+  .ui-checkbox.el-checkbox{
+    font-size: 14px;
+    max-width: 100%;
+    .el-checkbox__label{
+      font-size: inherit;
+      max-width: calc(~'100% - 0px');
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .el-checkbox__inner{
+      vertical-align: top;
+    }
+    &:not(.is-bordered) {
+      height: 20px;
+      line-height: 20px;
+      .el-checkbox__input{
+        vertical-align: top;
+        margin-top: 2px;
+      }
+      .el-checkbox__label{
+        padding-left: 6px;
+      }
+    }
+    &.is-bordered {
+      margin-right: 0;
+      background-color: #fff;
+      padding-top: 6px;
+      padding-bottom: 6px;
+      line-height: 18px;
+      height: 32px;
+      padding-right: 12px;
+      transition: all .25s;
+      .el-checkbox__input,
+      .el-checkbox__label{
+        vertical-align: top;
+      }
+      .el-checkbox__input{
+        margin-top: 1px;
+      }
+      .el-checkbox__label{
+        padding-left: 6px;
+      }
+      &:hover {
+        color: #1aa2e8;
+        border-color: #1aa2e8;
+        background-color: transparent;
+      }
+    }
+  }
+  .ui-checkbox .el-checkbox__inner{
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+    font-weight: bold;
+    box-sizing: border-box;
+  }
+  .ui-checkbox  .el-checkbox__input.is-checked+.el-checkbox__label{
+    color: #404040;
+  }
+}
+</style>

package/components/checkbox/index.js

@@ -0,0 +1,7 @@
+import Checkbox from './checkbox.vue'
+
+Checkbox.install = (Vue) => {
+  Vue.component(Checkbox.name, Checkbox)
+}
+
+export default Checkbox

package/components/checkbox-button/index.js

@@ -0,0 +1,8 @@
+import CheckboxButton from 'element-ui/lib/checkbox-button'
+import 'element-ui/lib/theme-chalk/checkbox-button.css'
+
+CheckboxButton.install = (Vue) => {
+  Vue.component('UiCheckboxButton', CheckboxButton)
+}
+
+export default CheckboxButton

package/components/checkbox-group/checkbox-group.vue

@@ -0,0 +1,11 @@
+<script>
+import CheckboxGroup from 'element-ui/lib/checkbox-group'
+import 'element-ui/lib/theme-chalk/checkbox-group.css'
+
+export default {
+  ...CheckboxGroup,
+  name: 'UiCheckboxGroup'
+}
+</script>
+<style lang="less">
+</style>

package/components/checkbox-group/index.js

@@ -0,0 +1,7 @@
+import CheckboxGroup from './checkbox-group'
+
+CheckboxGroup.install = (Vue) => {
+  Vue.component(CheckboxGroup.name, CheckboxGroup)
+}
+
+export default CheckboxGroup

package/components/date-picker/date-picker.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="ui-date-picker" :class="{'is-readonly': isReadonly, 'is-clearable' : clearable}" @click="handlePickerClick">
+    <el-date-picker
+      ref="datePicker"
+      v-model="innerValue"
+      class="ui-date-picker__input"
+      range-separator="~"
+      :type="type"
+      :size="size"
+      :clearable="clearable"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :picker-options="pickerOptions"
+      :format="innerFormat"
+      :value-format="innerValueFormat"
+      :readonly="isReadonly"
+      @input="handleDateChange"
+    />
+    <div v-if="isReadonly" class="ui-date-picker__default">
+      <slot>
+        <span v-if="!showText" class="ui-date-picker__placeholder">{{ placeholder }}</span>
+        <span v-else class="ui-date-picker__value">{{ showText }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+<script>
+import DatePicker from 'element-ui/lib/date-picker'
+import 'element-ui/lib/theme-chalk/date-picker.css'
+import 'element-ui/lib/theme-chalk/icon.css'
+import { parseDate, formatDate } from '../../utils/date'
+
+export default {
+  name: 'UiDatePicker',
+  components: {
+    ElDatePicker: DatePicker
+  },
+  inject: {
+    UiFilter: {
+      default: null
+    }
+  },
+  props: {
+    value: {
+      type: [String, Array, Number]
+    },
+    inputable: {
+      type: Boolean,
+      default: true
+    },
+    format: {
+      type: String
+    },
+    valueFormat: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String
+    },
+    maxDate: {
+      type: [String, Number, Date]
+    },
+    minDate: {
+      type: [String, Number, Date]
+    },
+    shortcuts: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 如果在uifilter里面使用的时候，是否需要补全时分秒为00:00:00 23:59:59，因为有些场景不需要，所以需要这个配置
+    completion: {
+      type: Boolean,
+      default: true
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开始日期'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束日期'
+    },
+    onPick: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      showText: null
+    }
+  },
+  computed: {
+    innerValueFormat () {
+      if (this.valueFormat) {
+        return this.valueFormat
+      }
+      if (this.type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss'
+      }
+      return 'yyyy-MM-dd'
+    },
+    innerFormat () {
+      if (this.format) {
+        return this.format
+      }
+      if (this.type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss'
+      }
+      return 'yyyy-MM-dd'
+    },
+    isReadonly () {
+      return !this.inputable
+    },
+    disabledDate () {
+      return (date) => {
+        let rs = false
+        if (this.innerMinDate && date < this.innerMinDate) {
+          rs = true
+        }
+        if (this.innerMaxDate && date > this.innerMaxDate) {
+          rs = true
+        }
+        return rs
+      }
+    },
+    innerMaxDate () {
+      if (this.maxDate) {
+        return parseDate(this.maxDate)
+      }
+      return null
+    },
+    innerMinDate () {
+      if (this.minDate) {
+        return parseDate(this.minDate)
+      }
+      return null
+    },
+    pickerOptions () {
+      return {
+        onPick: this.onPick,
+        disabledDate: this.disabledDate,
+        shortcuts: this.shortcuts.length ? this.shortcuts : null
+      }
+    },
+    innerValue: {
+      get () {
+        if (typeof this.value === 'number') {
+          return new Date(this.value)
+        } else if (typeof this.value === 'string') {
+          if (this.type === 'daterange' || this.type === 'datetimerange') {
+            return this.value.split('~').map(v => parseDate(v))
+          } else {
+            return this.value
+          }
+        }
+        return this.value
+      },
+      set (val) {
+        if (this.UiFilter) {
+          if (this.type === 'daterange') {
+            if (val && val.length) {
+              if (this.completion) {
+                this.$emit('input', [
+                  formatDate(val[0], 'YYYY-mm-dd 00:00:00'),
+                  formatDate(val[1], 'YYYY-mm-dd 23:59:59')
+                ])
+              } else {
+                this.$emit('input', val)
+              }
+            } else {
+              this.$emit('input', null)
+            }
+          }
+        } else {
+          this.$emit('input', val)
+        }
+      }
+    }
+  },
+  watch: {
+    innerValue () {
+      this.updateShowText()
+    }
+  },
+  created () {
+    this.updateShowText()
+  },
+  methods: {
+    updateShowText () {
+      this.$nextTick(() => {
+        let val
+        if (this.type === 'daterange' || this.type === 'datetimerange') {
+          if (this.$refs.datePicker.displayValue) {
+            val = this.$refs.datePicker.displayValue.join(' ~ ')
+          } else if (this.innerValue) {
+            val = this.innerValue.join(' ~ ')
+          }
+        } else {
+          val = this.$refs.datePicker.displayValue
+        }
+        this.showText = val || ''
+      })
+    },
+    handlePickerClick () {
+      if (this.inputable) {
+        return
+      }
+      if (!this.visible) {
+        this.showPicker()
+      } else {
+        this.hidePicker()
+      }
+    },
+    handleDateChange () {
+      this.$nextTick(() => {
+        this.visible = this.$refs.datePicker.pickerVisible
+      })
+    },
+    showPicker () {
+      this.visible = true
+      this.$refs.datePicker && this.$refs.datePicker.showPicker()
+    },
+    hidePicker () {
+      this.visible = false
+      this.$refs.datePicker && this.$refs.datePicker.hidePicker()
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-date-picker{
+  display: block;
+  .el-input__inner{
+    box-sizing: border-box;
+  }
+  .el-date-editor.ui-date-picker__input{
+    width: 100%;
+    .el-input__inner{
+      padding-right: 3px;
+      &:focus{
+        border-color: #1aa2e8;
+        box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+      }
+    }
+    .el-range__close-icon{
+      width: 18px;
+      display: none;
+    }
+  }
+  &.is-clearable{
+    .el-date-editor{
+      .el-range__close-icon{
+        display: inline-block;
+      }
+    }
+  }
+  &.is-readonly {
+    position: relative;
+    .ui-date-picker__default{
+      z-index: 3;
+      display: block;
+      position: relative;
+    }
+    .el-date-editor{
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+  .ui-date-picker__default{
+    line-height: 32px;
+    display: block;
+  }
+  .ui-date-picker__placeholder{
+    color: #bababa;
+  }
+}
+</style>

package/components/date-picker/index.js

@@ -0,0 +1,7 @@
+import DatePicker from './date-picker.vue'
+
+DatePicker.install = (Vue) => {
+  Vue.component(DatePicker.name, DatePicker)
+}
+
+export default DatePicker