@aochuang/common 1.0.0 → 1.0.1

package/components/dropdown/dropdown.vue

@@ -0,0 +1,286 @@
+<template>
+  <el-dropdown
+    class="ui-dropdown"
+    :class="[{'is-disabled': disabled}]"
+    :trigger="trigger"
+    :placement="placement"
+    @command="handleCommand"
+  >
+    <slot name="reference" :options="innerOptions">
+      <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>
+    <slot></slot>
+    <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 innerOptions"
+        :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">{{item.label || (item.props && item.props.label)}}</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
+    },
+    icon: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      innerOptions: this.options,
+    }
+  },
+  computed: {
+    currentItem () {
+      return this.innerOptions.find(v => v.value === this.value)
+    },
+    showLabel () {
+      if (this.label) {
+        return this.label
+      }
+      return this.currentItem ? this.currentItem.label : ''
+    }
+  },
+  watch: {
+    options () {
+      this.innerOptions = this.options
+    }
+  },
+  methods: {
+    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.innerOptions[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
+      })
+    },
+    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'
+
+export {
+  Dropdown,
+  DropdownItem
+}
+
+export default {
+  Dropdown,
+  DropdownItem,
+  install (Vue) {
+    Vue.component(Dropdown.name, Dropdown)
+    Vue.component(DropdownItem.name, DropdownItem)
+  }
+}

package/components/empty/empty.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ui-empty" :class="{'is-border': border}">
+    <div class="ui-empyt__icon" v-if="icon">
+      <ui-icon :name="icon" :size="60" 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
+    },
+    text: {
+      type: String,
+      default: '暂无数据'
+    }
+  }
+}
+</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;
+}
+</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>

package/components/filter/filter-more.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="ui-filter-more">
+    <ui-popover
+      v-model="showPopover"
+      placement="bottom-end"
+    >
+      <template slot="reference">
+        <ui-button type="primary" link>
+          <ui-icon size="18px">
+            <svg v-if="showPopover" t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+              <path d="M544.716 589.036l0.856 0.816 224.016 220-56.056 57.08-196.676-193.156-207.456 193.84-54.62-58.452 235.456-220a40 40 0 0 1 54.48-0.128z m-235.32-438.64l207.46 193.84 196.68-193.156 56.052 57.08-224.016 220-0.856 0.816a40 40 0 0 1-54.48-0.128l-235.456-220L309.4 150.392z" fill="currentColor"></path>
+            </svg>
+            <svg v-else t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+              <path fill="currentColor" d="M200.864 160.8l-1.04 0.012c-33.704 0.804-51.472 40.748-29.048 66.344l228.96 261.392v251.868a40 40 0 0 0 16.788 32.576l160.188 114.132 0.852 0.592c26.408 17.872 62.36-1 62.36-33.168v-366.684l215.684-261.62c21.508-26.092 2.952-65.444-30.864-65.444H200.864z m539.06 79.996l-170.864 207.268-0.864 1.088a40 40 0 0 0-8.272 24.356v303.424l-80.188-57.132v-246.292l-0.024-1.384a40 40 0 0 0-9.888-24.972L289.072 240.796h450.852z"></path>
+            </svg>
+          </ui-icon>
+          更多筛选
+        </ui-button>
+      </template>
+      <div class="ui-filter-more__main" v-if="items && items.length">
+        <div class="ui-filter-more__list">
+          <div
+            class="ui-filter-more__item"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <span class="ui-filter-more__item-label" :style="itemLabelStyle">
+              {{ item.props.label }}
+            </span>
+            <div class="ui-filter-more__item-target">
+              <component :is="handleRenderItem(item)"></component>
+            </div>
+          </div>
+        </div>
+        <div class="ui-filter-more__toolbar">
+          <ui-button type="primary" link>
+            <ui-icon slot="icon">
+              <svg t="1680482233621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M233.088 189.141333A425.002667 425.002667 0 0 1 512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667 0 91.136-28.586667 175.616-77.226667 244.906667L725.333333 512h128A341.333333 341.333333 0 0 0 275.626667 265.728l-42.538667-76.586667z m557.824 645.717334A425.002667 425.002667 0 0 1 512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512c0-91.136 28.586667-175.616 77.226667-244.906667L298.666667 512H170.666667a341.333333 341.333333 0 0 0 577.706666 246.272l42.538667 76.586667z" fill="currentColor" p-id="25774"></path></svg>
+            </ui-icon>
+            重置过滤条件
+          </ui-button>
+        </div>
+      </div>
+    </ui-popover>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiFilterMore',
+  props: {
+    value: {
+      type: Object
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    labelWidth: {
+      type: String,
+      default: '80px'
+    }
+  },
+  data () {
+    return {
+      showPopover: false
+    }
+  },
+  computed: {
+    itemLabelStyle () {
+      const style = {}
+      if (this.labelWidth) {
+        style.width = this.labelWidth
+        style['min-width'] = this.labelWidth
+      }
+      return style
+    }
+  },
+  methods: {
+    handleRenderItem(item) {
+      return {
+        functional: true,
+        render: (h, c) => {
+          return item.render(h, c)
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-filter-more__main{
+  width: 420px;
+}
+.ui-filter-more__list{
+  padding: 6px;
+}
+.ui-filter-more__item{
+  display: flex;
+  flex-direction: row;
+  line-height: 32px;
+  padding: 6px;
+}
+.ui-filter-more__item-label {
+  color: #666;
+}
+.ui-filter-more__item-target{
+  flex: 1;
+  min-width: 0;
+}
+.ui-filter-more__toolbar{
+  border-top: 1px solid #eee;
+  padding: 9px 12px;
+}
+</style>