xt-element-ui 2.1.4 → 2.1.6

package/src/components/xt-form-schema/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="xt-form-schema">
+    <div v-if="showSearchTags" class="search-tags">
+      <span class="tags-title">已检索：</span>
+      <el-tag
+        v-for="(tag, key) in activeSearchTags"
+        :key="key"
+        closable
+        size="small"
+        @close="handleRemoveTag(key)"
+      >
+        {{ tag.label }}: {{ tag.value }}
+      </el-tag>
+      <span v-if="activeSearchTagsCount === 0" class="no-tags">暂无检索条件</span>
+    </div>
+
+    <el-dialog
+      v-if="mode === 'dialog'"
+      :title="title"
+      :visible.sync="visible"
+      :width="width"
+      :before-close="handleCancel"
+      class="xt-form-schema-dialog"
+      append-to-body
+      modal-append-to-body
+    >
+      <el-form :model="formData" :inline="false" label-width="120px">
+        <el-form-item :label="field.label" :prop="field.prop" :key="field.prop" v-for="field in schema">
+          <component v-if="!field.isSlot" :is="getFieldComponent(field)" v-bind="getFieldProps(field)" />
+          <slot v-else :name="field.prop" :field="field">
+          </slot>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确认</el-button>
+      </div>
+    </el-dialog>
+
+    <el-drawer
+      v-if="mode === 'drawer'"
+      :title="title"
+      :visible.sync="visible"
+      :direction="direction"
+      :size="width"
+      :before-close="handleCancel"
+      class="xt-form-schema-drawer"
+      append-to-body
+      modal-append-to-body
+    >
+      <el-form :model="formData" :inline="false" label-width="120px">
+        <el-form-item :label="field.label" :prop="field.prop" v-for="field in schema" :key="field.prop">
+          <component v-if="!field.isSlot" :is="getFieldComponent(field)" v-bind="getFieldProps(field)" />
+          <slot v-else :name="field.prop" :field="field">
+          </slot>
+        </el-form-item>
+      </el-form>
+      <div class="drawer-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确认</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtFormSchema',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    schema: {
+      type: Array,
+      default: () => []
+    },
+    mode: {
+      type: String,
+      default: 'dialog',
+      validator: (val) => ['dialog', 'drawer'].includes(val)
+    },
+    title: {
+      type: String,
+      default: '高级搜索'
+    },
+    width: {
+      type: [String, Number],
+      default: '500px'
+    },
+    direction: {
+      type: String,
+      default: 'rtl',
+      validator: (val) => ['ltr', 'rtl', 'ttb', 'btt'].includes(val)
+    },
+    showSearchTags: {
+      type: Boolean,
+      default: false
+    },
+    simpleFields: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  computed: {
+    activeSearchTags() {
+      const tags = {}
+      this.schema.forEach(field => {
+        const value = this.formData[field.prop]
+        if (value !== null && value !== undefined && value !== '' && value !== []) {
+          let displayValue = value
+          if (field.type === 'select' && field.options) {
+            const option = field.options.find(opt => opt.value === value)
+            displayValue = option ? option.label : value
+          } else if (field.type === 'date' && Array.isArray(value)) {
+            displayValue = value.map(v => v ? this.formatDate(v) : '').join(' - ')
+          } else if (field.type === 'daterange' && Array.isArray(value)) {
+            displayValue = value.map(v => v ? this.formatDate(v) : '').join(' - ')
+          } else if (field.type === 'checkbox-group' && Array.isArray(value)) {
+            const labels = value.map(v => {
+              const option = (field.options || []).find(opt => opt.value === v)
+              return option ? option.label : v
+            })
+            displayValue = labels.join(', ')
+          }
+          tags[field.prop] = {
+            label: field.label,
+            value: displayValue
+          }
+        }
+      })
+      return tags
+    },
+    activeSearchTagsCount() {
+      return Object.keys(this.activeSearchTags).length
+    }
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.initFormData()
+        }
+      }
+    },
+    value: {
+      deep: true,
+      handler(val) {
+        if (val && this.visible) {
+          this.formData = { ...val }
+        }
+      }
+    }
+  },
+  methods: {
+    initFormData() {
+      const data = {}
+      this.schema.forEach(field => {
+        data[field.prop] = this.value[field.prop] !== undefined ? this.value[field.prop] : (field.defaultValue !== undefined ? field.defaultValue : '')
+      })
+      this.formData = data
+    },
+    getFieldComponent(field) {
+      const componentMap = {
+        input: 'el-input',
+        textarea: 'el-input',
+        select: 'el-select',
+        checkbox: 'el-checkbox',
+        'checkbox-group': 'el-checkbox-group',
+        radio: 'el-radio',
+        'radio-group': 'el-radio-group',
+        'date': 'el-date-picker',
+        daterange: 'el-date-picker',
+        datetime: 'el-date-picker',
+        'datetime-range': 'el-date-picker',
+        number: 'el-input-number',
+        switch: 'el-switch'
+      }
+      return componentMap[field.type] || 'el-input'
+    },
+    getFieldProps(field) {
+      const props = {
+        value: this.formData[field.prop],
+        placeholder: field.placeholder || `请输入${field.label}`
+      }
+
+      if (field.type === 'textarea') {
+        props.type = 'textarea'
+        props.rows = field.rows || 3
+      }
+
+      if (field.type === 'select') {
+        props.filterable = field.filterable || false
+        props.multiple = field.multiple || false
+      }
+
+      if (field.type === 'date') {
+        props.type = field.dateType || 'date'
+        props.format = field.format || 'yyyy-MM-dd'
+        props['value-format'] = field.valueFormat || 'yyyy-MM-dd'
+      }
+
+      if (field.type === 'daterange') {
+        props.type = 'daterange'
+        props.format = field.format || 'yyyy-MM-dd'
+        props['value-format'] = field.valueFormat || 'yyyy-MM-dd'
+      }
+
+      if (field.type === 'datetime') {
+        props.type = 'datetime'
+        props.format = field.format || 'yyyy-MM-dd HH:mm:ss'
+        props['value-format'] = field.valueFormat || 'yyyy-MM-dd HH:mm:ss'
+      }
+
+      if (field.type === 'datetime-range') {
+        props.type = 'datetimerange'
+        props.format = field.format || 'yyyy-MM-dd HH:mm:ss'
+        props['value-format'] = field.valueFormat || 'yyyy-MM-dd HH:mm:ss'
+      }
+
+      if (field.type === 'number') {
+        props.min = field.min
+        props.max = field.max
+        props.step = field.step || 1
+      }
+
+      if (field.type === 'checkbox-group' || field.type === 'radio-group') {
+        props.options = field.options || []
+      }
+
+      if (field.disabled !== undefined) {
+        props.disabled = field.disabled
+      }
+
+      if (field.size !== undefined) {
+        props.size = field.size
+      }
+
+      props['on:input'] = (val) => this.handleFieldChange(field.prop, val)
+      props['on:change'] = (val) => this.handleFieldChange(field.prop, val)
+
+      return props
+    },
+    handleFieldChange(prop, val) {
+      this.formData[prop] = val
+      this.$emit('input', { ...this.formData })
+      this.$emit('change', { prop, value: val })
+    },
+    handleRemoveTag(prop) {
+      this.formData[prop] = ''
+      this.$emit('input', { ...this.formData })
+      this.$emit('change', { prop, value: '' })
+    },
+    handleConfirm() {
+      this.$emit('confirm', { ...this.formData })
+      this.$emit('input', { ...this.formData })
+      this.$emit('update:visible', false)
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.$emit('update:visible', false)
+    },
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      const year = d.getFullYear()
+      const month = String(d.getMonth() + 1).padStart(2, '0')
+      const day = String(d.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    resetFields() {
+      this.initFormData()
+      this.schema.forEach(field => {
+        this.formData[field.prop] = field.defaultValue !== undefined ? field.defaultValue : ''
+      })
+      this.$emit('input', { ...this.formData })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.xt-form-schema {
+  .search-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f5f7fa;
+    border-radius: 4px;
+    margin-bottom: 12px;
+
+    .tags-title {
+      font-size: 14px;
+      color: #606266;
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+
+    .el-tag {
+      margin: 4px;
+      cursor: pointer;
+    }
+
+    .no-tags {
+      font-size: 14px;
+      color: #c0c4cc;
+    }
+  }
+
+  .dialog-footer,
+  .drawer-footer {
+    text-align: right;
+    padding-top: 16px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+</style>

package/src/components/xt-grid-item/index.vue

@@ -12,13 +12,13 @@ export default {
     span: {
       type: Number,
       default: 1,
-      validator: (val) => val > 0
+      validator: (val) => val >= 1
     },
     // 跨行数
     rowSpan: {
       type: Number,
       default: 1,
-      validator: (val) => val > 0
+      validator: (val) => val >= 1
     },
     // 起始列
     start: {

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

@@ -3,22 +3,35 @@
     class="xt-input"
     :class="[
       size ? 'xt-input--' + size : '',
-      { 'is-disabled': disabled }
+      { 'is-disabled': disabled },
+      { 'is-error': hasError }
     ]"
   >
     <el-input
       :value="displayValue"
       :placeholder="placeholder"
-      :type="isNumberType ? 'text' : type"
+      :type="inputType"
       :size="size"
       :disabled="disabled"
       :readonly="readonly"
       :style="inputStyle"
+      :maxlength="maxlength"
+      :show-word-limit="showWordLimit"
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
       @input="handleInput"
       @change="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+      @clear="handleClear"
+    >
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix"></slot>
+      </template>
+      <template v-if="$slots.suffix" #suffix>
+        <slot name="suffix"></slot>
+      </template>
+    </el-input>
   </div>
 </template>
 
@@ -33,7 +46,8 @@ export default {
     },
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
+      validator: (val) => ['text', 'number', 'integer', 'decimal', 'money', 'phone', 'email', 'idcard', 'password', 'textarea'].includes(val)
     },
     size: {
       type: String,
@@ -50,31 +64,87 @@ export default {
     color: {
       type: String,
       default: ''
+    },
+    precision: {
+      type: Number,
+      default: 2,
+      validator: (val) => val >= 0 && val <= 10
+    },
+    min: {
+      type: Number,
+      default: undefined
+    },
+    max: {
+      type: Number,
+      default: undefined
+    },
+    allowNegative: {
+      type: Boolean,
+      default: false
+    },
+    thousandSeparator: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number,
+      default: undefined
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false
+    },
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    trim: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       currentStr: '',
-      isFocused: false
+      isFocused: false,
+      hasError: false
     }
   },
   computed: {
+    inputType() {
+      if (this.type === 'textarea') {
+        return 'textarea'
+      }
+      if (this.type === 'password') {
+        return 'password'
+      }
+      if (this.isNumberType) {
+        return 'text'
+      }
+      return 'text'
+    },
     isNumberType() {
-      return this.type === 'number'
+      return ['number', 'integer', 'decimal', 'money'].includes(this.type)
     },
     displayValue() {
       if (this.isNumberType) {
+        if (this.thousandSeparator && this.currentStr) {
+          return this.formatThousand(this.currentStr)
+        }
         return this.currentStr
       }
       return this.value
     },
     inputStyle() {
+      const style = {}
       if (this.color) {
-        return {
-          '--xt-input-focus-color': this.color
-        }
+        style['--xt-input-focus-color'] = this.color
       }
-      return {}
+      return style
     }
   },
   watch: {
@@ -82,34 +152,141 @@ export default {
       immediate: true,
       handler(val) {
         if (this.isNumberType && !this.isFocused) {
-          this.currentStr = val === null || val === undefined || val === '' ? '' : String(val)
+          if (val === null || val === undefined || val === '') {
+            this.currentStr = ''
+          } else {
+            const strVal = String(val)
+            if (this.thousandSeparator) {
+              this.currentStr = this.parseThousand(strVal)
+            } else {
+              this.currentStr = strVal
+            }
+          }
         }
       }
     }
   },
   methods: {
     isValidNumber(str) {
-      return /^[+-]?\d*\.?\d*$/.test(str)
+      if (!str) return true
+      const negativePattern = this.allowNegative ? '[-+]?' : ''
+      if (this.type === 'integer') {
+        return new RegExp(`^${negativePattern}\\d*$`).test(str)
+      }
+      if (this.type === 'decimal' || this.type === 'number') {
+        if (this.precision === 0) {
+          return new RegExp(`^${negativePattern}\\d*$`).test(str)
+        }
+        return new RegExp(`^${negativePattern}\\d*\\.?\\d{0,${this.precision}}$`).test(str)
+      }
+      if (this.type === 'money') {
+        return new RegExp(`^${negativePattern}\\d*\\.?\\d{0,${this.precision}}$`).test(str)
+      }
+      return true
+    },
+    isValidPhone(str) {
+      return /^1[3-9]\d{0,9}$/.test(str)
+    },
+    isValidEmail(str) {
+      if (!str) return true
+      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(str)
+    },
+    isValidIdCard(str) {
+      return /^[1-9]\d{0,17}$/.test(str)
+    },
+    formatThousand(str) {
+      if (!str) return ''
+      const parts = str.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return parts.join('.')
+    },
+    parseThousand(str) {
+      return str.replace(/,/g, '')
+    },
+    parseToNumber(str) {
+      if (!str || str === '+' || str === '-' || str === '.' || str === '+.' || str === '-.' || str === '-.') {
+        return undefined
+      }
+      const num = parseFloat(str)
+      return isNaN(num) ? undefined : num
     },
     handleInput(val) {
+      let inputVal = val
+      
+      if (this.thousandSeparator && this.isNumberType) {
+        inputVal = this.parseThousand(val)
+      }
+
+      if (this.type === 'phone') {
+        inputVal = val.replace(/[^\d]/g, '')
+        if (!this.isValidPhone(inputVal)) {
+          inputVal = inputVal.slice(0, -1)
+        }
+        this.$emit('input', inputVal)
+        return
+      }
+
+      if (this.type === 'idcard') {
+        inputVal = val.replace(/[^\dXx]/g, '')
+        if (!this.isValidIdCard(inputVal)) {
+          inputVal = inputVal.slice(0, -1)
+        }
+        this.$emit('input', inputVal.toUpperCase())
+        return
+      }
+
+      if (this.type === 'email') {
+        if (!this.isValidEmail(inputVal)) {
+          this.hasError = true
+        } else {
+          this.hasError = false
+        }
+        this.$emit('input', inputVal)
+        return
+      }
+
       if (this.isNumberType) {
-        if (this.isValidNumber(val)) {
-          this.currentStr = val
-          const num = this.parseToNumber(val)
+        if (this.isValidNumber(inputVal)) {
+          this.currentStr = inputVal
+          const num = this.parseToNumber(inputVal)
           if (num !== undefined) {
-            this.$emit('input', num)
+            let finalNum = num
+            if (this.min !== undefined && num < this.min) {
+              finalNum = this.min
+              this.currentStr = String(finalNum)
+            }
+            if (this.max !== undefined && num > this.max) {
+              finalNum = this.max
+              this.currentStr = String(finalNum)
+            }
+            this.$emit('input', finalNum)
+            this.hasError = false
+          } else {
+            this.$emit('input', undefined)
           }
         }
       } else {
-        this.$emit('input', val)
+        if (this.trim) {
+          inputVal = inputVal.trim()
+        }
+        this.$emit('input', inputVal)
       }
     },
     handleChange(val) {
+      let changeVal = val
+      
+      if (this.thousandSeparator && this.isNumberType) {
+        changeVal = this.parseThousand(val)
+      }
+
       if (this.isNumberType) {
-        const num = this.parseToNumber(val)
+        const num = this.parseToNumber(changeVal)
         this.$emit('change', num)
       } else {
-        this.$emit('change', val)
+        if (this.trim) {
+          changeVal = changeVal.trim()
+        }
+        this.$emit('change', changeVal)
       }
     },
     handleFocus(e) {
@@ -118,29 +295,48 @@ export default {
     },
     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)
+          let finalNum = num
+          if (this.precision > 0) {
+            finalNum = Number(num.toFixed(this.precision))
+          }
+          this.currentStr = String(finalNum)
+          this.$emit('input', finalNum)
+          this.$emit('blur', finalNum, e)
+          this.hasError = false
         } else {
           if (this.currentStr !== '') {
             this.currentStr = ''
             this.$emit('input', undefined)
           }
+          this.$emit('blur', undefined, e)
+          this.hasError = false
         }
       } else {
+        if (this.type === 'email') {
+          if (!this.isValidEmail(this.value)) {
+            this.hasError = true
+          }
+        }
         this.$emit('blur', e)
       }
     },
-    parseToNumber(str) {
-      if (!str || str === '+' || str === '-' || str === '.' || str === '+.' || str === '-.' || str === '-.') {
-        return undefined
+    handleClear() {
+      if (this.isNumberType) {
+        this.currentStr = ''
       }
-      const num = parseFloat(str)
-      return isNaN(num) ? undefined : num
+      this.hasError = false
+      this.$emit('input', this.isNumberType ? undefined : '')
+      this.$emit('clear')
+    },
+    reset() {
+      this.currentStr = ''
+      this.hasError = false
+      this.$emit('input', this.isNumberType ? undefined : '')
     }
   }
 }
-</script>
+</script>

package/src/components/xt-input/style/index.scss

@@ -82,3 +82,13 @@
 .xt-input.is-disabled .el-input__inner::placeholder {
   color: var(--xt-input-disabled-text-color);
 }
+
+// error 状态
+.xt-input.is-error .el-input__inner {
+  border-color: var(--xt-color-danger, #f56c6c);
+}
+
+.xt-input.is-error .el-input__inner:focus {
+  border-color: var(--xt-color-danger, #f56c6c);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-color-danger, #f56c6c) 20%, transparent);
+}