@aochuang/common 1.0.0 → 1.0.1

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 = clone(this.value)
+    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'
+
+export {
+  Filter,
+  FilterItem,
+  FilterGroup
+}
+
+export default {
+  Filter,
+  FilterItem,
+  FilterGroup,
+  install (Vue) {
+    Vue.component(Filter.name, Filter)
+    Vue.component(FilterGroup.name, FilterGroup)
+    Vue.component(FilterItem.name, FilterItem)
+  }
+}

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
+}

package/components/form/form-cell.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-col :span="innerSpan" class="ui-form-cell" :class="['is-label-' + labelPosition, { 'is-margin-bottom': marginBottom }]">
+    <el-form-item :prop="prop" :required="required" :label-width="labelWidth" ref="formItem" :style="style">
+      <slot>{{value}}</slot>
+      <div class="ui-form-cell__label" slot="label" v-if="$slots.label || label">
+        <slot name="label">{{label}}</slot>
+        <ui-tooltip class="ui-form-cell__explain" v-if="explain" :content="explain">
+          <ui-icon name="question-fill">a</ui-icon>
+        </ui-tooltip>
+      </div>
+      <span class="ui-form-cell__error" slot="error" slot-scope="{ error }">
+        <slot name="error" :error="error">{{error}}</slot>
+      </span>
+      <p class="ui-form-cell__tips" v-if="tips || $slots.tips">
+        <slot name="tips">{{tips}}</slot>
+      </p>
+    </el-form-item>
+  </el-col>
+</template>
+<script>
+import Col from 'element-ui/lib/col'
+import 'element-ui/lib/theme-chalk/col.css'
+import FormItem from 'element-ui/lib/form-item'
+import 'element-ui/lib/theme-chalk/form-item.css'
+
+export default {
+  name: 'UiFormCell',
+  inject: ['UiForm'],
+  provide () {
+    return {
+      UiFormCell: this
+    }
+  },
+  components: {
+    ElCol: Col,
+    ElFormItem: FormItem
+  },
+  props: {
+    label: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'top'
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    marginBottom: {
+      type: Boolean,
+      default: true
+    },
+    prop: {
+      type: String
+    },
+    tips: {
+      type: String
+    },
+    explain: {
+      type: String
+    },
+    span: {
+      type: Number
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    style () {
+      const map = {
+        top: 'flex-top',
+        middle: 'center',
+        bottom: 'flex-end'
+      }
+      return {
+        'align-items': map[this.align]
+      }
+    },
+    labelPosition () {
+      return this.UiForm.labelPosition
+    },
+    labelWidth () {
+      let width
+      if (!this.showLabel) {
+        width = '0'
+      }
+      return width
+    },
+    parent () {
+      return this.$parent.$parent
+    },
+    innerSpan () {
+      if (this.span) {
+        return this.span
+      } else {
+        let num = 0
+        if (this.parent && this.parent.$options.name === 'UiFormRow' && this.parent.$slots.default) {
+          num = this.parent.$slots.default.filter(v => {
+            return v && v.componentOptions && v.componentOptions.Ctor && v.componentOptions.Ctor.options && v.componentOptions.Ctor.options.name === 'UiFormCell'
+          }).length
+        }
+        return num === 0 ? 24 : 24 / num
+      }
+    },
+    model () {
+      return this.UiForm.model
+    },
+    value () {
+      let value
+      if (this.prop) {
+        value = this.model[this.prop]
+        return value === null || value === undefined || value === '' ? '' : value
+      }
+      return value
+    }
+  },
+  methods: {
+    isValid () {
+      return this.$refs.formItem.validateState !== 'error'
+    }
+  }
+}
+</script>
+<style lang="less">
+body .ui-form-cell{
+  box-sizing: border-box!important;
+  &:not(.is-label-top) {
+    > .el-form-item{
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  &.is-label-top{
+    position: relative;
+    > .el-form-item.is-required > .el-form-item__label:before{
+      right: -20px;
+    }
+    > .el-form-item{
+      margin-bottom: 12px;
+    }
+    > .el-form-item > .el-form-item__label{
+      padding-top: 0;
+    }
+  }
+  &:not(.is-margin-bottom) {
+    > .el-form-item{
+      margin-bottom: 0;
+    }
+  }
+  .el-form-item{
+    margin-bottom: 15px;
+    &:before{
+      display: none;
+    }
+    &.is-required{
+      .el-form-item__label:before{
+        position: absolute;
+        top: 8px;
+        right: 0;
+        height: 16px;
+        line-height: 16px;
+        width: 16px;
+        text-align: center;
+      }
+    }
+    &.is-error{
+      .el-input .el-input__inner,
+      .el-textarea__inner{
+        border-color: #F56C6C;
+        &:hover{
+          border-color: #F56C6C;
+        }
+        &:focus{
+          box-shadow: 0 0 0 0.2rem rgba(245, 108, 108, 0.25);
+        }
+      }
+      .el-input.is-focus .el-input__inner{
+        box-shadow: 0 0 0 0.2rem rgba(245, 108, 108, 0.25);
+      }
+    }
+  }
+  .el-form-item__label{
+    line-height: 24px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    color: #888;
+    position: relative;
+    box-sizing: border-box;
+  }
+  .ui-form-cell__label{
+    display: flex;
+    flex-direction: row;
+  }
+  .el-form-item__content{
+    line-height: 32px;
+    word-break: break-all;
+    flex: 1;
+    margin-left: 0!important;
+    font-size: 14px;
+    min-width: 0;
+    &:before,&:after{
+      display: none;
+    }
+  }
+  .el-form-item__error{
+    position: static;
+    margin-top: 3px;
+  }
+}
+.ui-form-cell__tips{
+  margin: 5px 0 0;
+  line-height: 1.7em;
+  color: #999;
+  font-size: 12px;
+}
+.ui-form-cell__error{
+  margin-top: 3px;
+  display: block;
+  color: #F56C6C;
+  padding-top: 4px;
+  line-height: 1;
+  font-size: 12px;
+}
+.ui-form-cell__explain{
+  display: inline-block;
+  margin-left: 4px;
+}
+</style>