SaaS-lib/lib/paas/view/system/layout/region.vue

<!-- @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 + '&region=' + 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>