|
|
|
@ -15,8 +15,9 @@
|
|
|
|
|
* limitations under the License. |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
import { defineComponent, ref, PropType } from 'vue' |
|
|
|
|
import { NIcon, NButton, NPopselect } from 'naive-ui' |
|
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
import { defineComponent, ref, PropType, computed, h, inject } from 'vue' |
|
|
|
|
import { NIcon, NButton, NSelect, NDropdown, NTag } from 'naive-ui' |
|
|
|
|
import styles from './index.module.scss' |
|
|
|
|
import { DownOutlined } from '@vicons/antd' |
|
|
|
|
import { useDropDown } from './use-dropdown' |
|
|
|
@ -24,6 +25,7 @@ import { useTimezoneStore } from '@/store/timezone/timezone'
|
|
|
|
|
|
|
|
|
|
const Timezone = defineComponent({ |
|
|
|
|
name: 'Timezone', |
|
|
|
|
inject: ['reload'], |
|
|
|
|
props: { |
|
|
|
|
timezoneOptions: { |
|
|
|
|
type: Array as PropType<any>, |
|
|
|
@ -31,6 +33,8 @@ const Timezone = defineComponent({
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
setup(props) { |
|
|
|
|
const { t } = useI18n() |
|
|
|
|
const reload: any = inject('reload') |
|
|
|
|
const timezoneStore = useTimezoneStore() |
|
|
|
|
const chooseVal = ref( |
|
|
|
|
props.timezoneOptions.filter( |
|
|
|
@ -38,17 +42,65 @@ const Timezone = defineComponent({
|
|
|
|
|
)[0].label |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const { handleSelect } = useDropDown(chooseVal) |
|
|
|
|
const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone |
|
|
|
|
const options = [ |
|
|
|
|
{ |
|
|
|
|
label: currentTimeZone, |
|
|
|
|
key: currentTimeZone |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'header-divider', |
|
|
|
|
type: 'divider' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'footer', |
|
|
|
|
type: 'render', |
|
|
|
|
render: () => ( |
|
|
|
|
<NSelect |
|
|
|
|
class={styles['custom-select']} |
|
|
|
|
filterable |
|
|
|
|
size='small' |
|
|
|
|
placeholder={t('profile.please_select_timezone')} |
|
|
|
|
options={props.timezoneOptions} |
|
|
|
|
onUpdateValue={handleSelect} |
|
|
|
|
/> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
return { handleSelect, chooseVal } |
|
|
|
|
const renderDropdownLabel = (option: any) => { |
|
|
|
|
if (option.label === currentTimeZone) { |
|
|
|
|
return h('div', null, [ |
|
|
|
|
h('span', null, option.label), |
|
|
|
|
h( |
|
|
|
|
NTag, |
|
|
|
|
{ type: 'info', size: 'small', style: 'margin-left: 10px' }, |
|
|
|
|
{ default: () => 'Local' } |
|
|
|
|
) |
|
|
|
|
]) |
|
|
|
|
} else { |
|
|
|
|
return option.label |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const optionsVal = computed(() => |
|
|
|
|
currentTimeZone === chooseVal.value |
|
|
|
|
? options |
|
|
|
|
: [{ label: chooseVal.value, key: chooseVal.value }, ...options] |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const { handleSelect } = useDropDown(chooseVal, reload) |
|
|
|
|
|
|
|
|
|
return { handleSelect, chooseVal, optionsVal, renderDropdownLabel } |
|
|
|
|
}, |
|
|
|
|
render() { |
|
|
|
|
return ( |
|
|
|
|
<NPopselect |
|
|
|
|
options={this.timezoneOptions} |
|
|
|
|
trigger='click' |
|
|
|
|
scrollable |
|
|
|
|
onUpdateValue={this.handleSelect} |
|
|
|
|
<NDropdown |
|
|
|
|
trigger='hover' |
|
|
|
|
show-arrow |
|
|
|
|
options={this.optionsVal} |
|
|
|
|
on-select={this.handleSelect} |
|
|
|
|
renderLabel={this.renderDropdownLabel} |
|
|
|
|
> |
|
|
|
|
<NButton text> |
|
|
|
|
{this.chooseVal} |
|
|
|
@ -56,7 +108,7 @@ const Timezone = defineComponent({
|
|
|
|
|
<DownOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
</NButton> |
|
|
|
|
</NPopselect> |
|
|
|
|
</NDropdown> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|