合并代码

src/components/DateRange/src/DateRange.vue

@@ -3,8 +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 moment from 'moment'
 import dayjs from 'dayjs'
+import { useUserStore } from '@/stores/modules/user'
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 onMounted(() => {
   defaultDate()
@@ -70,13 +74,15 @@ 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') +
-          ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
+          ]
         }
+
         daterangeObj2.ETD = obj
       } else {
         searchTableQeuryTracking.value =
@@ -87,12 +93,13 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.etd_end)
           ]
           daterangeObj.ETD =
-            DateStart.value[0].format('MMM/DD/YYYY') +
-            ' To ' +
-            DateStart.value[1].format('MMM/DD/YYYY')
+            DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
           const obj = {
             title: 'ETD',
-            data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+            data: [
+              DateStart.value[0].format(valueFormatDate),
+              DateStart.value[1].format(valueFormatDate)
+            ]
           }
           daterangeObj2.ETD = obj
         }
@@ -102,10 +109,13 @@ 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(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
           const obj = {
             title: 'ETA',
-            data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+            data: [
+              DateEnd.value[0].format(valueFormatDate),
+              DateEnd.value[1].format(valueFormatDate)
+            ]
           }
           daterangeObj2.ETA = obj
         }
@@ -115,14 +125,14 @@ const defaultDate = () => {
             dayjs(searchTableQeuryTracking.value.created_time_end)
           ]
           daterangeObj['Creation Time'] =
-            DateCreation.value[0].format('MMM/DD/YYYY') +
+            DateCreation.value[0].format(formatDate) +
             ' To ' +
-            DateCreation.value[1].format('MMM/DD/YYYY')
+            DateCreation.value[1].format(formatDate)
           const obj = {
             title: 'Creation Time',
             data: [
-              DateCreation.value[0].format('MM/DD/YYYY'),
-              DateCreation.value[1].format('MM/DD/YYYY')
+              DateCreation.value[0].format(valueFormatDate),
+              DateCreation.value[1].format(valueFormatDate)
             ]
           }
           daterangeObj2['Creation Time'] = obj
@@ -136,23 +146,25 @@ 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(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
         const obj = {
           title: 'ETA',
-          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
         }
+
         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') +
-          ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
+          ]
         }
         daterangeObj2.ETD = obj
         emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
@@ -162,10 +174,13 @@ 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(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
       const obj = {
         title: 'ETD',
-        data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+        data: [
+          DateStart.value[0].format(valueFormatDate),
+          DateStart.value[1].format(valueFormatDate)
+        ]
       }
       daterangeObj2.ETD = obj
     } else {
@@ -173,16 +188,17 @@ 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('MMM/DD/YYYY') +
-          ' To ' +
-          DateStart.value[1].format('MMM/DD/YYYY')
+          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
         const obj = {
           title: 'ETD',
-          data: [DateStart.value[0].format('MM/DD/YYYY'), DateStart.value[1].format('MM/DD/YYYY')]
+          data: [
+            DateStart.value[0].format(valueFormatDate),
+            DateStart.value[1].format(valueFormatDate)
+          ]
         }
         daterangeObj2.ETD = obj
       }
@@ -192,10 +208,10 @@ 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(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
         const obj = {
           title: 'ETA',
-          data: [DateEnd.value[0].format('MM/DD/YYYY'), DateEnd.value[1].format('MM/DD/YYYY')]
+          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
         }
         daterangeObj2.ETA = obj
       }
@@ -205,14 +221,14 @@ const defaultDate = () => {
           dayjs(searchTableQeury.value.created_time_end)
         ]
         daterangeObj['Creation Time'] =
-          DateCreation.value[0].format('MMM/DD/YYYY') +
+          DateCreation.value[0].format(formatDate) +
           ' To ' +
-          DateCreation.value[1].format('MMM/DD/YYYY')
+          DateCreation.value[1].format(formatDate)
         const obj = {
           title: 'Creation Time',
           data: [
-            DateCreation.value[0].format('MM/DD/YYYY'),
-            DateCreation.value[1].format('MM/DD/YYYY')
+            DateCreation.value[0].format(valueFormatDate),
+            DateCreation.value[1].format(valueFormatDate)
           ]
         }
         daterangeObj2['Creation Time'] = obj
