@aochuang/common 1.0.0 → 1.0.1

package/components/select/select.vue

@@ -0,0 +1,572 @@
+<template>
+  <span class="ui-select" :class="{'is-disabled': disabled, 'is-loading': reloading, 'is-collapse-tags': collapseTags}">
+    <template v-if="editable">
+      <el-select
+        ref="select"
+        class="ui-select__control"
+        v-model="innerValue"
+        size="small"
+        :disabled="disabled"
+        :popper-class="popperClass"
+        :multiple="multiple"
+        :collapse-tags="collapseTags"
+        :filterable="filterable"
+        :remote="filterMode === 'remote'"
+        :allow-create="allowCreate"
+        :remote-method="handleRemoteMethod"
+        :filter-method="handleFilterMethod"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :no-data-text="emptyText"
+        :reserve-keyword="true"
+        :loading="!moring && innerLoading"
+        :style="{width: width}"
+        v-loadmore="lazy ? handleLoadMore : null"
+        @visible-change="handleVisibleChange"
+        @clear="handleClear"
+        @focus="handleInputFocus"
+      >
+        <template slot="prefix">
+          <slot name="prefix"></slot>
+        </template>
+        <slot></slot>
+        <template v-for="(item, index) in showOptions">
+          <el-option
+            class="ui-select__item"
+            :key="`${item[valueField]}_${index}`"
+            :value="item[valueField]"
+            :label="item[textField]"
+          >
+            <slot name="item" :item="item">
+              {{item[textField]}}
+            </slot>
+          </el-option>
+        </template>
+        <template v-if="tempItems && tempItems.length">
+          <el-option
+            v-for="(item, index) in tempItems"
+            :key="`${item[valueField]}_temp_${index}`"
+            :value="item[valueField]"
+            :label="item[textField]"
+            v-show="false"
+          ></el-option>
+        </template>
+        <select-load-more
+          v-if="lazy"
+          :status="loadMoreStatus"
+          @loadmore="handleLoadMoreClick"
+        ></select-load-more>
+      </el-select>
+      <span class="ui-select__loading" v-if="reloading">
+        <ui-icon name="loading"></ui-icon> 数据加载中...
+      </span>
+    </template>
+    <template v-else>
+      {{ showText }}
+    </template>
+  </span>
+</template>
+<script>
+import Select from 'element-ui/lib/select'
+import Option from 'element-ui/lib/option'
+import 'element-ui/lib/theme-chalk/select.css'
+import 'element-ui/lib/theme-chalk/option.css'
+import SelectLoadMore from './select-load-more'
+
+export default {
+  name: 'UiSelect',
+  inject: {
+    UiAdvancedFilterConditionItemValue: {
+      default: null
+    }
+  },
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Number, String, Array, Boolean]
+    },
+    multiple: {
+      type: Boolean
+    },
+    textField: {
+      type: String,
+      default: 'label'
+    },
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    optionDisabled: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: '无数据'
+    },
+    /**
+     * 开启远程过滤
+     * 启用远程搜索，它会在输入值发生变化时调用，没有输入值时选项是空，参数为当前输入值
+     */
+    remoteFilter: {
+      type: Boolean,
+      default: false
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    filterMode: {
+      type: String,
+      default: 'remote',
+      validator (value) {
+        return ['remote', 'local'].includes(value)
+      }
+    },
+    filterMethod: {
+      type: Function
+    },
+    queryMethod: {
+      type: Function
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    popperClass: {
+      type: String
+    },
+    tempItems: {
+      type: Array
+    }
+  },
+  components: {
+    SelectLoadMore,
+    ElSelect: Select,
+    ElOption: Option
+  },
+  data () {
+    return {
+      pageIndex: 1,
+      notMore: false,
+      moring: false,
+      keyword: null,
+      reloading: false,
+      innerLoading: this.loading,
+      showOptions: this.items,
+      options: this.items
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        if (val === this.value) {
+          return
+        }
+        if (!this.multiple) {
+          if (val) {
+            const item = this.options.find(v => v[this.valueField] === val)
+            this.$emit('change', {
+              value: val,
+              item
+            })
+          } else {
+            this.$emit('change', {
+              value: null,
+              item: null
+            })
+          }
+        }
+        this.$emit('input', val)
+      }
+    },
+    showText () {
+      const texts = []
+      if (this.multiple) {
+        if (this.innerValue && this.innerValue.length) {
+          this.innerValue.forEach(v => {
+            const item = (this.options || []).find(vv => vv[this.valueField] === v)
+            if (item) {
+              texts.push(item[this.textField])
+            } else {
+              texts.push(v)
+            }
+          })
+        }
+      } else {
+        const item = (this.options || []).find(v => v[this.valueField] === this.innerValue)
+        if (item) {
+          texts.push(item[this.textField])
+        } else {
+          texts.push(this.innerValue)
+        }
+      }
+      return texts.join('、')
+    },
+    loadMoreStatus () {
+      let status = 'loadmore'
+      if (this.notMore) {
+        status = 'nomore'
+      } else if (this.moring || this.innerLoading) {
+        status = 'loading'
+      }
+      return status
+    },
+    handleRemoteMethod () {
+      if (this.filterMode !== 'remote') {
+        return
+      }
+      return (keyword) => {
+        this.keyword = (keyword || '').trim()
+        if (!this.remoteFilter) {
+          if (this.queryMethod) {
+            this.reload(false)
+          }
+        } else {
+          if (!this.keyword) {
+            this.options = []
+            this.showOptions = this.options
+            this.$emit('load', {
+              data: this.options
+            })
+          } else {
+            if (this.queryMethod) {
+              this.reload(false)
+            }
+          }
+        }
+      }
+    },
+    handleFilterMethod () {
+      if (this.filterMode !== 'local') {
+        return
+      }
+      return (keyword) => {
+        this.keyword = (keyword || '').trim()
+        if (this.filterMethod) {
+          this.showOptions = this.options.filter(v => this.filterMethod({
+            item: v,
+            keyword
+          }))
+        } else {
+          if (this.keyword) {
+            this.showOptions = this.options.filter(v => {
+              return (v[this.textField] || '').indexOf(this.keyword) >= 0
+            })
+          } else {
+            this.showOptions = this.options
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    items () {
+      this.options = this.items
+      this.showOptions = this.items
+    },
+    loading () {
+      this.innerLoading = this.loading
+    }
+  },
+  directives: {
+    loadmore: {
+      bind(el, binding) {
+        // 获取element-ui定义好的scroll盒子
+        const $scroll = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
+        const scrollTop = $scroll.scrollTop
+        $scroll.addEventListener('scroll', function(e) {
+          const CONDITION = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
+          if (CONDITION && this.scrollTop > scrollTop) {
+            binding.value && binding.value()
+          }
+        })
+      }
+    }
+  },
+  created () {
+    // 尝试加载远程被选项
+    // 如果没有value的情况，可以显示下拉时在加载
+    if (this.queryMethod && !this.remoteFilter) {
+      this.reload()
+    }
+    if (this.UiAdvancedFilterConditionItemValue) {
+      this.UiAdvancedFilterConditionItemValue.$on('ui-advanced-filter-condition-item-collect_text', this.handleUiAdvancedFilterConditionItemValueCollectText)
+    }
+  },
+  methods: {
+    /**
+     * 加载远程备选项
+    */
+    loadOptions (isLoading, pageIndex) {
+      if (!this.queryMethod) {
+        return
+      }
+      const params = {}
+      if (this.lazy) {
+        params.pageIndex = (pageIndex || this.pageIndex) - 1
+        params.pageSize = this.pageSize
+      }
+      if (this.showOptions && this.showOptions.length) {
+        params.lastItem = this.showOptions[this.showOptions.length - 1]
+      }
+      params.keyword = this.keyword
+      const rs = this.queryMethod(params)
+      if (rs && rs.then) {
+        if (isLoading !== false) {
+          this.innerLoading = true
+        }
+        return rs.then((rs) => {
+          this.notMore = rs.length < this.pageSize
+          return rs
+        }).finally(() => {
+          this.innerLoading = false
+        })
+      } else {
+        return Promise.resolve(rs || [])
+      }
+    },
+    reload (isLoading = true) {
+      this.options = []
+      this.showOptions = []
+      const rs = this.loadOptions(true, 1)
+      if (rs && rs.then) {
+        if (isLoading) {
+          this.reloading = true
+        }
+        rs.then((rs) => {
+          this.options = rs || []
+          this.showOptions = this.options
+          this.$emit('load', {
+            data: this.options
+          })
+        }).finally(() => {
+          if (isLoading) {
+            this.reloading = false
+          }
+        })
+      }
+      return rs
+    },
+    loadMoreOptions () {
+      if (this.innerLoading || this.notMore) {
+        return
+      }
+      const nextPageIndex = this.pageIndex + 1
+      const rs = this.loadOptions(true, nextPageIndex)
+      if (rs && rs.then) {
+        this.moring = true
+        rs.then((rs) => {
+          this.pageIndex = nextPageIndex
+          this.options = [].concat(this.options, rs || [])
+          this.showOptions = this.options
+          this.$emit('load', {
+            data: this.options
+          })
+        }).finally(() => {
+          this.moring = false
+        })
+      }
+    },
+    doLayout () {
+      this.$refs.select && this.$refs.select.$refs.popper && this.$refs.select.$refs.popper.updatePopper()
+    },
+    doHandleLayout () {
+      if (!this.$refs.select) {
+        return
+      }
+      if (this.$refs.select.visible) {
+        if (this.$refs.select.$refs.popper) {
+          this.$refs.select.$refs.popper.$el.style.width = `${this.$refs.select.inputWidth}px`
+        }
+      }
+    },
+    handleVisibleChange () {
+      this.$emit('visible-change')
+    },
+    handleInputFocus () {
+      // 修复如果选项里面的文字太长了，第一次的时候popover计算宽度的逻辑滞后，导致定位不正确，下拉框错位，这里只针对第一次打开的时候重新doLayout一下
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.doHandleLayout()
+        this.doLayout()
+      }, 60)
+    },
+    handleLoadMore () {
+      this.loadMoreOptions()
+    },
+    handleLoadMoreClick () {
+      this.loadMoreOptions()
+    },
+    handleClear () {
+      if (this.$refs.select) {
+        this.$refs.select.query = ''
+        this.$refs.select.handleQueryChange('')
+      }
+    },
+    handleUiAdvancedFilterConditionItemValueCollectText ({ getValue, setTextMap }) {
+      const value = getValue()
+      if (!value || !value.length) {
+        setTextMap({})
+      } else {
+        if (this.options && this.options.length) {
+          const textData = this.options.filter(v => value.includes(v[this.valueField]))
+          setTextMap(textData.reduce((rs, v) => {
+            rs[v[this.valueField]] = v[this.textField]
+            return rs
+          }, {}))
+        } else {
+          setTextMap({})
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.UiAdvancedFilterConditionItemValue) {
+      this.UiAdvancedFilterConditionItemValue.$off('ui-advanced-filter-condition-item-collect_text', this.handleUiAdvancedFilterConditionItemValueCollectText)
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
+  }
+}
+</script>
+<style lang="less">
+.ui-select{
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  &.is-disabled{
+    .ui-select__loading{
+      background-color: #f6f7fa;
+    }
+  }
+  .el-select{
+    vertical-align: top;
+  }
+  &.is-loading {
+    .el-select__tags{
+      display: none;
+    }
+  }
+  .el-select__tags{
+    .el-tag{
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .el-icon-close{
+        vertical-align: top;
+        margin-top: 4px;
+      }
+    }
+  }
+  &.is-collapse-tags{
+    .el-select__tags{
+      .el-tag{
+        max-width: calc(~'100% - 68px');
+      }
+    }
+  }
+  .el-input__inner{
+    box-sizing: border-box;
+  }
+}
+.ui-select__loading{
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  padding-left: 10px;
+  z-index: 3;
+  height: 28px;
+  line-height: 28px;
+  color: #999;
+  background-color: #fff;
+  border-radius: 3px;
+}
+.ui-select{
+  .el-input{
+    &.is-focus{
+      .el-input__inner{
+        border-color: #1aa2e8;
+        box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+      }
+    }
+  }
+  .el-input__inner{
+    transition: all .15s ease-in-out;
+    padding-left: 11px;
+    padding-right: 11px;
+    color: #404040;
+    box-sizing: border-box;
+    &:focus{
+      border-color: #1aa2e8;
+      box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+    }
+  }
+}
+.ui-select__item.el-select-dropdown__item.selected{
+  color: #28a4e6;
+}
+.el-select-dropdown__empty{
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: 12px;
+}
+body {
+  .el-select-dropdown__item{
+    min-height: 34px;
+    height: auto;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+/deep/.el-input--prefix .el-input__inner {
+  padding-left: 30px !important;
+}
+</style>

package/components/skeleton/index.js

@@ -0,0 +1,14 @@
+import UiSkeleton from './skeleton'
+import UiSkeletonRows from './skeleton-rows'
+
+UiSkeleton.install = (Vue) => {
+  Vue.component(UiSkeleton.name, UiSkeleton)
+  Vue.component(UiSkeletonRows.name, UiSkeletonRows)
+}
+
+export {
+  UiSkeleton,
+  UiSkeletonRows
+}
+
+export default UiSkeleton

package/components/skeleton/skeleton-rows.vue

@@ -0,0 +1,52 @@
+<script>
+import Skeleton from './skeleton'
+
+function renderRow(h, props) {
+  const rs = []
+  for (let i = 0; i < props.value; i++) {
+    rs.push(h(Skeleton, {
+      props: {
+        height: '18px',
+        radius: '9px'
+      }
+    }))
+  }
+  return rs
+}
+
+export default {
+  name: 'UiSkeletonRows',
+  functional: true,
+  props: {
+    value: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  render(h, context) {
+    return h('div', {
+      class: 'ui-skeleton-rows',
+      style: {
+        width: context.props.width
+      }
+    }, renderRow(h, context.props))
+  }
+}
+</script>
+<style lang="less">
+.ui-skeleton-rows{
+  .ui-skeleton{
+    margin: 10px 0;
+    &:first-child{
+      margin-top: 0;
+    }
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

package/components/skeleton/skeleton.vue

@@ -0,0 +1,72 @@
+<script>
+export default {
+  name: 'UiSkeleton',
+  functional: true,
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    radius: {
+      type: String,
+      default: '3px'
+    }
+  },
+  render(h, context) {
+    const style = {}
+    const { props, data } = context
+    if (props.width) {
+      style.width = props.width
+    }
+    if (props.height) {
+      style.height = props.height
+    }
+    if (props.radius) {
+      style['border-radius'] = props.radius
+    }
+    const className = data.staticClass || data.class
+    return h('div', {
+      class: ['ui-skeleton'].concat(className || []),
+      style
+    })
+  }
+}
+</script>
+<style lang="less">
+.ui-skeleton{
+  position: relative;
+  overflow: hidden;
+  background-color: #f8f8f9;
+  &:before{
+    content: '';
+  }
+  &:after{
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    background: linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);
+    -webkit-animation: ui-skeleton-animate 1.75s linear infinite;
+    animation: ui-skeleton-animate 1.75s linear infinite
+  }
+}
+@keyframes ui-skeleton-animate {
+  0% {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%)
+  }
+
+  to {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%)
+  }
+}
+
+</style>

package/components/sortable/index.js

@@ -0,0 +1,9 @@
+import Sortable from './sortable'
+import SortableItem from './sortable-item'
+
+export default {
+  install: (Vue) => {
+    Vue.component(Sortable.name, Sortable)
+    Vue.component(SortableItem.name, SortableItem)
+  }
+}