xt-element-ui 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -36,7 +36,8 @@
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
     "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14"
+    "vue-server-renderer": "^2.7.14",
+    "xt-element-ui": "^2.0.2"
   },
   "keywords": [
     "vue",

package/src/components/index.scss

@@ -40,4 +40,7 @@
 @import './xt-tabs/style/index.scss';
 
 // Badge 组件样式
-@import './xt-badge/style/index.scss';
+@import './xt-badge/style/index.scss';
+
+// ScrollArrow 组件样式
+@import './xt-scroll-arrow/style/index.scss';

package/src/components/xt-input/index.vue

@@ -7,17 +7,17 @@
     ]"
   >
     <el-input
-      :value="value"
+      :value="displayValue"
       :placeholder="placeholder"
-      :type="type"
+      :type="isNumberType ? 'text' : type"
       :size="size"
       :disabled="disabled"
       :readonly="readonly"
       :style="inputStyle"
-      @input="$emit('input', $event)"
-      @change="$emit('change', $event)"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
+      @input="handleInput"
+      @change="handleChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
   </div>
 </template>
@@ -52,7 +52,22 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      currentStr: '',
+      isFocused: false
+    }
+  },
   computed: {
+    isNumberType() {
+      return this.type === 'number'
+    },
+    displayValue() {
+      if (this.isNumberType) {
+        return this.currentStr
+      }
+      return this.value
+    },
     inputStyle() {
       if (this.color) {
         return {
@@ -61,6 +76,71 @@ export default {
       }
       return {}
     }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (this.isNumberType && !this.isFocused) {
+          this.currentStr = val === null || val === undefined || val === '' ? '' : String(val)
+        }
+      }
+    }
+  },
+  methods: {
+    isValidNumber(str) {
+      return /^[+-]?\d*\.?\d*$/.test(str)
+    },
+    handleInput(val) {
+      if (this.isNumberType) {
+        if (this.isValidNumber(val)) {
+          this.currentStr = val
+          const num = this.parseToNumber(val)
+          if (num !== undefined) {
+            this.$emit('input', num)
+          }
+        }
+      } else {
+        this.$emit('input', val)
+      }
+    },
+    handleChange(val) {
+      if (this.isNumberType) {
+        const num = this.parseToNumber(val)
+        this.$emit('change', num)
+      } else {
+        this.$emit('change', val)
+      }
+    },
+    handleFocus(e) {
+      this.isFocused = true
+      this.$emit('focus', e)
+    },
+    handleBlur(e) {
+      this.isFocused = false
+      if (this.isNumberType) {
+        const num = this.parseToNumber(this.currentStr)
+        this.$emit('blur', num, e)
+        if (num !== undefined) {
+          this.currentStr = String(num)
+          this.$emit('input', num)
+        } else {
+          if (this.currentStr !== '') {
+            this.currentStr = ''
+            this.$emit('input', undefined)
+          }
+        }
+      } else {
+        this.$emit('blur', e)
+      }
+    },
+    parseToNumber(str) {
+      if (!str || str === '+' || str === '-' || str === '.' || str === '+.' || str === '-.' || str === '-.') {
+        return undefined
+      }
+      const num = parseFloat(str)
+      return isNaN(num) ? undefined : num
+    }
   }
 }
 </script>

package/src/components/xt-scroll-arrow/index.js

@@ -0,0 +1,8 @@
+import XtScrollArrow from './index.vue'
+
+XtScrollArrow.install = function (Vue) {
+  Vue.component(XtScrollArrow.name, XtScrollArrow)
+}
+
+export default XtScrollArrow
+export { XtScrollArrow }

