@weitutech/by-components 1.1.1 → 1.1.2

package/src/components/form/comps/date-picker-range.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="b-picker wrapper">
+    <el-date-picker
+      style="width: 70%"
+      v-model="value[config.field]"
+      :start-placeholder="config.startPlaceholder || '开始时间'"
+      :end-placeholder="config.endPlaceholder || '结束时间'"
+      :range-separator="config.rangeSeparator || '-'"
+      :size="config.size || 'mini'"
+      type="daterange"
+      @input="handleChange"
+    />
+    <div class="btn">
+      <span
+        v-for="item in shortcuts"
+        :key="item.key"
+        class="item"
+        :class="{ item_active: item.key === active }"
+        @click="handleClick(item)"
+      >
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'ByDatePickerRange',
+  props: {
+    //绑定的表单数据
+    value: {
+      type: Object,
+      default: null
+    },
+    //当前配置
+    config: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      shortcuts: [
+        {
+          label: '上月',
+          start_time: moment()
+            .subtract(1, 'months')
+            .startOf('month')
+            .format('YYYY-MM-DD'),
+          end_time: moment()
+            .subtract(1, 'months')
+            .endOf('month')
+            .format('YYYY-MM-DD'),
+          key: 'last_month'
+        },
+        {
+          label: '昨天',
+          start_time: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+          end_time: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+          key: 'yesterday'
+        },
+        {
+          label: '今天',
+          start_time: moment().startOf('day').format('YYYY-MM-DD'),
+          end_time: moment().startOf('day').format('YYYY-MM-DD'),
+          key: 'today'
+        },
+        {
+          label: '本周',
+          start_time: moment().startOf('week').format('YYYY-MM-DD'),
+          end_time: moment().endOf('week').format('YYYY-MM-DD'),
+          key: 'week'
+        },
+        {
+          label: '本月',
+          start_time: moment().startOf('month').format('YYYY-MM-DD'),
+          end_time: moment().endOf('month').format('YYYY-MM-DD'),
+          key: 'month'
+        }
+      ],
+      active: ''
+    }
+  },
+  mounted() {
+    this.active = this.config.active || 'today'
+    const item = this.shortcuts.find(item => item.key === this.active) || {}
+    if (item.start_time && item.end_time) {
+      this.handleClick(item)
+    }
+  },
+  methods: {
+    handleChange(e) {
+      if (!e) {
+        this.$emit('input', [])
+      } else {
+        this.$emit(
+          'input',
+          e.map(item => moment(item).format('YYYY-MM-DD'))
+        )
+      }
+      this.active = ''
+    },
+    handleClick(item) {
+      this.active = item.key
+      this.value[this.config.field] = [item.start_time, item.end_time]
+      this.$emit('input', [item.start_time, item.end_time])
+    }
+  }
+}
+</script>

package/src/components/form/comps/pair-number-input.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="w-full flex">
+    <el-input
+      class="w-1/2"
+      :value="value[0]"
+      :placeholder="earliestPlaceholder"
+      @input="value => handleInput(value, 'min')"
+      @blur="e => handleBlur(+e.target.value, 'min')"
+    />
+    <span>~</span>
+    <el-input
+      class="w-1/2"
+      :value="value[1]"
+      :placeholder="latestPlaceholder"
+      @input="value => handleInput(value, 'max')"
+      @blur="e => handleBlur(+e.target.value, 'max')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+      default: () => ['', 0]
+    },
+    earliestPlaceholder: {
+      type: String,
+      default: ''
+    },
+    latestPlaceholder: {
+      type: String,
+      default: ''
+    }
+  },
+
+  methods: {
+    /**
+     * 输入框输入回调，将其转换为数字，并反馈到父组件
+     * @param { string } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleInput(val, type) {
+      if (type === 'min') {
+        const values = [val.replace(/\D+/, ''), this.value[1]]
+
+        this.$emit('input', values)
+      } else if (type === 'max') {
+        const values = [this.value[0], val.replace(/\D+/, '')]
+
+        this.$emit('input', values)
+      }
+    },
+
+    /**
+     * 输入框失去焦点回调，判断最小输入框是否大于最大输入框和最大输入框小于最小输入框，并反馈到父组件
+     * @param { number } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleBlur(val, type) {
+      if (type === 'min') {
+        if (val > this.value[1]) {
+          const values = [this.value[1], this.value[1]]
+
+          this.$emit('input', values)
+        }
+      } else if (type === 'max') {
+        if (val < this.value[0]) {
+          const values = [this.value[0], this.value[0]]
+
+          this.$emit('input', values)
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/form/comps/select.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-select
+    v-bind="$props"
+    :value="value"
+    ref="selection"
+    :placeholder="config.placeholder || '请选择'"
+    @change="change"
+    @visible-change="visibleChange"
+    @remove-tag="removeTag"
+    @clear="clear"
+    @blur="blur"
+    @focus="focus"
+  >
+    <template v-if="config.mode === 'group'">
+      <el-option-group
+        v-for="group in item.options"
+        :key="group[config.optionValue || 'value']"
+        :label="group[config.optionLabel || 'label']"
+      >
+        <el-option
+          v-for="gItem in group.options"
+          :key="gItem[config.optionValue || 'value']"
+          :label="gItem[config.optionLabel || 'label']"
+          :value="gItem[config.optionValue || 'value']"
+        />
+      </el-option-group>
+    </template>
+    <template v-else>
+      <el-option
+        v-for="item in filterData"
+        :key="
+          item[config.optionValue || 'value'] +
+          '-' +
+          item[config.optionLabel || 'label']
+        "
+        :label="item[config.optionLabel || 'label']"
+        :value="item[config.optionValue || 'value']"
+      />
+    </template>
+  </el-select>
+</template>
+<script>
+import { Select } from 'element-ui'
+export default {
+  name: 'BYSelect',
+  props: {
+    ...Select.props,
+    value: {
+      type: [String, Number, Array]
+    },
+    // 下拉框数据
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 下拉框数据
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    //当前配置
+    config: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      searchVal: '',
+      filterData: []
+    }
+  },
+  watch: {
+    options: {
+      handler() {
+        this.filterData = this.options
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    change(e) {
+      this.$emit('change', arguments.length === 1 ? e : arguments)
+      this.$emit('input', e)
+    },
+    input(e) {
+      this.$emit('change', arguments.length === 1 ? e : arguments)
+      this.$emit('input', e)
+    },
+    visibleChange(e) {
+      this.$emit('visible-change', arguments.length === 1 ? e : arguments)
+    },
+    removeTag(e) {
+      this.$emit('remove-tag', arguments.length === 1 ? e : arguments)
+    },
+    clear(e) {
+      this.$emit('clear', arguments.length === 1 ? e : arguments)
+    },
+    blur(e) {
+      this.$emit('blur', arguments.length === 1 ? e : arguments)
+    },
+    focus(e) {
+      // 如果是多选模式 则做处理
+      if (this.multiple) {
+        this.searchNoReset()
+      }
+      this.$emit('blur', arguments.length === 1 ? e : arguments)
+    },
+    // 解决多选时选择后下拉数据会重置问题
+    searchNoReset() {
+      // 离开时重置数据
+      this.$refs.selection.$refs.input.blur = () => {
+        this.filterData = this.options
+      }
+
+      //   根据数据筛选数据
+      this.$refs.selection.$refs.input.onkeyup = () => {
+        this.filterData = this.options
+        this.searchVal = this.$refs.selection.$refs.input.value
+        this.filterData = this.options.filter(
+          item => item[this.config.optionLabel].indexOf(this.searchVal) !== -1
+        )
+      }
+    }
+  }
+}
+</script>