feat: 时间的相关处理(20%)

src/App.vue

@@ -13,6 +13,14 @@ export default {
     get(`${process.env.BASE_URL}config.json?Timestamp=${new Date().getTime()}`).then(config => {
       axios.defaults.baseURL = config.baseUrl
     })
+    //处理刷新后  $dayJs的时区变为默认的问题
+    const timezone = localStorage.getItem('cn-sys-timezone') || ''
+    if (timezone){
+      $dayJs.tz.setDefault(timezone)
+    } else {
+      $dayJs.tz.setDefault()
+    }
   }
+
 }
 </script>

src/components/common/pagination.vue

@@ -7,11 +7,11 @@
     .pagination-top .pagination {
         padding-top: 0;
     }
-    .pagination  /deep/ .el-pagination {
+    .pagination  :deep(.el-pagination) {
         max-height: 42px;
         padding-right: 0;
     }
-    .pagination-size-select /deep/ .el-input--mini .el-input__inner{
+    .pagination-size-select :deep(.el-input--mini .el-input__inner){
         height: 20px;
         line-height: 20px;
         margin: 5px 0 5px 5px;
@@ -19,7 +19,7 @@
     .pagination-size-select input{
 
     }
-    /deep/ .el-pager li, /deep/ .el-pagination .btn-next,/deep/  .el-pagination .btn-prev {
+    :deep(.el-pager li), :deep(.el-pagination .btn-next),:deep( .el-pagination .btn-prev ){
         margin:5px 5px 0px 5px;
         padding: 0 4px;
         font-size: 13px;
@@ -33,13 +33,13 @@
         border-radius: 2px;
         border-radius: 2px;
     }
-    /deep/ .el-pagination .el-pager li.btn-quicknext, /deep/  .el-pager li.btn-quickprev {
+    :deep(.el-pagination .el-pager li.btn-quicknext), :deep( .el-pager li.btn-quickprev) {
         line-height: 20px;
     }
-    /deep/ .el-pagination .el-pager .more::before {
+    :deep(.el-pagination .el-pager .more::before ){
         line-height: 20px;
     }
-    /deep/  .el-pagination .el-pager .more {
+    :deep( .el-pagination .el-pager .more) {
         background-color: $content-right-background-color;
     }
     .btn-next, .btn-prev {
@@ -48,35 +48,35 @@
     .pagination input {
         background-color: $content-right-background-color !important;
     }
-    /deep/ .el-pager li.number{
+    :deep(.el-pager li.number){
         font-family: NotoSansSC-Regular;
         color: #666666;
         letter-spacing: 0;
         font-weight:normal;
         background-color: $content-right-background-color;
     }
-    /deep/  .el-pager li.number.active{
+    :deep( .el-pager li.number.active){
         font-family: NotoSansSC-Regular;
         color: #FFFFFF;
         letter-spacing: 0;
     }
 
-    /deep/  .el-pagination .el-pager li.active {
+    :deep( .el-pagination .el-pager li.active) {
         background-color: $global-text-color-active;
         border-radius: 2px;
         border-radius: 2px;
     }
-    /deep/  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+    :deep( .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover) {
         font-family: NotoSansSC-Regular;
         color: #666666;
         letter-spacing: 0;
         font-weight:normal;
     }
-    /deep/  .el-pagination__sizes .el-input .el-input__inner,/deep/  .el-pagination__editor.el-input .el-input__inner{
+    :deep( .el-pagination__sizes .el-input .el-input__inner),:deep( .el-pagination__editor.el-input .el-input__inner){
         height: 20px;
         border-color: rgba(154,154,154,0.20);
     }
-    /deep/ .el-pagination__sizes .el-input .el-input__inner:hover{
+    :deep(.el-pagination__sizes .el-input .el-input__inner:hover){
         border-color: rgba(154,154,154,0.20);
     }
 </style>

src/main.js

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import _ from 'lodash'
-
 import router from '@/router'
 import store from '@/store'
 import App from '@/App.vue'
@@ -11,8 +10,19 @@ import i18n from '@/i18n'
 import '@/assets/css/main.scss' // 样式入口
 
 import ElementPlus from 'element-plus'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc' // dependent on utc plugin
+import timezone from 'dayjs/plugin/timezone'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import weekday from 'dayjs/plugin/weekday'
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(advancedFormat)
+dayjs.extend(weekday)
+window.$dayJs = dayjs
 
 const app = createApp(App)
+
 app.use(router)
 app.use(store)
 app.use(ElementPlus)

src/mixins/common.js

@@ -3,6 +3,7 @@ import { hasButton } from '@/permission'
 export default {
   data () {
     return {
+      dayJs: $dayJs,
       blockOperation: {
         save: false,
         import: false,

src/store/modules/user.js

@@ -1,7 +1,9 @@
 import { post } from '@/utils/http'
 import router from '@/router'
 import { sortByOrderNum, getWelcomeMenu } from '@/permission'
-import moment from 'moment-timezone'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc' // dependent on utc plugin
+dayjs.extend(utc)
 import bus from '@/utils/bus'
 import { ElMessage } from 'element-plus'
 
@@ -42,14 +44,15 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
+      // res.data.timezone = 'America/New_York'
+      $dayJs.tz.setDefault(res.data.timezone)
       sessionStorage.setItem('cn-token', res.data.token)
       localStorage.setItem('cn-sys-name', res.data.systemName)
       if (res.systemLogo) {
         localStorage.setItem('cn-sys-logo', res.data.systemLogo)
       }
       localStorage.setItem('cn-sys-timezone', res.data.timezone)
-      localStorage.setItem('timezone-offset', moment.tz(res.data.timezone).format('Z'))
-
+      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset()/60)
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
         const menuList = sortByOrderNum(res.data.menus)
         store.commit('setMenuList', menuList)