fix: BUG

src/views/im/home/dateRange.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="date-range">
+        <el-button
+            v-for="(item, index) in opts"
+            :key="index"
+            :class="{ active: active === item.value }"
+            type="text"
+            @click="handleRange(item.value)"
+        >
+            {{ item.label }}
+        </el-button>
+        <el-date-picker
+            v-model="value"
+            :clearable="false"
+            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+            type="datetimerange"
+            value-format="x"
+        />
+    </div>
+</template>
+
+<script setup>
+    import dayjs from 'dayjs';
+    const opts = ref([
+        {
+            label: '本周',
+            value: 'week',
+        },
+        {
+            label: '本月',
+            value: 'month',
+        },
+    ]);
+    const active = ref('week');
+    const value = ref([]);
+    const emits = defineEmits(['update:modelValue']);
+    watch(value, (value) => {
+        emits('update:modelValue', value);
+        if (unref(click)) {
+            click.value = false;
+        } else {
+            active.value = null;
+        }
+    });
+    const click = ref(false);
+    const handleRange = (range) => {
+        click.value = true;
+        active.value = range;
+        let weekStart = new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24);
+        switch (range) {
+            case 'week':
+                value.value = [
+                    new Date(dayjs(weekStart).format('YYYY-MM-DD 00:00:00')).getTime(),
+                    new Date(
+                        dayjs(new Date(weekStart.getTime() + 6 * 1000 * 60 * 60 * 24)).format('YYYY-MM-DD 23:59:59')
+                    ).getTime(),
+                ];
+                break;
+            case 'month':
+                value.value = [
+                    new Date(
+                        dayjs(new Date(new Date().getTime() - (new Date().getDate() - 1) * 1000 * 60 * 60 * 24)).format(
+                            'YYYY-MM-DD 00:00:00'
+                        )
+                    ).getTime(),
+                    new Date(dayjs(new Date()).format('YYYY-MM-DD 23:59:59')).getTime(),
+                ];
+                break;
+        }
+    };
+    handleRange('week');
+</script>
+
+<style lang="less" scoped>
+    .date-range {
+        display: flex;
+        align-items: center;
+        .el-button {
+            color: #666;
+            &.active {
+                color: #4481ff;
+            }
+            & + .el-button {
+                margin-left: 44px;
+            }
+        }
+        :deep(.el-date-editor) {
+            margin-left: 44px;
+        }
+    }
+</style>

src/views/im/home/index.vue

@@ -24,12 +24,7 @@
             <template #header>
                 <div class="flex">
                     <p>历史消息量</p>
-                    <el-date-picker
-                        v-model="date2"
-                        :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
-                        type="datetimerange"
-                        value-format="x"
-                    />
+                    <date-range v-model="date2" />
                 </div>
             </template>
             <div class="chart chart-2"></div>
@@ -40,6 +35,7 @@
 <script setup>
     import dayjs from 'dayjs';
     import * as echarts from 'echarts';
+    import DateRange from './dateRange.vue';
     const store = useStore();
     const loading = ref(false);
     const opts = computed(() => store.state.chatStore.opts);
@@ -155,12 +151,7 @@
         }
     );
 
-    const date2 = ref([
-        new Date(
-            dayjs(new Date(Date.now() - ((new Date().getDay() || 7) - 1) * 86400000)).format('YYYY-MM-DD') + ' 00:00:00'
-        ).getTime(),
-        new Date(dayjs(new Date()).format('YYYY-MM-DD') + ' 23:59:59').getTime(),
-    ]);
+    const date2 = ref([]);
     const handleLoadRange = async () => {
         loading.value = true;
         store.commit('chatHome/setRange', []);
@@ -175,9 +166,7 @@
         }
         loading.value = false;
     };
-    watch(date2, handleLoadRange, {
-        immediate: true,
-    });
+    watch(date2, handleLoadRange);
     watch(systemId, handleLoadRange);
     watch(
         () => store.state.chatHome.range,
@@ -207,6 +196,7 @@
         .flex {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             p {
                 margin-right: 20px;
             }

src/views/im/system/index.vue

@@ -12,7 +12,15 @@
             @create="handleCreate()"
             @remove="handleRemove"
             @search="handleSearch"
-        />
+        >
+            <template #search>
+                <el-form inline>
+                    <el-form-item label="系统名称" prop="name">
+                        <el-input v-model="state.condition.name" />
+                    </el-form-item>
+                </el-form>
+            </template>
+        </table-list>
         <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '系统'" width="480px">
             <el-form
                 ref="refsForm"
@@ -54,8 +62,7 @@
     }
     const state = reactive({
         condition: {
-            title: null,
-            dateRange: [],
+            name: null,
         },
     });
     watch(
@@ -67,8 +74,7 @@
     );
     const handleReset = () => {
         state.condition = {
-            title: null,
-            dateRange: [],
+            name: null,
         };
     };
     const handleSearch = async () => {