@aochuang/common 1.0.0 → 1.0.1

package/common/loading/index.js

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

package/common/loading/loading.vue

@@ -0,0 +1,71 @@
+<template>
+  <transition>
+    <div class="ac-loading" v-if="visible" :style="style">
+      <ui-icon class="ac-loading__icon" name="loading" :size="40" color="#28a4e6"></ui-icon>
+      <div v-if="text" class="ac-loading__text">{{text}}</div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: 'AcLoading',
+  props: {
+    visible: {
+      type: Boolean
+    },
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    text: {
+      type: String
+    }
+  },
+  computed: {
+    style () {
+      const sy = {}
+      if (this.opacity) {
+        sy['background-color'] = `rgba(255, 255, 255, ${this.opacity})`
+      }
+      return sy
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-loading{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 1px;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &.v-enter{
+    opacity: 0;
+  }
+  &.v-enter-active{
+    transition: all .3s;
+  }
+  &.v-enter-active{
+    opacity: 1;
+  }
+  &.v-leave{
+    opacity: 1;
+  }
+  &.v-leave-active{
+    transition: all .3s;
+  }
+  &.v-leave-active{
+    opacity: 0;
+  }
+}
+.ac-loading__text{
+  display: block;
+  color: #999;
+}
+</style>

package/common/tips/index.js

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

package/common/tips/tips.vue

@@ -0,0 +1,82 @@
+<script>
+export default {
+  name: 'AcTips',
+  functional: true,
+  props: {
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator (value) {
+        return ['info', 'warning'].includes(value)
+      }
+    },
+    title: {
+      type: String
+    },
+    bgColor: {
+      type: Boolean,
+      default: false
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render (h, context) {
+    const { props, data } = context
+    return h('div', {
+      class: ['ac-tips', 'ac-tips--' + props.type, { 'is-bgcolor': props.bgColor, 'is-inline': props.inline }, data.staticClass]
+    }, [
+      h('span', {
+        class: 'ac-tips__title'
+      }, [
+        props.showIcon ? h('ui-icon', {
+          props: {
+            name: props.type === 'warning' ? 'alert-fill1' : 'error-warning-line'
+          }
+        }) : null,
+        props.title ? h('span', {
+          class: 'ac-tips__title-text'
+        }, [props.title]) : null
+      ]),
+      h('div', {
+        class: 'ac-tips__main'
+      }, [context.slots().default])
+    ])
+  }
+}
+</script>
+<style lang="less">
+.ac-tips{
+  line-height: 24px;
+  padding: 4px 0;
+  display: flex;
+  flex-direction: row;
+  .ui-icon{
+    margin-right: 3px;
+    vertical-align: top;
+    display: inline-block;
+  }
+  &.is-bgcolor{
+    background-color: #f3f3f3;
+    border-radius: 3px;
+    padding: 6px 12px;
+  }
+  &.is-inline{
+    display: inline-block;
+  }
+}
+.ac-tips__title-text {
+  margin-right: 6px;
+}
+.ac-tips--warning {
+  color: #E6A23C;
+}
+.ac-tips--tips {
+  color: #999;
+}
+</style>

package/common/tooltip/index.js

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

package/common/tooltip/popper.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import UiTooltip from '../../components/tooltip'
+
+const TooltipConstructor = Vue.extend(UiTooltip)
+
+let tooltip = null
+
+export function getTooltip () {
+  if (!tooltip) {
+    const $mound = document.createElement('div')
+    tooltip = new TooltipConstructor({
+      el: $mound
+    })
+    tooltip.manual = true
+    document.body.appendChild($mound)
+  }
+  return tooltip
+}

package/common/tooltip/tooltip.vue

@@ -0,0 +1,55 @@
+<script>
+import { getTooltip } from './popper'
+
+export default {
+  name: 'BiTooltip',
+  functional: true,
+  props: {
+    text: {
+      type: String
+    },
+    html: {
+      type: String
+    }
+  },
+  render (h, context) {
+    if (!context.props.text && !context.props.html) {
+      return context.scopedSlots.default ? context.scopedSlots.default() : null
+    }
+    return h('span', {
+      class: ['bi-tooltip'].concat(context.data.class || '', context.data.staticClass || ''),
+      attrs: context.data.attrs,
+      on: {
+        ...context.listeners,
+        mouseenter (e) {
+          const tooltip = getTooltip()
+          tooltip.visible = true
+          tooltip.content = context.props.text
+          tooltip.html = context.props.html
+          tooltip.setReferenceElm(e.target)
+        },
+        mouseleave () {
+          const tooltip = getTooltip()
+          tooltip.visible = false
+        }
+      }
+    }, [
+      context.children
+    ])
+  }
+}
+</script>
+<style lang="less">
+body {
+  .el-tooltip__popper{
+    white-space: pre-wrap;
+  }
+}
+.bi-tooltip{
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+</style>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-boolean.vue

@@ -0,0 +1,33 @@
+<template>
+  <ui-select
+    type="date"
+    v-model="innerValue"
+    :placeholder="placeholder"
+  >
+    <ui-select-item label="为真" :value="true"></ui-select-item>
+    <ui-select-item label="为假" :value="false"></ui-select-item>
+  </ui-select>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemDate',
+  props: {
+    placeholder: {
+      type: String
+    },
+    value: {
+      type: String
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-date-range.vue

@@ -0,0 +1,30 @@
+<template>
+  <ui-date-picker
+    type="daterange"
+    v-model="innerValue"
+    start-placeholder="起始日期"
+    end-placeholder="截止日期"
+    format="yyyy-MM-dd"
+    value-format="yyyy-MM-dd HH:mm:ss"
+  ></ui-date-picker>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemDateRange',
+  props: {
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-date.vue

@@ -0,0 +1,41 @@
+<template>
+  <ui-date-picker
+    type="date"
+    v-model="innerValue"
+    :placeholder="placeholder"
+    format="yyyy-MM-dd"
+    value-format="yyyy-MM-dd HH:mm:ss"
+  ></ui-date-picker>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemDate',
+  props: {
+    placeholder: {
+      type: String,
+      default: '选择日期'
+    },
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (Array.isArray(this.value)) {
+          return this.value[0]
+        }
+        return this.value
+      },
+      set (val) {
+        if (val === null || val === undefined) {
+          val = []
+        } else {
+          val = [val]
+        }
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-datetime-range.vue

@@ -0,0 +1,34 @@
+<template>
+  <ui-date-picker
+    type="datetimerange"
+    v-model="innerValue"
+    start-placeholder="起始日期"
+    end-placeholder="截止日期"
+    format="yyyy-MM-dd HH:mm"
+    value-format="yyyy-MM-dd HH:mm:ss"
+  ></ui-date-picker>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemDatetimeRange',
+  props: {
+    placeholder: {
+      type: String,
+      default: '选择时间'
+    },
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-datetime.vue

@@ -0,0 +1,41 @@
+<template>
+  <ui-date-picker
+    type="datetime"
+    v-model="innerValue"
+    :placeholder="placeholder"
+    format="yyyy-MM-dd HH:mm"
+    value-format="yyyy-MM-dd HH:mm:ss"
+  ></ui-date-picker>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemDatetime',
+  props: {
+    placeholder: {
+      type: String,
+      default: '选择时间'
+    },
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (Array.isArray(this.value)) {
+          return this.value[0]
+        }
+        return this.value
+      },
+      set (val) {
+        if (val === null || val === undefined) {
+          val = []
+        } else {
+          val = [val]
+        }
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-number-range.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="ui-advanced-filter-conditon-item-number-range">
+    <div class="ui-advanced-filter-conditon-item-number-range__item">
+      <ui-spinner
+        v-model="startValue"
+        placeholder="起始值"
+        style="width: 100%"
+      ></ui-spinner>
+    </div>
+    <div class="ui-advanced-filter-conditon-item-number-range__line">~</div>
+    <div class="ui-advanced-filter-conditon-item-number-range__item">
+      <ui-spinner
+        v-model="endValue"
+        placeholder="截止值"
+        style="width: 100%"
+      ></ui-spinner>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterConditionItemNumberRange',
+  props: {
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (!Array.isArray(this.value)) {
+          return []
+        }
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    startValue: {
+      get () {
+        return this.innerValue[0]
+      },
+      set (val) {
+        this.innerValue = [val, this.endValue]
+      }
+    },
+    endValue: {
+      get () {
+        return this.innerValue[1]
+      },
+      set (val) {
+        this.innerValue = [this.startValue, val]
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-conditon-item-number-range{
+  display: flex;
+  flex-direction: row;
+}
+.ui-advanced-filter-conditon-item-number-range__line{
+  margin: 0 6px;
+}
+</style>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-number.vue

@@ -0,0 +1,35 @@
+<template>
+  <ui-spinner
+    v-model="innerValue"
+    placeholder="请输入"
+    style="width: 100%"
+  ></ui-spinner>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemNumber',
+  props: {
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (Array.isArray(this.value)) {
+          return this.value[0]
+        }
+        return this.value
+      },
+      set (val) {
+        if (val === null || val === undefined) {
+          val = []
+        } else {
+          val = [val]
+        }
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-string.vue

@@ -0,0 +1,41 @@
+<template>
+  <ui-textbox
+    v-model="innerValue"
+    placeholder="多个条件使用；隔开"
+    @blur="handleBlur"
+    :maxlength="null"
+  ></ui-textbox>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterconditionItemString',
+  props: {
+    placeholder: {
+      type: String
+    },
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        if (Array.isArray(this.value)) {
+          return this.value.join('；')
+        }
+        return this.value
+      },
+      set (val) {
+        val = val.split(/[；;]/)
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleBlur() {
+      let innerValue = (this.innerValue || '').split(/[；;]/).filter(v => !!v)
+      this.$emit('input', innerValue)
+    }
+  }
+}
+</script>

package/components/advanced-filter/advanced-filter-condition-item/advanced-filter-condition-item-value.vue

@@ -0,0 +1,73 @@
+<template>
+  <component :is="component" v-model="innerValues"></component>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterConditionItemValue',
+  inject: ['UiAdvancedFilter'],
+  provide () {
+    return {
+      UiAdvancedFilterConditionItemValue: this
+    }
+  },
+  props: {
+    component: {
+      type: Object,
+      required: true
+    },
+    name: {
+      type: String
+    },
+    value: {
+      type: Array
+    }
+  },
+  computed: {
+    innerValues: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  created () {
+    this.UiAdvancedFilter.$on('collect-condition-text-data', this.handleCollectConditionTextData)
+  },
+  methods: {
+    handleCollectConditionTextData (evt) {
+      if (!this.name) {
+        return
+      }
+      if (!evt || !evt.conditions || !evt.conditions.length) {
+        return
+      }
+      const condition = evt.conditions.find(v => v.name === this.name)
+      let isSet = false
+      this.$emit('ui-advanced-filter-condition-item-collect_text', {
+        getValue () {
+          return condition.values
+        },
+        /**
+         * 设置值对应的textMap
+         * {
+         *    [value]: text
+         *    ...
+         * }
+        */
+        setTextMap (textMap) {
+          // 设置了就不在继续设置，防止类型用户选择组件里面包select基础组件，导致重复触发问题
+          if (isSet) {
+            return
+          }
+          condition.valueMap = textMap
+        }
+      })
+    }
+  },
+  beforeDestroy () {
+    this.UiAdvancedFilter.$off('collect-condition-text-data', this.handleCollectConditionTextData)
+  }
+}
+</script>