first commit all content

2025-08-27 17:54:46 +08:00
parent 4a5269cf34
commit 513d77f40f
317 changed files with 29786 additions and 0 deletions
@@ -0,0 +1,141 @@
+<template>
+    <div class="ultabs">
+        <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                range-separator="至"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                style="display: inline-block!important;width: 55%!important;"
+                @change="dateChange"/>
+        <ul style="display: inline-block">
+            <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
+            <li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
+            <li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+    import {onMounted} from "vue";
+    export default {
+      name: 'dateTimeSelect',
+      props: {},
+      data() {
+        return {
+          dateRange: [],
+          isActive: 'DAY'
+        }
+      },
+      // DOM 挂载完成后
+      mounted() {
+        // 可以访问 DOM 元素
+        setTimeout(() => {
+          this.getLastDays(6);
+        }, 500);
+      },
+      methods: {
+        toggle(val, num) {
+          this.isActive = val;
+          if (val && val !== 'MONTH') {
+            this.getLastDays(num - 1);
+          } else {
+            this.getDaysOfPreviousMonth();
+          }
+        },
+        dateChange() {
+          this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
+        },
+        // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
+        getLastDays(num) {
+          const dayList = [];
+          const today = new Date();
+
+          for (let i = num; i >= 0; i--) {
+            const d = new Date(today);
+            d.setDate(today.getDate() - i);
+
+            // 格式化日期为 YYYY-MM-DD
+            const year = d.getFullYear();
+            const month = String(d.getMonth() + 1).padStart(2, '0');
+            const day = String(d.getDate()).padStart(2, '0');
+
+            dayList.push(`${year}-${month}-${day}`);
+          }
+          this.$emit("dataChange", this.isActive, dayList);
+        },
+        getDaysOfPreviousMonth(star, end) {
+          const currentDate = new Date();
+          const currentYear = currentDate.getFullYear();
+          const currentMonth = currentDate.getMonth(); // 0-11 表示 1-12 月
+
+          // 计算前一个月的年份和月份
+          const prevMonth = currentMonth - 1;
+          const prevYear = prevMonth >= 0 ? currentYear : currentYear - 1;
+          const prevMonthActual = prevMonth >= 0 ? prevMonth : 11; // 11 表示 12 月
+
+          // 获取第一天和最后一天
+          const firstDay = star ? new Date(star) : new Date(prevYear, prevMonthActual, 1);
+          const lastDay = end ? new Date(end) : new Date(prevYear, prevMonthActual + 1, 0); // 下个月首日减 1 天
+
+          // 生成所有日期
+          const oneMonthDays = [];
+          let currentDay = firstDay;
+          while (currentDay <= lastDay) {
+            // 格式化为 YYYY-MM-DD
+            const formattedDate = currentDay.toISOString().split('T')[0];
+            oneMonthDays.push(formattedDate);
+            currentDay = new Date(currentDay); // 避免引用同一对象
+            currentDay.setDate(currentDay.getDate() + 1);
+          }
+          this.$emit("dataChange", this.isActive, oneMonthDays);
+        }
+      }
+    }
+</script>
+<style scoped>
+    .ultabs {
+        float: right;
+        position: relative;
+        z-index: 9;
+        margin-top: 30px;
+        margin-right: 2%;
+    }
+
+    .ultabs ul li {
+        user-select: none;
+        cursor: pointer;
+        list-style: none;
+        display: inline-block;
+        width: 70px;
+        text-align: center;
+        height: 38px;
+        line-height: 38px;
+    }
+    /*.ultabs ul li:nth-child样式做了更改*/
+    .ultabs ul li {
+        border-radius: 4px;
+        border: 1px solid #CCCCCC;
+        margin: 0 5px;
+    }
+    .activesbgs {
+        color: #FFF;
+        background: #5D78FF;
+        cursor: pointer;
+        list-style: none;
+        display: inline-block;
+        width: 70px;
+        text-align: center;
+        height: 40px !important;
+        line-height: 40px !important;
+        border: 1px solid #5D78FF;
+    }
+    ::v-deep .ultabs .el-range-editor--medium .el-range-input{
+      vertical-align: super!important;
+    }
+    ::v-deep .ultabs .el-range-editor--medium .el-range-separator{
+      vertical-align: super!important;
+    }
+</style>