feat: 完成页面中除首页外日期和数字的格式化

src/components/DateRange/src/DateRange.vue

@@ -3,8 +3,11 @@ import emitter from '@/utils/bus'
 import { ref, watch, onMounted, onBeforeMount } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
 import CalendarDate from './components/CalendarDate.vue'
-import moment from 'moment'
+import { formatTimezone } from '@/utils/tools'
 import dayjs from 'dayjs'
+import { useUserStore } from '@/stores/modules/user'
+
+const userStore = useUserStore()
 
 onMounted(() => {
   defaultDate()
@@ -70,13 +73,17 @@ 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('MMM/DD/YYYY') +
+          DateStart.value[0].format(userStore.dateFormat) +
           ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(userStore.dateFormat),
+            DateStart.value[1].format(userStore.dateFormat)
+          ]
         }
+
         daterangeObj2.ETD = obj
       } else {
         searchTableQeuryTracking.value =
@@ -87,12 +94,15 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.etd_end)
           ]
           daterangeObj.ETD =
-            DateStart.value[0].format('MMM/DD/YYYY') +
+            DateStart.value[0].format(userStore.dateFormat) +
             ' To ' +
-            DateStart.value[1].format('MMM/DD/YYYY')
+            DateStart.value[1].format(userStore.dateFormat)
           const obj = {
             title: 'ETD',
-            data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+            data: [
+              DateStart.value[0].format(userStore.dateFormat),
+              DateStart.value[1].format(userStore.dateFormat)
+            ]
           }
           daterangeObj2.ETD = obj
         }
@@ -102,10 +112,15 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.eta_end)
           ]
           daterangeObj.ETA =
-            DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
+            DateEnd.value[0].format(userStore.dateFormat) +
+            ' To ' +
+            DateEnd.value[1].format(userStore.dateFormat)
           const obj = {
             title: 'ETA',
-            data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+            data: [
+              DateEnd.value[0].format(userStore.dateFormat),
+              DateEnd.value[1].format(userStore.dateFormat)
+            ]
           }
           daterangeObj2.ETA = obj
         }
@@ -115,14 +130,14 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.created_time_end)
           ]
           daterangeObj['Creation Time'] =
-            DateCreation.value[0].format('MMM/DD/YYYY') +
+            DateCreation.value[0].format(userStore.dateFormat) +
             ' To ' +
-            DateCreation.value[1].format('MMM/DD/YYYY')
+            DateCreation.value[1].format(userStore.dateFormat)
           const obj = {
             title: 'Creation Time',
             data: [
-              DateCreation.value[0].format('MM/DD/YYYY'),
-              DateCreation.value[1].format('MM/DD/YYYY')
+              DateCreation.value[0].format(userStore.dateFormat),
+              DateCreation.value[1].format(userStore.dateFormat)
             ]
           }
           daterangeObj2['Creation Time'] = obj
@@ -136,23 +151,32 @@ const defaultDate = () => {
       if (data.eta_start) {
         DateEnd.value = [dayjs(data.eta_start), dayjs(data.eta_end)]
         daterangeObj.ETA =
-          DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
+          DateEnd.value[0].format(userStore.dateFormat) +
+          ' To ' +
+          DateEnd.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'ETA',
-          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateEnd.value[0].format(userStore.dateFormat),
+            DateEnd.value[1].format(userStore.dateFormat)
+          ]
         }
+
         daterangeObj2.ETA = obj
         emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
       }
       if (data.etd_start) {
         DateStart.value = [dayjs(data.etd_start), dayjs(data.etd_end)]
         daterangeObj.ETD =
-          DateStart.value[0].format('MMM/DD/YYYY') +
+          DateStart.value[0].format(userStore.dateFormat) +
           ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(userStore.dateFormat),
+            DateStart.value[1].format(userStore.dateFormat)
+          ]
         }
         daterangeObj2.ETD = obj
         emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
@@ -162,10 +186,15 @@ 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('MMM/DD/YYYY') + ' To ' + DateStart.value[1].format('MMM/DD/YYYY')
+        DateStart.value[0].format(userStore.dateFormat) +
+        ' To ' +
+        DateStart.value[1].format(userStore.dateFormat)
       const obj = {
         title: 'ETD',
-        data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+        data: [
+          DateStart.value[0].format(userStore.dateFormat),
+          DateStart.value[1].format(userStore.dateFormat)
+        ]
       }
       daterangeObj2.ETD = obj
     } else {
@@ -177,12 +206,15 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.f_etd_end)
         ]
         daterangeObj.ETD =
