xt-element-ui 2.1.5 → 2.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -11,13 +11,15 @@
     "docs:build": "vuepress build docs",
     "dev": "vue-cli-service serve",
     "lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
-    "prepublishOnly": "npm run lib"
+    "prepublishOnly": "npm run lib",
+    "postinstall": "patch-package"
   },
   "peerDependencies": {
     "vue": "^2.6.10"
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.19",
+    "patch-package": "^8.0.1",
     "sass": "^1.56.0",
     "sass-loader": "^10.5.2",
     "vuepress": "^1.9.10",

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="base-date-root">
+    <el-date-picker
+      v-if="type !== 'quarter'"
+      v-model="innerValue"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :type="pickerType"
+      :value-format="valueFormat"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      popper-append-to-body
+      popper-class="base-date-popper"
+    />
+
+    <el-popover
+      v-else
+      v-model="quarterPopVisible"
+      trigger="manual"
+      placement="bottom-start"
+      width="240"
+    >
+      <div class="quarter-panel">
+        <div class="quarter-header">
+          <el-button icon="el-icon-d-arrow-left" @click="year--"></el-button>
+          <span>{{ year }} 年</span>
+          <el-button icon="el-icon-d-arrow-right" @click="year++"></el-button>
+        </div>
+        <div class="quarter-list">
+          <div
+            v-for="q in 4"
+            :key="q"
+            class="quarter-item"
+            :class="{ active: quarterNum === q }"
+            @click="selectQuarter(q)"
+          >
+            Q{{ q }}
+          </div>
+        </div>
+      </div>
+
+      <el-input
+        slot="reference"
+        ref="quarterInput"
+        v-model="quarterShowText"
+        size="small"
+        readonly
+        :placeholder="placeholder"
+        :disabled="disabled"
+        clearable
+        @clear="handleClearQuarter"
+      >
+        <i slot="affix" class="el-icon-date"></i>
+      </el-input>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseDatePicker',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, null],
+      default: null
+    },
+    type: {
+      type: String,
+      default: 'date',
+      validator: val => ['date', 'month', 'year', 'quarter', 'week'].includes(val)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    valueFormat: String
+  },
+  data() {
+    return {
+      quarterPopVisible: false,
+      year: new Date().getFullYear(),
+      quarterNum: null
+    }
+  },
+  computed: {
+    pickerType() {
+      return this.type === 'quarter' ? null : this.type
+    },
+    placeholder() {
+      if (this.$props.placeholder) return this.$props.placeholder
+      const map = {
+        date: '请选择日期',
+        month: '请选择月份',
+        year: '请选择年份',
+        quarter: '请选择季度',
+        week: '请选择周'
+      }
+      return map[this.type] || '请选择日期'
+    },
+    valueFormat() {
+      if (this.$props.valueFormat) return this.$props.valueFormat
+      const map = {
+        date: 'yyyy-MM-dd',
+        month: 'yyyy-MM',
+        year: 'yyyy',
+        quarter: 'yyyy-Qq',
+        week: 'yyyy-WW'
+      }
+      return map[this.type] || 'yyyy-MM-dd'
+    },
+    innerValue: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    quarterShowText() {
+      if (!this.value) return ''
+      return `${this.year}-Q${this.quarterNum}`
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (this.type !== 'quarter' || !val) {
+          this.quarterNum = null
+          return
+        }
+        const [y, q] = val.split('-Q')
+        this.year = Number(y)
+        this.quarterNum = Number(q)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    selectQuarter(q) {
+      this.quarterNum = q
+      const val = `${this.year}-Q${q}`
+      this.$emit('input', val)
+      this.quarterPopVisible = false
+    },
+    handleClearQuarter() {
+      this.quarterNum = null
+      this.$emit('input', null)
+    }
+  },
+  mounted() {
+    if (this.type === 'quarter' && this.$refs.quarterInput) {
+      this.$refs.quarterInput.$el.addEventListener('click', () => {
+        if (!this.disabled) this.quarterPopVisible = true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base-date-root {
+}
+
+.quarter-panel {
+  padding: 10px;
+}
+
+.quarter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.quarter-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.quarter-item {
+  text-align: center;
+  padding: 8px 0;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.quarter-item.active {
+  background: #409eff;
+  color: #fff;
+  border-color: #409eff;
+}
+
+::v-deep .base-date-popper {
+  border-radius: 4px;
+}
+</style>

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>