@weitutech/by-components 1.0.31 → 1.1.1

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

@@ -1,135 +0,0 @@
-<template>
-  <div class="b-picker wrapper">
-    <el-date-picker
-      style="width: 70%"
-      :value="value"
-      v-bind="dateOptions"
-      @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 {
-  props: {
-    value: {
-      type: [Array, String],
-      required: true,
-      default: () => []
-    },
-    otherOption: {
-      type: Object,
-      default: () => ({
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "-",
-        size: "mini",
-        active: ""
-      })
-    },
-    startTimeField: {
-      type: String,
-      default: ""
-    },
-    endTimeField: {
-      type: String,
-      default: ""
-    }
-  },
-
-  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: ""
-    }
-  },
-
-  computed: {
-    dateOptions() {
-      return {
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "至",
-        size: "mini",
-        active: "",
-        ...this.otherOption
-      }
-    }
-  },
-
-  watch: {
-    value: {
-      handler(newValue, oldValue) {
-        if (newValue && newValue.length) {
-          this.active = ""
-          this.shortcuts.forEach(item => {
-            if (item.start_time === newValue[0] && item.end_time === newValue[1]) {
-              this.active = item.key
-            }
-          })
-        } else {
-          this.active = this.dateOptions.active
-          const item = this.shortcuts.find(item => item.key === this.dateOptions.active) || {}
-          if (item.start_time && item.end_time) {
-            this.handleClick(item)
-          }
-        }
-      },
-      immediate: true
-    }
-  },
-  
-  methods: {
-    handleChange(e) {
-      if (!e) {
-        this.$emit("input", [])
-        if (this.startTimeField && this.endTimeField) {
-          this.$emit("range-change", { startTime: "", endTime: "" })
-        }
-      } else {
-        const formattedDates = e.map(item => moment(item).format("YYYY-MM-DD"))
-        this.$emit("input", formattedDates)
-        
-        if (this.startTimeField && this.endTimeField) {
-          this.$emit("range-change", { 
-            startTime: formattedDates[0], 
-            endTime: formattedDates[1] 
-          })
-        }
-      }
-      this.active = ""
-    },
-    handleClick(item) {
-      this.active = item.key
-      this.$emit("input", [item.start_time, item.end_time])
-      
-      if (this.startTimeField && this.endTimeField) {
-        this.$emit("range-change", { 
-          startTime: item.start_time, 
-          endTime: item.end_time 
-        })
-      }
-    }
-  }
-}
-</script>

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

@@ -1,78 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-<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

@@ -1,127 +0,0 @@
-<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>
-