@aochuang/common 1.0.0 → 1.0.126

package/components/dropdown/dropdown.vue

@@ -0,0 +1,326 @@
+<template>
+  <el-dropdown
+    ref="dropdown"
+    class="ui-dropdown"
+    :class="[{'is-disabled': disabled}]"
+    :trigger="trigger"
+    :placement="placement"
+    @command="handleCommand"
+    @visible-change="handleVisibleChange"
+  >
+    <slot name="reference" :options="showOptions">
+      <ui-button class="ui-dropdown__handle" :icon="icon" :size="size" :loading="loading" :type="type" :plain="plain">
+        {{showLabel}}<i class="el-icon-arrow-down el-icon--right"></i>
+      </ui-button>
+    </slot>
+    <template v-if="dropdownMenuReady">
+      <slot></slot>
+    </template>
+    <el-dropdown-menu class="ui-dropdown__menu" :class="[{'is-custom-item': $scopedSlots.item}, popupClass]" slot="dropdown">
+      <el-dropdown-item
+        class="ui-dropdown__item"
+        v-for="(item, index) in showOptions"
+        :key="index"
+        :command="index"
+        :divided="item.divided || (item.props && item.props.divided)"
+        :disabled="item.disabled || (item.props && item.props.disabled)"
+        :class="handleRenderItemClass(item)"
+      >
+        <slot name="item" :item="item">
+          <ui-icon v-if="item.icon || (item.props && item.props.icon)" class="ui-dropdown__item-icon" :name="item.icon || (item.props && item.props.icon)"></ui-icon>
+          <span class="ui-dropdown__item-text">
+            <component :is="item.component"></component>
+          </span>
+        </slot>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+import Dropdown from 'element-ui/lib/dropdown'
+import DropdownMenu from 'element-ui/lib/dropdown-menu'
+import DropdownItem from 'element-ui/lib/dropdown-item'
+import UiIcon from '../icon'
+import UiButton from '../button'
+import 'element-ui/lib/theme-chalk/dropdown.css'
+import 'element-ui/lib/theme-chalk/dropdown-menu.css'
+import 'element-ui/lib/theme-chalk/dropdown-item.css'
+
+export default {
+  name: 'UiDropdown',
+  components: {
+    UiIcon,
+    UiButton,
+    ElDropdown: Dropdown,
+    ElDropdownMenu: DropdownMenu,
+    ElDropdownItem: DropdownItem
+  },
+  provide () {
+    return {
+      UiDropdown: this
+    }
+  },
+  props: {
+    itemData: {
+      type: Object,
+      default: () => {}
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    value: {
+      type: [String, Number, Boolean]
+    },
+    popupClass: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    trigger: {
+      type: String,
+      default: 'click' // hover | click
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      innerOptions: this.options,
+      dropdownMenuReady: this.lazy ? false : true
+    }
+  },
+  computed: {
+    currentItem () {
+      return this.innerOptions.find(v => v.value === this.value)
+    },
+    showLabel () {
+      if (this.label) {
+        return this.label
+      }
+      return this.currentItem ? this.currentItem.label : ''
+    },
+    showOptions () {
+      return this.innerOptions.filter(v => !v.props || v.props.show !== false)
+    }
+  },
+  watch: {
+    options () {
+      this.innerOptions = this.options
+    }
+  },
+  methods: {
+    refreshDropdownPosition () {
+      this.$nextTick(() => {
+        const dropdown = this.$refs.dropdown
+        if (!dropdown) {
+          return
+        }
+        if (typeof dropdown.broadcast === 'function') {
+          dropdown.broadcast('ElDropdownMenu', 'updatePopper')
+          return
+        }
+        const dropdownMenu = (dropdown.$children || []).find(child => child && (child.componentName === 'ElDropdownMenu' || (child.$options && child.$options.name === 'ElDropdownMenu')))
+        if (dropdownMenu) {
+          dropdownMenu.$emit('updatePopper')
+        }
+      })
+    },
+    handleRenderItemClass (item) {
+      const cls = []
+      const map = {
+        danger: 'ui-dropdown-item--danger'
+      }
+      if (map[item.type || (item.props && item.props.type)]) {
+        cls.push(map[item.type || item.props.type])
+      }
+      return cls
+    },
+    handleCommand (e) {
+      const item = this.showOptions[e]
+      // 兼容以前的老逻辑，如果配置了item-click就不允许执行item.click了，因为后面新的方式可以直接监听dropdown-item的时间，能带上下文数据
+      if (!this.$listeners['item-click']) {
+        if (item.click) {
+          item.click()
+        }
+      }
+      this.$emit('input', item.value)
+      this.$emit('item-click', {
+        index: e,
+        item,
+        itemData: this.itemData
+      })
+    },
+    handleVisibleChange (visible) {
+      if (visible && !this.dropdownMenuReady) {
+        this.dropdownMenuReady = true
+        this.refreshDropdownPosition()
+      } else if (visible) {
+        this.refreshDropdownPosition()
+      }
+      this.visible = visible
+    },
+    addOption (option) {
+      if (!option.id) {
+        throw new Error('缺少唯一id')
+      }
+      if (this.innerOptions.some(v => v.id === option.id)) {
+        return
+      }
+      this.innerOptions.push(option)
+    },
+    removeOption (id) {
+      let index = -1
+      this.innerOptions.some((v, i) => {
+        if (v.id === id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.innerOptions.splice(index, 1)
+    },
+    updateOptionProps (id, props) {
+      let index = -1
+      this.innerOptions.some((v, i) => {
+        if (v.id === id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.innerOptions = this.innerOptions.map((v, i) => {
+        if (i === index) {
+          return Object.assign({}, v, {
+            props
+          })
+        } else {
+          return v
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.el-dropdown.ui-dropdown{
+  font-size: 14px;
+  .el-icon-arrow-down{
+    font-size: 12px;
+  }
+  &.is-disabled{
+    position: relative;
+    cursor: not-allowed;
+    opacity: .5;
+    &:after{
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 3;
+    }
+  }
+}
+.ui-dropdown__handle:not(.el-button--text){
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.ui-dropdown__menu{
+  &.el-dropdown-menu{
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+  &:not(.is-custom-item) {
+    .el-dropdown-menu__item{
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    .el-dropdown-menu__item:focus,
+    .el-dropdown-menu__item:not(.is-disabled):hover{
+      color: #0052cc;
+      background-color: rgba(222, 235, 255, 0.9);
+    }
+  }
+  &.is-custom-item{
+    padding-top: 0;
+    padding-bottom: 0;
+    .el-dropdown-menu__item:focus,
+    .el-dropdown-menu__item:not(.is-disabled):hover{
+      color: #484848;
+      background-color: transparent;
+    }
+  }
+}
+.ui-dropdown__item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+  &.ui-dropdown-item--danger{
+    color: #FF4F54;
+    .ui-dropdown__item-text{
+      color: #FF4F54;
+    }
+    .ui-icon{
+      color: #FF4F54;
+    }
+    &:focus, &:not(.is-disabled):hover{
+      background-color: rgba(255, 79, 84, .1)!important;
+      .ui-dropdown__item-text{
+        color: #FF4F54;
+      }
+    }
+  }
+  &.el-dropdown-menu__item--divided:before{
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+.ui-dropdown__item-icon{
+  margin-right: 6px;
+}
+.ui-dropdown__menu{
+  &.is-custom-item{
+    .ui-dropdown__item{
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+</style>

package/components/dropdown/index.js

@@ -0,0 +1,16 @@
+import Dropdown from './dropdown.vue'
+import DropdownItem from './dropdown-item.vue'
+
+Dropdown.install = (Vue) => {
+  Vue.component(Dropdown.name, Dropdown)
+  Vue.component(DropdownItem.name, DropdownItem)
+}
+
+Dropdown.DropdownItem = DropdownItem
+
+export {
+  Dropdown,
+  DropdownItem
+}
+
+export default Dropdown

package/components/empty/empty.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="ui-empty" :class="[{'is-border': border}, 'ui-empty--' + size]">
+    <div class="ui-empyt__icon" v-if="icon">
+      <ui-icon :name="icon" :size="iconSize" color="#ccc"></ui-icon>
+    </div>
+    <div class="ui-epmty__text">
+      <slot name="text">{{text}}</slot>
+    </div>
+  </div>
+</template>
+<script>
+import UiIcon from '../icon'
+
+export default {
+  name: 'UiEmpty',
+  components: {
+    UiIcon
+  },
+  props: {
+    icon: {
+      type: String
+    },
+    border: {
+      type: Boolean
+    },
+    size: {
+      type: String,
+      default: 'large',
+      validator (value) {
+        return ['small', 'large', 'mini'].includes(value)
+      }
+    },
+    text: {
+      type: String,
+      default: '暂无数据'
+    }
+  },
+  computed: {
+    iconSize () {
+      const map = {
+        small: 32,
+        large: 60,
+        mini: 20
+      }
+      return map[this.size]
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-empty{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: 1.7em;
+  .ui-button{
+    vertical-align: -1px;
+  }
+  &.is-border {
+    border: 1px solid #eee;
+    border-radius: 3px;
+    padding: 12px;
+  }
+}
+.ui-empyt__icon{
+  // margin-bottom: 12px;
+}
+.ui-epmty__text{
+  color: #999;
+  word-break: break-all;
+  padding: 0 20px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+.ui-empty--mini {
+  .ui-epmty__text{
+    margin-top: -6px;
+  }
+}
+.ui-empty--small {
+  .ui-epmty__text{
+    margin-top: 0;
+  }
+}
+</style>

package/components/empty/index.js

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

package/components/filter/filter-group.vue

@@ -0,0 +1,44 @@
+<script>
+import { unique } from './util'
+
+export default {
+  name: 'UiFilterGroup',
+  inject: ['UiFilter'],
+  provide () {
+    return {
+      UiFilterGroup: this
+    }
+  },
+  props: {
+    label: {
+      type: String
+    },
+    labelWidth: {
+      type: String
+    }
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        props: this.$props
+      }
+    }
+  },
+  created() {
+    this.id = unique()
+    this.UiFilter.addGroup(this.item)
+  },
+  beforeDestroy() {
+    this.UiFilter.removeGroup(this.id)
+  },
+  render(h) {
+    return h('div', {
+      class: 'ui-filter-group',
+      style: {
+        display: 'none'
+      }
+    }, [this.$scopedSlots.default ? this.$scopedSlots.default() : null])
+  }
+}
+</script>

package/components/filter/filter-item.vue

@@ -0,0 +1,122 @@
+<script>
+import { unique } from './util'
+
+export default {
+  name: 'UiFilterItem',
+  inject: {
+    UiFilter: {
+      from: 'UiFilter'
+    },
+    UiFilterGroup: {
+      from: 'UiFilterGroup',
+      default: null
+    }
+  },
+  props: {
+    label: {
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    operater: {
+      type: String,
+      default: 'eq',
+      validator (value) {
+        return ['eq', 'in', 'like', 'between'].includes(value)
+      }
+    },
+    more: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      info: {
+        count: 0
+      }
+    }
+  },
+  computed: {
+    props () {
+      return {
+        label: this.label,
+        prop: this.prop,
+        operater: this.operater,
+        more: this.more,
+        show: this.show,
+        transform: (evt) => {
+          if (this.transform) {
+            return this.transform(evt)
+          }
+          let childComponent = null
+          let childComonentProps = null
+          if (this.$slots.default && this.$slots.default.length) {
+            if (this.$slots.default[0].componentOptions && this.$slots.default[0].componentOptions.Ctor) {
+              childComponent = this.$slots.default[0].componentOptions.Ctor.options
+              childComonentProps = this.$slots.default[0].componentOptions.propsData
+            }
+          }
+          if (childComponent && childComponent.filter && childComponent.filter.transformValue) {
+            return childComponent.filter.transformValue({
+              value: evt.value,
+              props: childComonentProps
+            })
+          }
+          return evt.value
+        }
+      }
+    },
+    item() {
+      return {
+        id: this.id,
+        props: this.props,
+        info: this.info,
+        groupId: this.UiFilterGroup ? this.UiFilterGroup.id : null,
+        transform () {
+          // // 如果在过滤组件中使用，并且不是带时间范围选择，那么要将起始和截止时间处理一下
+          // if (this.UiFilter && this.type !== 'datetimerange') {
+          //   val = val.map((v, i) => {
+          //     const date = parseDate(v)
+          //     if (i === 0) {
+          //       date.setHours(0)
+          //       date.setMinutes(0)
+          //       date.setSeconds(0)
+          //       date.setMilliseconds(0)
+          //     } else {
+          //       date.setDate(date.getDate() + 1)
+          //       date.setHours(0)
+          //       date.setMinutes(0)
+          //       date.setSeconds(0)
+          //       date.setMilliseconds(0)
+          //     }
+          //     return date.getTime() / 1000
+          //   })
+          // } else {
+        },
+        render: () => {
+          return this.$scopedSlots.default()
+        }
+      }
+    }
+  },
+  created() {
+    this.id = unique()
+    this.UiFilter.addItem(this.item)
+  },
+  beforeDestroy() {
+    this.UiFilter.removeItem(this.id)
+  },
+  updated() {
+    this.info.count++
+  },
+  render() {
+    return null
+  }
+}
+</script>