From 79f3f330de81caa6d76ff413c6c3a2872a36e6d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 9 Jun 2022 15:22:31 +0800
Subject: [PATCH 1/3] =?UTF-8?q?perf:=20=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/extra/ElInput.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/extra/ElInput.vue b/src/components/extra/ElInput.vue
index 6851a69..7435014 100644
--- a/src/components/extra/ElInput.vue
+++ b/src/components/extra/ElInput.vue
@@ -13,6 +13,10 @@
             type: Boolean,
             default: true,
         },
+        maxlength: {
+            type: [Number, String],
+            default: 255,
+        },
         placeholder: {
             type: String,
             default: '请输入',
@@ -44,6 +48,7 @@
     });
     const attrs = useAttrs();
     const slots = useSlots();
-    const render = () => <ElInput {...props} {...attrs} v-slots={slots}></ElInput>;
+    const showWordLimit = props.showWordLimit === true && props.maxlength !== 255;
+    const render = () => <ElInput {...{ ...props, showWordLimit }} {...attrs} v-slots={slots}></ElInput>;
 </script>
 <style lang="less" scoped></style>

From 998d04a9357e13cced626ff938444952e2d0ddff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 9 Jun 2022 15:26:01 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E8=BE=93=E5=85=A5=E6=A1=86=E9=95=BF?=
 =?UTF-8?q?=E5=BA=A6=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/store/index.vue  | 4 ++--
 src/views/im/system/index.vue | 6 +++---
 src/views/im/waiter/index.vue | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/im/store/index.vue b/src/views/im/store/index.vue
index 28d6238..508f7ce 100644
--- a/src/views/im/store/index.vue
+++ b/src/views/im/store/index.vue
@@ -25,7 +25,7 @@
                 </el-form>
             </template>
         </table-list>
-        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'">
+        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'" width="480px">
             <el-form
                 ref="refsForm"
                 v-loading="formState.submitting"
@@ -45,7 +45,7 @@
                     <el-upload-image v-model="formState.form.avatar" config-id="im/" />
                 </el-form-item>
                 <el-form-item label="店铺名称" prop="name">
-                    <el-input v-model="formState.form.name" />
+                    <el-input v-model="formState.form.name" maxlength="20" />
                 </el-form-item>
             </el-form>
             <template #footer>
diff --git a/src/views/im/system/index.vue b/src/views/im/system/index.vue
index 9299b26..1a788c7 100644
--- a/src/views/im/system/index.vue
+++ b/src/views/im/system/index.vue
@@ -13,7 +13,7 @@
             @remove="handleRemove"
             @search="handleSearch"
         />
-        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '系统'">
+        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '系统'" width="480px">
             <el-form
                 ref="refsForm"
                 v-loading="formState.submitting"
@@ -23,10 +23,10 @@
                 :rules="formState.rules"
             >
                 <el-form-item label="系统标识" prop="client">
-                    <el-input v-model="formState.form.client" />
+                    <el-input v-model="formState.form.client" maxlength="20" />
                 </el-form-item>
                 <el-form-item label="系统名称" prop="name">
-                    <el-input v-model="formState.form.name" />
+                    <el-input v-model="formState.form.name" maxlength="20" />
                 </el-form-item>
             </el-form>
             <template #footer>
diff --git a/src/views/im/waiter/index.vue b/src/views/im/waiter/index.vue
index 67087e8..09cbf92 100644
--- a/src/views/im/waiter/index.vue
+++ b/src/views/im/waiter/index.vue
@@ -31,7 +31,7 @@
                 </el-form>
             </template>
         </table-list>
-        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'">
+        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'" width="480px">
             <el-form
                 ref="refsForm"
                 v-loading="formState.submitting"
@@ -48,16 +48,16 @@
                     />
                 </el-form-item>
                 <el-form-item label="客服类型" prop="type">
-                    <el-input v-model="formState.form.type" />
+                    <el-input v-model="formState.form.type" maxlength="20" />
                 </el-form-item>
                 <el-form-item label="客服头像" prop="waiterAvatar">
                     <el-upload-image v-model="formState.form.waiterAvatar" config-id="im/" />
                 </el-form-item>
                 <el-form-item label="客服ID" prop="waiterId">
-                    <el-input v-model="formState.form.waiterId" :disabled="!!formState.form.id" />
+                    <el-input v-model="formState.form.waiterId" :disabled="!!formState.form.id" maxlength="20" />
                 </el-form-item>
                 <el-form-item label="客服昵称" prop="waiterNickname">
-                    <el-input v-model="formState.form.waiterNickname" />
+                    <el-input v-model="formState.form.waiterNickname" maxlength="20" />
                 </el-form-item>
             </el-form>
             <template #footer>

From 14cc7175380476170accda0cdaf5ff7df5565796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 9 Jun 2022 15:37:18 +0800
Subject: [PATCH 3/3] fix: BUG

---
 src/views/im/home/dateRange.vue | 91 +++++++++++++++++++++++++++++++++
 src/views/im/home/index.vue     | 20 ++------
 src/views/im/system/index.vue   | 16 ++++--
 3 files changed, 107 insertions(+), 20 deletions(-)
 create mode 100644 src/views/im/home/dateRange.vue

diff --git a/src/views/im/home/dateRange.vue b/src/views/im/home/dateRange.vue
new file mode 100644
index 0000000..886f2c1
--- /dev/null
+++ b/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>
diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue
index e310781..007a3a6 100644
--- a/src/views/im/home/index.vue
+++ b/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;
             }
diff --git a/src/views/im/system/index.vue b/src/views/im/system/index.vue
index 1a788c7..3f1f30e 100644
--- a/src/views/im/system/index.vue
+++ b/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 () => {