<!-- @format --> <template> <a-dropdown :trigger="['click']" v-if="selectedItemLabel"> <a class="ant-dropdown-link" @click.prevent> {{ currentRegion?.label || selectedItemLabel }} <DownOutlined /> </a> <template #overlay> <a-menu v-model:selectedKeys="selectedKeys"> <a-menu-item v-for="item in regionArray" :key="item.value"> <a @click="selectItem(item)">{{ item.label }}</a> </a-menu-item> </a-menu> </template> </a-dropdown> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { DownOutlined } from '@ant-design/icons-vue'; import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service'; import { storeToRefs } from 'pinia'; export default defineComponent({ name: 'NavRegion', components: { DownOutlined }, setup() { let { currentRegion } = storeToRefs(authorizationService()); return { currentRegion }; }, data() { return { selectedItemLabel: '', regionArray: [], defaultRegion: {}, selectedKeys: ['default'], // 默认选中的region }; }, mounted() { const authorizationMap = authorizationService(); authorizationMap.$subscribe((mutation, state) => { this.regionArray = authorizationMap.regionArray; this.defaultRegion = authorizationMap.defaultRegion; this.selectedItemLabel = this.defaultRegion.label; }); // 设置顶部导航的region if (window.localStorage?.region) { const region = JSON.parse(window.localStorage.region); this.selectedKeys = [region.value]; authorizationMap.setCurrentRegion(region); } }, methods: { selectItem(options: { label: string; isDefault: any; value: any }) { // this.regionService.selectedRegion.emit(event); const authorizationMap = authorizationService(); authorizationMap.setCurrentRegion(options); this.selectedItemLabel = options.label; // if (options.isDefault) { // window.localStorage.removeItem('region'); // } // if (!options.isDefault) { // window.localStorage['region'] = JSON.stringify(options); // } window.localStorage['region'] = JSON.stringify(options); this.selectedKeys = [options.value]; this.replaceUrl(options); }, replaceUrl(event: { label?: string; isDefault: any; value: any }) { // 地域变更, 更改url let href = location.origin + location.pathname; if (event.isDefault) { if (location.search && location.search.indexOf('region') != -1) { if (location.search.indexOf('&') != -1) { let searchs = location.search.split('&'); searchs.pop(); href = href + searchs.join('&'); } else { href = href; } } else { href = href + location.search; } } else { if (!location.search) { href = href + '?region=' + event.value; } else if (location.search.indexOf('region') == -1) { href = href + location.search + '®ion=' + event.value; } else { let searchs = location.search.split('='); if (searchs[searchs.length - 1] == event.value) { return; } searchs[searchs.length - 1] = event.value; href = href + searchs.join('='); } } location.replace(href); }, }, }); </script> <style lang="less" scoped> .nav-region { .ant-dropdown-link { color: @layout-header-color; } } </style>