mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-12-05 21:59:29 +08:00
[Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833)
This commit is contained in:
parent
a9c9eb00d0
commit
5aeb753ae8
@ -20,6 +20,7 @@ import styles from './index.module.scss'
|
|||||||
import { NMenu } from 'naive-ui'
|
import { NMenu } from 'naive-ui'
|
||||||
import Logo from '../logo'
|
import Logo from '../logo'
|
||||||
import Locales from '../locales'
|
import Locales from '../locales'
|
||||||
|
import Timezone from '../timezone'
|
||||||
import User from '../user'
|
import User from '../user'
|
||||||
import Theme from '../theme'
|
import Theme from '../theme'
|
||||||
import { useMenuClick } from './use-menuClick'
|
import { useMenuClick } from './use-menuClick'
|
||||||
@ -36,6 +37,10 @@ const Navbar = defineComponent({
|
|||||||
type: Array as PropType<any>,
|
type: Array as PropType<any>,
|
||||||
default: []
|
default: []
|
||||||
},
|
},
|
||||||
|
timezoneOptions: {
|
||||||
|
type: Array as PropType<any>,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
userDropdownOptions: {
|
userDropdownOptions: {
|
||||||
type: Array as PropType<any>,
|
type: Array as PropType<any>,
|
||||||
default: []
|
default: []
|
||||||
@ -62,6 +67,7 @@ const Navbar = defineComponent({
|
|||||||
<div class={styles.settings}>
|
<div class={styles.settings}>
|
||||||
<Theme />
|
<Theme />
|
||||||
<Locales localesOptions={this.localesOptions} />
|
<Locales localesOptions={this.localesOptions} />
|
||||||
|
<Timezone timezoneOptions={this.timezoneOptions} />
|
||||||
<User userDropdownOptions={this.userDropdownOptions} />
|
<User userDropdownOptions={this.userDropdownOptions} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -0,0 +1,20 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
@ -0,0 +1,64 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { defineComponent, ref, PropType } from 'vue'
|
||||||
|
import { NIcon, NButton, NPopselect } from 'naive-ui'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import { DownOutlined } from '@vicons/antd'
|
||||||
|
import { useDropDown } from './use-dropdown'
|
||||||
|
import { useTimezoneStore } from '@/store/timezone/timezone'
|
||||||
|
|
||||||
|
const Timezone = defineComponent({
|
||||||
|
name: 'Timezone',
|
||||||
|
props: {
|
||||||
|
timezoneOptions: {
|
||||||
|
type: Array as PropType<any>,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const timezoneStore = useTimezoneStore()
|
||||||
|
const chooseVal = ref(
|
||||||
|
props.timezoneOptions.filter(
|
||||||
|
(item: { value: string }) => item.value === timezoneStore.getTimezone
|
||||||
|
)[0].label
|
||||||
|
)
|
||||||
|
|
||||||
|
const { handleSelect } = useDropDown(chooseVal)
|
||||||
|
|
||||||
|
return { handleSelect, chooseVal }
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<NPopselect
|
||||||
|
options={this.timezoneOptions}
|
||||||
|
trigger='click'
|
||||||
|
scrollable
|
||||||
|
onUpdateValue={this.handleSelect}
|
||||||
|
>
|
||||||
|
<NButton text>
|
||||||
|
{this.chooseVal}
|
||||||
|
<NIcon class={styles.icon}>
|
||||||
|
<DownOutlined />
|
||||||
|
</NIcon>
|
||||||
|
</NButton>
|
||||||
|
</NPopselect>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Timezone
|
@ -0,0 +1,52 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { updateUser } from '@/service/modules/users'
|
||||||
|
import { useTimezoneStore } from '@/store/timezone/timezone'
|
||||||
|
import { useUserStore } from '@/store/user/user'
|
||||||
|
import type { UserInfoRes } from '@/service/modules/users/types'
|
||||||
|
|
||||||
|
export function useDropDown(chooseVal: any) {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const timezoneStore = useTimezoneStore()
|
||||||
|
|
||||||
|
const userInfo = userStore.userInfo as UserInfoRes
|
||||||
|
|
||||||
|
const handleSelect = (value: string) => {
|
||||||
|
updateUser({
|
||||||
|
userPassword: '',
|
||||||
|
id: userInfo.id,
|
||||||
|
userName: '',
|
||||||
|
tenantId: userInfo.tenantId,
|
||||||
|
email: '',
|
||||||
|
phone: userInfo.phone,
|
||||||
|
state: userInfo.state,
|
||||||
|
timeZone: value
|
||||||
|
}).then(() => {
|
||||||
|
chooseVal.value = value
|
||||||
|
timezoneStore.setTimezone(value as string)
|
||||||
|
window.$message.success(t('profile.timezone_success'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleSelect
|
||||||
|
}
|
||||||
|
}
|
@ -107,6 +107,7 @@ const Content = defineComponent({
|
|||||||
onHandleMenuClick={this.getSideMenuOptions}
|
onHandleMenuClick={this.getSideMenuOptions}
|
||||||
headerMenuOptions={this.headerMenuOptions}
|
headerMenuOptions={this.headerMenuOptions}
|
||||||
localesOptions={this.localesOptions}
|
localesOptions={this.localesOptions}
|
||||||
|
timezoneOptions={this.timezoneOptions}
|
||||||
userDropdownOptions={this.userDropdownOptions}
|
userDropdownOptions={this.userDropdownOptions}
|
||||||
/>
|
/>
|
||||||
</NLayoutHeader>
|
</NLayoutHeader>
|
||||||
|
@ -50,6 +50,7 @@ import {
|
|||||||
} from '@vicons/antd'
|
} from '@vicons/antd'
|
||||||
import { useMenuStore } from '@/store/menu/menu'
|
import { useMenuStore } from '@/store/menu/menu'
|
||||||
import { useUserStore } from '@/store/user/user'
|
import { useUserStore } from '@/store/user/user'
|
||||||
|
import { timezoneList } from '@/utils/timezone'
|
||||||
import type { UserInfoRes } from '@/service/modules/users/types'
|
import type { UserInfoRes } from '@/service/modules/users/types'
|
||||||
|
|
||||||
export function useDataList() {
|
export function useDataList() {
|
||||||
@ -72,9 +73,13 @@ export function useDataList() {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const timezoneOptions = () =>
|
||||||
|
timezoneList.map((item) => ({ label: item, value: item }))
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
isShowSide: false,
|
isShowSide: false,
|
||||||
localesOptions,
|
localesOptions,
|
||||||
|
timezoneOptions: timezoneOptions(),
|
||||||
userDropdownOptions: [],
|
userDropdownOptions: [],
|
||||||
menuOptions: [],
|
menuOptions: [],
|
||||||
headerMenuOptions: [],
|
headerMenuOptions: [],
|
||||||
|
@ -136,7 +136,8 @@ const profile = {
|
|||||||
phone_tips: 'Please enter your phone',
|
phone_tips: 'Please enter your phone',
|
||||||
state_tips: 'Please choose your state',
|
state_tips: 'Please choose your state',
|
||||||
enable: 'Enable',
|
enable: 'Enable',
|
||||||
disable: 'Disable'
|
disable: 'Disable',
|
||||||
|
timezone_success: 'Time zone updated successful'
|
||||||
}
|
}
|
||||||
|
|
||||||
const monitor = {
|
const monitor = {
|
||||||
|
@ -135,7 +135,8 @@ const profile = {
|
|||||||
phone_tips: '请输入手机号',
|
phone_tips: '请输入手机号',
|
||||||
state_tips: '请选择状态',
|
state_tips: '请选择状态',
|
||||||
enable: '启用',
|
enable: '启用',
|
||||||
disable: '禁用'
|
disable: '禁用',
|
||||||
|
timezone_success: '时区更新成功'
|
||||||
}
|
}
|
||||||
|
|
||||||
const monitor = {
|
const monitor = {
|
||||||
|
@ -35,6 +35,7 @@ interface UserReq {
|
|||||||
phone?: string
|
phone?: string
|
||||||
queue?: string
|
queue?: string
|
||||||
state?: number
|
state?: number
|
||||||
|
timeZone?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IdReq {
|
interface IdReq {
|
||||||
|
37
dolphinscheduler-ui-next/src/store/timezone/timezone.ts
Normal file
37
dolphinscheduler-ui-next/src/store/timezone/timezone.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { timezoneStore, Timezone } from './types'
|
||||||
|
|
||||||
|
export const useTimezoneStore = defineStore({
|
||||||
|
id: 'timezone',
|
||||||
|
state: (): timezoneStore => ({
|
||||||
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||||
|
}),
|
||||||
|
persist: true,
|
||||||
|
getters: {
|
||||||
|
getTimezone(): Timezone {
|
||||||
|
return this.timezone
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
setTimezone(timezone: Timezone): void {
|
||||||
|
this.timezone = timezone
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
26
dolphinscheduler-ui-next/src/store/timezone/types.ts
Normal file
26
dolphinscheduler-ui-next/src/store/timezone/types.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { timezoneList } from '@/utils/timezone'
|
||||||
|
|
||||||
|
type Timezone = typeof timezoneList[number]
|
||||||
|
|
||||||
|
interface timezoneStore {
|
||||||
|
timezone: Timezone
|
||||||
|
}
|
||||||
|
|
||||||
|
export { timezoneStore, Timezone }
|
@ -24,11 +24,13 @@ import type { SessionIdRes } from '@/service/modules/login/types'
|
|||||||
import type { UserInfoRes } from '@/service/modules/users/types'
|
import type { UserInfoRes } from '@/service/modules/users/types'
|
||||||
import { useMenuStore } from '@/store/menu/menu'
|
import { useMenuStore } from '@/store/menu/menu'
|
||||||
import cookies from 'js-cookie'
|
import cookies from 'js-cookie'
|
||||||
|
import { useTimezoneStore } from '@/store/timezone/timezone'
|
||||||
|
|
||||||
export function useLogin(state: any) {
|
export function useLogin(state: any) {
|
||||||
const router: Router = useRouter()
|
const router: Router = useRouter()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const menuStore = useMenuStore()
|
const menuStore = useMenuStore()
|
||||||
|
const timezoneStore = useTimezoneStore()
|
||||||
|
|
||||||
const handleLogin = () => {
|
const handleLogin = () => {
|
||||||
state.loginFormRef.validate(async (valid: any) => {
|
state.loginFormRef.validate(async (valid: any) => {
|
||||||
@ -40,6 +42,11 @@ export function useLogin(state: any) {
|
|||||||
const userInfoRes: UserInfoRes = await getUserInfo()
|
const userInfoRes: UserInfoRes = await getUserInfo()
|
||||||
await userStore.setUserInfo(userInfoRes)
|
await userStore.setUserInfo(userInfoRes)
|
||||||
|
|
||||||
|
const timezone = userInfoRes.timeZone
|
||||||
|
? userInfoRes.timeZone
|
||||||
|
: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||||
|
await timezoneStore.setTimezone(timezone)
|
||||||
|
|
||||||
const key = menuStore.getMenuKey
|
const key = menuStore.getMenuKey
|
||||||
|
|
||||||
router.push({ path: key || 'home' })
|
router.push({ path: key || 'home' })
|
||||||
|
Loading…
Reference in New Issue
Block a user