package/src/components/xt-scroll-arrow/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="xt-scroll-arrow" :class="[`xt-scroll-arrow--${direction}`]" :style="containerStyle">
+    <div 
+      v-if="showLeftArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--left"
+      @click="scrollLeft"
+    >
+      <i class="el-icon-arrow-left"></i>
+    </div>
+
+    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll">
+      <slot></slot>
+    </div>
+
+    <div 
+      v-if="showRightArrow" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--right"
+      @click="scrollRight"
+    >
+      <i class="el-icon-arrow-right"></i>
+    </div>
+
+    <div 
+      v-if="showTopArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--top"
+      @click="scrollTop"
+    >
+      <i class="el-icon-arrow-up"></i>
+    </div>
+
+    <div 
+      v-if="showBottomArrow && direction === 'vertical'" 
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--bottom"
+      @click="scrollBottom"
+    >
+      <i class="el-icon-arrow-down"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtScrollArrow',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    scrollStep: {
+      type: Number,
+      default: 100
+    },
+    autoHide: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: [String, Number],
+      default: ''
+    },
+    width: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showLeftArrow: false,
+      showRightArrow: false,
+      showTopArrow: false,
+      showBottomArrow: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      const style = {}
+      if (this.height) {
+        style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
+      }
+      if (this.width) {
+        style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
+      }
+      return style
+    }
+  },
+  watch: {
+    direction() {
+      this.$nextTick(() => {
+        this.checkScroll()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.checkScroll()
+    })
+    this.addResizeObserver()
+  },
+  beforeDestroy() {
+    this.removeResizeObserver()
+  },
+  methods: {
+    addResizeObserver() {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.$nextTick(() => {
+            this.checkScroll()
+          })
+        })
+        const container = this.$refs.scrollContainer
+        if (container) {
+          this.resizeObserver.observe(container)
+        }
+      }
+    },
+    removeResizeObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+      }
+    },
+    checkScroll() {
+      const container = this.$refs.scrollContainer
+      if (!container) return
+
+      if (this.direction === 'horizontal') {
+        const scrollLeft = container.scrollLeft
+        const scrollWidth = container.scrollWidth
+        const clientWidth = container.clientWidth
+        const maxScroll = scrollWidth - clientWidth
+
+        this.showTopArrow = false
+        this.showBottomArrow = false
+
+        if (this.autoHide) {
+          this.showLeftArrow = scrollLeft > 0
+          this.showRightArrow = maxScroll > 0 && scrollLeft < maxScroll
+        } else {
+          this.showLeftArrow = maxScroll > 0
+          this.showRightArrow = maxScroll > 0
+        }
+      } else {
+        const scrollTop = container.scrollTop
+        const scrollHeight = container.scrollHeight
+        const clientHeight = container.clientHeight
+        const maxScroll = scrollHeight - clientHeight
+
+        this.showLeftArrow = false
+        this.showRightArrow = false
+
+        if (this.autoHide) {
+          this.showTopArrow = scrollTop > 0
+          this.showBottomArrow = maxScroll > 0 && scrollTop < maxScroll
+        } else {
+          this.showTopArrow = maxScroll > 0
+          this.showBottomArrow = maxScroll > 0
+        }
+      }
+    },
+    handleScroll() {
+      this.checkScroll()
+      this.$emit('scroll', this.$refs.scrollContainer)
+    },
+    scrollLeft() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ left: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollRight() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ left: this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollTop() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ top: -this.scrollStep, behavior: 'smooth' })
+      }
+    },
+    scrollBottom() {
+      const container = this.$refs.scrollContainer
+      if (container) {
+        container.scrollBy({ top: this.scrollStep, behavior: 'smooth' })
+      }
+    }
+  }
+}
+</script>

package/src/components/xt-scroll-arrow/style/index.scss

@@ -0,0 +1,89 @@
+@import '../../../styles/variables.scss';
+
+.xt-scroll-arrow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__btn {
+    position: absolute;
+    z-index: 10;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      background: rgba(255, 255, 255, 1);
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &--left {
+      left: 8px;
+    }
+
+    &--right {
+      right: 8px;
+    }
+
+    &--top {
+      top: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+
+    &--bottom {
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+
+      &:active {
+        transform: translateX(-50%) scale(0.95);
+      }
+    }
+  }
+}

package/src/components/xt-step-price/index.vue

