xt-element-ui 2.1.3 → 2.1.5

package/package.json

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

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

@@ -2,7 +2,8 @@
   <el-button 
     class="xt-button" 
     :class="buttonClasses"
-    v-bind="$attrs" 
+    v-bind="$attrs"
+    :type="type"
     @click="handleClick"
   >
     <slot></slot>

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

@@ -17,8 +17,8 @@
     color: var(--xt-color-white, #ffffff);
   }
   &-success{
-    background-color: var(--xt-color-primary, #ffffff);
-    border-color: var(--xt-color-primary, #ffffff);
+    background-color: var(--xt-color-success, #ffffff);
+    border-color: var(--xt-color-success, #ffffff);
     color: var(--xt-color-white, #ffffff);
   }
   &-warning{

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

@@ -4,13 +4,13 @@
 .xt-card {
   border-radius: 8px;
   transition: all 0.3s;
-  font-size: var(--xt-card-font-size, 14px);
+  font-size: var(--xt-font-size-small, 14px);
   background-color: var(--xt-bg-color, #ffffff);
   color: var(--xt-text-color-primary, #303133);
   border-color: var(--xt-border-color, #ebeef5);
   
   .el-card__header {
-    padding: var(--xt-card-header-padding, 16px 20px);
+    padding: 16px 20px;
     border-bottom: 1px solid var(--xt-border-color, #ebeef5);
     background-color: var(--xt-bg-color, #ffffff);
     font-weight: 600;

package/src/components/xt-card-item/style/index.scss

@@ -1,54 +1,19 @@
 @import '../../../styles/variables.scss';
 
 .xt-card-item {
-  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
-  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
-  --xt-card-text-color: var(--xt-color-text-primary, #303133);
-  
-  border-radius: var(--xt-card-border-radius, 4px);
+  border: 1px solid var(--xt-border-color, #dcdfe6);
+  border-radius: var(--xt-border-radius-small, 4px);
   box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
-  background-color: var(--xt-card-bg-color);
+  background-color: var(--xt-bg-color-block, #ffffff);
   overflow: hidden;
-  color: var(--xt-card-text-color);
+  color: var(--xt-text-color-primary, #303133);
   transition: var(--xt-transition-duration, 0.3s);
 }
 
-.xt-card-item.is-primary {
-  --xt-card-bg-color: var(--xt-color-primary, #1890ff);
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-.xt-card-item.is-success {
-  --xt-card-bg-color: var(--xt-color-success, #67c039);
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-
-.xt-card-item.is-danger {
-  --xt-card-bg-color: var(--xt-color-danger, #f56c6c);  
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-
-.xt-card-item.is-warning {
-  --xt-card-bg-color: var(--xt-color-warning, #e6a23c); 
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
 
 
 .xt-card-item .card__header {
-  padding: var(--xt-card-header-padding, 18px 20px);
+  padding: 18px 20px;
   box-sizing: border-box;
   font-weight: 600;
   font-size: var(--xt-font-size-medium, 16px);

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

@@ -1,15 +1,29 @@
 <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="custom">自定义</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>
+
+      <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>
+    </div>
   </div>
 </template>
 <script>
@@ -17,6 +31,13 @@ const typeFormatEnum = {
   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'
+};
+
 import XtFlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
@@ -43,7 +64,7 @@ export default {
       type: Boolean,
       default: false
     },
-    immediate: { // 是否直接初始化 参数
+    immediate: {
       type: Boolean,
       default: true
     },
@@ -51,6 +72,18 @@ export default {
     width: {
       type: [String],
       default: '100%'
+    },
+    rangeMode: {
+      type: Boolean,
+      default: true
+    },
+    showDimension: {
+      type: Boolean,
+      default: false
+    },
+    dimension: {
+      type: String,
+      default: "date"
     }
   },
   data() {
@@ -60,8 +93,36 @@ 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";
     },
+    rangeDateType() {
+      if (this.showDimension) {
+        return rangeTypeMap[this.dimension] || 'daterange';
+      }
+      const rangeMap = {
+        date: 'daterange',
+        month: 'monthrange',
+        year: 'yearrange',
+        quarter: 'quarter',
+        week: 'weekrange'
+      };
+      return rangeMap[this.dateType] || 'daterange';
+    },
+    useRangeMode() {
+      if (this.showDimension) {
+        return true;
+      }
+      return this.rangeMode;
+    },
     timeStart: {
       get() {
         return this.value && this.value[0];
@@ -69,6 +130,7 @@ export default {
       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] });
       }
     },
     timeEnd: {
@@ -78,32 +140,80 @@ export default {
       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] });
+      }
+    },
+    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() {
-      if (!this.timeEnd) return {};
-      const endTime = this.timeEnd.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() > (endTime);
-        }
-      };
+      const result = {};
+
+      if (this.timeEnd) {
+        const endTime = this.timeEnd.getTime();
+        result.disabledDate = (time) => {
+          return time.getTime() > endTime;
+        };
+      }
+
+      return result;
     },
     endTimeRange() {
-      if (!this.timeStart) return {};
-      const startTime = this.timeStart.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() < (startTime);
-        }
-      };
+      const result = {};
+
+      if (this.timeStart) {
+        const startTime = this.timeStart.getTime();
+        result.disabledDate = (time) => {
+          return time.getTime() < startTime;
+        };
+      }
+
+      return result;
+    }
+  },
+  watch: {
+    dimension(val) {
+      this.closePickerPanels();
+      this.$emit("dimension-change", { dimension: val, 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;
+      }
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
+.xt-date-picker-container {
+  display: inline-block;
+  width: 100%;
+}
+
+.xt-date-dimension {
+  margin-bottom: 8px;
+}
+
+.xt-date-picker-wrapper {
+  display: inline-block;
+  width: 100%;
+}
+
 .xt-date-picker{
   width: 100%;
   border-radius: 4px;
@@ -128,4 +238,14 @@ export default {
     display: none;
   }
 }
-</style>
+
+.xt-date {
+  width: 100%;
+}
+
+.separator {
+  padding: 0 8px;
+  color: #909399;
+  line-height: 32px;
+}
+</style>

package/src/components/xt-step-price/style/index.scss

@@ -2,10 +2,6 @@
 
 .xt-step-price {
   padding: 12px 16px;
-  background-color: var(--xt-fill-color-blank, #ffffff);
-  border: 1px solid var(--xt-border-color-lighter, #ebeef5);
-  border-radius: var(--xt-border-radius-small, 4px);
-
   &__header {
     display: flex;
     align-items: center;

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

@@ -42,7 +42,7 @@
 
     <xt-button
       v-if="!disabled && removable && itemsLength > 1"
-      text
+      type="text"
       icon="el-icon-delete"
       class="xt-step-price-item__delete"
       @click="onDelete"

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

@@ -125,6 +125,8 @@ export default {
     // 排序配置
     sortGroup: { type: Boolean, default: false },
     defaultSort: { type: Object, default: null },
+    // 过滤配置
+    filterMethod: { type: Function, default: null },
     title: { type: String, default: '' },
     height: { type: [Number, String], default: null },
     maxHeight: { type: [Number, String], default: null },
@@ -168,15 +170,22 @@ export default {
     // 排序后的数据
     sortedTableData() {
       if (!this.tableData.length) return []
-      if (!this.sortProp || !this.sortOrder) return [...this.tableData]
+
+      let data = [...this.tableData]
+
+      if (typeof this.filterMethod === 'function') {
+        data = data.filter(this.filterMethod)
+      }
+
+      if (!this.sortProp || !this.sortOrder) return data
 
       const order = this.sortOrder === 'ascending' ? 1 : -1
       const sortFn = this.resolveSortMethod(this.sortProp)
 
       if (this.sortGroup && this.groupColumns.length) {
-        return this.groupSort([...this.tableData], sortFn, order)
+        return this.groupSort(data, sortFn, order)
       }
-      return [...this.tableData].sort((a, b) => sortFn(a, b) * order)
+      return data.sort((a, b) => sortFn(a, b) * order)
     },
 
     // 处理小计、总计后的最终数据

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

@@ -20,11 +20,17 @@
       :style="customStyle"
       @mouseenter="handleMouseEnter"
     >
-      <slot name="prefix">{{ prefix }}</slot>
+      <template v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template v-else-if="prefix">{{ prefix }}</template>
       <slot>
         <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
       </slot>
-      <slot name="suffix">{{ suffix }}</slot> 
+      <template v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
+      <template v-else-if="suffix">{{ suffix }}</template>
     </span>
   </el-tooltip>
   <span 
@@ -41,11 +47,17 @@
     ]"
     :style="customStyle"
   >
-    <slot name="prefix">{{ prefix }}</slot>
+    <template v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template v-else-if="prefix">{{ prefix }}</template>
     <slot>
       <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
     </slot>
-    <slot name="suffix">{{ suffix }}</slot> 
+    <template v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
+    <template v-else-if="suffix">{{ suffix }}</template>
   </span>
 </template>
 

package/src/components/xt-transfer-tree/index.js

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