CN-936 开发appearance页面
This commit is contained in:
hyx
@@ -76,5 +76,6 @@
|
|||||||
@import './components/common/chart-tab';
|
@import './components/common/chart-tab';
|
||||||
|
|
||||||
@import 'views/administration/AdministrationTabs';
|
@import 'views/administration/AdministrationTabs';
|
||||||
|
@import 'views/administration/Appearance.scss';
|
||||||
|
|
||||||
@import 'views/setting/knowledgeBase';
|
@import 'views/setting/knowledgeBase';
|
||||||
|
|||||||
@@ -0,0 +1,63 @@
|
|||||||
|
.appearance{
|
||||||
|
height: calc(100% - 100px);
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
.appearance-form {
|
||||||
|
padding-top:40px;
|
||||||
|
padding-left:100px;
|
||||||
|
background-color: white;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
//width: 600px;
|
||||||
|
.el-input {
|
||||||
|
width:600px;
|
||||||
|
}
|
||||||
|
.el-form .el-form-item .el-form-item__label {
|
||||||
|
padding-bottom: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.edit-appearance-base__footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100px;
|
||||||
|
margin-top: 3px;
|
||||||
|
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
|
||||||
|
|
||||||
|
.footer__btn {
|
||||||
|
margin: 0 10px;
|
||||||
|
height: 30px;
|
||||||
|
min-width: 74px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: white;
|
||||||
|
background-color: #38ACD2;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
outline: none;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color linear .2s, color linear .1s;
|
||||||
|
}
|
||||||
|
.footer__btn:hover:not(.footer__btn--disabled) {
|
||||||
|
background-color: lighten(#38ACD2, 10%);
|
||||||
|
}
|
||||||
|
.footer__btn--light {
|
||||||
|
background-color: #F5F6F7;
|
||||||
|
border: 1px solid $--border-color-primary;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
|
||||||
|
background-color: white;
|
||||||
|
border-color: lighten(#38ACD2, 40%);
|
||||||
|
color: #38ACD2;
|
||||||
|
}
|
||||||
|
.footer__btn--disabled {
|
||||||
|
opacity: .6;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -67,6 +67,11 @@ const routes = [
|
|||||||
name: 'OperationLog',
|
name: 'OperationLog',
|
||||||
path: '/administration/operationLog',
|
path: '/administration/operationLog',
|
||||||
component: () => import('@/views/administration/OperationLog')
|
component: () => import('@/views/administration/OperationLog')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Appearance',
|
||||||
|
path: '/administration/appearance',
|
||||||
|
component: () => import('@/views/administration/Appearance')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
188
src/views/administration/Appearance.vue
Normal file
188
src/views/administration/Appearance.vue
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<div class="appearance" :class="from">
|
||||||
|
<div class="appearance-form">
|
||||||
|
<el-form ref="appearanceForm" :model="appearanceObject" label-position="top" label-width="120px">
|
||||||
|
<el-form-item :label="$t('config.appearance.dateFormat')" prop="dateFormat">
|
||||||
|
<el-select id="appearance-dateFormat"
|
||||||
|
v-model="appearanceObject.dateFormat"
|
||||||
|
collapse-tags
|
||||||
|
placeholder=" "
|
||||||
|
popper-class="right-box-select-dropdown right-box-select-report "
|
||||||
|
size="small">
|
||||||
|
<template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
|
||||||
|
<el-option :label="dateFormat.label" :value="dateFormat.value">
|
||||||
|
<span style="float: left">{{ dateFormat.label }}</span>
|
||||||
|
<span style="float: right;">{{ dateFormat.example }}</span>
|
||||||
|
</el-option>
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t('config.appearance.lang')" prop="lang">
|
||||||
|
<el-select id="appearance-lang"
|
||||||
|
v-model="appearanceObject.lang"
|
||||||
|
collapse-tags
|
||||||
|
placeholder=" "
|
||||||
|
popper-class="right-box-select-dropdown right-box-select-report "
|
||||||
|
size="small">
|
||||||
|
<template v-for="lang in langList" :key="lang.id">
|
||||||
|
<el-option :label="lang.label" :value="lang.value"></el-option>
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t('config.appearance.timezone')" prop="timezone">
|
||||||
|
<el-select id="appearance-timezone"
|
||||||
|
v-model="appearanceObject.timezone"
|
||||||
|
collapse-tags
|
||||||
|
filterable
|
||||||
|
placeholder=" "
|
||||||
|
popper-class="right-box-select-dropdown right-box-select-report "
|
||||||
|
size="small">
|
||||||
|
<template v-for="timezone in timezoneList" :key="timezone.id">
|
||||||
|
<el-option :label="timezone.value" :value="timezone.value">
|
||||||
|
<span style="float: left">{{ timezone.value }}</span>
|
||||||
|
<span style="float: right;">{{ timezone.remark}}</span>
|
||||||
|
</el-option>
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="edit-appearance-base__footer">
|
||||||
|
<button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
|
||||||
|
<loading size="small" :loading="blockOperation.save"></loading>
|
||||||
|
<span>{{$t('overall.save')}}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { api,getDictList } from '@/utils/api'
|
||||||
|
import { get, put } from '@/utils/http'
|
||||||
|
import { storageKey } from '@/utils/constants'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Appearance',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
url: api.appearance,
|
||||||
|
appearanceObject: { // 空白对象
|
||||||
|
dateFormat: '',
|
||||||
|
lang: '',
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
this.timezoneList = await getDictList({ type: 'timezoneList',pageSize: -1 })
|
||||||
|
if (this.timezoneList && this.timezoneList.length > 0) {
|
||||||
|
this.timezoneList.forEach(mapData => {
|
||||||
|
let remark = Number(mapData.remark)/3600000 //转换为小
|
||||||
|
mapData.timezoneOffset = remark
|
||||||
|
let hour = Math.abs(parseInt(remark))
|
||||||
|
let remarkStr = remark.toString()
|
||||||
|
let minute = 0
|
||||||
|
if(remarkStr.indexOf('.') > -1){
|
||||||
|
minute = Math.abs(Number(remarkStr.substring(remarkStr.indexOf('.')))*60)
|
||||||
|
}
|
||||||
|
let str = ''
|
||||||
|
if(hour<10){
|
||||||
|
str = '0'+hour
|
||||||
|
}else {
|
||||||
|
str = hour
|
||||||
|
}
|
||||||
|
str += ':'
|
||||||
|
if(minute<10){
|
||||||
|
str += '0'+minute
|
||||||
|
}else {
|
||||||
|
str += minute
|
||||||
|
}
|
||||||
|
if(remark > 0){
|
||||||
|
mapData.remark = 'UTC+'+str
|
||||||
|
}else if(remark === 0){
|
||||||
|
mapData.remark = 'UTC'
|
||||||
|
}else {
|
||||||
|
mapData.remark = 'UTC-'+str
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
get(this.url, { pageSize: -1 }).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.appearanceObject = response.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
save () {
|
||||||
|
if (this.blockOperation.save) { return }
|
||||||
|
this.blockOperation.save = true
|
||||||
|
put(this.url, this.appearanceObject).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.message)
|
||||||
|
}
|
||||||
|
}).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
|
||||||
|
if (this.appearanceObject.dateFormat !== localStorage.getItem(storageKey.dateFormat)) {
|
||||||
|
localStorage.setItem(storageKey.dateFormat, this.appearanceObject.dateFormat)
|
||||||
|
}
|
||||||
|
if (this.appearanceObject.timezone !== localStorage.getItem(storageKey.sysTimezone)) {
|
||||||
|
localStorage.setItem(storageKey.sysTimezone, this.appearanceObject.timezone)
|
||||||
|
}
|
||||||
|
let timezone = this.timezoneList.find(mapData => mapData.value === this.appearanceObject.timezone)
|
||||||
|
if (timezone.timezoneOffset !== localStorage.getItem(storageKey.timezoneOffset)) {
|
||||||
|
localStorage.setItem(storageKey.timezoneOffset, timezone.timezoneOffset)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user