xt-element-ui 2.1.22 → 2.1.72

package/src/styles/variables-export.scss

@@ -11,76 +11,4 @@
   xtColorDanger: #{$xt-color-danger};             // 危险色 - Element UI 标准红色
   xtColorInfo: #{$xt-color-info};                 // 信息色 - Element UI 标准灰色
 
-  // 主色调浅色系列
-  xtColorPrimaryLight3: #{$xt-color-primary-light-3};   // 主色浅色 30%
-  xtColorPrimaryLight5: #{$xt-color-primary-light-5};   // 主色浅色 50%
-  xtColorPrimaryLight7: #{$xt-color-primary-light-7};   // 主色浅色 70%
-  xtColorPrimaryLight8: #{$xt-color-primary-light-8};   // 主色浅色 80%
-  xtColorPrimaryLight9: #{$xt-color-primary-light-9};   // 主色浅色 90%
-
-  // ===========================
-  // 文字颜色
-  // ===========================
-  xtColorTextPrimary: #{$xt-color-text-primary};       // 主要文字颜色 - 最深
-  xtColorTextRegular: #{$xt-color-text-regular};       // 常规文字颜色 - 中等
-  xtColorTextSecondary: #{$xt-color-text-secondary};   // 次要文字颜色 - 较浅
-  xtColorTextPlaceholder: #{$xt-color-text-placeholder}; // 占位符文字颜色
-  xtColorTextDisabled: #{$xt-color-text-disabled};     // 禁用状态文字颜色
-
-  // ===========================
-  // 背景颜色
-  // ===========================
-  xtColorBgPrimary: #{$xt-color-bg-primary};       // 主背景色 - 白色
-  xtColorBgSecondary: #{$xt-color-bg-secondary};   // 次要背景色 - 浅灰
-  xtColorBgHover: #{$xt-color-bg-hover};           // 悬停背景色
-  xtColorBgContainer: #{$xt-color-bg-container};   // 容器背景色
-  xtColorBgOverlay: #{$xt-color-bg-overlay};       // 浮层背景色
-
-  // ===========================
-  // 边框颜色
-  // ===========================
-  xtColorBorder: #{$xt-color-border};                   // 边框颜色 - 标准
-  xtColorBorderLight: #{$xt-color-border-light};       // 边框浅色
-  xtColorBorderLighter: #{$xt-color-border-lighter};   // 边框更浅色
-  xtColorBorderExtraLight: #{$xt-color-border-extra-light}; // 边框极浅色
-
-  // ===========================
-  // 字体大小
-  // ===========================
-  xtFontSizeExtraLarge: #{$xt-font-size-extra-large};   // 特大字体
-  xtFontSizeLarge: #{$xt-font-size-large};              // 大字体
-  xtFontSizeMedium: #{$xt-font-size-medium};            // 中等字体
-  xtFontSizeBase: #{$xt-font-size-small};                // 基准字体
-  xtFontSizeSmall: #{$xt-font-size-mini};              // 小字体
-  xtFontSizeExtraSmall: #{$xt-font-size-extra-small};   // 特小字体
-
-  // ===========================
-  // 间距
-  // ===========================
-  xtSpacingXs: #{$xt-spacing-xs};   // 最小间距
-  xtSpacingSm: #{$xt-spacing-sm};   // 小间距
-  xtSpacingMd: #{$xt-spacing-md};   // 中间距
-  xtSpacingLg: #{$xt-spacing-lg};   // 大间距
-  xtSpacingXl: #{$xt-spacing-xl};   // 特大间距
-
-  // ===========================
-  // 圆角
-  // ===========================
-  xtBorderRadiusBase: #{$xt-border-radius-base};     // 基准圆角
-  xtBorderRadiusSmall: #{$xt-border-radius-small};   // 小圆角
-  xtBorderRadiusRound: #{$xt-border-radius-round};   // 圆角（胶囊状）
-  xtBorderRadiusCircle: #{$xt-border-radius-circle}; // 圆形
-
-  // ===========================
-  // 阴影
-  // ===========================
-  xtShadowSm: #{$xt-shadow-sm};   // 小阴影
-  xtShadowMd: #{$xt-shadow-md};   // 中等阴影
-  xtShadowLg: #{$xt-shadow-lg};   // 大阴影
-
-  // ===========================
-  // 过渡动画
-  // ===========================
-  xtTransitionDuration: #{$xt-transition-duration};         // 默认过渡时长
-  xtTransitionDurationFast: #{$xt-transition-duration-fast}; // 快速过渡时长
 }

package/src/utils/index.js

@@ -177,6 +177,272 @@ export const onConfigChange = function(listener) {
     }
 }
 
