@aochuang/common 1.0.0 → 1.0.126

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

@@ -0,0 +1,226 @@
+<template>
+  <div class="ui-advanced-filter-condition-item">
+    <ui-form ref="form" :model="innerValue" :rules="formRules" :padding="false">
+      <ui-form-row :gutter="12">
+        <ui-form-cell prop="name" :margin-bottom="false" style="width: 30%">
+          <ui-select
+            :value="innerName"
+            :clearable="false"
+            :filterable="true"
+            :items="fieldData"
+            text-field="name"
+            value-field="fieldName"
+            filter-mode="local"
+            placeholder="选择字段"
+            @input="handleNameChange"
+          >
+          </ui-select>
+        </ui-form-cell>
+        <ui-form-cell prop="type" :margin-bottom="false" style="width: 20%">
+          <ui-select
+            :value="innerType"
+            :items="operateItems"
+            :filterable="true"
+            filter-mode="local"
+            text-field="label"
+            value-field="type"
+            placeholder="选择操作符"
+            :clearable="false"
+            @input="handleTypeChange"
+          ></ui-select>
+        </ui-form-cell>
+        <ui-form-cell prop="values" :margin-bottom="false" style="width: 50%">
+          <template v-if="!innerName">
+            <div class="ui-advanced-filter-condition-item__placeholder">
+              <ui-icon name="information-line"></ui-icon>请选择字段后操作
+            </div>
+          </template>
+          <template v-else>
+            <template v-if="valueComponent">
+              <advanced-filter-condition-item-value
+                :component="valueComponent"
+                :name="innerName"
+                v-model="innerValues"
+              ></advanced-filter-condition-item-value>
+            </template>
+            <template v-else>
+              <span></span>
+            </template>
+          </template>
+        </ui-form-cell>
+      </ui-form-row>
+    </ui-form>
+  </div>
+</template>
+<script>
+import AdvancedFilterConditionItemValue from './advanced-filter-condition-item-value'
+
+export default {
+  name: 'UiAdvancedFilterConditionItem',
+  components: {
+    AdvancedFilterConditionItemValue
+  },
+  props: {
+    /**
+     * {
+     *    formType: 'datetime',
+     *    name: 'createTime',
+     *    type: 1,
+     *    values: []
+     * }
+    */
+    value: {
+      type: Object
+    },
+    /**
+     * {
+     *    text: [{
+     *      value: 'isNot',
+     *      label: '不等于',
+     *      type: 2
+     *    },
+     *      ...
+     *    ]
+     * }
+    */
+    operate: {
+      type: Object
+    },
+    fieldData: {
+      type: Array
+    },
+    getValueComponent: {
+      type: Function
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value || {}
+      },
+      set (val) {
+        this.$emit('input', Object.assign({}, this.innerValue, val))
+      }
+    },
+    innerName: {
+      get () {
+        return this.innerValue.name
+      }
+    },
+    innerValues: {
+      get () {
+        if (this.innerValue.values === '') {
+          return []
+        }
+        return this.innerValue.values
+      },
+      set (val) {
+        this.innerValue = {
+          values: val
+        }
+      }
+    },
+    innerType: {
+      get () {
+        return this.innerValue.type
+      },
+      set (val) {
+        this.innerValue = {
+          type: val
+        }
+      }
+    },
+    formRules () {
+      return {
+        name: [{
+          required: true,
+          message: '字段不能为空',
+          trigger: 'change'
+        }],
+        type: [{
+          required: true,
+          message: '操作符不能为空',
+          trigger: 'change'
+        }]
+      }
+    },
+    operateItems () {
+      return (this.operateMap[this.innerValue.formType] || {}).items || []
+    },
+    operateMap () {
+      return this.operate || {}
+    },
+    valueComponent () {
+      return this.getValueComponent()
+    },
+    selectField () {
+      return this.fieldData.find(v => v.fieldName === this.innerName)
+    }
+  },
+  methods: {
+    validate () {
+      return this.$refs.form.validate()
+    },
+    clearValidate () {
+      this.$refs.form.clearValidate()
+    },
+    handleTypeChange (value) {
+      this.innerType = value
+      this.$nextTick(() => {
+        const operate = this.operateMap[this.innerValue.formType]
+        if (!operate) {
+          return
+        }
+        if (operate.onChange) {
+          operate.onChange({
+            condition: this.innerValue,
+            setValues: (values) => {
+              this.innerValues = values
+            }
+          })
+        }
+      })
+    },
+    handleNameChange (value) {
+      const field = this.fieldData.find(v => v.fieldName === value)
+      if (!field) {
+        this.innerValue = {
+          name: null,
+          formType: null,
+          type: null,
+          values: null
+        }
+      } else {
+        const nextValue = {
+          name: field.fieldName,
+          formType: field.formType,
+          values: null,
+          type: this.operateMap[field.formType] && this.operateMap[field.formType].items && this.operateMap[field.formType].items[0] ? this.operateMap[field.formType].items[0].type : null
+        }
+        this.innerValue = nextValue
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-condition-item{
+  min-height: 34px;
+}
+.ui-advanced-filter-condition-item__placeholder{
+  height: 28px;
+  line-height: 28px;
+  border: 2px solid #DFE1E6;
+  border-radius: 3px;
+  padding: 0 11px;
+  color: #aaa;
+  background-color: #FAFBFC;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: not-allowed;
+  .ui-icon {
+    margin-right: 4px;
+  }
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <ui-button class="bi-advanced-filter-condition-toggle" @click="handleToggleClick">
+    <span class="bi-advanced-filter-condition-toggle__icon">
+      <svg v-if="expanded" 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>
+    </span>
+    <span class="bi-advanced-filter-condition-toggle__text">
+      {{ expanded ? '收起筛选' : '展开筛选' }}
+    </span>
+    <span class="bi-advanced-filter-condition-toggle__total" v-if="conditionValueTotal">
+      <span class="bi-advanced-filter-condition-toggle__total-text">{{ conditionValueTotal }}</span>
+      <span class="bi-advanced-filter-condition-toggle__total-clear" v-if="false" title="清空筛选条件" @click.stop="handleClearClick"></span>
+    </span>
+  </ui-button>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilerConditionToggle',
+  inject: ['UiAdvancedFilter'],
+  props: {
+    conditionValue: {
+      type: Array
+    }
+  },
+  computed: {
+    expanded () {
+      return this.UiAdvancedFilter.innerExpanded
+    },
+    conditionValueTotal () {
+      return (this.conditionValue || []).length
+    }
+  },
+  methods: {
+    handleToggleClick () {
+      // this.UiAdvancedFilter.setExpanded(!this.expanded)
+      this.$emit('change', {
+        expanded: !this.expanded
+      })
+    },
+    handleClearClick () {
+      this.$emit('clear')
+    }
+  }
+}
+</script>
+<style lang="less">
+.bi-advanced-filter-condition-toggle{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bi-advanced-filter-condition-toggle__icon{
+  width: 18px;
+  height: 18px;
+  svg {
+    width: 100%;
+    height: 100%
+  }
+}
+.bi-advanced-filter-condition-toggle__total {
+  display: inline-block;
+  color: #0052CC;
+  background-color: #DFE1E6;
+  border-radius: 3px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 3px;
+  min-width: 12px;
+  text-align: center;
+  margin-left: 6px;
+  margin-right: -3px;
+}
+.bi-advanced-filter-condition-toggle__total-clear{
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-left: 2px;
+  position: relative;
+  transform: rotate(-45deg);
+  border-radius: 50%;
+  transition: all .25s;
+  cursor: pointer;
+  &:after, &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #172B4D;
+  }
+  &:after {
+    width: 1px;
+    height: 9px;
+  }
+  &:before {
+    width: 9px;
+    height: 1px;
+  }
+  &:hover {
+    background-color: rgba(0,0,0,.5);
+    &:after, &:before {
+      background-color: #fff;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,352 @@
+<template>
+  <div class="ui-advanced-filter-condition" :class="{'is-padding': padding}">
+    <div class="ui-advanced-filter-condition__main">
+      <div
+        class="ui-advanced-filter-condition__row"
+        v-for="(group, groupIndex) in innerValueGroup"
+        :key="groupIndex"
+      >
+        <div
+          class="ui-advanced-filter-condition__item"
+          v-for="(item, index) in group"
+          :key="index"
+        >
+          <template v-if="item">
+            <div class="ui-advanced-filter-condition__item-main">
+              <advanced-filter-condition-item
+                ref="item"
+                :field-data="handleRenderFieldData(item)"
+                :operate="cnoditionOperate"
+                :value="item"
+                :get-value-component="handleGetValueComponent(item)"
+                @input="handleConditionItemValueChange(item, $event)"
+              >
+              </advanced-filter-condition-item>
+            </div>
+            <div class="ui-advanced-filter-condition__item-tools">
+              <div class="ui-advanced-filter-condition__item-tools-item" v-if="$scopedSlots['item-append']">
+                <slot name="item-append" :item="item"></slot>
+              </div>
+              <div class="ui-advanced-filter-condition__item-tools-item">
+                <div class="ui-advanced-filter-condition__item-tools-remove">
+                  <ui-icon class="ui-advanced-filter-condition__item-remove" @click="handleDeleteConditionClick(item, index)" :size="20" name="close-circle-fill" title="删除"></ui-icon>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="ui-advanced-filter-condition__toolbar">
+      <slot name="toolbar-prepend"></slot>
+      <ui-button plain type="primary" @click="handleAddConditionClick" icon="add-line">新增条件</ui-button>
+      <slot v-if="UiAdvancedFilter.showScene" name="toolbar-append"></slot>
+    </div>
+  </div>
+</template>
+<script>
+import Emitter from '../../utils/emitter'
+import AdvancedFilterConditionItem from './advanced-filter-condition-item/advanced-filter-condition-item'
+
+export default {
+  name: 'UiAdvancedFilterCondition',
+  inject: ['UiAdvancedFilter'],
+  components: {
+    AdvancedFilterConditionItem
+  },
+  mixins: [Emitter],
+  props: {
+    value: {
+      type: Array
+    },
+    padding: {
+      type: Boolean,
+      default: false
+    },
+    fieldData: {
+      type: Array
+    },
+    maxHeight: {
+      type: String
+    },
+    span: {
+      type: Number,
+      default: 1
+    },
+    deleteConditionMethod: {
+      type: Function
+    }
+  },
+  computed: {
+    cnoditionOperate () {
+      return this.UiAdvancedFilter.cnoditionOperate
+    },
+    getValueComponent () {
+      return this.UiAdvancedFilter.getValueComponent
+    },
+    innerValue: {
+      get () {
+        if (!this.value || !this.value.length) {
+          return [{}]
+        }
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+        this.$nextTick(() => {
+          // todo 临时这么处理一下
+          this.dispatch('ElFormItem', 'el.form.change', val)
+        })
+      }
+    },
+    innerValueGroup () {
+      if (this.span === 1) {
+        return (this.innerValue || []).map(v => {
+          return [v]
+        })
+      }
+      let nextValue = []
+      const lastIndex = this.innerValue.length - 1
+      this.innerValue.forEach((v, i) => {
+        let ii = Math.floor(i / this.span)
+        if (!nextValue[ii]) {
+          nextValue[ii] = []
+        }
+        nextValue[ii].push(v)
+        if (i === lastIndex) {
+          if (nextValue[ii].length < this.span) {
+            const ss = this.span - nextValue[ii].length
+            for (let j = 0; j < ss; j++) {
+              nextValue[ii].push(null)
+            }
+          }
+        }
+      })
+      return nextValue
+    }
+  },
+  methods: {
+    getConditionOperate (formName) {
+      const field = (this.fieldData || []).find(v => v.fieldName === formName)
+      if (!field) {
+        return
+      }
+      return this.cnoditionOperate[field.formType]
+    },
+    validate () {
+      return Promise.all(this.$refs.item.map(v => v.validate()))
+    },
+    clearValidate () {
+      this.$refs.item.forEach(v => v.clearValidate())
+    },
+    setValue (formName, value) {
+      if (!formName) {
+        return
+      }
+      let index = -1
+      this.innerValue.some((v, i) => {
+        if (v.name === formName) {
+          index = i
+          return true
+        }
+      })
+      const nextValue = [...this.innerValue]
+      if (index < 0) {
+        if (value) {
+          nextValue.push(value)
+        }
+      } else {
+        if (value) {
+          nextValue.splice(index, 1, value)
+        } else {
+          nextValue.splice(index, 1)
+        }
+      }
+      this.$emit('input', nextValue)
+    },
+    getValue (formName) {
+      return (this.innerValue || []).find(v => v.name === formName)
+    },
+    getRealValueComponent (formName, formType) {
+      const field = this.fieldData.find(v => v.fieldName === formName)
+      if (!field) {
+        return
+      }
+      const value = this.getValue(formName)
+      if (value && value.formType !== null && value.formType !== undefined) {
+        formType = value.formType
+      }
+      if (!formType) {
+        return
+      }
+      const item = this.cnoditionOperate[formType]
+      if (!item) {
+        return
+      }
+      const defaultValueComponent = item.getValueComponent({
+        selectField: field,
+        setValues: (value) => {
+          this.setValue(formName, Object.assign({}, this.getValue(formName), {
+            values: value
+          }))
+        },
+        getValues: () => {
+          const values = (this.getValue(formName) || {}).values
+          if (values === '') {
+            return []
+          }
+          return values
+        },
+        condition: value
+      })
+      let customValueComponent = null
+      if (this.getValueComponent) {
+        customValueComponent = this.getValueComponent({
+          values: value,
+          setValues: (value) => {
+            this.setValue(formName, Object.assign({}, this.getValue(formName), {
+              values: value
+            }))
+          },
+          getValues: () => {
+            const values = (this.getValue(formName) || {}).values
+            if (values === '') {
+              return []
+            }
+            return values
+          },
+          selectField: field,
+          condition: value
+        })
+      }
+      if (!customValueComponent) {
+        return defaultValueComponent
+      }
+      // 这里主要是为了兼容为空不为空的时候不需要渲染组件时，即使有自定义的渲染组件也不渲染
+      if (!defaultValueComponent) {
+        return null
+      }
+      return customValueComponent
+    },
+    handleGetValueComponent (item) {
+      return () => {
+        return this.getRealValueComponent(item.name)
+      }
+    },
+    handleRenderFieldData (item) {
+      const excludeName = this.innerValue.filter(v => !!v.name && v.name !== item.name).map(v => v.name)
+      return this.fieldData.filter(v => !excludeName.includes(v.fieldName))
+    },
+    handleConditionItemValueChange (item, value) {
+      this.innerValue = this.innerValue.map(v => {
+        if (v === item) {
+          return value
+        } else {
+          return v
+        }
+      })
+    },
+    handleDeleteConditionClick (item) {
+      if (this.deleteConditionMethod) {
+        Promise.all([this.deleteConditionMethod({
+          condition: item
+        })]).then(() => {
+          this.innerValue = this.innerValue.filter(v => v !== item)
+        })
+      } else {
+        if (!Object.keys(item).length) {
+          this.innerValue = this.innerValue.filter(v => v !== item)
+        } else {
+          this.$confirm('删除无法恢复，确定继续吗？').then(() => {
+            this.innerValue = this.innerValue.filter(v => v !== item)
+          })
+        }
+      }
+    },
+    handleAddConditionClick () {
+      const nextValue = [...this.innerValue]
+      nextValue.push({})
+      this.innerValue = nextValue
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-advanced-filter-condition{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  &.is-padding {
+    .ui-advanced-filter-condition__main{
+      padding: 16px 16px 0;
+    }
+    .ui-advanced-filter-condition__toolbar{
+      padding: 16px;
+    }
+  }
+}
+.ui-advanced-filter-condition__main {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.ui-advanced-filter-condition__item{
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-width: 0;
+  &:not(:first-child) {
+    margin-left: 16px;
+  }
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+}
+.ui-advanced-filter-condition__item-main{
+  flex: 1;
+  min-width: 0;
+}
+.ui-advanced-filter-condition__item-tools{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  line-height: 1em;
+}
+.ui-advanced-filter-condition__row{
+  display: flex;
+  flex-direction: row;
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+.ui-advanced-filter-condition__toolbar{
+  display: flex;
+  flex-direction: row;
+}
+.ui-advanced-filter-condition__item-tools-item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  line-height: 1em;
+  margin-left: 6px;
+}
+.ui-advanced-filter-condition__item-tools-remove{
+  width: 20px;
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.ui-advanced-filter-condition__item-remove {
+  color: #bbb;
+  cursor: pointer;
+  transition: all .25s;
+  &:hover {
+    color: #f56c6c;
+  }
+}
+</style>

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

@@ -0,0 +1,10 @@
+<template>
+  <div class="ui-advanced-filter-permancet-item">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterPermanentItem'
+}
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiAdvancedFilterPermanent'
+}
+</script>