xt-element-ui 2.1.21 → 2.1.61

package/src/components/xt-date-picker/index.vue

@@ -1,56 +1,153 @@
 <template>
-  <div style="display:inline-block">
-    <XtFlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}`}:{}">
-      <Quarter v-model="timeStart" :format="format" placeholder="开始时间" quarter-type="quarter-start" clearable></Quarter>
-      <span class="separator">{{ separator }}</span>
-      <Quarter v-model="timeEnd" :format="format" placeholder="结束时间" quarter-type="quarter-end" clearable></Quarter>
-    </XtFlexBox>
-    <XtFlexBox v-else type="inline-flex" class="xt-date" :class="{focus: isfocus}" :style="width?{width: `${width}px`}:{}">
-      <el-date-picker ref="timeStart" key="startSelect" v-model="timeStart" size="small" :disabled="disabled" append-to-body :picker-options="startTimeRange" :format="format" :type="dateType" placeholder="开始时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
-      <span class="separator">{{ separator }}</span>
-      <el-date-picker ref="timeEnd" key="endSelect" v-model="timeEnd" size="small" :disabled="disabled" append-to-body :picker-options="endTimeRange" :format="format" :type="dateType" placeholder="结束时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
-    </XtFlexBox>
+  <div class="xt-date-picker-container">
+    <!-- 维度切换单选：日/月/年/自定义区间 -->
+    <div v-if="showDimension" class="xt-date-dimension">
+      <el-radio-group v-model="dimension" size="small">
+        <el-radio-button label="date">日</el-radio-button>
+        <el-radio-button label="month">月</el-radio-button>
+        <el-radio-button label="year">年</el-radio-button>
+        <el-radio-button label="daterange">自定义</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div class="xt-date-picker-wrapper">
+      <!-- 区间模式 -->
+      <RangeDate
+        v-if="useRangeMode"
+        v-model="rangeValue"
+        :type="rangeDateType"
+        :separator="separator"
+        :disabled="disabled"
+        class="xt-date"
+        :class="{ focus: isfocus }"
+        :style="width ? { width: `${width}px` } : {}"
+        @focus="isfocus = true; $emit('focus')"
+        @blur="isfocus = false; $emit('blur')"
+      />
+
+      <!-- 单选模式：日/月/年/周 -->
+      <el-date-picker
+        v-if="!useRangeMode && realDateType !== 'quarter'"
+        ref="singlePicker"
+        v-model="singleValue"
+        size="small"
+        :disabled="disabled"
+        append-to-body
+        :format="format"
+        :type="realDateType"
+        :placeholder="innerPlaceholder"
+        clearable
+        @focus="isfocus = true; $emit('focus')"
+        @blur="isfocus = false; $emit('blur')"
+      />
+      <!-- 单选模式：季度（使用自定义组件） -->
+      <Picker
+        v-else-if="!useRangeMode && realDateType === 'quarter'"
+        v-model="singleValue"
+        type="quarter"
+        size="small"
+        :disabled="disabled"
+        :placeholder="innerPlaceholder"
+        @focus="isfocus = true; $emit('focus')"
+        @blur="isfocus = false; $emit('blur')"
+      />
+    </div>
   </div>
 </template>
+
 <script>
-const typeFormatEnum = {
-  datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
+// 全局常量统一维护
+// 类型对应格式化规则
+const DATE_FORMAT_MAP = {
+  datetime: 'yyyy-MM-dd HH:mm',
+  month: 'yyyy-MM',
+  year: 'yyyy',
+  date: 'yyyy-MM-dd',
+  quarter: 'yyyy-Qq',
+  week: 'yyyy-WW'
+};
+// 维度面板对应的格式化
+const DIMENSION_FORMAT_MAP = {
+  date: 'yyyy-MM-dd',
+  month: 'yyyy-MM',
+  year: 'yyyy',
+  daterange: 'yyyy-MM-dd'
 };
+// 维度 -> RangeDate 使用的基础类型
+const DIMENSION_TO_RANGE_TYPE = {
+  date: 'date',
+  month: 'month',
+  year: 'year',
+  daterange: 'date'
+};
+// 普通type映射区间组件type
+const NORMAL_TO_RANGE_TYPE = {
+  date: 'date',
+  month: 'month',
+  year: 'year',
+  quarter: 'quarter',
+  week: 'week'
+};
+
+import RangeDate from './component/RangeDate.vue';
+import Picker from './component/Picker.vue';
 
-import XtFlexBox from '../xt-flex-box/index.vue'
-import Quarter from "./quarter.vue";
 export default {
-  name: "XtDatePicker",
-  components: {
-    XtFlexBox,
-    Quarter
-  },
+  name: 'XtDatePicker',
+  components: { RangeDate, Picker },
+  // 标准v-model：父组件 v-model="xxx"
   model: {
-    prop: "value",
-    event: "change"
+    prop: 'value',
+    event: 'change'
   },
   props: {
-    value: {},
+    // 绑定主值
+    value: {
+      type: [String, Array, null],
+      default: null
+    },
+    // 基础日期类型 date/month/year/quarter/week/datetime
     dateType: {
       type: String,
-      default: "date"
+      default: 'date',
+      validator: val => Object.keys(DATE_FORMAT_MAP).includes(val)
     },
+    // 区间分隔符
     separator: {
       type: String,
-      default: "至"
+      default: '至'
     },
     disabled: {
       type: Boolean,
       default: false
     },
-    immediate: { // 是否直接初始化 参数
+    // 维度切换后是否立即触发事件
+    immediate: {
       type: Boolean,
       default: true
     },
-    placeholder: {},
+    // 外部自定义占位
+    placeholder: String,
+    // 整体宽度
     width: {
-      type: [String],
+      type: String,
       default: '100%'
+    },
+    // 是否开启区间模式（无维度切换时生效）
+    rangeMode: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示维度切换单选框
+    showDimension: {
+      type: Boolean,
+      default: false
+    },
+    // 当前选中维度 date/month/year/daterange
+    dimension: {
+      type: String,
+      default: 'date',
+      validator: val => ['date', 'month', 'year', 'daterange'].includes(val)
     }
   },
   data() {
@@ -59,73 +156,116 @@ export default {
     };
   },
   computed: {
+    // 真实底层日期类型（区分维度面板场景）
+    realDateType() {
+      if (this.showDimension) return this.dimension;
+      return this.dateType;
+    },
+
+    // 当前是否启用区间组件
+    useRangeMode() {
+      // 维度为自定义区间 或 全局开启rangeMode且非维度面板
+      return this.dimension === 'daterange' || (this.rangeMode);
+    },
+
+    // 区间组件使用的type
+    rangeDateType() {
+      if (this.showDimension) {
+        return DIMENSION_TO_RANGE_TYPE[this.dimension] || 'date';
+      }
+      return NORMAL_TO_RANGE_TYPE[this.dateType] || 'date';
+    },
+
+    // 日期格式化字符串
     format() {
-      return typeFormatEnum[this.dateType] || "yyyy-MM-dd";
+      if (this.showDimension) {
+        return DIMENSION_FORMAT_MAP[this.dimension] || DATE_FORMAT_MAP[this.dateType];
+      }
+      return DATE_FORMAT_MAP[this.dateType] || 'yyyy-MM-dd';
     },
-    timeStart: {
+
+    // 内部自动生成占位（外部placeholder优先）
+    innerPlaceholder() {
+      if (this.placeholder) return this.placeholder;
+      const map = {
+        date: '请选择日期',
+        month: '请选择月份',
+        year: '请选择年份',
+        quarter: '请选择季度',
+        week: '请选择周',
+        datetime: '请选择日期时间'
+      };
+      return map[this.realDateType] || '请选择';
+    },
+
+    // 单选模式双向绑定
+    singleValue: {
       get() {
-        return this.value && this.value[0];
+        return this.value;
       },
-      set(v) {
-        this.$emit("update:value", [v, this.timeEnd]);
-        this.$emit("change", [v, this.timeEnd]);
+      set(val) {
+        this.$emit('update:value', val);
+        this.$emit('change', val);
+        this.$emit('dimension-change', {
+          dimension: this.dimension,
+          value: val
+        });
       }
     },
-    timeEnd: {
+
+    // 区间组件双向绑定中转
+    rangeValue: {
       get() {
-        return this.value && this.value[1];
+        return this.value;
       },
-      set(v) {
-        this.$emit("update:value", [this.timeStart, v]);
-        this.$emit("change", [this.timeStart, v]);
+      set(val) {
+        this.$emit('update:value', val);
+        this.$emit('change', val);
+        this.$emit('dimension-change', {
+          dimension: this.dimension,
+          value: val
+        });
+      }
+    }
+  },
+  watch: {
+    // 切换维度，关闭下拉面板并抛出事件
+    dimension(newVal) {
+      this.closePickerPanels();
+      if (this.immediate) {
+        this.$emit('dimension-change', {
+          dimension: newVal,
+          value: this.value
+        });
       }
-    },
-    startTimeRange() {
-      if (!this.timeEnd) return {};
-      const endTime = this.timeEnd.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() > (endTime);
-        }
-      };
-    },
-    endTimeRange() {
-      if (!this.timeStart) return {};
-      const startTime = this.timeStart.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() < (startTime);
-        }
-      };
     }
   },
   methods: {
+    // 关闭原生单选日期下拉面板
+    closePickerPanels() {
+      if (this.$refs.singlePicker) {
+        this.$refs.singlePicker.pickerVisible = false;
+      }
+    }
   }
 };
 </script>
+
 <style lang="scss" scoped>
-.xt-date-picker{
+.xt-date-picker-container {
+  display: inline-block;
+  width: 100%;
+}
+
+.xt-date-dimension {
+  margin-bottom: 8px;
+}
+
+.xt-date-picker-wrapper {
+  display: inline-block;
+}
+
+.xt-date {
   width: 100%;
-  border-radius: 4px;
-  border: 1px solid #DCDFE6;
-  
-  &.focus{
-    border-color: #1890FF;
-  }
-  
-  ::v-deep .el-picker-panel{
-    position: absolute;
-    z-index: 401;
-  }
-  
-  ::v-deep .el-input__inner{
-    border: none;
-    padding: 0;
-    text-align: center;
-  }
-  
-  ::v-deep .el-input__prefix{
-    display: none;
-  }
 }
-</style>
+</style>

package/src/components/xt-flex-box/index.vue

@@ -25,7 +25,7 @@ export default {
             if (this.gap) {
                 result.gap = this.gap
             } else {
-                result.gap = 'var(--xt-flex-box-gap, 8px)'
+                result.gap = ''
             }
             return result
         }

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

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

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>