+// ==================== 数字格式化 ====================
+
+export const formatNumber = function(value, options) {
+  if (value === null || value === undefined || value === '') {
+    return ''
+  }
+
+  const num = typeof value === 'string' ? parseFloat(value) : value
+  if (isNaN(num)) {
+    return String(value)
+  }
+
+  const opts = Object.assign({
+    decimals: 2,
+    thousand: true,
+    prefix: '',
+    suffix: '',
+    showSign: false
+  }, options || {})
+
+  let result = num.toFixed(opts.decimals)
+
+  if (opts.thousand) {
+    const parts = result.split('.')
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    result = parts.join('.')
+  }
+
+  if (opts.showSign && num > 0) {
+    result = '+' + result
+  }
+
+  return opts.prefix + result + opts.suffix
+}
+
+export const formatThousand = function(value, decimals) {
+  return formatNumber(value, {
+    decimals: decimals != null ? decimals : 2,
+    thousand: true
+  })
+}
+
+export const formatPercent = function(value, decimals) {
+  if (value === null || value === undefined || value === '') {
+    return ''
+  }
+  const num = typeof value === 'string' ? parseFloat(value) : value
+  if (isNaN(num)) {
+    return String(value)
+  }
+  return formatNumber(num * 100, {
+    decimals: decimals != null ? decimals : 2,
+    thousand: true,
+    suffix: '%'
+  })
+}
+
+// ==================== 日期格式化 ====================
+
+function padZero(num, len) {
+  len = len || 2
+  return String(num).padStart(len, '0')
+}
+
+export const formatDate = function(date, format) {
+  if (!date) {
+    return ''
+  }
+
+  let d
+  if (date instanceof Date) {
+    d = date
+  } else if (typeof date === 'number') {
+    d = new Date(date.toString().length === 10 ? date * 1000 : date)
+  } else if (typeof date === 'string') {
+    date = date.trim()
+    if (/^\d+$/.test(date)) {
+      d = new Date(date.length === 10 ? parseInt(date) * 1000 : parseInt(date))
+    } else {
+      d = new Date(date.replace(/-/g, '/'))
+    }
+  } else {
+    return ''
+  }
+
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+
+  const fmt = format || 'yyyy-MM-dd'
+  const year = d.getFullYear()
+  const month = d.getMonth() + 1
+  const day = d.getDate()
+  const hour = d.getHours()
+  const minute = d.getMinutes()
+  const second = d.getSeconds()
+  const week = d.getDay()
+
+  const weekMap = ['日', '一', '二', '三', '四', '五', '六']
+
+  return fmt
+    .replace('yyyy', year)
+    .replace('MM', padZero(month))
+    .replace('M', month)
+    .replace('dd', padZero(day))
+    .replace('d', day)
+    .replace('HH', padZero(hour))
+    .replace('H', hour)
+    .replace('hh', padZero(hour % 12 || 12))
+    .replace('h', hour % 12 || 12)
+    .replace('mm', padZero(minute))
+    .replace('m', minute)
+    .replace('ss', padZero(second))
+    .replace('s', second)
+    .replace('w', weekMap[week])
+    .replace('W', '星期' + weekMap[week])
+}
+
+export const formatDateTime = function(date, format) {
+  return formatDate(date, format || 'yyyy-MM-dd HH:mm:ss')
+}
+
+export const formatTime = function(date, format) {
+  return formatDate(date, format || 'HH:mm:ss')
+}
+
+export const formatRelativeTime = function(date) {
+  if (!date) {
+    return ''
+  }
+
+  let d
+  if (date instanceof Date) {
+    d = date
+  } else if (typeof date === 'number') {
+    d = new Date(date.toString().length === 10 ? date * 1000 : date)
+  } else if (typeof date === 'string') {
+    date = date.trim()
+    if (/^\d+$/.test(date)) {
+      d = new Date(date.length === 10 ? parseInt(date) * 1000 : parseInt(date))
+    } else {
+      d = new Date(date.replace(/-/g, '/'))
+    }
+  } else {
+    return ''
+  }
+
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  const minute = 60 * 1000
+  const hour = 60 * minute
+  const day = 24 * hour
+  const week = 7 * day
+  const month = 30 * day
+  const year = 365 * day
+
+  if (diff < minute) {
+    return '刚刚'
+  } else if (diff < hour) {
+    return Math.floor(diff / minute) + '分钟前'
+  } else if (diff < day) {
+    return Math.floor(diff / hour) + '小时前'
+  } else if (diff < week) {
+    return Math.floor(diff / day) + '天前'
+  } else if (diff < month) {
+    return Math.floor(diff / week) + '周前'
+  } else if (diff < year) {
+    return Math.floor(diff / month) + '个月前'
+  } else {
+    return Math.floor(diff / year) + '年前'
+  }
+}
+
+// ==================== 金额格式化 ====================
+
+export const formatMoney = function(value, options) {
+  if (value === null || value === undefined || value === '') {
+    return ''
+  }
+
+  const num = typeof value === 'string' ? parseFloat(value) : value
+  if (isNaN(num)) {
+    return String(value)
+  }
+
+  const opts = Object.assign({
+    currency: 'CNY',
+    decimals: 2,
+    prefix: '',
+    suffix: '',
+    showSign: false
+  }, options || {})
+
+  const currencySymbols = {
+    CNY: '¥',
+    USD: '$',
+    EUR: '€',
+    JPY: '¥',
+    GBP: '£',
+    AUD: 'A$',
+    CAD: 'C$'
+  }
+
+  let symbol = currencySymbols[opts.currency] || ''
+  let formatted = num.toFixed(opts.decimals)
+
+  const parts = formatted.split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  formatted = parts.join('.')
+
+  if (opts.showSign && num > 0) {
+    formatted = '+' + formatted
+  }
+
+  if (opts.prefix) {
+    formatted = opts.prefix + formatted
+  }
+
+  if (opts.suffix) {
+    formatted = formatted + opts.suffix
+  }
+
+  return symbol + formatted
+}
+
+export const formatCNY = function(value, decimals) {
+  return formatMoney(value, {
+    currency: 'CNY',
+    decimals: decimals != null ? decimals : 2
+  })
+}
+
+export const formatUSD = function(value, decimals) {
+  return formatMoney(value, {
+    currency: 'USD',
+    decimals: decimals != null ? decimals : 2
+  })
+}
+
+// ==================== 文件大小格式化 ====================
+
+export const formatFileSize = function(bytes) {
+  if (bytes === null || bytes === undefined || bytes === '') {
+    return ''
+  }
+
+  const num = typeof bytes === 'string' ? parseFloat(bytes) : bytes
+  if (isNaN(num)) {
+    return String(bytes)
+  }
+
+  if (num === 0) {
+    return '0 B'
+  }
+
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(num) / Math.log(k))
+
+  return parseFloat((num / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
 export default {
     setTheme,
     setSize,
@@ -187,5 +453,16 @@ export default {
     getSize,
     getPrimaryColor,
     resetConfig,
-    onConfigChange
+    onConfigChange,
+    formatNumber,
+    formatThousand,
+    formatPercent,
+    formatDate,
+    formatDateTime,
+    formatTime,
+    formatRelativeTime,
+    formatMoney,
+    formatCNY,
+    formatUSD,
+    formatFileSize
 }

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

@@ -1,45 +0,0 @@
-<template>
-  <el-form-item label="日期类型">
-    <el-select v-model="params.SearchCondition" style="width:120px;">
-      <el-option label="建档日期" value="建档日期"></el-option>
-      <el-option label="更新日期" value="更新日期"></el-option>
-    </el-select>
-    <el-select v-model="params.SearchType" style="width:120px;">
-      <el-option v-for="item in searchList" :key="item.value" :label="item.name" :value="item.value"></el-option>
-    </el-select>
-    <el-date-picker v-model="params.SearchValue" :style="'width:'+txtInputWidth+'px;'" value-format="yyyy-MM-dd" placeholder=""></el-date-picker>
-  </el-form-item>
-</template>
-<script>
-export default {
-  name: "SearchDate",
-  props: {
-    searchList: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    params: {
-      type: Object,
-      default() {
-        return {
-          SearchType: "",
-          SearchCondition: "建档日期",
-          SearchValue: ""
-        };
-      }
-    },
-    /** 查询文本输入框宽度 */
-    txtInputWidth: {
-      type: Number,
-      default: 130
-    }
-  },
-  created() {
-    if (this.searchList.length > 0 && !this.params.SearchType) {
-      this.params.SearchType = this.searchList[0].value;
-    }
-  }
-};
-</script>

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

@@ -1,154 +0,0 @@
- 
- 
- <template>
-  <el-popover v-model="popoverVisible" trigger="click" :disabled="disabled" transition="el-zoom-in-top" :placement="placement" :width="popoverWidth" @hide="handleBlur">
-    <div class="quarter-wrapper">
-      <BaseFlexBox content="between">
-        <i class="el-icon-d-arrow-left" @click="prev"></i>
-        <span>{{ selectYear }}</span>
-        <i class="el-icon-d-arrow-right" @click="after"></i>
-      </BaseFlexBox>
-      <BaseFlexBox content="between" style="margin-top: 10px">
-        <el-button v-for="item in quarterList" :key="item.value" :disabled="getDisable(item)" :type="currentyear==selectYear&&item.value == currentQuarter ?'primary':''" size="mini" round @click="setCurrent(item)">{{ item.label }}</el-button>
-      </BaseFlexBox>
-    </div>
-    <el-input slot="reference" ref="reference" size="small" :value="quarterLabel" readonly :title="value" :placeholder="placeholder" prefix-icon="el-icon-date" clearable />
-  </el-popover>
-</template>
-
-<script>
-import BaseFlexBox from "../xt-flex-box/index.vue";
-import dateFns from "date-fns";
-export default {
-  name: "DateQuarter",
-  components: {
-    BaseFlexBox
-  },
-  model: {
-    props: "value",
-    event: "change"
-  },
-  props: {
-    value: {},
-    quarterType: { // value绑定值类型 1.quarter为时返回当前时间 2.quarter-start时返回季的开始时间 3. quarter-end时返回季的结束时间
-      type: String,
-      default: "quarter"
-    },
-    placement: {
-      type: String,
-      default: "bottom-start"
-    },
-    // valueFormat: {
-    //   type: String,
-    //   default: "yyyy-Qq"
-    // },
-    format: { // 同时支持字符串 "yyyy-Qq" 使用小写q进行格式化数据
-      type: String,
-      default: "yy-Qq"
-    },
-    popoverWidth: Number,
-    placeholder: {},
-    pickerOptions: {
-      type: Object,
-      default: () => {
-        return {
-          disabledDate: () => {
-            return false;
-          }
-        };
-      }
-    },
-    disabled: {}
-  },
-  data() {
-    const dateVal = this.getQuarterDate(this.value);
-    const currentyear = dateVal ? dateVal.getFullYear() : "";
-    const month = dateVal ? dateVal.getMonth() : "";
-    const selectYear = dateVal ? dateVal.getFullYear() : new Date().getFullYear();
-    return {
-      dateVal: dateVal,
-      currentyear: currentyear,
-      currentQuarter: dateFns.getQuarter(dateVal),
-      selectYear: selectYear,
-      currentMonth: month,
-      popoverVisible: false,
-      quarterList: [
-        { label: "Q1", value: 1 },
-        { label: "Q2", value: 2 },
-        { label: "Q3", value: 3 },
-        { label: "Q4", value: 4 }
-      ]
-    };
-  },
-  computed: {
-    diffQuarter() {
-      return (this.selectYear - this.currentyear) * 4 - this.currentQuarter;
-    },
-    quarterLabel: {
-      get() {
-        if (!this.currentyear || !this.currentQuarter) {
-          return "";
-        }
-        return this.getFormatVal();
-      }
-    }
-  },
-  methods: {
-    getQuarterDate(val) {
-      if (!val) return null;
-      if (this.quarterType == "quarter-start") {
-        return dateFns.startOfQuarter(val);
-      } else if (this.quarterType == "quarter-end") {
-        return dateFns.endOfQuarter(val);
-      } else {
-        const currentQuarter = dateFns.getQuarter(val);
-        return dateFns.setQuarter(this.value, currentQuarter);
-      }
-    },
-    getDisable(it) {
-    },
-    handleChangeVal(v) {
-    },
-    getFormatVal() {
-      if (!this.format) {
-        return `${this.currentyear}-Q${this.currentQuarter}`;
-      }
-      const formatMap = {
-        y: this.currentyear,
-        q: this.currentQuarter
-      };
-      const val = this.format.replace(/(y|q)+/g, (result, key) => {
-        const value = formatMap[key];
-        return value || "";
-      });
-      return val;
-    },
-    setCurrent(item) {
-      if (!this.dateVal) {
-        this.dateVal = new Date();
-      }
-      this.dateVal.setFullYear(this.selectYear);
-      this.dateVal = dateFns.setQuarter(this.dateVal, item.value);
-      this.$emit("change", this.dateVal);
-      this.currentQuarter = item.value;
-      this.currentyear = this.selectYear;
-      this.popoverVisible = false;
-    },
-    after() {
-      this.dateVal.setFullYear(this.dateVal.getFullYear() + 1);
-      this.selectYear = this.dateVal.getFullYear();
-    },
-    prev() {
-      this.dateVal.setFullYear(this.dateVal.getFullYear() - 1);
-      this.selectYear = this.dateVal.getFullYear();
-    },
-    handleBlur() {
-      this.$refs.reference.blur();
-    }
-  }
-};
-</script>
-
-<style>
-
-</style>