@aochuang/common 1.0.0 → 1.0.126

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>

package/components/filter/filter.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="ui-filter" :class="['is-' + dir]">
+    <slot />
+    <div class="ui-filter__fast">
+      <template v-if="fastFilterGroups && fastFilterGroups.length">
+        <div class="ui-filter__fast-groups">
+          <div
+            class="ui-filter__fast-group"
+            v-for="(group, index) in fastFilterGroups"
+            :key="group.id"
+          >
+            <div class="ui-filter__fast-group-label" v-if="group.props.label" :style="{'width': group.props.labelWidth}">
+              {{ group.props.label }}
+            </div>
+            <div class="ui-filter__fast-group-target">
+              <template v-if="group.children && group.children.length">
+                <div class="ui-filter__fast-list">
+                  <div
+                    v-for="(item, index) in group.children"
+                    :key="index"
+                    class="ui-filter__fast-item"
+                    v-show="item.props.show !== false"
+                  >
+                    <span class="ui-filter__fast-item-label" v-if="item.props.label" :style="{'width': labelWidth}">{{item.props.label}}</span>
+                    <div class="ui-filter__fast-item-target">
+                      <component :is="handleRenderItem(item)" :data-key="item.info.count" />
+                    </div>
+                  </div>
+                  <template v-if="(!fastFilterNotGroupItems || !fastFilterNotGroupItems.length) && index === fastFilterGroups.length - 1">
+                    <template v-if="!imediate">
+                      <div class="ui-filter__fast-item">
+                        <ui-button :loading="tableLoading" icon="sousuo" type="primary" @click="handleSearchClick">搜索</ui-button>
+                      </div>
+                      <div class="ui-filter__fast-item">
+                        <ui-button :loading="tableLoading" icon="refresh-line" @click="handleResetClick">重置</ui-button>
+                      </div>
+                    </template>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-if="fastFilterNotGroupItems && fastFilterNotGroupItems.length">
+        <div class="ui-filter__fast-list">
+          <div
+            v-for="(item, index) in fastFilterNotGroupItems"
+            :key="index"
+            class="ui-filter__fast-item"
+            v-show="item.props.show !== false"
+          >
+            <span class="ui-filter__fast-item-label" v-if="item.props.label" :style="{'width': labelWidth}">{{item.props.label}}</span>
+            <div class="ui-filter__fast-item-target">
+              <component :is="handleRenderItem(item)" :data-key="item.info.count" />
+            </div>
+          </div>
+          <template v-if="!imediate">
+            <div class="ui-filter__fast-item">
+              <ui-button :loading="tableLoading" icon="sousuo" type="primary" @click="handleSearchClick">搜索</ui-button>
+            </div>
+            <div class="ui-filter__fast-item">
+              <ui-button :loading="tableLoading" icon="refresh-line" @click="handleResetClick">重置</ui-button>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+    <div class="ui-filter__more" v-if="moreFilterItems && moreFilterItems.length">
+      <filter-more
+        :value="value"
+        :items="moreFilterItems"
+        :label-width="labelWidth"
+      ></filter-more>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from '../../utils/util'
+import FilterMore from './filter-more'
+import { clone } from '../../utils/json'
+
+export default {
+  name: 'UiFilter',
+  components: {
+    FilterMore
+  },
+  provide() {
+    return {
+      UiFilter: this
+    }
+  },
+  props: {
+    value: {
+      type: Object
+    },
+    ready: {
+      type: Boolean,
+      default: true
+    },
+    dir: {
+      type: String,
+      default: 'horizon',
+      validtor (value) {
+        return ['horizon', 'vertical'].includes(value)
+      }
+    },
+    labelWidth: {
+      type: String
+    },
+    imediate: {
+      type: Boolean,
+      default: true
+    },
+    tableLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      initValue: null,
+      items: [],
+      groups: [],
+      innerReady: false
+    }
+  },
+  computed: {
+    fastFilterGroups() {
+      return this.groups.map(v => {
+        const vv = Object.assign({}, v)
+        vv.children = this.fastFilterItems.filter(item => item.groupId === v.id)
+        return vv
+      })
+    },
+    fastFilterNotGroupItems() {
+      return (this.items || []).filter(v => !v.groupId)
+    },
+    fastFilterItems() {
+      return this.items.filter(v => !v.props.more)
+    },
+    moreFilterItems () {
+      return this.items.filter(v => !!v.props.more)
+    },
+    operaterFnMap () {
+      return {
+        eq ({ field, value }) {
+          return [[field, '=', value]]
+        },
+        like ({ field, value }) {
+          return [[field, '=', `%${value}%`]]
+        },
+        between ({ field, value }) {
+          if (Array.isArray(value)) {
+            const result = value.reduce((rs, v, i) => {
+              if (isEmpty(v)) {
+                return
+              }
+              if (i === 0) {
+                rs.push([field, '>', v])
+              } else {
+                rs.push([field, '<', v])
+              }
+              return rs
+            }, [])
+            if (!result.length) {
+              return
+            }
+            return result
+          }
+        },
+        in () {
+
+        }
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler () {
+        if (this.ready && this.innerReady && this.imediate) {
+          this.handleChange()
+        }
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.initValue = this.value ? clone(this.value) : null
+    this.$watch(() => {
+      return this.value
+    }, () => {
+      this.initValue = clone(this.value)
+    })
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.innerReady = true
+    })
+  },
+  methods: {
+    handleChange() {
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.$emit('change')
+      })
+    },
+    handleSearchClick() {
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.$emit('change')
+      })
+    },
+    handleResetClick () {
+      this.$emit('input', this.initValue)
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.$emit('change')
+      })
+    },
+    getFilters() {
+      const simple = {}
+      const where = []
+      Object.keys(this.value || {}).forEach(key => {
+        if (isEmpty(this.value[key])) {
+          return
+        }
+        let filterValue = this.value[key]
+        const item = this.items.find(v => v.props && v.props.prop === key)
+        // if (item) {
+        //   if (item.props.transform) {
+        //     filterValue = item.props.transform({
+        //       value: filterValue
+        //     })
+        //   }
+        //   if (!this.operaterFnMap[item.props.operater]) {
+        //     throw new Error('不支持的操作符' + item.props.operater)
+        //   }
+        //   const fields = [item.props.prop]
+        //   fields.forEach(field => {
+        //     const filterItem = this.operaterFnMap[item.props.operater]({
+        //       field,
+        //       value: filterValue
+        //     })
+        //     if (!filterItem) {
+        //       return
+        //     }
+        //     filterItem.forEach(item => {
+        //       where.push(item)
+        //     })
+        //   })
+        // } else {
+        simple[key] = filterValue
+        // }
+      })
+      // return {
+      //   simple,
+      //   complex: {
+      //     where
+      //   }
+      // }
+      return simple
+    },
+    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 lang="less">
+.ui-filter{
+  width: 100%;
+  &.is-horizon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .ui-filter__fast-item{
+      margin: 3px 18px 3px 0;
+    }
+  }
+  &.is-vertical {
+    display: flex;
+    flex-direction: column;
+    .ui-filter__fast-item{
+      margin: 6px 0 6px 0;
+      width: 100%;
+    }
+    .ui-filter__fast-item-target{
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+.ui-filter__fast{
+  flex: 1;
+}
+.ui-filter__fast-groups{
+  border-radius: 4px;
+  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
+}
+.ui-filter__fast-group{
+  display: flex;
+  flex-direction: row;
+  padding: 2px;
+  &:not(:last-child) {
+    border-bottom: 1px dashed #eee;
+  }
+}
+.ui-filter__fast-group-label {
+  line-height: 24px;
+  padding: 9px 12px;
+  margin-right: -16px;
+  white-space: nowrap;
+}
+.ui-filter__fast-group-target{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 2px 12px;
+}
+.ui-filter__fast-list{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.ui-filter__fast-item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-filter__fast-item:last-child{
+  margin-right: 0;
+}
+.ui-filter__fast-item-label{
+  color: #999;
+  padding-right: 9px;;
+}
+.ui-filter__more{
+  margin-left: 12px;
+}
+</style>

package/components/filter/index.js

@@ -0,0 +1,20 @@
+import Filter from './filter'
+import FilterGroup from './filter-group'
+import FilterItem from './filter-item'
+
+Filter.install = (Vue) => {
+  Vue.component(Filter.name, Filter)
+  Vue.component(FilterGroup.name, FilterGroup)
+  Vue.component(FilterItem.name, FilterItem)
+}
+
+Filter.FilterItem = FilterItem
+Filter.FilterGroup = FilterGroup
+
+export {
+  Filter,
+  FilterItem,
+  FilterGroup
+}
+
+export default Filter

package/components/filter/refresh-line.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><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" p-id="25774"></path></svg>

package/components/filter/util.js

@@ -0,0 +1,5 @@
+let number = 1621734381083
+export const unique = function() {
+  ++number
+  return 'ui-toolbar-' + number
+}