leisure-core 0.5.69 → 0.5.70

package/index.js

@@ -44,6 +44,8 @@ import LeUrl from "./le-url/index.js";
 import LeSpan from "./le-span/index.js";
 import LeInputAdvanced from "./le-input-advanced/index.js";
 import LeButtonAudit from "./le-button-audit/index.js";
+import LeInputValidate from "./le-input-validate/index.js";
+import LeDatePickerAuto from "./le-date-picker-auto/index.js";
 
 const components = [
   LeArea,
@@ -86,6 +88,8 @@ const components = [
   LeUrl,
   LeInputAdvanced,
   LeButtonAudit,
+  LeInputValidate,
+  LeDatePickerAuto,
 ];
 
 const install = function (Vue) {
@@ -197,4 +201,6 @@ export default {
   LeInputAdvanced,
   LeButtonAudit,
   leMixins,
+  LeInputValidate,
+  LeDatePickerAuto,
 };

package/le-date-picker-auto/index.js

@@ -0,0 +1,6 @@
+import LeDatePickerAuto from "./src/main.vue";
+
+LeDatePickerAuto.install = function (Vue) {
+  Vue.component(LeDatePickerAuto.name, LeDatePickerAuto);
+};
+export default LeDatePickerAuto;

package/le-date-picker-auto/src/main.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-date-picker
+    v-model="internalValue"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :class="['customClass', $attrs.class]"
+    :style="$attrs.style"
+    :type="type"
+  ></el-date-picker>
+</template>
+
+<script>
+export default {
+  name: "le-date-picker-auto",
+  props: {
+    value: {
+      type: [Number, Date, String],
+      default: null,
+    },
+    type: {
+      type: String,
+      default: "date",
+    },
+  },
+  data() {
+    return {
+      internalValue: this.convertValueToInternal(this.value),
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.internalValue = this.convertValueToInternal(newVal);
+    },
+    internalValue(newVal) {
+      const outputValue = this.convertValueToOutput(newVal);
+      this.$emit("input", outputValue);
+    },
+  },
+  methods: {
+    isTimestampInSeconds(value) {
+      if (typeof value !== "number") return false;
+
+      // 秒级时间戳通常是10位数字（当前时间戳约16-17亿）
+      // 但为了更准确，我们检查时间戳是否在合理范围内
+      const currentSeconds = Math.floor(Date.now() / 1000);
+      const minReasonable = 0; // 1970-01-01
+      const maxReasonable = currentSeconds + 100 * 365 * 24 * 60 * 60; // 当前时间 + 100年
+
+      return value >= minReasonable && value <= maxReasonable;
+    },
+
+    isTimestampInMilliseconds(value) {
+      if (typeof value !== "number") return false;
+
+      // 毫秒级时间戳通常是13位数字
+      // 检查是否在合理的时间范围内
+      const currentMs = Date.now();
+      const minReasonable = 0; // 1970-01-01
+      const maxReasonable = currentMs + 100 * 365 * 24 * 60 * 60 * 1000; // 当前时间 + 100年
+
+      return value >= minReasonable && value <= maxReasonable;
+    },
+
+    convertValueToInternal(value) {
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+
+      // 如果是数字时间戳
+      if (typeof value === "number") {
+        if (this.isTimestampInSeconds(value)) {
+          // 确认是秒级时间戳，转换为毫秒
+          return new Date(value * 1000);
+        } else if (this.isTimestampInMilliseconds(value)) {
+          // 如果是毫秒级时间戳，也转换为秒再处理，确保一致性
+          const seconds = Math.floor(value / 1000);
+          return new Date(seconds * 1000);
+        } else {
+          // 无法识别的数字，尝试直接作为毫秒处理
+          console.warn("无法识别的时间戳格式，将尝试作为毫秒处理:", value);
+          return new Date(value);
+        }
+      }
+      // 如果是 Date 对象
+      else if (value instanceof Date) {
+        return value;
+      }
+      // 如果是字符串日期
+      else if (typeof value === "string") {
+        const parsedDate = new Date(value);
+        return isNaN(parsedDate.getTime()) ? null : parsedDate;
+      }
+      // 其他情况返回 null
+      else {
+        console.warn("无法处理的值类型:", typeof value, value);
+        return null;
+      }
+    },
+
+    convertValueToOutput(value) {
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+
+      // 如果是 Date 对象，转换为时间戳（秒）
+      if (value instanceof Date) {
+        return Math.floor(value.getTime() / 1000);
+      }
+      // 如果是数字，根据位数判断是否需要转换
+      else if (typeof value === "number") {
+        if (this.isTimestampInSeconds(value)) {
+          return value; // 已经是秒，直接返回
+        } else if (this.isTimestampInMilliseconds(value)) {
+          return Math.floor(value / 1000); // 毫秒转秒
+        } else {
+          console.warn("无法识别的时间戳格式，将尝试作为秒处理:", value);
+          return value;
+        }
+      }
+      // 其他情况返回 null
+      else {
+        console.warn("无法输出的值类型:", typeof value, value);
+        return null;
+      }
+    },
+  },
+  mounted() {
+    // 如果需要在组件挂载后执行某些操作，可以在这里添加代码。
+  },
+};
+</script>

package/le-input-validate/index.js

@@ -0,0 +1,6 @@
+import LeInputValidate from "./src/main.vue";
+
+LeInputValidate.install = function (Vue) {
+  Vue.component(LeInputValidate.name, LeInputValidate);
+};
+export default LeInputValidate;

package/le-input-validate/src/main.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="le-input-wrapper">
+    <el-input
+      ref="inputRef"
+      v-bind="mergedAttrs"
+      :class="['le-input', $attrs.class, { 'is-error': hasError }]"
+      :style="$attrs.style"
+      clearable
+      @input="handleInput"
+      @blur="handleBlur"
+      @clear="handleClear"
+    >
+      <template v-if="showCount" #suffix>
+        <span class="input-count" :class="{ 'is-error': isOverMaxLength }">
+          {{ valueLength }}/{{ computedMaxlength }}
+        </span>
+      </template>
+    </el-input>
+
+    <div v-if="hasError && errorMessage" class="error-message">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "le-input-validate",
+  inheritAttrs: false,
+
+  props: {
+    // 数值类型
+    number: {
+      type: Boolean,
+      default: false,
+    },
+    // 手机号类型
+    mobile: {
+      type: Boolean,
+      default: false,
+    },
+    // 邮箱类型
+    email: {
+      type: Boolean,
+      default: false,
+    },
+    // 最大长度
+    maxlength: {
+      type: [Number, String],
+      default: null,
+    },
+    // 是否显示字数统计
+    showCount: {
+      type: Boolean,
+      default: false,
+    },
+    // 自定义验证函数
+    validator: {
+      type: Function,
+      default: null,
+    },
+    // 值
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      hasError: false,
+      errorMessage: "",
+      internalValue: this.value,
+      isTouched: false,
+    };
+  },
+
+  computed: {
+    mergedAttrs() {
+      const attrs = { ...this.$attrs };
+
+      // 移除已单独处理的属性
+      delete attrs.class;
+      delete attrs.style;
+
+      // 移除props中定义的属性，避免重复
+      delete attrs.number;
+      delete attrs.mobile;
+      delete attrs.email;
+      delete attrs.maxlength;
+      delete attrs.showCount;
+      delete attrs.validator;
+      delete attrs.value;
+
+      // 合并值，确保我们的 value 逻辑优先
+      return {
+        ...attrs,
+        value: this.displayValue,
+        maxlength: this.computedMaxlength,
+      };
+    },
+
+    computedMaxlength() {
+      if (this.maxlength) {
+        return Number(this.maxlength);
+      }
+      // 手机号默认11位
+      if (this.mobile) {
+        return 11;
+      }
+      return null;
+    },
+
+    valueLength() {
+      return String(this.internalValue || "").length;
+    },
+
+    isOverMaxLength() {
+      return (
+        this.computedMaxlength && this.valueLength > this.computedMaxlength
+      );
+    },
+
+    displayValue() {
+      return this.internalValue;
+    },
+  },
+
+  watch: {
+    value(newVal) {
+      this.internalValue = newVal;
+    },
+
+    internalValue(newVal) {
+      this.validateInput(newVal);
+      // 触发外部监听的事件
+      this.$listeners.change && this.$listeners.change(newVal);
+    },
+  },
+
+  methods: {
+    handleInput(value) {
+      let processedValue = value;
+
+      // 数值类型处理
+      if (this.number) {
+        processedValue = this.formatNumber(value);
+      }
+
+      // 手机号类型处理
+      if (this.mobile) {
+        processedValue = this.formatMobile(value);
+      }
+
+      // 长度限制
+      if (
+        this.computedMaxlength &&
+        processedValue.length > this.computedMaxlength
+      ) {
+        processedValue = processedValue.slice(0, this.computedMaxlength);
+      }
+
+      this.internalValue = processedValue;
+      this.$emit("input", processedValue);
+
+      // 触发外部监听的事件
+      this.$listeners.input && this.$listeners.input(processedValue);
+    },
+
+    handleBlur(event) {
+      this.isTouched = true;
+      this.validateInput(this.internalValue, true);
+      this.$emit("blur", event);
+
+      // 触发外部监听的事件
+      this.$listeners.blur && this.$listeners.blur(event);
+    },
+
+    handleClear() {
+      this.hasError = false;
+      this.errorMessage = "";
+      this.$emit("clear");
+
+      // 触发外部监听的事件
+      this.$listeners.clear && this.$listeners.clear();
+    },
+
+    formatNumber(value) {
+      // 只允许数字、小数点、负号
+      return value.replace(/[^\d.-]/g, "").replace(/(\..*)\./g, "$1");
+    },
+
+    formatMobile(value) {
+      // 只允许数字
+      return value.replace(/\D/g, "");
+    },
+
+    validateInput(value, showError = false) {
+      if (!this.isTouched && !showError) return true;
+
+      let isValid = true;
+      let message = "";
+
+      const strValue = String(value || "");
+
+      // 数值验证
+      if (this.number && strValue) {
+        if (!/^-?\d*\.?\d*$/.test(strValue)) {
+          isValid = false;
+          message = "请输入有效的数值";
+        }
+      }
+
+      // 手机号验证
+      if (this.mobile && strValue) {
+        if (!/^1[3-9]\d{9}$/.test(strValue)) {
+          isValid = false;
+          message = "请输入有效的手机号码";
+        }
+      }
+
+      // 邮箱验证
+      if (this.email && strValue) {
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
+          isValid = false;
+          message = "请输入有效的邮箱地址";
+        }
+      }
+
+      // 最大长度验证
+      if (this.computedMaxlength && strValue.length > this.computedMaxlength) {
+        isValid = false;
+        message = `输入内容不能超过${this.computedMaxlength}个字符`;
+      }
+
+      // 自定义验证
+      if (this.validator && typeof this.validator === "function") {
+        const customResult = this.validator(value);
+        if (customResult !== true) {
+          isValid = false;
+          message = customResult || "输入内容不符合要求";
+        }
+      }
+
+      this.hasError = !isValid && (this.isTouched || showError);
+      this.errorMessage = message;
+
+      return isValid;
+    },
+
+    // 公开方法：手动验证
+    validate() {
+      this.isTouched = true;
+      return this.validateInput(this.internalValue, true);
+    },
+
+    // 公开方法：清除验证状态
+    clearValidate() {
+      this.hasError = false;
+      this.errorMessage = "";
+      this.isTouched = false;
+    },
+
+    // 公开方法：聚焦输入框
+    focus() {
+      this.$refs.inputRef?.focus();
+    },
+
+    // 公开方法：失焦输入框
+    blur() {
+      this.$refs.inputRef?.blur();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.le-input-wrapper {
+  position: relative;
+}
+
+.le-input.is-error ::v-deep .el-input__inner {
+  border-color: #f56c6c;
+}
+
+.input-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.input-count.is-error {
+  color: #f56c6c;
+}
+
+.error-message {
+  color: #f56c6c;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+}
+</style>

package/le-list-form/src/main.vue

@@ -173,6 +173,10 @@ export default {
           component: "le-input",
           props: { placeholder: "请输入" },
         },
+        inputValidate: {
+          component: "le-input-validate",
+          props: { placeholder: "请输入" },
+        },
         number: {
           component: "le-input-number",
           props: {},
@@ -190,6 +194,13 @@ export default {
             translateDate: true,
           },
         },
+        dateAuto: {
+          component: "le-date-picker",
+          props: {
+            format: "yyyy-MM-dd",
+            "value-format": "timestamp",
+          },
+        },
         select: { component: "le-select", props: {} },
         smulti: { component: "le-select-multi", props: {} },
         image: { component: "le-image-container", props: {} },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.5.69",
+  "version": "0.5.70",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",

package/le-date-picker/src/main-back.vue

@@ -1,119 +0,0 @@
-<template>
-  <el-date-picker
-    v-model="internalValue"
-    v-bind="$attrs"
-    v-on="listeners"
-    :class="['customClass', $attrs.class]"
-    :style="$attrs.style"
-    :type="type"
-  ></el-date-picker>
-</template>
-
-<script>
-export default {
-  name: "le-date-picker-back",
-  props: {
-    value: {
-      type: [Number, Date, String, Array], // 添加Array类型支持日期范围
-      default: null,
-    },
-    type: {
-      type: String,
-      default: "date",
-    },
-    translateDate: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      internalValue: null,
-    };
-  },
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.handleInput,
-        change: this.handleChange,
-      };
-    },
-  },
-  watch: {
-    value: {
-      handler(newVal) {
-        this.internalValue = this.convertValueToInternal(newVal);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  methods: {
-    convertValueToInternal(value) {
-      if (value === null || value === undefined || value === "") {
-        return null;
-      }
-
-      // 处理日期范围数组
-      if (Array.isArray(value)) {
-        return value.map((item) => this.convertSingleValueToInternal(item));
-      }
-
-      return this.convertSingleValueToInternal(value);
-    },
-
-    convertSingleValueToInternal(value) {
-      if (this.translateDate && typeof value === "number") {
-        // 假设是秒级时间戳
-        return new Date(value * 1000);
-      } else if (value instanceof Date) {
-        return value;
-      } else if (typeof value === "string" && !isNaN(Date.parse(value))) {
-        return new Date(value);
-      } else if (typeof value === "number") {
-        // 如果不是translateDate模式，但传入了数字，假设是毫秒级时间戳
-        return new Date(value);
-      } else {
-        return null;
-      }
-    },
-
-    convertValueToOutput(value) {
-      if (value === null || value === undefined) {
-        return null;
-      }
-
-      // 处理日期范围数组
-      if (Array.isArray(value)) {
-        return value.map((item) => this.convertSingleValueToOutput(item));
-      }
-
-      return this.convertSingleValueToOutput(value);
-    },
-
-    convertSingleValueToOutput(value) {
-      if (this.translateDate && value instanceof Date) {
-        // 输出秒级时间戳
-        return Math.floor(value.getTime() / 1000);
-      } else {
-        return value;
-      }
-    },
-
-    handleInput(value) {
-      const outputValue = this.convertValueToOutput(value);
-      this.$emit("input", outputValue);
-    },
-
-    handleChange(value) {
-      const outputValue = this.convertValueToOutput(value);
-      this.$emit("change", outputValue);
-    },
-  },
-  mounted() {
-    // 初始化internalValue
-    this.internalValue = this.convertValueToInternal(this.value);
-  },
-};
-</script>