xt-element-ui 2.1.5 → 2.1.7

package/src/components/xt-date-picker/component/RangeDate.vue

@@ -0,0 +1,136 @@
+<!-- RangeDate.vue 区间业务组件 -->
+<template>
+    <div class="range-wrap">
+      <Picker
+        v-model="startVal"
+        :type="type"
+        size="small"
+        :placeholder="startPlaceholder"
+        :disabled="disabled"
+        :disabled-date="disabledStart"
+        @change="handleChange"
+      />
+      <span class="split">{{ separator }}</span>
+      <Picker
+        v-model="endVal"
+        :type="type"
+        size="small"
+        :placeholder="endPlaceholder"
+        :disabled="disabled"
+        :disabled-date="disabledEnd"
+        @change="handleChange"
+      />
+    </div>
+  </template>
+  <script>
+  import Picker from './Picker.vue'
+  export default {
+    name: 'RangeDate',
+    components: { Picker },
+    props: {
+      // 父组件v-model绑定数组 [startStr, endStr]
+      value: {
+        type: Array,
+        default: () => [null, null]
+      },
+      type: {
+        type: String,
+        default: 'date'
+      },
+      separator: {
+        type: String,
+        default: '至'
+      },
+      disabled: { type: Boolean, default: false }
+    },
+    data() {
+      return {
+        startVal: '',
+        endVal: ''
+      }
+    },
+    watch: {
+      // 外部回填回显
+      value: {
+        handler(val) {
+          const [s, e] = val || []
+          this.startVal = s || ''
+          this.endVal = e || ''
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      startDate() {
+        return this.startVal ? new Date(this.startVal) : null
+      },
+      endDate() {
+        return this.endVal ? new Date(this.endVal) : null
+      },
+      startPlaceholder() {
+        const map = {
+          date: '开始日期',
+          month: '开始月份',
+          year: '开始年份',
+          quarter: '开始季度',
+          week: '开始周'
+        }
+        return map[this.type] || '开始日期'
+      },
+      endPlaceholder() {
+        const map = {
+          date: '结束日期',
+          month: '结束月份',
+          year: '结束年份',
+          quarter: '结束季度',
+          week: '结束周'
+        }
+        return map[this.type] || '结束日期'
+      }
+    },
+    methods: {
+      // 禁用开始：不能晚于已选结束
+      disabledStart(time) {
+        if (!this.endDate) return false
+        return time.getTime() > this.endDate.getTime()
+      },
+      // 禁用结束：不能早于已选开始
+      disabledEnd(time) {
+        if (!this.startDate) return false
+        return time.getTime() < this.startDate.getTime()
+      },
+      // 任意日期变更同步抛出数组给父组件
+      handleChange() {
+        this.$emit('input', [this.startVal, this.endVal])
+      }
+    }
+  }
+  </script>
+  <style scoped>
+  .range-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+  .range-wrap .el-date-editor {
+    flex: 1;
+    min-width: 130px;
+  }
+  .split {
+    flex-shrink: 0;
+    padding: 0 4px;
+  }
+  /* 手机/窄侧边栏自动竖向排列 */
+  @media (max-width: 360px) {
+    .range-wrap {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .split {
+      text-align: center;
+      margin: 4px 0;
+    }
+  }
+  </style>

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

@@ -1,89 +1,153 @@
 <template>
   <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="custom">自定义</el-radio-button>
+        <el-radio-button label="daterange">自定义</el-radio-button>
       </el-radio-group>
     </div>
 
     <div class="xt-date-picker-wrapper">
-      <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>
+      <!-- 区间模式 -->
+      <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')"
+      />
 
-      <XtFlexBox v-else-if="useRangeMode" 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="rangeDateType" 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="rangeDateType" placeholder="结束时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
-      </XtFlexBox>
-
-      <el-date-picker v-else ref="singlePicker" v-model="singleValue" size="small" :disabled="disabled" append-to-body :format="format" :type="dateType" :placeholder="placeholder" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
+      <!-- 单选模式：日/月/年/周 -->
+      <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 rangeTypeMap = {
-  date: 'daterange',
-  month: 'monthrange',
-  year: 'yearrange',
-  custom: 'daterange'
+// 维度面板对应的格式化
+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: {
       type: Boolean,
       default: true
     },
-    placeholder: {},
+    // 外部自定义占位
+    placeholder: String,
+    // 整体宽度
     width: {
-      type: [String],
+      type: String,
       default: '100%'
     },
+    // 是否开启区间模式（无维度切换时生效）
     rangeMode: {
       type: Boolean,
-      default: true
+      default: false
     },
+    // 是否展示维度切换单选框
     showDimension: {
       type: Boolean,
       default: false
     },
+    // 当前选中维度 date/month/year/daterange
     dimension: {
       type: String,
-      default: "date"
+      default: 'date',
+      validator: val => ['date', 'month', 'year', 'daterange'].includes(val)
     }
   },
   data() {
@@ -92,106 +156,93 @@ export default {
     };
   },
   computed: {
-    format() {
-      if (this.showDimension) {
-        const formatMap = {
-          date: 'yyyy-MM-dd',
-          month: 'yyyy-MM',
-          year: 'yyyy',
-          custom: 'yyyy-MM-dd'
-        };
-        return formatMap[this.dimension] || typeFormatEnum[this.dateType];
-      }
-      return typeFormatEnum[this.dateType] || "yyyy-MM-dd";
+    // 真实底层日期类型（区分维度面板场景）
+    realDateType() {
+      if (this.showDimension) return this.dimension;
+      return this.dateType;
     },
+
+    // 当前是否启用区间组件
+    useRangeMode() {
+      // 维度为自定义区间 或 全局开启rangeMode且非维度面板
+      return this.dimension === 'daterange' || (this.rangeMode);
+    },
+
+    // 区间组件使用的type
     rangeDateType() {
       if (this.showDimension) {
-        return rangeTypeMap[this.dimension] || 'daterange';
+        return DIMENSION_TO_RANGE_TYPE[this.dimension] || 'date';
       }
-      const rangeMap = {
-        date: 'daterange',
-        month: 'monthrange',
-        year: 'yearrange',
-        quarter: 'quarter',
-        week: 'weekrange'
-      };
-      return rangeMap[this.dateType] || 'daterange';
+      return NORMAL_TO_RANGE_TYPE[this.dateType] || 'date';
     },
-    useRangeMode() {
+
+    // 日期格式化字符串
+    format() {
       if (this.showDimension) {
-        return true;
-      }
-      return this.rangeMode;
-    },
-    timeStart: {
-      get() {
-        return this.value && this.value[0];
-      },
-      set(v) {
-        this.$emit("update:value", [v, this.timeEnd]);
-        this.$emit("change", [v, this.timeEnd]);
-        this.$emit("dimension-change", { dimension: this.dimension, value: [v, this.timeEnd] });
+        return DIMENSION_FORMAT_MAP[this.dimension] || DATE_FORMAT_MAP[this.dateType];
       }
+      return DATE_FORMAT_MAP[this.dateType] || 'yyyy-MM-dd';
     },
-    timeEnd: {
-      get() {
-        return this.value && this.value[1];
-      },
-      set(v) {
-        this.$emit("update:value", [this.timeStart, v]);
-        this.$emit("change", [this.timeStart, v]);
-        this.$emit("dimension-change", { dimension: this.dimension, value: [this.timeStart, v] });
-      }
+
+    // 内部自动生成占位（外部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;
       },
-      set(v) {
-        this.$emit("update:value", v);
-        this.$emit("change", v);
-        this.$emit("dimension-change", { dimension: this.dimension, value: v });
-      }
-    },
-    startTimeRange() {
-      const result = {};
-
-      if (this.timeEnd) {
-        const endTime = this.timeEnd.getTime();
-        result.disabledDate = (time) => {
-          return time.getTime() > endTime;
-        };
+      set(val) {
+        this.$emit('update:value', val);
+        this.$emit('change', val);
+        this.$emit('dimension-change', {
+          dimension: this.dimension,
+          value: val
+        });
       }
-
-      return result;
     },
-    endTimeRange() {
-      const result = {};
 
-      if (this.timeStart) {
-        const startTime = this.timeStart.getTime();
-        result.disabledDate = (time) => {
-          return time.getTime() < startTime;
-        };
+    // 区间组件双向绑定中转
+    rangeValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('update:value', val);
+        this.$emit('change', val);
+        this.$emit('dimension-change', {
+          dimension: this.dimension,
+          value: val
+        });
       }
-
-      return result;
     }
   },
   watch: {
-    dimension(val) {
+    // 切换维度，关闭下拉面板并抛出事件
+    dimension(newVal) {
       this.closePickerPanels();
-      this.$emit("dimension-change", { dimension: val, value: this.value });
+      if (this.immediate) {
+        this.$emit('dimension-change', {
+          dimension: newVal,
+          value: this.value
+        });
+      }
     }
   },
   methods: {
+    // 关闭原生单选日期下拉面板
     closePickerPanels() {
-      if (this.$refs.timeStart) {
-        this.$refs.timeStart.pickerVisible = false;
-      }
-      if (this.$refs.timeEnd) {
-        this.$refs.timeEnd.pickerVisible = false;
-      }
       if (this.$refs.singlePicker) {
         this.$refs.singlePicker.pickerVisible = false;
       }
@@ -199,6 +250,7 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .xt-date-picker-container {
   display: inline-block;
@@ -211,41 +263,9 @@ export default {
 
 .xt-date-picker-wrapper {
   display: inline-block;
-  width: 100%;
-}
-
-.xt-date-picker{
-  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;
-  }
 }
 
 .xt-date {
   width: 100%;
 }
-
-.separator {
-  padding: 0 8px;
-  color: #909399;
-  line-height: 32px;
-}
 </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 }