-          DateStart.value[0].format('MMM/DD/YYYY') +
+          DateStart.value[0].format(userStore.dateFormat) +
           ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(userStore.dateFormat),
+            DateStart.value[1].format(userStore.dateFormat)
+          ]
         }
         daterangeObj2.ETD = obj
       }
@@ -192,10 +224,15 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.m_eta_end)
         ]
         daterangeObj.ETA =
-          DateEnd.value[0].format('MMM/DD/YYYY') + ' To ' + DateEnd.value[1].format('MMM/DD/YYYY')
+          DateEnd.value[0].format(userStore.dateFormat) +
+          ' To ' +
+          DateEnd.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'ETA',
-          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateEnd.value[0].format(userStore.dateFormat),
+            DateEnd.value[1].format(userStore.dateFormat)
+          ]
         }
         daterangeObj2.ETA = obj
       }
@@ -205,14 +242,14 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.created_time_end)
         ]
         daterangeObj['Creation Time'] =
-          DateCreation.value[0].format('MMM/DD/YYYY') +
+          DateCreation.value[0].format(userStore.dateFormat) +
           ' To ' +
-          DateCreation.value[1].format('MMM/DD/YYYY')
+          DateCreation.value[1].format(userStore.dateFormat)
         const obj = {
           title: 'Creation Time',
           data: [
-            DateCreation.value[0].format('MM/DD/YYYY'),
-            DateCreation.value[1].format('MM/DD/YYYY')
+            DateCreation.value[0].format(userStore.dateFormat),
+            DateCreation.value[1].format(userStore.dateFormat)
           ]
         }
         daterangeObj2['Creation Time'] = obj
