Merge branch 'release_zyh' of United_Software/k_online_ui into dev

src/components/DateRange/src/DateRange.vue

@@ -3,11 +3,12 @@ import emitter from '@/utils/bus'
 import { ref, watch, onMounted, onBeforeMount } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
 import CalendarDate from './components/CalendarDate.vue'
-import { formatTimezone } from '@/utils/tools'
 import dayjs from 'dayjs'
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 onMounted(() => {
   defaultDate()
@@ -73,14 +74,12 @@ const defaultDate = () => {
       if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
         DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
         daterangeObj.ETD =
-          DateStart.value[0].format(userStore.dateFormat) +
-          ' To ' +
-          DateStart.value[1].format(userStore.dateFormat)
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
           data: [
-            DateStart.value[0].format(userStore.dateFormat),
-            DateStart.value[1].format(userStore.dateFormat)
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
           ]
         }
 
@@ -94,14 +93,12 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.etd_end)
           ]
           daterangeObj.ETD =
-            DateStart.value[0].format(userStore.dateFormat) +
-            ' To ' +
-            DateStart.value[1].format(userStore.dateFormat)
+            DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
           const obj = {
             title: 'ETD',
             data: [
-              DateStart.value[0].format(userStore.dateFormat),
-              DateStart.value[1].format(userStore.dateFormat)
+              DateStart.value[0].format(valueFormatDate),
+              DateStart.value[1].format(valueFormatDate)
             ]
           }
           daterangeObj2.ETD = obj
@@ -112,14 +109,12 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.eta_end)
           ]
           daterangeObj.ETA =
-            DateEnd.value[0].format(userStore.dateFormat) +
-            ' To ' +
-            DateEnd.value[1].format(userStore.dateFormat)
+            DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
           const obj = {
             title: 'ETA',
             data: [
-              DateEnd.value[0].format(userStore.dateFormat),
-              DateEnd.value[1].format(userStore.dateFormat)
+              DateEnd.value[0].format(valueFormatDate),
+              DateEnd.value[1].format(valueFormatDate)
             ]
           }
           daterangeObj2.ETA = obj
@@ -130,14 +125,14 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.created_time_end)
           ]
           daterangeObj['Creation Time'] =
-            DateCreation.value[0].format(userStore.dateFormat) +
+            DateCreation.value[0].format(formatDate) +
             ' To ' +
-            DateCreation.value[1].format(userStore.dateFormat)
+            DateCreation.value[1].format(formatDate)
           const obj = {
             title: 'Creation Time',
             data: [
-              DateCreation.value[0].format(userStore.dateFormat),
-              DateCreation.value[1].format(userStore.dateFormat)
+              DateCreation.value[0].format(valueFormatDate),
+              DateCreation.value[1].format(valueFormatDate)
             ]
           }
           daterangeObj2['Creation Time'] = obj
