fix：时间选择器组件 统一使用format

nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue

@@ -22,18 +22,20 @@
             </el-input>
           </div>
           <div class="margin-r-20 nz-btn-group">
-            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
+            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button>
-            v-model="formatTime"
+            <my-date-picker
-            type="datetime"
+              v-model="formatTime"
-            size="mini"
+              type="datetime"
-            class="project-calendar nz-input-group-middle"
+              size="mini"
-            clearable
+              class="project-calendar nz-input-group-middle"
-            :time-arrow-control="true"
+              clearable
-            placeholder="Moment"
+              :time-arrow-control="true"
-            :value-format="timeFormatStrToDatePickFormat(endpointQueryTime)"
+              placeholder="Moment"
-            :format="timeFormatStrToDatePickFormat(endpointQueryTime)"
+              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
           >
-          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
+          </my-date-picker>
+            <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
           </div>
           <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
             <button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
@@ -127,7 +129,6 @@ export default {
       timeout: null,
       formatTime: '',
       hideSameLabels: true,
-      endpointQueryTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -32,19 +32,21 @@
           </el-input>
         </div>
         <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
-          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
+          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button>
-          v-model="formatTime"
+          <my-date-picker
-          type="datetime"
+            v-model="formatTime"
-          size="mini"
+            type="datetime"
-          class="project-calendar nz-input-group-middle"
+            size="mini"
-          clearable
+            class="project-calendar nz-input-group-middle"
-          :time-arrow-control="true"
+            clearable
-          placeholder="Moment"
+            :time-arrow-control="true"
-          :value-format="timeFormatStrToDatePickFormat(endpointQueryTabTime)"
+            placeholder="Moment"
-          :format="timeFormatStrToDatePickFormat(endpointQueryTabTime)"
+            :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
-          @change="pickTime"
+            :format="timeFormatStrToDatePickFormat(timeFormatMain)"
+            @change="pickTime"
         >
-          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
+          </my-date-picker>
+          <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
         </div>
         <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
           <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
@@ -175,7 +177,6 @@ export default {
       scrollTop: 0,
       scrollbarWrap: null,
       minusTime: 0,
-      endpointQueryTabTime: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
     }
   },
   methods: {

nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue

@@ -38,7 +38,9 @@
               <div class="datepicker-box">
                 <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
-                                align="right" class=" " :format="timeFormatStrToDatePickFormat(alertSilenceTime)"
+                                align="right" class=" "
+                                :value-format="timeFormatStrToDatePickFormat(alertSilenceTime)"
+                                :format="timeFormatStrToDatePickFormat(alertSilenceTime)"
                                 popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"
@@ -50,7 +52,9 @@
               <div class="datepicker-box">
                 <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
                 <my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
-                                align="right" class=" " :format="timeFormatStrToDatePickFormat(alertSilenceTime)"
+                                align="right" class=" "
+                                :value-format="timeFormatStrToDatePickFormat(alertSilenceTime)"
+                                :format="timeFormatStrToDatePickFormat(alertSilenceTime)"
                                 popper-class="panel-time-picker-popper right-box-select-top"
                                 prefix-icon=" "
                                 size="mini"

nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue

@@ -132,6 +132,8 @@
                           :placeholder="$t('overall.select')"
                           popper-class="right-box-select-top right-public-box-dropdown-top"
                           size="small"
+                          :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+                          :format="timeFormatStrToDatePickFormat(timeFormatMain)"
                           style="width: 100%">
                         </my-date-picker>
                       </template>
@@ -143,6 +145,8 @@
                           :placeholder="$t('overall.select')"
                           popper-class="right-box-select-top right-public-box-dropdown-top"
                           size="small"
+                          :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+                          :format="timeFormatStrToDatePickFormat(timeFormatMain)"
                           style="width: 100%"
                           value-format="yyyy-MM-dd">
                         </my-date-picker>

nezha-fronted/src/components/common/rightBox/asset/assetBox.vue

@@ -74,6 +74,8 @@
               popper-class="right-box-select-top"
               style="width: 100%"
               type="date"
+              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
               value-format="yyyy-MM-dd">
             </my-date-picker>
           </el-form-item>
@@ -143,6 +145,8 @@
                         placeholder=""
                         popper-class="right-box-select-top"
                         size="small"
+                        :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+                        :format="timeFormatStrToDatePickFormat(timeFormatMain)"
                         style="width: 100%">
                       </my-date-picker>
                     </template>
@@ -155,7 +159,8 @@
                         popper-class="right-box-select-top"
                         size="small"
                         style="width: 100%"
-                        value-format="yyyy-MM-dd">
+                        :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+                        :format="timeFormatStrToDatePickFormat(timeFormatMain)">
                       </my-date-picker>
                     </template>
                   </template>

nezha-fronted/src/components/common/searchInput.vue

@@ -222,6 +222,8 @@
                                 @change="changeDate"
                                 :class="dataBackG?'':'dataBackG'"
                                 v-if="ind==sreach_num&&val.id==7"
+                                :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+                                :format="timeFormatStrToDatePickFormat(timeFormatMain)"
                         >
                         </my-date-picker>
                     </li>

nezha-fronted/src/components/page/asset/components/assetTagEx.vue

@@ -53,6 +53,8 @@
           :placeholder="$t('alert.silence.selectTime')"
           :start-placeholder="$t('dashboard.panel.startTime')"
           :end-placeholder="$t('dashboard.panel.endTime')"
+          :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+          :format="timeFormatStrToDatePickFormat(timeFormatMain)"
         >
         </my-date-picker>
       </div>
@@ -74,7 +76,9 @@
           :range-separator="$t('dashboard.panel.to')"
           :placeholder="$t('alert.silence.selectTime')"
           :start-placeholder="$t('dashboard.panel.startTime')"
-          :end-placeholder="$t('dashboard.panel.endTime')">
+          :end-placeholder="$t('dashboard.panel.endTime')"
+          :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+          :format="timeFormatStrToDatePickFormat(timeFormatMain)">
         </my-date-picker>
       </div>
     </div>

nezha-fronted/src/components/page/config/system/apiKeyTable.vue

@@ -43,7 +43,7 @@
               <el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
                 <el-select v-model="scope.row[item.prop]" size="small" :placeholder="$t('el.select.placeholder')" value-key="id" slot="reference" popper-class="api-select right-box-select-top right-public-box-dropdown-top role-system-table">
                   <template v-for="role in roles" >
-                    <el-option :label="role.name" :value="role"></el-option>
+                    <el-option :label="role.name" :value="role" :key="role.name"></el-option>
                   </template>
                 </el-select>
               </el-popover>

nezha-fronted/src/main.js

@@ -200,6 +200,9 @@ Vue.mixin({
     }
   },
   computed: {
+    timeFormatMain () {
+      return this.$store.getters.getTimeFormatMain
+    },
     getMenuList () {
       return this.$store.state.user.menuList
     },

nezha-fronted/src/store/index.js

@@ -39,9 +39,13 @@ const store = new Vuex.Store({
     isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
     metricsList: [],
     langList: [],
-    i18nReady: false
+    i18nReady: false,
+    timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
   },
   getters: {
+    getTimeFormatMain (state) {
+      return state.timeFormatMain
+    },
     getLinkData (state) {
       return state.linkData
     },
@@ -167,6 +171,10 @@ const store = new Vuex.Store({
     setLangList (state, langList) {
       state.langList = langList
     },
+    setTimeFormatMain (state, timeFormat) {
+      console.log(timeFormat)
+      state.timeFormatMain = timeFormat
+    },
     i18nReady (state, ready) {
       state.i18nReady = ready
     }

nezha-fronted/src/store/user.js

@@ -76,6 +76,7 @@ const user = {
       localStorage.setItem('nz-unnsaved-change', res.data.unsavedChange)
       localStorage.setItem('nz-mfa-enable', Number(res.data.mfaAuthEnable) ? 1 : 0)
       store.commit('setLanguage', res.data.user.lang || defaultAppearance.language)
+      store.commit('setTimeFormatMain', localStorage.getItem('nz-default-dateFormat'))
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
         const menuList = sortByOrderNum(res.data.menus)
         store.commit('setMenuList', menuList)