wl-design-mobile 0.6.9 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
-# wl-design-mobile
-
-## Setup
-```
-npm i wl-design-mobile
-```
+# wl-design-mobile
+
+## Setup
+```
+npm i wl-design-mobile
+```

package/doc/img/styles/css/index.css

@@ -1,3 +1,3 @@
-.img-upload-container {
-    padding: 0px 14px 12px 14px;
-}
+.img-upload-container {
+    padding: 0px 14px 12px 14px;
+}

package/edit/list/styles/css/index.css

@@ -1,39 +1,39 @@
-.coll-div {
-    margin-bottom: 8px;
-}
-
-.indicator-title {
-    display: flex;
-    align-items: center;
-    color: var(--scl-blue);
-    font-size: 14px;
-    font-family: 微软雅黑, serif Regular;
-}
-
-.indicator-title .color-line {
-    width: 3px;
-    height: 14px;
-    margin-right: 8px;
-}
-
-.coll-title-icon {
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-
-/* 覆盖折叠面板的标题的padding */
-/deep/ .van-cell {
-    padding: 12px 10px;
-}
-
-/* 覆盖去掉折叠面板的标题下面的线 */
-/deep/ .van-cell::after {
-    border: none;
-}
-
-/* 覆盖折叠面板的内容的padding */
-/deep/ .van-collapse-item__content {
-    padding: 0px 0px 0px 0px;
-}
-
+.coll-div {
+    margin-bottom: 8px;
+}
+
+.indicator-title {
+    display: flex;
+    align-items: center;
+    color: var(--scl-blue);
+    font-size: 14px;
+    font-family: 微软雅黑, serif Regular;
+}
+
+.indicator-title .color-line {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.coll-title-icon {
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+/* 覆盖折叠面板的标题的padding */
+/deep/ .van-cell {
+    padding: 12px 10px;
+}
+
+/* 覆盖去掉折叠面板的标题下面的线 */
+/deep/ .van-cell::after {
+    border: none;
+}
+
+/* 覆盖折叠面板的内容的padding */
+/deep/ .van-collapse-item__content {
+    padding: 0px 0px 0px 0px;
+}
+

package/edit/select/lambo-edit-date.vue

@@ -52,11 +52,11 @@ export default {
     },
     minDate: {
       type: Date,
-      default: () => new Date((new Date()).getFullYear() - 3, (new Date()).getMonth(), (new Date()).getDate())
+      default: () => moment().subtract(3, 'years').toDate(),
     },
     maxDate: {
       type: Date,
-      default: () => new Date((new Date()).getFullYear() + 3, (new Date()).getMonth(), (new Date()).getDate())
+      default: () => moment().add(3, 'years').toDate(),
     },
     allowSameDay: {
       type: Boolean,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "description": "",
   "main": "index.js",
   "author": "finch",

package/search/lambo-week-select.vue

@@ -0,0 +1,326 @@
+<template>
+  <div
+      class="week-date-picker"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+      @mouseleave="handleMouseLeave"
+  >
+    <div class="week-days">
+      <div
+          v-for="day in weekDays"
+          :key="day.date.getTime()"
+          class="day-item"
+          :class="{
+          'today': day.isToday,
+          'active': day.isSelected,
+        }"
+          @click="selectDay(day)"
+      >
+        <div class="day-week">{{ day.weekDay }}</div>
+        <div class="day-month">{{ day.month }}月</div>
+        <div class="day-date">{{ day.date.getDate() }}</div>
+        <div v-if="day.isToday" class="today-dot"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+
+export default {
+  name: "LamboWeekSelect",
+
+  data() {
+    return {
+      selectedDate: new Date(),
+      weekStart: null,
+      startX: 0,
+      endX: 0,
+      isDragging: false,
+      swipeThreshold: 50,
+      clickDisabled: false
+    }
+  },
+  props: {
+    weekDate: {
+      type: String,
+      default: null
+    },
+  },
+
+  created() {
+    if (this.weekDate) {
+      this.initWithWeekDate(this.weekDate);
+    } else {
+      const today = new Date();
+      const todayStr = this.formatDateToYYYYMMDD(today);
+      this.initWithWeekDate(todayStr);
+    }
+  },
+
+  computed: {
+    weekDays() {
+      if (!this.weekStart) return [];
+      return Array.from({length: 7}, (_, i) => {
+        const date = new Date(this.weekStart);
+        date.setDate(this.weekStart.getDate() + i);
+        const today = new Date();
+        return {
+          date,
+          month: date.getMonth() + 1,
+          weekDay: WEEK_DAYS[date.getDay()],
+          isToday: this.isSameDay(date, today),
+          isSelected: this.isSameDay(date, this.selectedDate)
+        };
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 根据YYYYMMDD格式的字符串初始化组件
+     * @param {string} dateFormat- 格式如："20251205"
+     */
+    initWithWeekDate(dateFormat) {
+      // 解析YYYYMMDD格式字符串为Date对象
+      const date = this.parseYYYYMMDD(dateFormat);
+
+      if (date) {
+        console.log("根据传入日期初始化:", dateFormat);
+        this.setWeekStart(date);
+        this.selectedDate = new Date(date);
+      } else {
+        console.log("日期解析失败，使用今天");
+        const today = new Date();
+        this.setWeekStart(today);
+        this.selectedDate = new Date(today);
+      }
+    },
+
+    /**
+     * 解析YYYYMMDD格式字符串为Date对象
+     * @param {string} yyyymmdd - 格式如："20251205"
+     * @returns {Date|null} Date对象或null
+     */
+    parseYYYYMMDD(dateFormat) {
+      if (!dateFormat || typeof dateFormat !== 'string' || dateFormat.length !== 8) {
+        return null;
+      }
+
+      try {
+        const year = parseInt(dateFormat.substring(0, 4));
+        const month = parseInt(dateFormat.substring(4, 6)) - 1;
+        const day = parseInt(dateFormat.substring(6, 8));
+
+        const date = new Date(year, month, day);
+
+        // 验证日期是否有效
+        if (isNaN(date.getTime()) ||
+            date.getFullYear() !== year ||
+            date.getMonth() !== month ||
+            date.getDate() !== day) {
+          return null;
+        }
+
+        return date;
+      } catch (error) {
+        console.error("日期解析错误:", error);
+        return null;
+      }
+    },
+
+    setWeekStart(date) {
+      const d = new Date(date);
+      const day = d.getDay();
+      const diff = d.getDate() - (day === 0 ? 6 : day - 1);
+      d.setDate(diff);
+      d.setHours(0, 0, 0, 0);
+      this.weekStart = d;
+    },
+
+    isSameDay(d1, d2) {
+      if (!d1 || !d2) return false;
+      return d1.toDateString() === d2.toDateString();
+    },
+
+    formatDateToYYYYMMDD(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${year}${month}${day}`;
+    },
+
+    selectDay(day) {
+      if (this.clickDisabled) {
+        this.clickDisabled = false;
+        return;
+      }
+      this.selectedDate = new Date(day.date);
+      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate);
+      console.log('选中的日期:', clickDate);
+      // 触发自定义事件，传递YYYYMMDD格式的日期
+      this.$emit('click', clickDate);
+    },
+
+    goPrevWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() - 7);
+      this.setWeekStart(newWeekStart);
+    },
+
+    goNextWeek() {
+      const newWeekStart = new Date(this.weekStart);
+      newWeekStart.setDate(this.weekStart.getDate() + 7);
+      this.setWeekStart(newWeekStart);
+    },
+
+    handleTouchStart(e) {
+      this.startX = e.touches[0].clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    handleTouchMove(e) {
+      if (!this.isDragging) return;
+      this.endX = e.touches[0].clientX;
+    },
+
+    handleTouchEnd() {
+      if (!this.isDragging) return;
+
+      const deltaX = this.endX - this.startX;
+      this.handleSwipe(deltaX);
+
+      this.isDragging = false;
+    },
+
+    handleMouseDown(e) {
+      this.startX = e.clientX;
+      this.endX = this.startX;
+      this.isDragging = true;
+      this.clickDisabled = false;
+    },
+
+    handleMouseMove(e) {
+      if (!this.isDragging) return;
+      this.endX = e.clientX;
+    },
+
+    handleMouseUp() {
+      if (!this.isDragging) return;
+
+      const deltaX = this.endX - this.startX;
+      this.handleSwipe(deltaX);
+
+      this.isDragging = false;
+    },
+
+    handleMouseLeave() {
+      this.isDragging = false;
+    },
+
+    handleSwipe(deltaX) {
+      if (Math.abs(deltaX) > this.swipeThreshold) {
+        this.clickDisabled = true;
+        if (deltaX > 0) {
+          this.goPrevWeek();
+        } else {
+          this.goNextWeek();
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.week-date-picker {
+  width: 100%;
+  background: white;
+  padding: 16px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  user-select: none;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: grab;
+}
+
+.week-date-picker:active {
+  cursor: grabbing;
+}
+
+.week-days {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.day-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 64px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  flex-shrink: 0;
+}
+
+.day-item:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-2px);
+}
+
+.day-item.active {
+  background-color: #1677ff;
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.day-item.active .day-week,
+.day-item.active .day-month,
+.day-item.active .day-date {
+  color: white;
+}
+
+.day-week {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.day-month {
+  font-size: 10px;
+  color: #999;
+  margin-bottom: 2px;
+}
+
+.day-date {
+  font-size: 20px;
+  font-weight: 500;
+  color: #333;
+}
+
+.today-dot {
+  position: absolute;
+  bottom: -4px;
+  width: 4px;
+  height: 4px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.day-item.active .today-dot {
+  background-color: white;
+}
+</style>

package/table/lambo-ag-table.vue

@@ -38,15 +38,13 @@ import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-balham.css'
 /**
  * 打包时候把这一行放开，下面的一行注释掉
- * import {AgGridVue} from 'ag-grid-vue/lib/main.cjs.js'
+ *
  */
-
+import {AgGridVue} from 'ag-grid-vue/lib/main.cjs.js'
 /**
  * 本地运行的时候，把这一行放开，上面的一行注释掉
  * import {AgGridVue} from 'ag-grid-vue'
  */
-import {AgGridVue} from 'ag-grid-vue'
-
 import {Toast} from "vant"
 import {axios} from "../util/axios"
 

package/util/assist.js

@@ -1,43 +1,43 @@
-// 深拷贝
-export function deepCopy(data) {
-  let i;
-  const t = typeOf(data);
-  let o;
-
-  if (t === 'array') {
-    o = [];
-  } else if (t === 'object') {
-    o = {};
-  } else {
-    return data;
-  }
-
-  if (t === 'array') {
-    for (i = 0; i < data.length; i++) {
-      o.push(deepCopy(data[i]));
-    }
-  } else if (t === 'object') {
-    for (i in data) {
-      o[i] = deepCopy(data[i]);
-    }
-  }
-  return o;
-}
-
-// 判断对象类型
-export function typeOf(obj) {
-  const toString = Object.prototype.toString;
-  const map = {
-    '[object Boolean]': 'boolean',
-    '[object Number]': 'number',
-    '[object String]': 'string',
-    '[object Function]': 'function',
-    '[object Array]': 'array',
-    '[object Date]': 'date',
-    '[object RegExp]': 'regExp',
-    '[object Undefined]': 'undefined',
-    '[object Null]': 'null',
-    '[object Object]': 'object'
-  };
-  return map[toString.call(obj)];
-}
+// 深拷贝
+export function deepCopy(data) {
+  let i;
+  const t = typeOf(data);
+  let o;
+
+  if (t === 'array') {
+    o = [];
+  } else if (t === 'object') {
+    o = {};
+  } else {
+    return data;
+  }
+
+  if (t === 'array') {
+    for (i = 0; i < data.length; i++) {
+      o.push(deepCopy(data[i]));
+    }
+  } else if (t === 'object') {
+    for (i in data) {
+      o[i] = deepCopy(data[i]);
+    }
+  }
+  return o;
+}
+
+// 判断对象类型
+export function typeOf(obj) {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object'
+  };
+  return map[toString.call(obj)];
+}

package/util/bus.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
-
-const Bus = new Vue();
-export default Bus;
+import Vue from 'vue'
+
+const Bus = new Vue();
+export default Bus;