@@ -151,15 +146,10 @@ const defaultDate = () => {
       if (data.eta_start) {
         DateEnd.value = [dayjs(data.eta_start), dayjs(data.eta_end)]
         daterangeObj.ETA =
-          DateEnd.value[0].format(userStore.dateFormat) +
-          ' To ' +
-          DateEnd.value[1].format(userStore.dateFormat)
+          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
         const obj = {
           title: 'ETA',
-          data: [
-            DateEnd.value[0].format(userStore.dateFormat),
-            DateEnd.value[1].format(userStore.dateFormat)
-          ]
+          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
         }
 
         daterangeObj2.ETA = obj
@@ -168,14 +158,12 @@ const defaultDate = () => {
       if (data.etd_start) {
         DateStart.value = [dayjs(data.etd_start), dayjs(data.etd_end)]
         daterangeObj.ETD =
-          DateStart.value[0].format(userStore.dateFormat) +
-          ' To ' +
-          DateStart.value[1].format(userStore.dateFormat)
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
           data: [
-            DateStart.value[0].format(userStore.dateFormat),
-            DateStart.value[1].format(userStore.dateFormat)
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
           ]
         }
         daterangeObj2.ETD = obj
@@ -186,14 +174,12 @@ const defaultDate = () => {
     if (sessionStorage.getItem('searchTableQeury') == null) {
       DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
       daterangeObj.ETD =
-        DateStart.value[0].format(userStore.dateFormat) +
-        ' To ' +
-        DateStart.value[1].format(userStore.dateFormat)
+        DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
       const obj = {
         title: 'ETD',
         data: [
-          DateStart.value[0].format(userStore.dateFormat),
-          DateStart.value[1].format(userStore.dateFormat)
+          DateStart.value[0].format(valueFormatDate),
+          DateStart.value[1].format(valueFormatDate)
         ]
       }
       daterangeObj2.ETD = obj
@@ -202,18 +188,16 @@ const defaultDate = () => {
         JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
       if (searchTableQeury.value.f_etd_start) {
         DateStart.value = [
-          dayjs(searchTableQeury.value.f_etd_start),
-          dayjs(searchTableQeury.value.f_etd_end)
+          dayjs(searchTableQeury.value.f_etd_start).format(valueFormatDate),
+          dayjs(searchTableQeury.value.f_etd_end).format(valueFormatDate)
         ]
         daterangeObj.ETD =
-          DateStart.value[0].format(userStore.dateFormat) +
-          ' To ' +
-          DateStart.value[1].format(userStore.dateFormat)
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
           data: [
-            DateStart.value[0].format(userStore.dateFormat),
-            DateStart.value[1].format(userStore.dateFormat)
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
           ]
         }
         daterangeObj2.ETD = obj
@@ -224,15 +208,10 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.m_eta_end)
         ]
         daterangeObj.ETA =
-          DateEnd.value[0].format(userStore.dateFormat) +
-          ' To ' +
-          DateEnd.value[1].format(userStore.dateFormat)
+          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
         const obj = {
           title: 'ETA',
-          data: [
-            DateEnd.value[0].format(userStore.dateFormat),
-            DateEnd.value[1].format(userStore.dateFormat)
-          ]
+          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
         }
         daterangeObj2.ETA = obj
       }
@@ -242,14 +221,14 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.created_time_end)
         ]
         daterangeObj['Creation Time'] =
-          DateCreation.value[0].format(userStore.dateFormat) +
+          DateCreation.value[0].format(formatDate) +
           ' To ' +
-          DateCreation.value[1].format(userStore.dateFormat)
+          DateCreation.value[1].format(formatDate)
         const obj = {
           title: 'Creation Time',
           data: [
-            DateCreation.value[0].format(userStore.dateFormat),
-            DateCreation.value[1].format(userStore.dateFormat)
+            DateCreation.value[0].format(valueFormatDate),
+            DateCreation.value[1].format(valueFormatDate)
           ]
         }
         daterangeObj2['Creation Time'] = obj
@@ -263,8 +242,8 @@ daterangedata.value = []
 let daterangeObj2: any = {}
 const DateRangeChange = (val: any) => {
   if (val.data != null) {
-    const date1 = formatTimezone(String(val.data[0]))
-    const date2 = formatTimezone(String(val.data[1]))
+    const date1 = dayjs(String(val.data[0])).format(formatDate)
+    const date2 = dayjs(String(val.data[1])).format(formatDate)
     daterangeObj[val.title] = date1 + ' To ' + date2
     daterangeObj2[val.title] = val
   } else {

src/components/DateRange/src/components/CalendarDate.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import dayjs, { Dayjs } from 'dayjs'
 import { ref, watch } from 'vue'
-import { formatTimezone } from '@/utils/tools'
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
+const valueFormatDate = 'MM/DD/YYYY'
 // type RangeValue = [Dayjs, Dayjs]
 // const ETDDate = ref<RangeValue>()
 const props = defineProps({
@@ -23,13 +23,20 @@ const props = defineProps({
     default: false
   }
 })
-const ETDDate = ref(props.Date)
+const ETDDate = ref()
 watch(
   () => props.Date,
-  (current) => {
-    ETDDate.value = current
-  }
+  (current: any) => {
+    if (current?.length == 2) {
+      ETDDate.value = [
+        current[0] ? dayjs(current[0]).format(valueFormatDate) : '',
+        current[1] ? dayjs(current[1]).format(valueFormatDate) : ''
+      ]
+    }
+  },
+  { immediate: true, deep: true }
 )
+
 const emit = defineEmits(['DateRangeChange', 'DateChange'])
 const open = ref(false)
 const Disabled = ref([false, false])
@@ -50,12 +57,12 @@ const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
     // ETDDate.value = [dayjs(), dayjs()]
     ETDDate.value[0] = dayjs()
-    const date1 = formatTimezone(String(ETDDate.value[0]))
+    const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
     DateList.value[0] = date1
     daterange(DateList.value[1])
   } else {
     ETDDate.value[1] = dayjs()
-    const date1 = formatTimezone(String(ETDDate.value[1]))
+    const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
     DateList.value[1] = date1
     daterange(DateList.value[0])
   }
@@ -71,13 +78,13 @@ const handleCalendarOpen = (date: any) => {
 }
 const Earliest = () => {
   ETDDate.value[0] = dayjs('Oct-05-2009')
-  const date1 = formatTimezone(String(ETDDate.value[0]))
+  const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
   DateList.value[0] = date1
   daterange(DateList.value[1])
 }
 const Latest = () => {
   ETDDate.value[1] = dayjs()
-  const date1 = formatTimezone(String(ETDDate.value[1]))
+  const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
   DateList.value[1] = date1
   daterange(DateList.value[0])
 }

src/views/Tracking/src/components/TrackingTable/src/components/VGMView.vue

@@ -516,7 +516,8 @@ const stopScroll = (evt) => {
                 style="width: 190px"
                 placeholder="Pick a Date"
                 :format="datePickerFormat"
-                date-format="MMM-DD-YYYY"
+                value-format="YYYY-MM-DD hh:mm:ss"
+                :date-format="userStore.dateFormat"
                 time-format="HH:mm:ss"
               />
             </template>