@@ -226,8 +242,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 = 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 {
@@ -506,4 +522,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 { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
+const valueFormatDate = 'MM/DD/YYYY'
 // type RangeValue = [Dayjs, Dayjs]
 // const ETDDate = ref<RangeValue>()
 const props = defineProps({
@@ -21,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])
@@ -48,12 +57,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 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
     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 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
     DateList.value[1] = date1
     daterange(DateList.value[0])
   }
@@ -69,13 +78,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 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
   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 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
   DateList.value[1] = date1
   daterange(DateList.value[0])
 }
@@ -116,7 +125,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 +191,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/components/MoreFilters/src/MoreFilters.vue

@@ -896,7 +896,7 @@ const SearchMore = () => {
   if (AddDatePlaceType.value.length) {
     const isDateType = AddDatePlaceType.value.some((element) => element.placesType != '')
     if (isDateType) {
-      if (!isError.value && isError.value != undefined) {
+      if (isError.value && isError.value != undefined) {
         // 传数据给父组件
         emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
         drawer.value = false
@@ -909,7 +909,7 @@ const SearchMore = () => {
   } else if (AddDateType.value.length) {
     const isDateType = AddDateType.value.some((element) => element.partyType != '')
     if (isDateType) {
-      if (!isError.value && isError.value != undefined) {
+      if (isError.value && isError.value != undefined) {
         // 传数据给父组件
         emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
         drawer.value = false

src/components/SelectTable/src/SelectTable.vue

@@ -2,6 +2,7 @@
 import _ from 'lodash'
 import { reactive, ref, onMounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { formatNumber } from '@/utils/tools'
 
 const emit = defineEmits(['check', 'input'])
 const props = defineProps({
@@ -244,7 +245,7 @@ const onInput = () => {
         <el-table-column property="uncode" label="Uncode" />
       </el-table>
       <div class="pagination">
-        <span>Total {{ state.total }}</span>
+        <span>Total {{ formatNumber(state.total) }}</span>
         <el-pagination
           v-model:currentPage="state.currentPage"
           v-model:page-size="state.pageSize"

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -68,7 +68,7 @@ watch(
     deep: true
   }
 )
-const ErrorNumber = ref(true)
+const ErrorNumber = ref(false)
 const str = ref()
 const search_field = ref()
 const InputAutoSelect = (val: any) => {
@@ -93,7 +93,6 @@ const remoteMethod = (query: string) => {
         })
         .then((res: any) => {
           if (res.code == 200) {
-            console.log(testAuto.value)
             loading.value = false
             list.value = res.data.map((item: any) => {
               return { value: item, label: item, checked: testAuto.value?.includes(item) }

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,16 +61,19 @@ 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')
     }
   },
   actions: {
     setUserInfo(userInfo: any, isFirstLogin?: boolean) {
-      localStorage.setItem('userInfo', JSON.stringify(userInfo))
       this.userInfo = userInfo
+      localStorage.setItem('userInfo', JSON.stringify(userInfo))
+
       if (isFirstLogin !== undefined) {
         localStorage.setItem('isFirstLogin', JSON.stringify(isFirstLogin))
         this.isFirstLogin = isFirstLogin

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;
@@ -260,10 +260,11 @@
   --color-system-border: #eaebed;
   --color-system-checkbox-bg: #fff;
   --color-system-checkbox-border: #eaebed;
-  --color-system-body-bg:#fff;
+  --color-system-body-bg: #fff;
   --color-system-notification-bg: #f6f8fa;
-  --color-system-card-bg:#fff;
+  --color-system-card-bg: #fff;
   --color-system-border-1: #e8eaee;
+  --color-personal-preference-bg: #f5f7fa;
 }
 
 :root.dark {
@@ -309,7 +310,7 @@
   --color-user-config-title-bottom-border: #3f434a;
   --color-container-status-node-bg: #3e454f;
 
-  --color-btn-blue-bg: rgba(248, 249, 253, 0.10);
+  --color-btn-blue-bg: rgba(248, 249, 253, 0.1);
 
   --color-el-btn-pain-theme-border: #ed6d00;
   --color-el-btn-pain-theme-text: #ed6d00;
@@ -330,6 +331,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;
 
@@ -373,6 +376,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;
@@ -400,4 +406,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,11 +1,16 @@
 import moment from 'moment-timezone'
+import { useUserStore } from '@/stores/modules/user'
+
+const userStore = useUserStore()
+const formatString = computed(() => {
+  return userStore.dateFormat || 'MM/DD/YYYY'
+})
 
-const formatString = 'MMM/DD/YYYY'
 export const formatTimezone = (time: string, timezone?: string) => {
   if (!time) return '--'
   let formattedTime = ''
   if (time.length > 12) {
-    formattedTime = moment(time).format(`${formatString} hh:mm A`)
+    formattedTime = moment(time).format(`${formatString.value} hh:mm A`)
     if (!timezone) {
       return formattedTime
     }
@@ -15,7 +20,7 @@ export const formatTimezone = (time: string, timezone?: string) => {
     utcOffset = `(UTC${timeZoneOffset.slice(0, 3)})`
     return `${formattedTime} ${utcOffset}`
   } else {
-    formattedTime = moment(time).format(formatString)
+    formattedTime = moment(time).format(formatString.value)
     return formattedTime
   }
 }
@@ -34,9 +39,8 @@ 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.value} hh:mm A`)
   let gmtOffset = ''
-  console.log(timezone, formattedTime)
   if (timezone != null) {
     const timeZoneOffset = moment().tz(timezone).format('Z')
     // 替换 "+07:00" 为 "GMT+07"
@@ -64,16 +68,17 @@ 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): string => {
+  if (isNaN(number)) return '0'
+  const userLanguage = userStore.userInfo?.numbers_format === 'European' ? 'de-DE' : 'zh-CN'
 
   // 设置数字格式化的选项
   const options: Intl.NumberFormatOptions = {
-    style: 'decimal',
-    minimumFractionDigits: digits
+    style: 'decimal'
+    // minimumFractionDigits: digits
     // maximumFractionDigits: 3
   }
-
+  digits ?? (options.minimumFractionDigits = digits)
   // 其他地区使用默认格式
   return new Intl.NumberFormat(userLanguage, options).format(number)
 }

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>
@@ -541,7 +537,7 @@ defineExpose({
     </vxe-grid>
     <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
     <div class="bottom-pagination">
-      <div class="left-total-records">Total {{ pageInfo.total }}</div>
+      <div class="left-total-records">Total {{ formatNumber(pageInfo.total) }}</div>
       <div class="right-pagination">
         <el-pagination
           v-model:current-page="pageInfo.pageNo"

src/views/Dashboard/src/DashboardView.vue

@@ -12,6 +12,7 @@ import TopMap from './components/TopMap.vue'
 import DashFilters from './components/DashFiters.vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import { formatNumber } from '@/utils/tools'
 
 const router = useRouter()
 const activeName = ref('first')
@@ -1163,7 +1164,7 @@ const ClickParams = (val: any) => {
               <template #content>
                 <RecentStatus :RecentStatusList="RecentStatusList"></RecentStatus>
                 <div class="pagination">
-                  <span>Total {{ pageInfo.total }}</span>
+                  <span>Total {{ formatNumber(pageInfo.total) }}</span>
                   <el-pagination
                     v-model:current-page="pageInfo.pageNo"
                     v-model:page-size="pageInfo.pageSize"

src/views/Dashboard/src/components/BarChart.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({
   BarData: Object,
@@ -101,11 +102,15 @@ const initOption = reactive({
           item.marker +
           item.seriesName +
           ': ' +
-          item.value +
+          formatNumber(item.value) +
           '</div>'
       })
       allnum = allnum.toFixed(2)
-      str += '<div style= ' + 'color:#FFF;font-family: Lato-Light>Total: ' + allnum + '</div>'
+      str +=
+        '<div style= ' +
+        'color:#FFF;font-family: Lato-Light>Total: ' +
+        formatNumber(allnum) +
+        '</div>'
       return str
     },
     textStyle: {
@@ -150,7 +155,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, // 最大值

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: {
@@ -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/PieChart.vue

@@ -1,8 +1,9 @@
 <!-- 饼状图 -->
- <script lang="ts" setup>
+<script lang="ts" setup>
 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 props = defineProps({
   PieData: Object
 })
@@ -83,7 +84,7 @@ const initOption: any = reactive({
         params.marker +
         params.percent +
         '% (' +
-        params.value +
+        formatNumber(params.value) +
         ')</div>'
       return str
     }
@@ -114,7 +115,9 @@ const initOption: any = reactive({
     label: {
       show: true,
       // formatter: '{d}%({c})',
-      formatter: '{name|{d}%}\n{time|({c})}',
+      formatter: (params) => {
+        return `{name|${params.percent}%}\n {time|(${formatNumber(params.value)})}`
+      },
       alignTo: 'labelLine',
       rich: {
         name: {

src/views/Dashboard/src/components/RecentStatus.vue

@@ -83,7 +83,7 @@ const SubscribeShipments = (val: any) => {
           <span>{{ item.bookingNumber }}</span>
         </div>
       </div>
-      <div class="recent-header-right">
+      <!-- <div class="recent-header-right">
         <el-button
           class="recent_button"
           @click="SubscribeShipments(item)"
@@ -101,7 +101,7 @@ const SubscribeShipments = (val: any) => {
           </span>
           <span class="Subscribe">Subscribe</span>
         </el-button>
-      </div>
+      </div> -->
     </div>
     <div class="recent_content">
       <!-- 左 -->

src/views/Dashboard/src/components/RevenueChart.vue

@@ -5,6 +5,7 @@ import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
+import { formatNumber } from '@/utils/tools'
 
 const themeStore = useThemeStore()
 const props = defineProps({
@@ -158,7 +159,7 @@ const exportData = ({ filename }: any) => {
 const initOption = reactive({
   //标题
   title: {
-    text: bar_title.value || 'Total:', //主标题
+    text: bar_title.value || 'Total: 0', //主标题
     left: 19,
     top: 9.5,
     textStyle: {
@@ -198,11 +199,15 @@ const initOption = reactive({
           item.marker +
           item.seriesName +
           ': ' +
-          item.value +
+          formatNumber(item.value) +
           '</div>'
       })
       allnum = allnum.toFixed(2)
-      str += '<div style= ' + 'color:#FFF;font-family: Lato-Light>Total: ' + allnum + '</div>'
+      str +=
+        '<div style= ' +
+        'color:#FFF;font-family: Lato-Light>Total: ' +
+        formatNumber(allnum) +
+        '</div>'
       return str
     },
     textStyle: {
@@ -247,7 +252,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, // 最大值
@@ -285,7 +293,7 @@ const initOption = reactive({
         title: 'update',
         icon: 'image://' + updateIcon,
         onclick: function () {
-          let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[1]
+          let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
           exportData({ filename: filename })
         }
       }
@@ -342,7 +350,7 @@ const initChart = () => {
       initOption.series.forEach((item: any, index: any) => {
         if (item.name == Object.keys(trueObj)) {
           initOption.series[index].label.show = true
-          initOption.title.text = `Total: ${initOption.series[index].total}`
+          initOption.title.text = `Total: ${formatNumber(initOption.series[index].total)}`
         }
       })
     } else {

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/Dashboard/src/components/TopMap.vue

@@ -3,6 +3,7 @@ import { onMounted, ref, watch } from 'vue'
 import OriginIcon from '../image/hhh_2.png'
 import L from 'leaflet'
 import { useThemeStore } from '@/stores/modules/theme'
+import { formatNumber } from '@/utils/tools'
 
 const themeStore = useThemeStore()
 const MapDataList = ref([])
@@ -70,7 +71,7 @@ const addMarkersToMap = () => {
     <div class="popup-content" style="background-color:${item.color}">
       <div class="popup-content-text">
         <p class="popup-label" style="color:${item.textcolor}">${item.name}</p>
-        <p class="popup-value" style="color:${item.textcolor}">${item.value}</p>
+        <p class="popup-value" style="color:${item.textcolor}">${formatNumber(item.value)}</p>
       </div>
     </div>
   `

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

@@ -200,12 +200,7 @@ const notificationDrawer = ref(false)
           <span style="margin-top: -1px" class="font_family icon-icon_search_b"></span>
         </template>
       </el-input>
-      <div class="notice-icon" v-if="userStore.userInfo?.uname">
-        <!-- <span
-          @click="notificationDrawer = true"
-          class="font_family icon-icon_notice_b"
-          style="font-size: 18px"
-        ></span> -->
+      <!-- <div class="notice-icon" v-if="userStore.userInfo?.uname">
         <span class="unread-tip-icon"></span>
         <el-button
           style="height: 40px; width: 40px; margin-right: 0px"
@@ -214,7 +209,7 @@ const notificationDrawer = ref(false)
         >
           <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
         </el-button>
-      </div>
+      </div> -->
       <!-- 
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
       <el-popover
@@ -323,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/Header/components/NotificationDrawer.vue

@@ -91,7 +91,6 @@ const getNotificationList = () => {
     .then((res) => {
       if (res.code === 200) {
         notificationList.value = res.data
-        console.log(res, 'test')
       }
     })
     .finally(() => {

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

@@ -30,19 +30,19 @@ const getMenuList = () => {
   //     path: '/dashboard'
   //   },
   //   {
-  //     index: 2,
+  //     index: '2',
   //     label: 'Booking',
   //     icon: 'icon_booking__fill_b',
   //     path: '/booking'
   //   },
   //   {
-  //     index: 3,
+  //     index: '3',
   //     label: 'Tracking',
   //     icon: 'icon_tracking__fill_b',
   //     path: '/tracking'
   //   },
   //   {
-  //     index: 4,
+  //     index: '4',
   //     label: 'System Management',
   //     icon: 'icon_system__management_fill_b',
   //     type: 'list',
@@ -82,6 +82,14 @@ handler()
 
 const activeMenu = ref()
 activeMenu.value = (route.meta?.activeMenu as string) || route.path
+// 默认展开的菜单
+const openeds = computed(() => {
+  if (!activeMenu.value) return []
+  const parentItem = menuList.value?.find((item: any) =>
+    item.children?.some((child: any) => child.path === activeMenu.value)
+  )
+  return parentItem ? [parentItem.index] : []
+})
 
 // 未登录白名单
 const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password']
@@ -170,6 +178,8 @@ const jumpLink = (link: string) => {
       class="layout-menu"
       @select="changeRouter"
       :default-active="activeMenu"
+      :default-openeds="openeds"
+      :unique-opened="true"
       :collapse="isCollapse"
     >
       <template v-for="item in menuList" :key="item.index">
@@ -183,7 +193,7 @@ const jumpLink = (link: string) => {
           <span class="font_family" :class="[`icon-${item.icon}`]"></span>
           <template #title>{{ item.label }}</template>
         </el-menu-item>
-        <el-sub-menu v-else :index="item.path">
+        <el-sub-menu v-else :index="item.index">
           <template #title>
             <div class="font_family" style="font-size: 16px" :class="[`icon-${item.icon}`]"></div>
             <span>{{ item.label }}</span>

src/views/Login/src/components/ChangePasswordCard.vue

@@ -233,7 +233,7 @@ onUnmounted(() => {
       </div>
       <template #footer>
         <div class="license">
-          <span>Copyright © <span class="company">2024 KLN.</span> All rights reserved.</span>
+          <span>© KERRY LOGISTICS NETWORK LIMITED. ALL RIGHTS RESERVED.</span>
         </div>
       </template>
     </el-card>
@@ -257,7 +257,7 @@ onUnmounted(() => {
 }
 
 .login-card {
-  width: 400px;
+  width: 410px;
   border-radius: 12px;
   .title {
     display: flex;

src/views/Login/src/loginView.vue

@@ -393,7 +393,7 @@ const firstLoginTipsRef = ref()
       </div>
       <template #footer>
         <div class="license">
-          <span>Copyright © <span class="company">2024 KLN.</span> All rights reserved.</span>
+          <span>© KERRY LOGISTICS NETWORK LIMITED. ALL RIGHTS RESERVED.</span>
         </div>
       </template>
     </el-card>
@@ -448,7 +448,7 @@ const firstLoginTipsRef = ref()
       </div>
       <template #footer>
         <div class="license">
-          <span>Copyright © <span class="company">2024 KLN.</span> All rights reserved.</span>
+          <span>© KERRY LOGISTICS NETWORK LIMITED. ALL RIGHTS RESERVED.</span>
         </div>
       </template>
     </el-card>
@@ -485,7 +485,7 @@ const firstLoginTipsRef = ref()
 }
 
 .login-card {
-  width: 400px;
+  width: 410px;
 
   .card-title {
     display: flex;

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

@@ -6,7 +6,7 @@ import DownloadDialog from './components/DownloadDialog.vue'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { useThemeStore } from '@/stores/modules/theme'
-import { formatTimezone } from '@/utils/tools'
+import { formatTimezone, formatNumber } from '@/utils/tools'
 
 const themeStore = useThemeStore()
 
@@ -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>
@@ -388,7 +384,7 @@ defineExpose({
     </vxe-grid>
     <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
     <div class="bottom-pagination">
-      <div class="left-total-records">Total {{ pageInfo.total }}</div>
+      <div class="left-total-records">Total {{ formatNumber(pageInfo.total) }}</div>
       <div class="right-pagination">
         <el-pagination
           v-model:current-page="pageInfo.pageNo"

src/views/SystemMessage/src/components/SystemMessageDetail.vue

@@ -39,7 +39,7 @@ const notificationData: any = {
 const getNotificationList = () => {
   $api.getNotificationDetails().then((res) => {
     if (res.code === 200) {
-      console.log(res, 'test')
+      // console.log(res, 'test')
     }
   })
 }

src/views/SystemSettings/src/SystemSettings.vue

@@ -202,19 +202,19 @@ 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>
   <el-tabs v-model="TabActive" class="demo-tabs">
     <el-tab-pane label="Personal Profile" name="Personal Profile"><PersonalProfile /></el-tab-pane>
-    <el-tab-pane label="Subscribe Notifications" name="Subscribe Notifications">
+    <!-- <el-tab-pane label="Subscribe Notifications" name="Subscribe Notifications">
       <div class="subscribedTitle">Notification Events for Subscribed Shipments</div>
       <div class="SubscribeCollapse">
         <el-collapse v-model="CollapseActive" accordion @change="changeCollapse">
@@ -325,7 +325,7 @@ onMounted(() => {
         >
       </div>
       <MonitoringTable @gettabledatalength="gettabledatalength"></MonitoringTable>
-    </el-tab-pane>
+    </el-tab-pane> -->
   </el-tabs>
 </template>
 

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, formatNumber } 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
@@ -218,7 +217,7 @@ onMounted(() => {
     </vxe-grid>
   </div>
   <div class="pagination">
-    <span>Total {{ pageInfo.total }}</span>
+    <span>Total {{ formatNumber(pageInfo.total) }}</span>
     <el-pagination
       v-model:current-page="pageInfo.pageNo"
       v-model:page-size="pageInfo.pageSize"

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': [
@@ -81,8 +77,9 @@ const initNumbersFormat = () => {
 }
 const numbersFormat = ref(initNumbersFormat())
 
+const loading = ref(false)
 const saveConfig = (model: string) => {
-  console.log(123123)
+  loading.value = true
   let params = {}
   if (model === 'profile') {
     params = {
@@ -97,34 +94,37 @@ const saveConfig = (model: string) => {
       numbers_format: numbersFormat.value
     }
   }
-  console.log(params, 'value')
-  $api.saveUserInfo(params).then((res: any) => {
-    console.log(res, 'res')
-    if (res.code === 200) {
-      const updatedInfo =
-        model === 'profile'
-          ? {
-              ...userStore.userInfo,
-              first_name: form.firstName,
-              last_name: form.lastName
-            }
-          : {
-              ...userStore.userInfo,
-              date_format: monthFormat.value,
-              numbers_format: numbersFormat.value
-            }
+  $api
+    .saveUserInfo(params)
+    .then((res: any) => {
+      if (res.code === 200) {
+        const updatedInfo =
+          model === 'profile'
+            ? {
+                ...userStore.userInfo,
+                first_name: form.firstName,
+                last_name: form.lastName
+              }
+            : {
+                ...userStore.userInfo,
+                date_format: monthFormat.value,
+                numbers_format: numbersFormat.value
+              }
 
-      userStore.setUserInfo(updatedInfo)
-      ElMessage.success('Save successfully')
-    } else {
-      ElMessage.error('Save failed')
-    }
-  })
+        userStore.setUserInfo(updatedInfo)
+        ElMessage.success('Save successfully')
+      } else {
+        ElMessage.error('Save failed')
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
 
 <template>
-  <div class="personal-profile">
+  <div class="personal-profile" v-vloading="loading">
     <div class="basic-information">
       <div class="title">Basic Information</div>
       <div class="content">
@@ -166,7 +166,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>
@@ -231,7 +235,7 @@ const saveConfig = (model: string) => {
                   style="padding: 0 40px"
                   class="el-button--dark save-icon"
                   size="large"
-                  >Save1222</el-button
+                  >Save</el-button
                 >
               </el-col>
             </el-row>
@@ -331,7 +335,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;
@@ -343,7 +347,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);
         }
       }
@@ -351,7 +355,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/TrackingDetail.vue

@@ -167,7 +167,7 @@ const SubscribeShipments = () => {
             >AMS/ISF</el-button
           >
 
-          <el-button
+          <!-- <el-button
             class="recent_button"
             @click="SubscribeShipments"
             :class="is_subscribe ? 'IsSubscribe' : ''"
@@ -183,7 +183,7 @@ const SubscribeShipments = () => {
               </svg>
             </span>
             <span class="Subscribe">Subscribe</span>
-          </el-button>
+          </el-button> -->
         </div>
       </div>
       <div class="detail-info">

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 }">
@@ -675,7 +671,7 @@ defineExpose({
     </vxe-grid>
     <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
     <div class="bottom-pagination">
-      <div class="left-total-records">Total {{ pageInfo.total }}</div>
+      <div class="left-total-records">Total {{ formatNumber(pageInfo.total) }}</div>
       <div class="right-pagination">
         <el-pagination
           v-model:current-page="pageInfo.pageNo"

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

@@ -3,7 +3,11 @@ 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'
+import dayjs from 'dayjs'
 
+const userStore = useUserStore()
+const datePickerFormat = `${userStore.dateFormat} HH:mm:ss`
 const route = useRoute()
 const router = useRouter()
 
@@ -285,7 +289,7 @@ const isVerification = (value) => {
   }
 }
 const formatRowTime = (time: any) => {
-  const result = formatTimezone(time)
+  const result = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
   return result === '--' ? '' : result
 }
 const handleSave = () => {
@@ -512,8 +516,9 @@ const stopScroll = (evt) => {
                 class="vgm-date-picker"
                 style="width: 190px"
                 placeholder="Pick a Date"
-                format="MMM-DD-YYYY HH:mm:ss"
-                date-format="MMM-DD-YYYY"
+                :format="datePickerFormat"
+                value-format="YYYY-MM-DD hh:mm:ss"
+                :date-format="userStore.dateFormat"
                 time-format="HH:mm:ss"
               />
             </template>