From c3099e1d8a00dff8d0dea91b0384e1d3105e4f71 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 26 Apr 2022 13:39:24 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=20=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=8C=BA=E9=97=B4=E9=80=89=E6=8B=A9=E6=98=BE=E7=A4=BA=E5=8D=95?=
 =?UTF-8?q?=E6=97=A5=E5=8E=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/timePicker.scss     |  6 +++
 .../myDatePicker/src/panel/date-range.vue     | 43 +++++++++++++++++--
 .../common/myDatePicker/src/picker.vue        |  8 ++++
 .../src/components/common/timePicker.vue      |  1 +
 4 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index 6b42f61ce..f4e51bb53 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -308,3 +308,9 @@
     }
   }
 }
+.el-date-range-picker.el-picker-panel__body__only {
+  width: 324px;
+}
+.el-date-range-picker__content.el-date-range-picker__content__only{
+  width: 100%;
+}
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
index a557e15a7..facc15492 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
@@ -5,7 +5,8 @@
       class="el-picker-panel el-date-range-picker el-popper time-picker-popover__select-top"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
-        'has-time': showTime
+        'has-time': showTime,
+        'el-picker-panel__body__only': isOnly
       }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
         <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
@@ -17,7 +18,7 @@
             :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
-        <div class="el-picker-panel__body">
+        <div class="el-picker-panel__body" style="min-width: auto">
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">
@@ -84,7 +85,9 @@
               </span>
             </span>
           </div>
-          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+          <div class="el-picker-panel__content el-date-range-picker__content is-left" :class="{
+             'el-date-range-picker__content__only': isOnly
+          }">
             <div class="el-date-range-picker__header">
               <button
                 type="button"
@@ -108,7 +111,32 @@
                 :disabled="!enableMonthArrow"
                 :class="{ 'is-disabled': !enableMonthArrow }"
                 class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+              <button
+                type="button"
+                @click="rightPrevYear"
+                v-if="unlinkPanels&&isOnly"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightPrevMonth"
+                v-if="unlinkPanels&&isOnly"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                type="button"
+                v-if="isOnly"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                type="button"
+                v-if="isOnly"
+                @click="rightNextMonth"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ leftLabel }}</div>
+<!--              <div>{{ rightLabel }}</div>-->
             </div>
             <date-table
               :timezone="timezone"
@@ -125,7 +153,7 @@
               @pick="handleRangePick">
             </date-table>
           </div>
-          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+          <div class="el-picker-panel__content el-date-range-picker__content is-right" v-if="!isOnly">
             <div class="el-date-range-picker__header">
               <button
                 type="button"
@@ -321,6 +349,7 @@ export default {
     return {
       popperClass: '',
       value: [],
+      isOnly: false,
       defaultValue: null,
       defaultTime: null,
       minDate: '',
@@ -440,6 +469,12 @@ export default {
           ? right
           : nextMonth(this.leftDate)
       }
+    },
+    isOnly: {
+      immediate: true,
+      handler (n) {
+        console.log(n,'isOnly')
+      }
     }
   },
 
diff --git a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
index 89a82eed3..c427b5224 100644
--- a/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
+++ b/nezha-fronted/src/components/common/myDatePicker/src/picker.vue
@@ -392,6 +392,10 @@ export default {
     validateEvent: {
       type: Boolean,
       default: true
+    },
+    isOnly: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -444,6 +448,9 @@ export default {
       if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {
         this.dispatch('ElFormItem', 'el.form.change', val)
       }
+    },
+    isOnly:{
+      immediate: true
     }
   },
 
@@ -840,6 +847,7 @@ export default {
       this.popperElm = this.picker.$el
       this.picker.width = this.reference.getBoundingClientRect().width
       this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange'
+      this.picker.isOnly = this.isOnly
       this.picker.selectionMode = this.selectionMode
       this.picker.unlinkPanels = this.unlinkPanels
       this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 6767d8a67..addfe9029 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -50,6 +50,7 @@
               @change="dateChange"
               :default-time="['00:00:00', '23:59:59']"
               v-model="oldSearchTime"
+              :isOnly="true"
               type="daterange"
               popper-class="panel-time-picker-popper time-picker-popover__select-top"
               align="right"