@aochuang/common 1.0.0 → 1.0.1

package/components/grid/grid-column.vue

@@ -0,0 +1,136 @@
+<template>
+  <vxe-column
+    :field="prop"
+    :title="label"
+    :width="width"
+    :min-width="minWidth"
+    :fixed="innerFixed"
+    :align="align"
+    :sortable="sortable"
+    :tree-node="treeNode"
+    :footer-class-name="allowSummary ? 'is-show-summary' : null"
+    :header-class-name="headerClassName"
+  >
+    <template slot="header" slot-scope="scope">
+      <slot name="header">
+        <div class="ui-grid-column__main">
+          <div class="ui-grid-column__main-left">
+            <span class="ui-grid-column__title" :title="scope.column.title">
+              {{ scope.column.title }}
+            </span>
+            <span class="ui-grid-column__tips" v-if="$slots.tips">
+              <slot name="tips"></slot>
+            </span>
+          </div>
+          <slot name="header-append"></slot>
+        </div>
+      </slot>
+    </template>
+    <template slot-scope="scope">
+      <slot v-bind="scope" :row-hover-active="hoverRow === scope.row">
+        {{ scope.row[scope.column.field] }}
+      </slot>
+    </template>
+  </vxe-column>
+</template>
+<script>
+import { Column } from 'vxe-table'
+
+export default {
+  name: 'UiGridColumn',
+  components: {
+    VxeColumn: Column
+  },
+  inject: ['UiGrid'],
+  props: {
+    label: {
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    width: {
+      type: [Number, String]
+    },
+    minWidth: {
+      type: String
+    },
+    align: {
+      type: String
+    },
+    fixed: {
+      type: [String, Boolean]
+    },
+    sortable: {
+      type: Boolean
+    },
+    allowSummary: {
+      type: Boolean,
+      default: false
+    },
+    formatSummary: {
+      type: Function
+    },
+    treeNode: {
+      type: Boolean,
+      default: false
+    },
+    headerClassName: {
+      type: String
+    }
+  },
+  computed: {
+    innerFixed () {
+      if (typeof this.fixed === 'string') {
+        return this.fixed
+      }
+      return this.fixed ? 'left' : null
+    },
+    hoverRow () {
+      return this.UiGrid.hoverRow
+    }
+  },
+  created () {
+    this.UiGrid.cacheColumns.push(this.$props)
+  },
+  beforeDestroy () {
+    let index = -1
+    this.UiGrid.cacheColumns.some((v, i) => {
+      if (v === this.$props) {
+        index = i
+        return true
+      }
+    })
+    if (index >= 0) {
+      this.UiGrid.cacheColumns.splice(index, 1)
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-column__tips{
+  display: inline-block;
+  vertical-align: top;
+  height: 20px;
+  line-height: 20px;
+  margin-left: 3px;
+}
+.ui-grid-column__main{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.ui-grid-column__main-left{
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+}
+.ui-grid-column__title{
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/grid/grid-filter/grid-filter-group.vue

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

package/components/grid/grid-filter/grid-filter-item.vue

@@ -0,0 +1,68 @@
+<script>
+import { unique } from './util'
+
+export default {
+  name: 'UiGridFilterItem',
+  inject: {
+    UiGridFilter: {
+      from: 'UiGridFilter'
+    },
+    UiGridFilterGroup: {
+      from: 'UiGridFilterGroup',
+      default: null
+    }
+  },
+  props: {
+    label: {
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    more: {
+      type: Boolean,
+      default: false
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    operater: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      data: {
+        key: 0
+      }
+    }
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        props: this.$props,
+        data: this.data,
+        groupId: this.UiGridFilterGroup ? this.UiGridFilterGroup.id : null,
+        render: () => {
+          return this.$scopedSlots.default()
+        }
+      }
+    }
+  },
+  created() {
+    this.id = unique()
+    this.UiGridFilter.addItem(this.item)
+  },
+  beforeDestroy() {
+    this.UiGridFilter.removeItem(this.id)
+  },
+  updated() {
+    this.data.key++
+  },
+  render() {
+    return null
+  }
+}
+</script>

package/components/grid/grid-filter/grid-filter.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="ui-grid-filter" style="display: none;">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiGridFilter',
+  provide() {
+    return {
+      UiGridFilter: this
+    }
+  },
+  inject: ['UiGrid'],
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      items: [],
+      groups: []
+    }
+  },
+  created() {
+    this.UiGrid.filterProps.items = this.items
+    this.UiGrid.filterProps.groups = this.groups
+    this.UiGrid.filterProps.value = this.value
+    this.$watch(() => {
+      return this.UiGrid.filterProps.value
+    }, () => {
+      this.$emit('input', this.UiGrid.filterProps.value)
+    })
+  },
+  methods: {
+    handleRenderItem (item) {
+      return {
+        functional: true,
+        render: (h, c) => {
+          return item.render(h, c)
+        }
+      }
+    },
+    addItem (item) {
+      if (!item || !item.id) {
+        return
+      }
+      let index = -1
+      this.items.some((v, i) => {
+        if (v.id === item.id) {
+          index = i
+          return true
+        }
+      })
+      if (index >= 0) {
+        this.items.splice(index, 1, item)
+      } else {
+        this.items.push(item)
+      }
+    },
+    removeItem (id) {
+      let index = -1
+      this.items.some((v, i) => {
+        if (v.id !== id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.items.splice(index, 1)
+    },
+    addGroup (group) {
+      if (!group || !group.id) {
+        return
+      }
+      let index = -1
+      this.groups.some((v, i) => {
+        if (v.id === group.id) {
+          index = i
+          return true
+        }
+      })
+      if (index >= 0) {
+        this.groups.splice(index, 1, group)
+      } else {
+        this.groups.push(group)
+      }
+    },
+    removeGroup (id) {
+      let index = -1
+      this.groups.some((v, i) => {
+        if (v.id !== id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.groups.splice(index, 1)
+    }
+  }
+}
+</script>
+<style>
+.bi-toolbar{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/components/grid/grid-filter/util.js

@@ -0,0 +1,7 @@
+export const unique = (() => {
+  let number = 162703055217
+  return () => {
+    number++
+    return 'unique_' + number
+  }
+})()

package/components/grid/grid-filter-operate/grid-filter-operate-item.vue

@@ -0,0 +1,55 @@
+<script>
+import { unique } from '../../../utils/util'
+
+export default {
+  name: 'UiGridFilterOperateItem',
+  inject: ['UiGridFilterOperate'],
+  props: {
+    label: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    divided: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    },
+    icon: {
+      type: String
+    }
+  },
+  computed: {
+    props () {
+      return {
+        label: this.label,
+        value: this.value,
+        type: this.type,
+        icon: this.icon,
+        divided: this.divided
+      }
+    }
+  },
+  created () {
+    this.id = unique()
+    this.UiGridFilterOperate.addOption({
+      id: this.id,
+      props: this.props,
+      click: (evt) => {
+        this.$emit('click', evt)
+      },
+      render: () => {
+        return this.$slot.default ? this.$slot.default() : null
+      }
+    })
+  },
+  render () {
+    return null
+  },
+  beforeDestroy () {
+    this.UiGridFilterOperate.removeOption(this.id)
+  }
+}
+</script>

package/components/grid/grid-filter-operate/grid-filter-operate.vue

@@ -0,0 +1,46 @@
+<script>
+export default {
+  name: 'UiGridFilterOperate',
+  props: {
+    label: {
+      type: String
+    }
+  },
+  inject: ['UiGrid'],
+  provide () {
+    return {
+      UiGridFilterOperate: this
+    }
+  },
+  created () {
+    this.UiGrid.filterOperateProps.items = []
+  },
+  render (h) {
+    return h('div', this.$slots.default)
+  },
+  methods: {
+    addOption (option) {
+      if (!option.id) {
+        throw new Error('缺少唯一id')
+      }
+      if (this.UiGrid.filterOperateProps.items.some(v => v.id === option.id)) {
+        return
+      }
+      this.UiGrid.filterOperateProps.items.push(option)
+    },
+    removeOption (id) {
+      let index = -1
+      this.UiGrid.filterOperateProps.items.some((v, i) => {
+        if (v.id === id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.UiGrid.filterOperateProps.items.splice(index, 1)
+    }
+  }
+}
+</script>

package/components/grid/grid-sort/grid-sort-proxy.js

@@ -0,0 +1,27 @@
+export default {
+  name: 'UiGridSortProxy',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array
+    },
+    value: {
+      type: Object
+    }
+  },
+  watch: {
+    value(val) {
+      this.UiGrid.sortProps.value = val
+    },
+    items(val) {
+      this.UiGrid.sortProps.items = val
+    }
+  },
+  created() {
+    this.UiGrid.sortProps.items = this.items
+    this.UiGrid.sortProps.value = this.value
+  },
+  render() {
+    return null
+  }
+}

package/components/grid/grid-sort/grid-sort.vue

@@ -0,0 +1,205 @@
+<template>
+  <ui-popover
+    v-model="showPopover"
+    class="bi-sort-select"
+    trigger="hover"
+    popper-class="bi-sort-select__popover"
+  >
+    <span slot="reference" class="bi-sort-select__handle" @click="handleHandleClick">
+      <span class="bi-sort-select__handle-text">{{ currentItem ? currentItem.label : '排序' }}</span>
+      <span class="bi-sort-select__handle-arrow" :class="['is-' + (value && value.order === 'asc' ? 'asc' : 'desc')]" />
+    </span>
+    <div class="bi-sort-select__menu">
+      <div
+        class="bi-sort-select__item"
+        @click="handleItemClick(item)"
+        v-for="(item, index) in items"
+        :class="{'is-active': value && (value.prop === item.prop)}"
+        :key="index"
+      >{{ item.label }}</div>
+      <div
+        class="bi-sort-select__item is-divided"
+        :class="{'is-active': value && (value.order === 'asc')}"
+        @click="handleOrderAscClick"
+      >升序</div>
+      <div
+        class="bi-sort-select__item"
+        :class="{'is-active': value && (value.order === 'desc')}"
+        @click="handleOrderDescClick"
+      >降序</div>
+    </div>
+  </ui-popover>
+</template>
+<script>
+import Popover from '../../popover'
+
+export default {
+  name: 'BiGridSort',
+  components: {
+    UiPopover: Popover
+  },
+  props: {
+    /**
+     * {
+     *    prop: 'aaa',
+     *    order: 'asc
+     * }
+    */
+    value: {
+      type: Object
+    },
+    /**
+     * [{
+     *    label: 'xxxxx',
+     *    prop: 'aaa'
+     * }]
+    */
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showPopover: false
+    }
+  },
+  computed: {
+    currentItem() {
+      if (!this.value) {
+        return
+      }
+      return this.items.find(v => v.prop === this.value.prop)
+    },
+    firstItem () {
+      if (!this.items || !this.items.length) {
+        return
+      }
+      return this.items[0]
+    }
+  },
+  methods: {
+    handleHandleClick() {
+      if (!this.value) {
+        return
+      }
+      const orderMap = {
+        desc: 'asc',
+        asc: 'desc'
+      }
+      this.$emit('change', {
+        value: {
+          prop: this.value.prop,
+          order: orderMap[this.value.order]
+        }
+      })
+    },
+    handleItemClick(item) {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: item.prop,
+          order: this.value ? this.value.order : 'desc'
+        }
+      })
+    },
+    handleOrderAscClick() {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: this.value && this.value.prop ? this.value.prop : (this.firstItem ? this.firstItem.prop : null),
+          order: 'asc'
+        }
+      })
+    },
+    handleOrderDescClick() {
+      this.showPopover = false
+      this.$emit('change', {
+        value: {
+          prop: this.value && this.value.prop ? this.value.prop : (this.firstItem ? this.firstItem.prop : null),
+          order: 'desc'
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.bi-sort-select__popover{
+  padding: 6px 0!important;
+}
+.bi-sort-select__handle-text{
+  font-size: 14px;
+}
+.bi-sort-select__handle{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 28px;
+  line-height: 28px;
+  cursor: pointer;
+}
+.bi-sort-select__handle-arrow{
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-left: 6px;
+  background: url('./icons/desc.png') no-repeat 50% 50%;
+  background-size: 90%;
+  margin-top: 1px;
+  &.is-asc{
+    margin-top: 0;
+    background-image: url('./icons/asc.png');
+  }
+}
+.bi-sort-select__menu{
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.bi-sort-select__item{
+  line-height: 24px;
+  padding: 6px 30px 6px 12px;
+  cursor: pointer;
+  transition: all .25s;
+  position: relative;
+  white-space: nowrap;
+  &:hover {
+    background-color: #f8f8f9;
+  }
+  &.is-active {
+    color: #409EFF;
+    background-color: rgba(95, 158, 250, .1);
+    &:after {
+       opacity: 1;
+    }
+  }
+  &.is-divided{
+    margin-top: 12px;
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -6px;
+      height: 1px;
+      background-color: #eee;
+    }
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 7px;
+    border: 1px solid #409EFF;
+    position: absolute;
+    top: 50%;
+    transform: rotate(45deg) translateY(-50%);
+    right: 12px;
+    border-left: 0;
+    border-top: 0;
+    margin-top: -3px;
+    opacity: 0;
+  }
+}
+</style>

package/components/grid/grid-sort/index.js

@@ -0,0 +1,7 @@
+import GridSort from './grid-sort'
+import GridSortProxy from './grid-sort-proxy'
+
+export {
+  GridSort,
+  GridSortProxy
+}