xt-element-ui 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",

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-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),

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

@@ -2,7 +2,7 @@
   <div class="xt-step-price-item">
     <div class="xt-step-price-item__range">
       <span class="xt-step-price-item__bracket">{{ finalLeftBracket }}</span>
-      <span v-if="itemsLength > 1" class="xt-step-price-item__name">第{{ index + 1 }}档</span>
+      <span v-if="itemsLength > 1" class="xt-step-price-item__name">第{{ index + 1 }}{{stepName}}</span>
       <span class="xt-step-price-item__bracket">{{ finalRightBracket }}</span>
       <xt-input
         v-model.number="minInput"
@@ -10,17 +10,18 @@
         size="small"
         placeholder="下限"
         class="xt-step-price-item__input"
-        @blur="onMinBlur"
+        @blur="(e) => { onMinBlur(); onBlur(e) }"
       />
       <span class="xt-step-price-item__comma">-</span>
       <xt-input
         v-if="!isLast"
         v-model.number="maxInput"
+        type="number"
         :disabled="disabled"
         size="small"
         placeholder="上限"
         class="xt-step-price-item__input"
-        @blur="onMaxBlur"
+        @blur="(e) => { onMaxBlur(); onBlur(e) }"
       />
       <span v-else class="xt-step-price-item__infinity">+∞</span>
     </div>
@@ -29,11 +30,12 @@
     <div class="xt-step-price-item__price">
       <xt-input
         v-model.number="priceInput"
+        type="number"
         :disabled="disabled"
         size="small"
         placeholder="价格"
         class="xt-step-price-item__input xt-step-price-item__input--price"
-        @blur="onPriceBlur"
+        @blur="(e) => { onPriceBlur(); onBlur(e) }"
       />
       <span class="xt-step-price-item__unit">{{ unit }}</span>
     </div>
@@ -58,6 +60,7 @@ export default {
       required: true,
       default: () => ({ min: 0, max: null, price: 0 })
     },
+    stepName: { type: String, default: '阶梯' },
     index: { type: Number, default: 0 },
     isFirst: { type: Boolean, default: false },
     isLast: { type: Boolean, default: false },
@@ -177,13 +180,23 @@ export default {
     },
 
     onPriceBlur() {
-      let v = this.safeNumber(this.priceInput, 0)
+      const rawVal = this.priceInput
+      if (rawVal === null || rawVal === undefined || rawVal === '' || isNaN(rawVal)) {
+        this.priceInput = ''
+        this.emitChange({ [this.keyPrice]: '' })
+        return
+      }
+      let v = this.safeNumber(rawVal, 0)
       if (v < 0) v = 0
       v = Number(v.toFixed(this.precision))
       this.priceInput = v
       this.emitChange({ [this.keyPrice]: v })
     },
 
+    onBlur(e) {
+      this.$emit('blur', e)
+    },
+
     onDelete() {
       this.$emit('delete', this.index)
     }