修改 时间组件

src/components/form/datePicker/index.vue

@@ -1,19 +1,41 @@
 <template>
+    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
+        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
     <el-date-picker
-        v-bind='$attrs'
-        type='daterange'
+        v-model="timeValue"
+        type="daterange"
+        :disabled="disabledPicker"
+        style="width: 230px; margin-right: 10px"
         unlink-panels
-        range-separator='至'
-        start-placeholder='开始日期'
-        end-placeholder='结束日期'
-        value-format='YYYY-MM-DD'
-        :shortcuts='shortcuts'
+        :clearable="false"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="YYYY-MM-DD"
+        :shortcuts="shortcuts"
     />
+    <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
+    <el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
+    <el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
 </template>
 
-<script lang='ts' setup>
-import { ref } from 'vue'
+<script lang="ts" setup>
+import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
 
+const interval = ref(3)
+const disabledPicker = ref(true)
+const timeValue = ref()
+const backDisabled = ref(false)
+const preDisabled = ref(false)
+const timeOptions = [
+    { label: '年份', value: 1 },
+    { label: '季度', value: 2 },
+    { label: '月份', value: 3 },
+    { label: '周', value: 4 },
+    { label: '自定义', value: 5 }
+]
 const shortcuts = [
     {
         text: '最近一周',
@@ -43,6 +65,66 @@ const shortcuts = [
         }
     }
 ]
+onMounted(() => {
+    timeChange(3)
+})
+// 选择时间范围
+const timeChange = (e: number) => {
+    if (e == 1) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(1), setTime()]
+    } else if (e == 2) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(2), setTime()]
+    } else if (e == 3) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(3), setTime()]
+    } else if (e == 4) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(0, 7), setTime()]
+    } else if (e == 5) {
+        disabledPicker.value = false
+    }
+}
+// 上一个
+const preClick = () => {}
+// 当前
+const nowTime = () => {}
+//下一个
+const next = () => {}
+
+const setTime = (flag = 0, e = 0) => {
+    let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
+    let data = ''
+    if (dd < 4) {
+        data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
+    } else {
+        data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
+    }
+    console.log('🚀 ~ file: index.vue:98 ~ setTime ~ data:', dd < 4, data)
+
+    if (flag == 1) {
+        data = data.slice(0, 5) + '01-01'
+    } else if (flag == 2) {
+        let quarter = data.slice(5, 7) - 0
+        if (0 < quarter && quarter <= 3) {
+            data = data.slice(0, 5) + '01-01'
+        } else if (3 < quarter && quarter <= 6) {
+            data = data.slice(0, 5) + '04-01'
+        } else if (6 < quarter && quarter <= 9) {
+            data = data.slice(0, 5) + '07-01'
+        } else {
+            data = data.slice(0, 5) + '10-01'
+        }
+    }
+    if (flag == 3) {
+        data = data.slice(0, 8) + '01'
+    }
+
+    return data
+}
+
+defineExpose({ timeValue })
 </script>
 
 <style scoped>
@@ -70,4 +152,4 @@ const shortcuts = [
     font-size: 14px;
     margin-bottom: 20px;
 }
-</style>
+</style>