@aochuang/common 1.0.0 → 1.0.126

package/common/wechat-emoji/utils.js

@@ -0,0 +1,52 @@
+import EmojiOrder from './order.json'
+import { html2Escape } from '../../utils/string'
+
+let emojiRegrex = null
+function generateEmojiRegrex () {
+  if (emojiRegrex) {
+    return emojiRegrex
+  }
+  const content = EmojiOrder.map(v => '\\[' + v + '\\]').join('|')
+  emojiRegrex = new RegExp(`(${content})`, 'g')
+  return emojiRegrex
+}
+
+let emojiPath = null
+function generateEmojiPaths () {
+  if (emojiPath) {
+    return emojiPath
+  }
+  emojiPath = EmojiOrder.reduce((rs, v) => {
+    rs[v] = require(`./emoji/${v}.png`)
+    return rs
+  }, {})
+  return emojiPath
+}
+
+export function loadWechatEmojiOptionsData () {
+  return new Promise((resolve, reject) => {
+    const data = generateEmojiPaths()
+    resolve(Object.keys(data).reduce((rs, k) => {
+      rs.push({
+        label: k,
+        src: data[k]
+      })
+      return rs
+    }, []))
+  })
+}
+
+export function parseWechatEmoji (content, isEscape) {
+  if (isEscape !== false) {
+    content = html2Escape(content)
+  }
+  const regrex = generateEmojiRegrex()
+  const paths = generateEmojiPaths()
+  return content.replace(regrex, (str1, str2) => {
+    const emoji = str2.substr(1, str2.length - 2)
+    if (paths[emoji]) {
+      return `<img width="24px" height="24px" src="${paths[emoji]}" alt="${emoji}"/>`
+    }
+    return str2
+  })
+}

package/common/wechat-emoji/wechat-emoji.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="ac-wechat-emoji">
+    <ul class="ac-wechat-emoji__list">
+      <li
+        class="ac-wechat-emoji__item"
+        v-for="(item, index) in data"
+        :key="index"
+        :style="{'background-image': `url(${item.src})`}"
+        :title="item.label"
+        @click="handleItemClick(item)"
+      >{{item.label}}</li>
+    </ul>
+  </div>
+</template>
+<script>
+import { loadWechatEmojiOptionsData } from './utils'
+
+export default {
+  name: 'AcWechatEmoji',
+  data () {
+    return {
+      loading: false,
+      data: []
+    }
+  },
+  created () {
+    this.loadWechatEmojiOptionsData()
+  },
+  methods: {
+    handleItemClick (item) {
+      this.$emit('select', {
+        item
+      })
+    },
+    loadWechatEmojiOptionsData () {
+      this.loading = true
+      loadWechatEmojiOptionsData().then((rs) => {
+        this.loading = false
+        this.data = rs || []
+      }, () => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-wechat-emoji__list{
+  margin: 0;
+  padding: 6px;
+  &:after{
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-wechat-emoji__item{
+  float: left;
+  width: 36px;
+  height: 36px;
+  text-align: center;
+  line-height: 999;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 24px;
+  transition: all .3s;
+  border-radius: 3px;
+  cursor: pointer;
+  &:hover{
+    background-color: #f3f3f3;
+  }
+}
+</style>

package/common/wechat-emoji-select/index.js

@@ -0,0 +1,3 @@
+import WechatEmojiSelect from './wechat-emoji-select'
+
+export default WechatEmojiSelect

package/common/wechat-emoji-select/wechat-emoji-select.vue

@@ -0,0 +1,67 @@
+<template>
+  <ui-popover
+    v-model="visible"
+    trigger="click"
+    class="ac-wechat-emoji-select"
+    :visible-arrow="true"
+    :class="{'is-active': visible}"
+  >
+    <template slot="reference">
+      <slot name="reference">
+        <ui-icon
+          class="ac-wechat-emoji-select__handle"
+          name="emoji-fill"
+          :size="20"
+        ></ui-icon>
+      </slot>
+    </template>
+    <div class="ac-wechat-emoji-select__panel">
+      <bi-wechat-emoji
+        @select="handleEmojiSelect"
+      ></bi-wechat-emoji>
+    </div>
+  </ui-popover>
+</template>
+<script>
+import { Popover as UiPopover, Icon as UiIcon } from '../../components'
+import BiWechatEmoji from '../wechat-emoji'
+
+export default {
+  name: 'AcWechatEmojiSelect',
+  components: {
+    BiWechatEmoji,
+    UiIcon,
+    UiPopover
+  },
+  data () {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    handleEmojiSelect (evt) {
+      this.$emit('select', evt)
+      this.visible = false
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-wechat-emoji-select{
+  &.is-active{
+    .ac-wechat-emoji-select__handle{
+      color: #fda73e;
+    }
+  }
+}
+.ac-wechat-emoji-select__handle{
+  color: #bababa;
+  cursor: pointer;
+  &:hover{
+    color: #999;
+  }
+}
+.ac-wechat-emoji-select__panel{
+  width: 480px;
+}
+</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>