@@ -10,7 +10,7 @@
         icon="el-icon-plus"
         plain
         @click="onAdd"
-      >新增档位</xt-button>
+      >新增{{stepName}}</xt-button>
       <xt-text v-if="isLimitReached" size="small" type-color="info">已达上限（{{ localItems.length }}/{{ limit }}）</xt-text>
     </div>
 
@@ -27,6 +27,7 @@
         :min-locked="idx !== 0 ? true : false"
         :unit="unit"
         :precision="precision"
+        :step-name="stepName"
         :step="step"
         :left-bracket="leftBracket"
         :right-bracket="rightBracket"
@@ -36,11 +37,12 @@
         @max-change="onMaxChange"
         @min-change="onMinChange"
         @delete="onDelete"
+        @blur="onFieldBlur"
       />
     </div>
 
     <div v-if="localItems.length === 0" class="xt-step-price__empty">
-      <span>暂无数据，点击右上角「新增档位」开始配置</span>
+      <span>暂无数据，点击右上角「新增{{stepName}}」开始配置</span>
     </div>
 
     <div v-if="tip || $slots.tip" class="xt-step-price__tip">
@@ -59,6 +61,12 @@ export default {
 
   components: { XtStepPriceItem },
 
+  inject: {
+    elFormItem: {
+      default: ''
+    }
+  },
+
   computed: {
     keyMin() { return (this.fieldKeys && this.fieldKeys.min) || 'min' },
     keyMax() { return (this.fieldKeys && this.fieldKeys.max) || 'max' },
@@ -76,6 +84,7 @@ export default {
     },
     title: { type: String, default: '' },
     unit: { type: String, default: '元' },
+    stepName: { type: String, default: '阶梯' },
     precision: { type: Number, default: 2 },
     // 左括号：默认 '['，传空字符串则不显示
     leftBracket: { type: String, default: '[' },
@@ -125,11 +134,14 @@ export default {
 
     cloneItems(items) {
       if (!Array.isArray(items)) return []
-      return items.map((it) => ({
-        [this.keyMin]: this.safeNumber(it && it[this.keyMin], 0),
-        [this.keyMax]: (it && it[this.keyMax] == null) || (it && it[this.keyMax] === '') ? null : this.safeNumber(it[this.keyMax], null),
-        [this.keyPrice]: this.safeNumber(it && it[this.keyPrice], 0)
-      }))
+      return items.map((it) => {
+        const price = (it && it[this.keyPrice])
+        return {
+          [this.keyMin]: this.safeNumber(it && it[this.keyMin], 0),
+          [this.keyMax]: (it && it[this.keyMax] == null) || (it && it[this.keyMax] === '') ? null : this.safeNumber(it[this.keyMax], null),
+          [this.keyPrice]: (price === null || price === undefined || price === '') ? '' : this.safeNumber(price, 0)
+        }
+      })
     },
 
     normalize(items) {
@@ -160,7 +172,8 @@ export default {
         } else {
           cur[this.keyMax] = null
         }
-        cur[this.keyPrice] = this.safeNumber(cur[this.keyPrice], 0)
+        const price = cur[this.keyPrice]
+        cur[this.keyPrice] = (price === null || price === undefined || price === '') ? '' : this.safeNumber(price, 0)
       }
     },
 
@@ -169,15 +182,118 @@ export default {
       const cloned = this.cloneItems(this.localItems)
       this.$emit('input', cloned)
       this.$emit('change', cloned)
+      this.dispatchFormEvent('el.form.change', cloned)
+    },
+
+    dispatchFormEvent(eventName, value) {
+      if (this.elFormItem) {
+        this.elFormItem.$emit(eventName, value)
+      }
+    },
+
+    onFieldBlur() {
+      this.dispatchFormEvent('el.form.blur', this.localItems)
+    },
+
+    validate(callback) {
+      const list = this.localItems
+      if (!Array.isArray(list) || list.length === 0) {
+        callback && callback(false, [{ field: 'stepPrice', message: `请配置${this.stepName}`, type: 'error' }])
+        return false
+      }
+
+      const errors = []
+      for (let i = 0; i < list.length; i++) {
+        const item = list[i]
+        const rawPrice = item[this.keyPrice]
+        const rawMin = item[this.keyMin]
+        const rawMax = item[this.keyMax]
+        const price = this.safeNumber(rawPrice, 0)
+        const min = this.safeNumber(rawMin, 0)
+
+        if (rawPrice === null || rawPrice === undefined || rawPrice === '') {
+          errors.push({
+            field: `stepPrice[${i}].price`,
+            message: `第${i + 1}${this.stepName}价格不能为空`,
+            type: 'error'
+          })
+        } else if (price < 0) {
+          errors.push({
+            field: `stepPrice[${i}].price`,
+            message: `第${i + 1}${this.stepName}价格不能为负数`,
+            type: 'error'
+          })
+        }
+
+        if (rawMin === null || rawMin === undefined || rawMin === '') {
+          errors.push({
+            field: `stepPrice[${i}].min`,
+            message: `第${i + 1}${this.stepName}下限不能为空`,
+            type: 'error'
+          })
+        } else if (min < 0) {
+          errors.push({
+            field: `stepPrice[${i}].min`,
+            message: `第${i + 1}${this.stepName}下限不能为负数`,
+            type: 'error'
+          })
+        }
+
+        if (!this.isLast(i)) {
+          if (rawMax === null || rawMax === undefined || rawMax === '') {
+            errors.push({
+              field: `stepPrice[${i}].max`,
+              message: `第${i + 1}${this.stepName}上限不能为空`,
+              type: 'error'
+            })
+          } else if (this.safeNumber(rawMax, 0) <= min) {
+            errors.push({
+              field: `stepPrice[${i}].max`,
+              message: `第${i + 1}${this.stepName}上限必须大于下限`,
+              type: 'error'
+            })
+          }
+        }
+
+        if (i > 0) {
+          const prev = list[i - 1]
+          const prevMax = prev[this.keyMax]
+          if (prevMax !== null && this.safeNumber(prevMax, 0) !== min) {
+            errors.push({
+              field: `stepPrice[${i}].min`,
+              message: `第${i + 1}${this.stepName}下限必须等于上一${this.stepName}上限`,
+              type: 'error'
+            })
+          }
+        }
+      }
+
+      if (errors.length > 0) {
+        callback && callback(false, errors)
+        return false
+      }
+
+      callback && callback(true)
+      return true
+    },
+
+    isLast(idx) {
+      return idx === this.localItems.length - 1
     },
 
     onItemInput(val, idx) {
       const cur = this.localItems[idx]
       if (!cur) return
       if (val && val[this.keyPrice] !== undefined) {
-        let p = this.safeNumber(val[this.keyPrice], 0)
-        p = Number(p.toFixed(this.precision))
-        cur[this.keyPrice] = p
+        const p = val[this.keyPrice]
+        if (p === null || p === undefined || p === '') {
+          cur[this.keyPrice] = ''
+        } else {
+          let num = this.safeNumber(p, 0)
+          num = Number(num.toFixed(this.precision))
+          cur[this.keyPrice] = num
+        }
+        this.emit()
       }
     },
 
@@ -232,15 +348,8 @@ export default {
       const newMin = this.safeNumber(last[this.keyMin], 0)
       const newMax = newMin + stepVal
 
-      // 新条 price：优先继承「倒数第二条」的 price，其次用末条 price（>0 时），否则默认 10
-      const prev = list[list.length - 2]
-      let newPrice = 10
-      if (prev) {
-        newPrice = this.safeNumber(prev[this.keyPrice], 10)
-      } else {
-        const lastPrice = this.safeNumber(last[this.keyPrice], 0)
-        newPrice = lastPrice > 0 ? lastPrice : 10
-      }
+      // 新条 price：使用默认值，由用户自行填写
+      let newPrice = 0
 
       const newArr = [
         ...list.slice(0, -1),