push

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

@@ -0,0 +1,110 @@
+<!-- @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>