@aochuang/common 1.0.0 → 1.0.1

package/components/advanced-filter/advanced-filter-scene.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="ui-advanced-filter-scene">
+    <div class="ui-advanced-filter-scene__list">
+      <advanced-filter-scene-item
+        v-for="scene in fixedShowSceneData"
+        :label="scene.name"
+        :key="scene.sceneId"
+        :active="value === scene.sceneId"
+        :active-dirty="currentSceneDirty"
+        @click="handleFixedSceneItemClick(scene)"
+      ></advanced-filter-scene-item>
+    </div>
+    <div class="ui-advanced-filter-scene__more">
+      <ui-popover
+        v-model="showMorePopover"
+      >
+        <template slot="reference">
+          <div class="ui-advanced-filter-scene__more-handle">
+            <template v-if="currentMoreScene">
+              <advanced-filter-scene-item
+                :active="true"
+                :active-dirty="currentSceneDirty"
+                :arrow="true"
+                :label="currentMoreScene.name"
+              ></advanced-filter-scene-item>
+            </template>
+            <template v-else>
+              <advanced-filter-scene-item :active="showMorePopover">
+                <i class="el-icon-arrow-down"></i>
+              </advanced-filter-scene-item>
+            </template>
+          </div>
+        </template>
+        <div class="ui-advanced-filter-scene__more-wrap">
+          <div class="ui-advanced-filter-scene__more-menu">
+            <div
+              class="ui-advanced-filter-scene__more-menu-item"
+              :class="{'is-active': scene.sceneId === value}"
+              v-for="scene in moreSceneData"
+              :key="scene.sceneId"
+              @click="handleMoreSceneItemClick(scene)"
+            >
+              {{ scene.name }}
+            </div>
+          </div>
+          <div class="ui-advanced-filter-scene__more-toolbar">
+            <ui-button @click="handleManageClick" icon="settings-4-line">场景设置</ui-button>
+          </div>
+        </div>
+      </ui-popover>
+    </div>
+    <ui-dialog
+      title="场景管理"
+      size="medium"
+      v-model="showManageDialog"
+    >
+      <advanced-filter-scene-manage
+        :field-data="fieldData"
+        :all-scene-data="allSceneData"
+        :hide-scene="hideScene"
+        :fetch-config-method="fetchConfigMethod"
+        :update-config-method="updateConfigMethod"
+        :update-scene-method="updateSceneMethod"
+        :create-scene-method="createSceneMethod"
+        :delete-scene-method="deleteSceneMethod"
+        :save-default-scene-method="saveDefaultSceneMethod"
+      >
+      </advanced-filter-scene-manage>
+    </ui-dialog>
+  </div>
+</template>
+<script>
+import AdvancedFilterSceneItem from './advanced-filter-scene-item'
+import AdvancedFilterSceneManage from './advanced-filter-scene-manage'
+
+export default {
+  name: 'UiAdvancedFilterScene',
+  components: {
+    AdvancedFilterSceneItem,
+    AdvancedFilterSceneManage
+  },
+  props: {
+    value: {
+      type: String
+    },
+    sceneData: {
+      type: Array
+    },
+    allSceneData: {
+      type: Array
+    },
+    /**
+     * 当前选中场景是不是数据已经脏了，筛选条件的值和场景的值不一样就认为脏了，这个时候将选中的场景样式改一下
+    */
+    currentSceneDirty: {
+      type: Boolean,
+      default: false
+    },
+    fieldData: {
+      type: Array
+    },
+    hideScene: {
+      type: Array
+    },
+    fetchConfigMethod: {
+      type: Function
+    },
+    updateConfigMethod: {
+      type: Function
+    },
+    updateSceneMethod: {
+      type: Function
+    },
+    createSceneMethod: {
+      type: Function
+    },
+    deleteSceneMethod: {
+      type: Function
+    },
+    saveDefaultSceneMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      showMorePopover: false,
+      showManageDialog: false
+    }
+  },
+  computed: {
+    showSceneData () {
+      return this.sceneData || []
+    },
+    moreSceneData () {
+      return (this.showSceneData || []).slice(5)
+    },
+    currentMoreScene () {
+      return this.moreSceneData.find(v => v.sceneId === this.value)
+    },
+    fixedShowSceneData () {
+      return (this.showSceneData || []).slice(0, 5)
+    }
+  },
+  methods: {
+    handleManageClick () {
+      this.showManageDialog = true
+    },
+    handleFixedSceneItemClick (item) {
+      this.$emit('input', item.sceneId)
+      this.$emit('change', {
+        scene: item
+      })
+    },
+    handleMoreSceneItemClick (item) {
+      this.$emit('input', item.sceneId)
+      this.$emit('change', {
+        scene: item
+      })
+      this.showMorePopover = false
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-scene{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-advanced-filter-scene__list{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-advanced-filter-scene__more-menu{
+  max-height: 240px;
+  padding: 6px 0;
+  overflow: auto;
+}
+.ui-advanced-filter-scene__more-menu-item {
+  padding: 6px 12px;
+  color: #42526E;
+  cursor: pointer;
+  line-height: 24px;
+  transition: all .25s;
+  &:hover {
+    background-color: #e6eefa;
+    color: #0052CC;
+  }
+  &.is-active {
+    background-color: #e6eefa;
+    color: #0052CC;
+  }
+}
+.ui-advanced-filter-scene__more-toolbar{
+  border-top: 1px solid #ddd;
+  padding: 12px;
+}
+</style>

package/components/advanced-filter/advanced-filter.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="ui-advanced-filter" :class="{'is-expanded': expanded}">
+    <div class="ui-advanced-filter__main">
+      <div class="ui-advanced-filter__col is-full">
+        <div class="ui-advanced-filter__permanent">
+          <slot name="permanent"></slot>
+        </div>
+        <div class="ui-advanced-filter__scene">
+          <slot name="scene"></slot>
+        </div>
+      </div>
+      <div class="ui-advanced-filter__col">
+        <slot name="toolbar"></slot>
+      </div>
+    </div>
+    <div class="ui-advanced-filter__condition" v-show="expanded">
+      <slot name="condition"></slot>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilter',
+  props: {
+    /**
+     * [{
+     *
+     * }]
+    */
+    value: {
+      type: Array
+    },
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * {
+     *    text: [{
+     *      value: 'isNot',
+     *      label: '不等于',
+     *      type: 2
+     *    },
+     *      ...
+     *    ]
+     * }
+    */
+    cnoditionOperate: {
+      type: Object
+    },
+    getValueComponent: {
+      type: Function
+    }
+  },
+  provide () {
+    return {
+      UiAdvancedFilter: this
+    }
+  },
+  data () {
+    return {
+      innerExpanded: this.expanded
+    }
+  },
+  watch: {
+    expanded () {
+      this.setExpanded(this.expanded)
+    }
+  },
+  methods: {
+    setExpanded (expanded) {
+      this.innerExpanded = !!expanded
+    },
+    /**
+     * 搜集条件选择的文本信息
+    */
+    collectConditionTextData (conditions) {
+      this.$emit('collect-condition-text-data', {
+        conditions
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter{
+  &.is-expanded {
+    .ui-advanced-filter__main{
+      margin-bottom: 12px;
+    }
+  }
+}
+.ui-advanced-filter__main{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-advanced-filter__col{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &.is-full {
+    flex: 1;
+  }
+}
+.ui-advanced-filter__permanent{
+  margin-right: 12px;
+}
+.ui-advanced-filter__condition{
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/components/advanced-filter/index.js

@@ -0,0 +1,36 @@
+import AdvancedFilter from './advanced-filter'
+import AdvancedFilterScene from './advanced-filter-scene'
+import AdvancedFilterSceneItem from './advanced-filter-scene-item'
+import AdvancedFilterPermanent from './advanced-filter-permanent'
+import AdvancedFilterPermanentItem from './advanced-filter-permanent-item'
+import AdvancedFilterCondition from './advanced-filter-condition'
+import AdvancedFilterConditionItem from './advanced-filter-condition-item/advanced-filter-condition-item'
+import AdvancedFilterConditionToggle from './advanced-filter-condition-toggle'
+
+import { defaultOperate, getBuiltinControl } from './utils'
+
+export {
+  defaultOperate,
+  getBuiltinControl,
+  AdvancedFilter,
+  AdvancedFilterPermanent,
+  AdvancedFilterPermanentItem,
+  AdvancedFilterScene,
+  AdvancedFilterSceneItem,
+  AdvancedFilterCondition,
+  AdvancedFilterConditionItem,
+  AdvancedFilterConditionToggle
+}
+
+export default {
+  defaultOperate,
+  getBuiltinControl,
+  AdvancedFilter,
+  AdvancedFilterPermanent,
+  AdvancedFilterPermanentItem,
+  AdvancedFilterScene,
+  AdvancedFilterSceneItem,
+  AdvancedFilterCondition,
+  AdvancedFilterConditionItem,
+  AdvancedFilterConditionToggle
+}

package/components/advanced-filter/utils.js

@@ -0,0 +1,132 @@
+import AdvancedFilterConditionItemDate from './advanced-filter-condition-item/advanced-filter-condition-item-date'
+import AdvancedFilterConditionItemDateRange from './advanced-filter-condition-item/advanced-filter-condition-item-date-range'
+import AdvancedFilterConditionItemDatetime from './advanced-filter-condition-item/advanced-filter-condition-item-datetime'
+import AdvancedFilterConditionItemDatetimeRange from './advanced-filter-condition-item/advanced-filter-condition-item-datetime-range'
+import AdvancedFilterConditionItemNumber from './advanced-filter-condition-item/advanced-filter-condition-item-number'
+import AdvancedFilterConditionItemNumberRange from './advanced-filter-condition-item/advanced-filter-condition-item-number-range'
+import AdvancedFilterConditionItemBoolean from './advanced-filter-condition-item/advanced-filter-condition-item-boolean'
+import AdvancedFilterConditionItemString from './advanced-filter-condition-item/advanced-filter-condition-item-string'
+
+export const defaultOperate = {
+  string: {
+    items: [
+      { value: 'is', label: '等于', type: 1 },
+      { value: 'isNot', label: '不等于', type: 2 },
+      { value: 'contains', label: '包含', type: 3 },
+      { value: 'notContains', label: '不包含', type: 4 },
+      { value: 'isNull', label: '为空', type: 5 },
+      { value: 'isNotNull', label: '不为空', type: 6 }],
+    getValueComponent ({ condition }) {
+      if (condition && [5, 6].includes(condition.type)) {
+        return null
+      }
+      return AdvancedFilterConditionItemString
+    },
+    onChange: ({ condition, setValues }) => {
+      if (condition && [5, 6].includes(condition.type)) {
+        setValues('')
+      } else {
+        if (condition.values === '') {
+          setValues([])
+        }
+      }
+    }
+  },
+  date: {
+    items: [{ value: 'is', label: '等于', type: 1 },
+      { value: 'isNot', label: '不等于', type: 2 },
+      { value: 'lt', label: '早于', type: 9 },
+      { value: 'gt', label: '晚于', type: 7 },
+      { value: 'egt', label: '不早于', type: 8 },
+      { value: 'elt', label: '不晚于', type: 10 },
+      { value: 'range', label: '等于（时间段）', type: 14 },
+      { value: 'isNull', label: '为空', type: 5 },
+      { value: 'isNotNull', label: '不为空', type: 6 }],
+    getValueComponent ({ condition }) {
+      if (condition && [5, 6].includes(condition.type)) {
+        return null
+      }
+      if (condition && [14].includes(condition.type)) {
+        return AdvancedFilterConditionItemDateRange
+      }
+      return AdvancedFilterConditionItemDate
+    },
+    onChange: ({ condition, setValues }) => {
+      if (condition && [5, 6].includes(condition.type)) {
+        setValues('')
+      } else {
+        if (condition.values === '') {
+          setValues([])
+        }
+      }
+    }
+  },
+  datetime: {
+    items: [{ value: 'is', label: '等于', type: 1 },
+      { value: 'isNot', label: '不等于', type: 2 },
+      { value: 'lt', label: '早于', type: 9 },
+      { value: 'gt', label: '晚于', type: 7 },
+      { value: 'range', label: '范围', type: 14 }],
+    getValueComponent ({ condition }) {
+      if (condition && [5, 6].includes(condition.type)) {
+        return null
+      }
+      if (condition && [14].includes(condition.type)) {
+        return AdvancedFilterConditionItemDatetimeRange
+      }
+      return AdvancedFilterConditionItemDatetime
+    },
+    onChange: ({ condition, setValues }) => {
+      if (condition && [5, 6].includes(condition.type)) {
+        setValues('')
+      } else {
+        if (condition.values === '') {
+          setValues([])
+        }
+      }
+    }
+  },
+  number: {
+    items: [{ value: 'is', label: '等于', type: 1 },
+      { value: 'gt', label: '大于', type: 7 },
+      { value: 'lt', label: '小于', type: 9 }],
+    getValueComponent ({ condition }) {
+      if (condition && condition.type === 14) {
+        return AdvancedFilterConditionItemNumberRange
+      } else {
+        return AdvancedFilterConditionItemNumber
+      }
+    },
+    onChange: ({ condition, setValues }) => {
+      if ([condition && 5, 6].includes(condition.type)) {
+        setValues('')
+      } else {
+        if (condition.values === '') {
+          setValues([])
+        }
+      }
+    }
+  },
+  boolean: {
+    items: [
+      { value: 'is', label: '等于', type: 1 },
+      { value: 'isNot', label: '不等于', type: 2 }],
+    getValueComponent ({ condition }) {
+      return AdvancedFilterConditionItemBoolean
+    }
+  }
+}
+
+export function getBuiltinControl (name) {
+  if (name === 'string') {
+    return AdvancedFilterConditionItemString
+  } else if (name === 'date') {
+    return AdvancedFilterConditionItemDate
+  } else if (name === 'datetime') {
+    return AdvancedFilterConditionItemDatetime
+  } else if (name === 'number') {
+    return AdvancedFilterConditionItemNumber
+  } else if (name === 'boolean') {
+    return AdvancedFilterConditionItemBoolean
+  }
+}

package/components/autocomplete/autocomplete.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-autocomplete
+    class="ui-autocomplete"
+    ref="input"
+    size="small"
+    :value-key="valueField"
+    v-model="innerValue"
+    :maxlength="maxlength"
+    :placeholder="placeholder"
+    :fetch-suggestions="handleFetchSuggestions"
+    @select="handleSelect"
+  >
+    <ui-icon
+      name="sousuo"
+      slot="suffix"
+      class="ui-autocomplete__search"
+      v-if="!value"
+    ></ui-icon>
+    <ui-icon
+      v-else
+      name="close-circle-fill"
+      slot="suffix"
+      class="ui-autocomplete__clear"
+      :size="20"
+      @click="handleClearClick"
+    ></ui-icon>
+    <template slot-scope="scope">
+      <slot name="item" v-bind="scope"></slot>
+    </template>
+  </el-autocomplete>
+</template>
+<script>
+import UiIcon from '../icon'
+import ElAutocomplete from 'element-ui/lib/autocomplete'
+import 'element-ui/lib/theme-chalk/autocomplete.css'
+
+export default {
+  name: 'UiAutocomplete',
+  props: {
+    value: {
+      type: String
+    },
+    maxlength: {
+      type: Number
+    },
+    valueField: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    fetchSuggestions: {
+      type: Function
+    }
+  },
+  components: {
+    UiIcon,
+    ElAutocomplete
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleSelect (evt) {
+      this.$emit('select', evt)
+    },
+    handleClearClick () {
+      this.innerValue = ''
+      this.$refs.input.close()
+      this.$emit('clear')
+    },
+    handleFetchSuggestions (keyword, cb) {
+      if (!this.fetchSuggestions) {
+        return cb([])
+      } else {
+        this.fetchSuggestions(keyword).then(rs => {
+          cb(rs)
+        }, () => {
+          cb([])
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-autocomplete{
+  width: 100%;
+  .el-input__inner{
+    box-sizing: border-box;
+    &:focus{
+      border-color: #1aa2e8;
+      box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+    }
+  }
+}
+.ui-autocomplete__search,
+.ui-autocomplete__clear{
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 4px;
+  margin-right: 2px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  width: 24px;
+}
+.ui-autocomplete__clear{
+  cursor: pointer;
+  &:hover{
+    color: #484848;
+  }
+}
+</style>

package/components/autocomplete/index.js

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