CN-936 开发appearance页面:保存逻辑调整，及timezoneOffset设置方式修改

src/components/table/report/ReportTable.vue

@@ -292,7 +292,7 @@ export default {
       loadingTableId: '',
       loadingPreviewId: '',
       downDataList: [],
-      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
+      disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
       // pageObj: {
       //   pageNo: 1,
       //   pageSize: 20,
@@ -542,9 +542,9 @@ export default {
         // this.selectIds = selectIds
       }
       this.batchDeleteObjs = objs
-      if(objs.length > 1) {
+      if (objs.length > 1) {
         this.disableEdit = true
-      }else {
+      } else {
         this.disableEdit = false
       }
     },
@@ -566,9 +566,9 @@ export default {
       }
 
       this.batchDeleteObjs = objs
-      if(objs.length > 1) {
+      if (objs.length > 1) {
         this.disableEdit = true
-      }else {
+      } else {
         this.disableEdit = false
       }
 

src/mixins/data-list.js

@@ -37,7 +37,7 @@ export default {
       tableData: [],
       scrollbarWrap: null,
       delFlag: false,
-      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
+      disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
       operationWidth: '165' // 操作列宽
     }
   },
@@ -75,9 +75,9 @@ export default {
     },
     selectionChange (objs) {
       this.batchDeleteObjs = objs
-      if(this.batchDeleteObjs.length > 1) {
+      if (this.batchDeleteObjs.length > 1) {
         this.disableEdit = true
-      }else {
+      } else {
         this.disableEdit = false
       }
     },
@@ -129,18 +129,18 @@ export default {
       })
     },
     delBatch () {
-      let ids = []
+      const ids = []
-      if(this.batchDeleteObjs && this.batchDeleteObjs.length > 0){
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
-        this.batchDeleteObjs.forEach(item =>{
+        this.batchDeleteObjs.forEach(item => {
           ids.push(item.id)
         })
       }
-      if(ids.length === 0){
+      if (ids.length === 0) {
-        this.$alert(this.$t('tip.pleaseSelect'),{
+        this.$alert(this.$t('tip.pleaseSelect'), {
           confirmButtonText: this.$t('tip.yes'),
-          type:'warning'
+          type: 'warning'
         })
-      }else {
+      } else {
         this.$confirm(this.$t('tip.confirmDelete'), {
           confirmButtonText: this.$t('tip.yes'),
           cancelButtonText: this.$t('tip.no'),
@@ -199,13 +199,13 @@ export default {
         }
       })
     },
-    editSelectRecord(){
+    editSelectRecord () {
-      if(this.batchDeleteObjs.length === 0){
+      if (this.batchDeleteObjs.length === 0) {
-        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
           confirmButtonText: this.$t('tip.yes'),
-          type:'warning'
+          type: 'warning'
         })
-      }else {
+      } else {
         get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
           if (response.code === 200) {
             this.object = response.data

src/utils/api.js

@@ -20,7 +20,7 @@ export const api = {
   login: '/sys/login',
   // user
   user: '/sys/user',
-  timezone:'/sys/timezones',
+  timezone: '/sys/timezones',
   // 获取配置
   config: '/sys/config',
   // role

src/utils/date-util.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import {storageKey} from '@/utils/constants'
+import { storageKey } from '@/utils/constants'
 
 // 将时间转化为秒
 export function getSecond (time) {

src/views/administration/Appearance.vue

@@ -57,137 +57,136 @@
   </div>
 </template>
 <script>
-  import { api,getDictList } from '@/utils/api'
+import { api } from '@/utils/api'
-  import { get, put } from '@/utils/http'
+import { storageKey } from '@/utils/constants'
-  import { storageKey } from '@/utils/constants'
+import axios from 'axios'
 
-
+export default {
-  export default {
+  name: 'Appearance',
-    name: 'Appearance',
+  data () {
-    data () {
+    return {
-      return {
+      url: api.appearance,
-        url: api.appearance,
+      appearanceObject: { // 空白对象
-        appearanceObject: { // 空白对象
+        date_format: '',
-          date_format: '',
+        lang: '',
-          lang: '',
+        timezone: ''
-          timezone: ''
-        },
-        timezoneList:[],
-        dateFormatList:[
-          {
-            id:1,
-            label:'DD/MM/YYYY HH:mm:ss',
-            value:'DD/MM/YYYY HH:mm:ss',
-            example:'20/03/2023 09:30:38'
-          },
-          {
-            id:2,
-            label:'MM/DD/YYYY HH:mm:ss',
-            value:'MM/DD/YYYY HH:mm:ss',
-            example:'03/20/2023 09:30:38'
-          },
-          {
-            id:3,
-            label:'YYYY-MM-DD HH:mm:ss',
-            value:'YYYY-MM-DD HH:mm:ss',
-            example:'2023-03-20 09:30:38'
-          }
-        ],
-        langList:[
-          {
-            id:1,
-            label:'English',
-            value:'en'
-          },
-          {
-            id:2,
-            label:'中文',
-            value:'zh'
-          }
-        ]
-      }
-    },
-    mounted () {
-      this.initData()
-    },
-    methods:{
-      async initData () {
-        this.dateFormatList.forEach(date => {
-          date.example = window.$dayJs(new Date()).tz().format(date.value)
-        })
-        await get(api.timezone).then(response => {
-          if (response.code === 200) {
-            this.timezoneList = response.data
-          }
-        })
-
-        if (this.timezoneList && this.timezoneList.length > 0) {
-          this.timezoneList.forEach(mapData => {
-            let offset = Number(mapData.offset)/3600000 //转换为小
-            mapData.timezoneOffset = offset
-            let hour = Math.abs(parseInt(offset))
-            let offsetStr = offset.toString()
-            let minute = 0
-            if(offsetStr.indexOf('.') > -1){
-              minute = Math.abs(Number(offsetStr.substring(offsetStr.indexOf('.')))*60)
-            }
-            let str = ''
-            if(hour<10){
-              str = '0'+hour
-            }else {
-              str = hour
-            }
-            str += ':'
-            if(minute<10){
-              str += '0'+minute
-            }else {
-              str += minute
-            }
-            if(offset > 0){
-              mapData.offset = 'UTC+'+str
-            }else if(offset === 0){
-              mapData.offset = 'UTC'
-            }else {
-              mapData.offset = 'UTC-'+str
-            }
-          })
-        }
-        get(this.url, { pageSize: -1 }).then(response => {
-          if (response.code === 200) {
-            this.appearanceObject = response.data
-          }
-        })
       },
-      save () {
+      timezoneList: [],
-        if (this.blockOperation.save) { return }
+      dateFormatList: [
-        this.blockOperation.save = true
+        {
-        put(this.url, this.appearanceObject).then(response => {
+          id: 1,
-          if (response.code === 200) {
+          label: 'DD/MM/YYYY HH:mm:ss',
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          value: 'DD/MM/YYYY HH:mm:ss',
-          } else {
+          example: '20/03/2023 09:30:38'
-            this.$message.error(response.message)
+        },
+        {
+          id: 2,
+          label: 'MM/DD/YYYY HH:mm:ss',
+          value: 'MM/DD/YYYY HH:mm:ss',
+          example: '03/20/2023 09:30:38'
+        },
+        {
+          id: 3,
+          label: 'YYYY-MM-DD HH:mm:ss',
+          value: 'YYYY-MM-DD HH:mm:ss',
+          example: '2023-03-20 09:30:38'
+        }
+      ],
+      langList: [
+        {
+          id: 1,
+          label: 'English',
+          value: 'en'
+        },
+        {
+          id: 2,
+          label: '中文',
+          value: 'zh'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {
+      this.dateFormatList.forEach(date => {
+        date.example = window.$dayJs(new Date()).tz().format(date.value)
+      })
+
+      axios.get(api.timezone).then(response => {
+        if (response.data.code === 200) {
+          this.timezoneList = response.data.data
+          if (this.timezoneList && this.timezoneList.length > 0) {
+            this.timezoneList.forEach(mapData => {
+              const offset = Number(mapData.offset) / 3600000 // 转换为小
+              mapData.timezoneOffset = offset
+              const hour = Math.abs(parseInt(offset))
+              const offsetStr = offset.toString()
+              let minute = 0
+              if (offsetStr.indexOf('.') > -1) {
+                minute = Math.abs(Number(offsetStr.substring(offsetStr.indexOf('.'))) * 60)
+              }
+              let str = ''
+              if (hour < 10) {
+                str = '0' + hour
+              } else {
+                str = hour
+              }
+              str += ':'
+              if (minute < 10) {
+                str += '0' + minute
+              } else {
+                str += minute
+              }
+              if (offset > 0) {
+                mapData.offset = 'UTC+' + str
+              } else if (offset === 0) {
+                mapData.offset = 'UTC'
+              } else {
+                mapData.offset = 'UTC-' + str
+              }
+            })
           }
-        }).catch(e => {
+        }
-          console.error(e)
+      })
-          if (e.response && e.response.message) {
+
-            this.$message.error(e.response.message)
+      axios.get(this.url, { pageSize: -1 }).then(response => {
-          } else {
+        if (response.data.code === 200) {
-            this.$message.error('Something went wrong...')
+          this.appearanceObject = response.data.data
-          }
+        }
-        }).finally(() => {
+      })
-          this.blockOperation.save = false
+    },
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+      axios.put(this.url, this.appearanceObject).then(response => {
+        if (response.data.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           if (this.appearanceObject.date_format !== localStorage.getItem(storageKey.dateFormat)) {
             localStorage.setItem(storageKey.dateFormat, this.appearanceObject.date_format)
           }
           if (this.appearanceObject.timezone !== localStorage.getItem(storageKey.sysTimezone)) {
             localStorage.setItem(storageKey.sysTimezone, this.appearanceObject.timezone)
+            window.$dayJs.tz.setDefault(this.appearanceObject.timezone)
+            localStorage.setItem(storageKey.timezoneOffset, window.$dayJs.tz().utcOffset() / 60)
+            localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
           }
-          let timezone = this.timezoneList.find(mapData => mapData.name === this.appearanceObject.timezone)
+        } else {
-          if (timezone.timezoneOffset !== localStorage.getItem(storageKey.timezoneOffset)) {
+          this.$message.error(response.message)
-            localStorage.setItem(storageKey.timezoneOffset, timezone.timezoneOffset)
+        }
-          }
+      }).catch(e => {
-        })
+        console.error(e)
-      }
+        if (e.response && e.response.message) {
+          this.$message.error(e.response.message)
+        } else {
+          this.$message.error('Something went wrong...')
+        }
+      }).finally(() => {
+        this.blockOperation.save = false
+      })
     }
   }
+}
 </script>

src/views/report/Report.vue

@@ -295,13 +295,13 @@ export default {
       this.rightBox.show = true
     },
     editReport () {
-      if(this.batchDeleteObjs.length === 0){
+      if (this.batchDeleteObjs.length === 0) {
-        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
           confirmButtonText: this.$t('tip.yes'),
-          type:'warning'
+          type: 'warning'
         })
-      }else {
+      } else {
-        let curRecord = this.batchDeleteObjs[0]
+        const curRecord = this.batchDeleteObjs[0]
         this.initConfig(curRecord)
         this.object = curRecord
         this.rightBox.show = true