@@ -226,8 +263,8 @@ daterangedata.value = []
 let daterangeObj2: any = {}
 const DateRangeChange = (val: any) => {
   if (val.data != null) {
-    const date1 = moment(String(val.data[0])).format('MMM-DD-YYYY')
-    const date2 = moment(String(val.data[1])).format('MMM-DD-YYYY')
+    const date1 = formatTimezone(String(val.data[0]))
+    const date2 = formatTimezone(String(val.data[1]))
     daterangeObj[val.title] = date1 + ' To ' + date2
     daterangeObj2[val.title] = val
   } else {
@@ -506,4 +543,4 @@ const clearDaterangeObj = () => {
 .Date_type {
   color: var(--color-neutral-2);
 }
-</style>
+</style>

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

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import dayjs, { Dayjs } from 'dayjs'
 import { ref, watch } from 'vue'
-import moment from 'moment'
+import { formatTimezone } from '@/utils/tools'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
 // type RangeValue = [Dayjs, Dayjs]
 // const ETDDate = ref<RangeValue>()
 const props = defineProps({
@@ -48,12 +50,12 @@ const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
     // ETDDate.value = [dayjs(), dayjs()]
     ETDDate.value[0] = dayjs()
-    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+    const date1 = formatTimezone(String(ETDDate.value[0]))
     DateList.value[0] = date1
     daterange(DateList.value[1])
   } else {
     ETDDate.value[1] = dayjs()
-    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+    const date1 = formatTimezone(String(ETDDate.value[1]))
     DateList.value[1] = date1
     daterange(DateList.value[0])
   }
@@ -69,13 +71,13 @@ const handleCalendarOpen = (date: any) => {
 }
 const Earliest = () => {
   ETDDate.value[0] = dayjs('Oct-05-2009')
-  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+  const date1 = formatTimezone(String(ETDDate.value[0]))
   DateList.value[0] = date1
   daterange(DateList.value[1])
 }
 const Latest = () => {
   ETDDate.value[1] = dayjs()
-  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+  const date1 = formatTimezone(String(ETDDate.value[1]))
   DateList.value[1] = date1
   daterange(DateList.value[0])
 }
@@ -116,7 +118,7 @@ const isTwoDate = (date: any) => {
       :disabled="Disabled"
       @change="changeRangeData"
       :placeholder="['Start Time', 'End Time']"
-      format="MMM-DD-YYYY"
+      :format="userStore.dateFormat"
       valueFormat="MM/DD/YYYY"
       @openChange="handleCalendarOpen(ETDDate)"
       @panelChange="handlePanelChange"
@@ -182,4 +184,4 @@ const isTwoDate = (date: any) => {
 .icon_suffix {
   fill: var(--color-neutral-1);
 }
-</style>
+</style>

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import { ref, watch, computed } from 'vue'
-import moment from 'moment'
+import { formatTimezone } from '@/utils/tools'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
 const props = defineProps({
   CalendarWidth: {
     type: String,
@@ -40,12 +42,12 @@ const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
     // ETDDate.value = [dayjs(), dayjs()]
     ETDDate.value[0] = dayjs()
-    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+    const date1 = formatTimezone(String(ETDDate.value[0]))
     DateList.value[0] = date1
     daterange(DateList.value[1])
   } else {
     ETDDate.value[1] = dayjs()
-    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+    const date1 = formatTimezone(String(ETDDate.value[1]))
     DateList.value[1] = date1
     daterange(DateList.value[0])
   }
@@ -61,13 +63,13 @@ const handleCalendarOpen = (date: any) => {
 }
 const Earliest = () => {
   ETDDate.value[0] = dayjs('Oct-05-2009')
-  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
+  const date1 = formatTimezone(String(ETDDate.value[0]))
   DateList.value[0] = date1
   daterange(DateList.value[1])
 }
 const Latest = () => {
   ETDDate.value[1] = dayjs()
-  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
+  const date1 = formatTimezone(String(ETDDate.value[1]))
   DateList.value[1] = date1
   daterange(DateList.value[0])
 }
@@ -121,7 +123,7 @@ const placeholder = computed(() => {
       :disabled="props.isDisabled"
       @change="changeRangeData"
       :placeholder="placeholder"
-      format="MMM-DD-YYYY"
+      :format="userStore.dateFormat"
       valueFormat="MM/DD/YYYY"
       @openChange="handleCalendarOpen(ETDDate)"
       @panelChange="handlePanelChange"
@@ -181,4 +183,4 @@ const placeholder = computed(() => {
 :deep(.ant-picker-range) {
   padding: 4px 8px;
 }
-</style>
+</style>

src/stores/modules/user.ts

@@ -18,6 +18,34 @@ interface UserState {
   userInfo: UserInfo
   isFirstLogin: boolean
 }
+
+/**
+ * 根据用户地区判断日期格式
+ * @returns {string} - 返回日期格式
+ */
+const getDateFormat = () => {
+  const userLanguage = navigator.language || 'en-US' // 获取浏览器的语言设置
+  // 判断用户地区
+  if (userLanguage === 'en-US') {
+    return 'MM/DD/YYYY' // 美国使用 MM/DD/YYYY 格式
+  } else if (
+    userLanguage.startsWith('de') ||
+    userLanguage.startsWith('fr') ||
+    userLanguage.startsWith('it') ||
+    userLanguage.startsWith('es') ||
+    userLanguage.startsWith('pl') ||
+    userLanguage.startsWith('nl') ||
+    userLanguage.startsWith('pt') ||
+    userLanguage.startsWith('se')
+  ) {
+    return 'DD/MM/YYYY' // 其他欧洲国家（例：德语、法语、西班牙语等）使用 DD/MM/YYYY 格式
+  } else if (['zh-CN', 'ja-JP', 'ko-KR'].includes(userLanguage)) {
+    return 'YYYY-MM-DD' // 东亚国家（如简体中文、日语、韩语）使用 YYYY-MM-DD 格式
+  } else {
+    return 'DD/MM/YYYY' // 其他地区默认 DD/MM/YYYY 格式
+  }
+}
+
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
@@ -33,9 +61,11 @@ export const useUserStore = defineStore('user', {
         return state.userInfo.uname || ''
       }
     },
+    dateFormat(state) {
+      return state.userInfo.date_format || getDateFormat()
+    },
     expireDay(state) {
       const userInfo = state.userInfo
-
       return userInfo.PASSWORD_CHANGE_CYCLE - dayjs().diff(dayjs(userInfo.last_pwd_change), 'day')
     }
   },

src/styles/elementui.scss

@@ -89,23 +89,6 @@ button.el-button--main.is-disabled {
   }
 }
 
-button.el-button.el-button--pain-theme {
-  border: 1px solid var(--color-el-btn-pain-theme-border);
-  background-color: var(--color-el-btn-pain-theme-bg);
-
-  fill: var(--color-el-btn-pain-theme-text);
-  color: var(--color-el-btn-pain-theme-text);
-  span {
-    color: var(--color-el-btn-pain-theme-text);
-  }
-  &:hover {
-    border-color: var(--color-el-btn-pain-theme-border);
-    background-color: var(--color-el-btn-pain-theme-bg-hover);
-    color: var(--color-white);
-    fill: var(--color-white);
-  }
-}
-
 .el-button.el-button--success {
   border: none;
   background-color: var(--color-success);

src/styles/theme.scss

@@ -103,7 +103,7 @@
   --color-btn-warning-bg: #e9b227;
   --color-btn-warning-bg-hover: #d2a023;
   // danger
-  --color-btn-danger-bg: #C9353F;
+  --color-btn-danger-bg: #c9353f;
   --color-btn-danger-bg-hover: #b53039;
 
   --color-tag-checked-all: #fff2e8;
@@ -255,6 +255,8 @@
   --color-upload-file-bg: #fef8f2;
   --color-upload-file-color: #b5b9bf;
   --color-upload-file-border-bg: #f5b279;
+
+  --color-personal-preference-bg: #f5f7fa;
 }
 
 :root.dark {
@@ -321,6 +323,8 @@
   --color-upload-file-bg: rgba(237, 109, 0, 0.2);
   --color-upload-file-color: rgba(240, 241, 243, 0.7);
   --color-upload-file-border-bg: rgba(237, 109, 0, 0.5);
+
+  --color-personal-preference-bg: #343a43;
   // 滚动条
   --color-scrollbar-thumb: #656f7d;
 
@@ -364,6 +368,9 @@
   .el-input {
     --el-border: #656f7d;
   }
+  .el-radio {
+    --el-radio-input-border: #656f7d;
+  }
   --el-radio-input-border: #656f7d;
   --color-table-header-bg: #34383f;
   --el-input-focus: #2b2f36;
@@ -391,4 +398,21 @@
   --vxe-ui-input-border-color: #656f7d;
   --vxe-ui-table-menu-background-color: #3e454f;
   --color-vxe-table-visited-row-bg: #3c4149;
+
+  button.el-button.el-button--pain-theme {
+    border: 1px solid var(--color-el-btn-pain-theme-border);
+    background-color: var(--color-el-btn-pain-theme-bg);
+
+    fill: var(--color-el-btn-pain-theme-text);
+    color: var(--color-el-btn-pain-theme-text);
+    span {
+      color: var(--color-el-btn-pain-theme-text);
+    }
+    &:hover {
+      border-color: var(--color-el-btn-pain-theme-border);
+      background-color: var(--color-el-btn-pain-theme-bg-hover);
+      color: var(--color-white);
+      fill: var(--color-white);
+    }
+  }
 }

src/utils/tools.ts

@@ -1,6 +1,9 @@
 import moment from 'moment-timezone'
+import { useUserStore } from '@/stores/modules/user'
+
+const userStore = useUserStore()
+const formatString = userStore.dateFormat || 'MM/DD/YYYY'
 
-const formatString = 'MMM/DD/YYYY'
 export const formatTimezone = (time: string, timezone?: string) => {
   if (!time) return '--'
   let formattedTime = ''
@@ -34,7 +37,7 @@ export const getTimezone = (timezone: string): string => {
 export const formatTimezoneByUTCorGMT = (time: string, timezone: string) => {
   if (!time) return '--'
   let formattedTime = ''
-  formattedTime = moment(time).format('MMM-DD-YYYY hh:mm A')
+  formattedTime = moment(time).format(`${formatString} hh:mm A`)
   let gmtOffset = ''
   if (timezone != null) {
     const timeZoneOffset = moment().tz(timezone).format('Z')
@@ -63,8 +66,8 @@ export const isEuropean = () => {
  * @param digits - 小数位数
  * @param isEuropean - 是否为欧洲地区
  */
-export const formatNumber = (number: number, digits: number = 2, isEuropean?: boolean): string => {
-  const userLanguage = isEuropean ? 'de-DE' : 'zh-CN'
+export const formatNumber = (number: number, digits: number = 0): string => {
+  const userLanguage = userStore.userInfo?.numbers_format === 'European' ? 'de-DE' : 'zh-CN'
 
   // 设置数字格式化的选项
   const options: Intl.NumberFormatOptions = {

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -474,11 +474,7 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button
-          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
-          class="el-button--main"
-          @click="handleDownload"
-        >
+        <el-button class="el-button--main el-button--pain-theme" @click="handleDownload">
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>

src/views/Dashboard/src/components/DashFiters.vue

@@ -2,6 +2,7 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import moment from 'moment'
 import dayjs from 'dayjs'
+import { formatTimezone } from '@/utils/tools'
 
 const props = defineProps({
   defaultData: {
@@ -82,10 +83,10 @@ const getdefaultdata = () => {
       dashboardObj.date_end = defaultfiltersData.value?.date_end
       dashboardObj.date_end_two = defaultfiltersData.value?.date_end_two
     } else {
-      dashboardObj.date_start = dayjs(DashDate.value[0]).format('MM/DD/YYYY')
-      dashboardObj.date_start_two = dayjs(DashDate.value[0]).format('YYYY-MM-DD')
-      dashboardObj.date_end = dayjs(DashDate.value[1]).format('MM/DD/YYYY')
-      dashboardObj.date_end_two = dayjs(DashDate.value[1]).format('YYYY-MM-DD')
+      dashboardObj.date_start = formatTimezone(DashDate.value[0])
+      dashboardObj.date_start_two = formatTimezone(DashDate.value[0])
+      dashboardObj.date_end = formatTimezone(DashDate.value[1])
+      dashboardObj.date_end_two = formatTimezone(DashDate.value[1])
     }
   }
   dashboardObj.transportation = checkboxGroup1.value
@@ -112,9 +113,9 @@ const changeCheckboxGroup2 = (val: any) => {
 const emit = defineEmits(['FilterSearch'])
 const DateChange = (value: any) => {
   dashboardObj.date_start = value[0]
-  dashboardObj.date_start_two = dayjs(value[0]).format('YYYY-MM-DD')
+  dashboardObj.date_start_two = formatTimezone(value[0])
   dashboardObj.date_end = value[1]
-  dashboardObj.date_end_two = dayjs(value[1]).format('YYYY-MM-DD')
+  dashboardObj.date_end_two = formatTimezone(value[1])
 }
 const StartChange = (val: any) => {
   if (!props.isETDToETA) {
@@ -404,4 +405,4 @@ const DateRangeSearch = () => {
 :deep(.el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-select-border) inset;
 }
-</style>
+</style>

src/views/Dashboard/src/components/SellerChart.vue

@@ -3,6 +3,7 @@
 import * as echarts from 'echarts'
 import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+import { formatNumber } from '@/utils/tools'
 const themeStore = useThemeStore()
 const props = defineProps({
   SellerData: Array,
@@ -75,7 +76,12 @@ const initOption = reactive({
     borderColor: '#2b2f36',
     formatter: function (params: any) {
       var str =
-        params.name + '<div style= ' + 'color:#FFF>' + params.marker + params.value + '</div>'
+        params.name +
+        '<div style= ' +
+        'color:#FFF>' +
+        params.marker +
+        formatNumber(params.value) +
+        '</div>'
       return str
     },
     textStyle: {
@@ -99,7 +105,10 @@ const initOption = reactive({
     },
     axisLabel: {
       fontFamily: 'Lato-Light',
-      color: '#B5B9BF'
+      color: '#B5B9BF',
+      formatter: function (value: any) {
+        return formatNumber(value, 0)
+      }
     },
     min: 0, // 最小值
     max: Max.value, // 最大值
@@ -150,9 +159,7 @@ const initOption = reactive({
         fontFamily: 'Lato-Light',
         // 数据每三位加一个逗号
         formatter: function (data: { value: { toString: () => string } }) {
-          const reg = /(\d)(?=(?:\d{3})+$)/g
-          const newNumber = data.value.toString().replace(reg, '$1,')
-          return newNumber
+          return formatNumber(Number(data.value.toString()))
         }
       }
     }

src/views/Layout/src/components/Header/HeaderView.vue

@@ -318,12 +318,11 @@ const notificationDrawer = ref(false)
         </template>
       </el-popover>
       <el-button
-        :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
         v-if="
           !userStore.userInfo?.uname ||
           (userStore.userInfo?.uname && userStore.isFirstLogin === true)
         "
-        class="el-button--main"
+        class="el-button--main el-button--pain-theme"
         style="padding: 8px 10px; margin-right: 20px; margin-left: 0"
         plain
         @click="handleDownload"

src/views/Layout/src/components/Menu/MenuView.vue

@@ -88,7 +88,6 @@ const openeds = computed(() => {
   const parentItem = menuList.value?.find((item: any) =>
     item.children?.some((child: any) => child.path === activeMenu.value)
   )
-  console.log(parentItem, 'item')
   return parentItem ? [parentItem.index] : []
 })
 

src/views/OperationLog/src/components/BookingTable/src/BookingTable.vue

@@ -352,11 +352,7 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button
-          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
-          class="el-button--main"
-          @click="handleDownload"
-        >
+        <el-button class="el-button--main el-button--pain-theme" @click="handleDownload">
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>

src/views/SystemSettings/src/SystemSettings.vue

@@ -202,13 +202,13 @@ const gettabledatalength = (val: any) => {
   tabledatalength.value = val
 }
 
-onMounted(() => {
-  getsubscribe()
-  if (sessionStorage.getItem('activeTab') != null) {
-    TabActive.value = sessionStorage.getItem('activeTab')
-    sessionStorage.removeItem('activeTab')
-  }
-})
+// onMounted(() => {
+//   getsubscribe()
+//   if (sessionStorage.getItem('activeTab') != null) {
+//     TabActive.value = sessionStorage.getItem('activeTab')
+//     sessionStorage.removeItem('activeTab')
+//   }
+// })
 </script>
 <template>
   <div class="Title">System Settings</div>

src/views/SystemSettings/src/components/MonitoringTable/src/MonitoringTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
-import dayjs from 'dayjs'
+import { formatTimezone } from '@/utils/tools'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -74,8 +74,7 @@ const handleColumns = (columns: any) => {
     if (item.formatter === 'date') {
       curColumn = {
         ...curColumn,
-        formatter: ({ cellValue }: any) =>
-          cellValue ? dayjs(cellValue).format('MMM-DD-YYYY ') : '--'
+        formatter: ({ cellValue }: any) => formatTimezone(cellValue)
       }
     }
     return curColumn

src/views/SystemSettings/src/components/PersonalProfile.vue

@@ -3,7 +3,9 @@ import dayjs from 'dayjs'
 import { isEuropean, getDateFormat } from '@/utils/tools'
 import ChangePasswordDialog from '@/views/Layout/src/components/Header/components/ChangePasswordDialog.vue'
 import { useUserStore } from '@/stores/modules/user'
+import { useThemeStore } from '@/stores/modules/theme'
 
+const themeStore = useThemeStore()
 const userStore = useUserStore()
 const form = reactive({
   firstName: userStore.userInfo?.first_name,
@@ -28,15 +30,9 @@ const monthMap = {
   'DD/MMM/YYYY': 'DD/MM/YYYY',
   'YYYY-MMM-DD': 'YYYY-MM-DD'
 }
-// 用户没有指定日期格式化时，通过时区自动判断
-const initDateFormat = () => {
-  return monthMap[userStore.userInfo?.date_format] || getDateFormat()
-}
-const initMonthFormat = () => {
-  return userStore.userInfo?.date_format || getDateFormat()
-}
-const dateFormat = ref(initDateFormat())
-const monthFormat = ref(initMonthFormat())
+
+const dateFormat = ref(monthMap[userStore.dateFormat] || userStore.dateFormat)
+const monthFormat = ref(userStore.dateFormat)
 const dateFormatExample = computed(() => {
   return {
     'MM/DD/YYYY': [
@@ -163,7 +159,11 @@ const saveConfig = (model: string) => {
                 :disabled="true"
                 v-model="form.password"
               />
-              <el-button @click="handleChangePassword" class="el-button--main" plain size="large"
+              <el-button
+                @click="handleChangePassword"
+                class="el-button--main el-button--pain-theme"
+                plain
+                size="large"
                 >Change Password</el-button
               >
             </div>
@@ -328,7 +328,7 @@ const saveConfig = (model: string) => {
       margin-bottom: 8px;
       padding: 4px;
       border-radius: 12px;
-      background-color: #f5f7fa;
+      background-color: var(--color-personal-preference-bg);
       .item {
         display: inline-block;
         height: 32px;
@@ -340,7 +340,7 @@ const saveConfig = (model: string) => {
         color: var(--color-neutral-2);
         cursor: pointer;
         &.is-active {
-          background-color: var(--color-white);
+          background-color: var(--color-table-stripe-bg);
           color: var(--color-neutral-1);
         }
       }
@@ -348,7 +348,7 @@ const saveConfig = (model: string) => {
     .date-format,
     .numbers-format {
       padding: 0px 16px 32px;
-      background-color: #f5f7fa;
+      background-color: var(--color-personal-preference-bg);
       border-radius: 12px;
       .title {
         height: 40px;

src/views/SystemSettings/src/components/SettingTable/src/SettingTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
-import dayjs from 'dayjs'
+import { formatTimezone } from '@/utils/tools'
 import { ref, onMounted } from 'vue'
 interface ColumnsListItem {
   field: String
@@ -48,8 +48,7 @@ const handleColumns = (columns: any) => {
     if (item.formatter === 'date') {
       curColumn = {
         ...curColumn,
-        formatter: ({ cellValue }: any) =>
-          cellValue ? dayjs(cellValue).format('MMM-DD-YYYY ') : '--'
+        formatter: ({ cellValue }: any) => formatTimezone(cellValue)
       }
     }
     return curColumn

src/views/Tracking/src/components/TrackingDetail/src/components/AMS&ISF.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+import { formatTimezone } from '@/utils/tools'
 import dayjs from 'dayjs'
 
 const drawer = ref(false)
@@ -23,7 +24,7 @@ const handleColumns = (columns: any) => {
     if (item.formatter === 'dateTime') {
       curColumn = {
         ...curColumn,
-        formatter: ({ cellValue }: any) => dayjs(cellValue).format('DD-MMM-YYYY HH:mm:ss') || '--'
+        formatter: ({ cellValue }: any) => formatTimezone(cellValue)
       }
     }
     return curColumn

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

@@ -113,7 +113,7 @@ const assignPageInfo = () => {
 assignPageInfo()
 const TagsList = ref()
 const tempSearch = ref('')
-
+const canEdiVgm = ref(false)
 const curTableData = ref([])
 
 // 获得表格数据后赋值
@@ -123,8 +123,8 @@ const assignTableData = (data: any) => {
   pageInfo.value.total = Number(data.rc)
   TagsList.value = data.tagsList
   tempSearch.value = data.tmp_search
-
-  if (data.canEdiVgm && trackingTable.value.columns.length > 0) {
+  canEdiVgm.value = data.canEdiVgm
+  if (canEdiVgm.value && trackingTable.value.columns.length > 0) {
     const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
     if (index === -1) {
       trackingTable.value.columns.push({
@@ -580,11 +580,7 @@ defineExpose({
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
-        <el-button
-          class="el-button--main"
-          :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
-          @click="handleDownload"
-        >
+        <el-button class="el-button--main el-button--pain-theme" @click="handleDownload">
           <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>
@@ -623,7 +619,7 @@ defineExpose({
       <!-- action操作的插槽 -->
       <template #action="{ row }">
         <el-button
-          v-if="row?.['Mode'] !== 'Air Freight'"
+          v-if="row?.['Mode'] !== 'Air Freight' && canEdiVgm"
           @click="handleVGM(row)"
           class="el-button--blue"
           style="height: 24px"
@@ -632,7 +628,7 @@ defineExpose({
           <span style="font-size: 12px">VGM</span>
         </el-button>
 
-        <el-button
+        <!-- <el-button
           class="recent_button el-button--blue"
           @click="SubscribeShipments(row)"
           :class="row.is_subscribe ? 'IsSubscribe' : ''"
@@ -647,7 +643,7 @@ defineExpose({
               <use xlink:href="#icon-icon_unmark_b"></use>
             </svg>
           </span>
-        </el-button>
+        </el-button> -->
       </template>
       <!-- Transportation Mode字段的插槽 -->
       <template #mode="{ row, column }">

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

@@ -3,7 +3,10 @@ import { useRoute, useRouter } from 'vue-router'
 // import { autoWidth } from '@/utils/table'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { formatTimezone } from '@/utils/tools'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
+const datePickerFormat = `${userStore.dateFormat} HH:mm:ss`
 const route = useRoute()
 const router = useRouter()
 
@@ -512,7 +515,7 @@ const stopScroll = (evt) => {
                 class="vgm-date-picker"
                 style="width: 190px"
                 placeholder="Pick a Date"
-                format="MMM-DD-YYYY HH:mm:ss"
+                :format="datePickerFormat"
                 date-format="MMM-DD-YYYY"
                 time-format="HH:mm:ss"
               />