[Feat 0000] 子系统选择器改版

src/layouts/default/feature/SystemSelect.vue

@@ -1,23 +1,52 @@
 <template>
-  <a-select :class="prefixCls" v-model:value="text" :options="OPTIONS" @change="handleMenuClick"> </a-select>
+  <div :class="prefixCls" :style="{ width: `${vertical ? buttonWidth : buttonWidth * 2 + 10}px` }">
+    <a-button
+      :class="{ 'select-button': true, primary: isBaseHome }"
+      :style="{ width: `${buttonWidth}px` }"
+      @click="handleMenuClick(PageEnum.BASE_HOME)"
+    >
+      {{ t('routes.basic.baseHome') }}
+    </a-button>
+    <a-button
+      :class="{ 'select-button': true, primary: !isBaseHome }"
+      :style="{ width: `${buttonWidth}px` }"
+      @click="handleMenuClick(PageEnum.SECONDARY_HOME)"
+    >
+      {{ t('routes.basic.secondaryHome') }}
+    </a-button>
+  </div>
 </template>
 
 <script lang="ts" setup>
   // import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
   // import { DownOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { PageEnum } from '/@/enums/pageEnum';
   import { useRouter } from 'vue-router';
   import { useI18n } from '/@/hooks/web/useI18n';
 
-  const { prefixCls } = useDesign('system-select');
+  const props = withDefaults(
+    defineProps<{
+      vertical?: boolean;
+      buttonWidth?: number;
+    }>(),
+    {
+      vertical: false,
+      buttonWidth: 210,
+    }
+  );
+
+  const { prefixCls: precls } = useDesign('system-select');
+  const prefixCls = computed(() => {
+    return props.vertical ? `${precls}-vertical w-${props.buttonWidth}px` : `${precls} w-${props.buttonWidth * 2}px`;
+  });
   const router = useRouter();
   const { t } = useI18n();
 
   // 由于BASE_HOME仅代表了一个页面，其他页面都隶属于SECONDARY_HOME，所以简单处理
   const isBaseHome = router.currentRoute.value.path === PageEnum.BASE_HOME;
-  const text = ref(isBaseHome ? PageEnum.BASE_HOME : PageEnum.SECONDARY_HOME);
+  // const text = ref(isBaseHome ? PageEnum.BASE_HOME : PageEnum.SECONDARY_HOME);
 
   function handleMenuClick(value) {
     router.push({ path: value });
@@ -44,25 +73,45 @@
   @prefix-cls: ~'@{namespace}-system-select';
 
   .@{prefix-cls} {
-    max-width: 210px;
-    width: 100%;
-    min-width: 10px;
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     position: relative;
     z-index: @layout-basic-z-index;
-  }
 
-  .@{prefix-cls}.ant-select {
-    :deep(.ant-select-selector) {
+    .select-button {
+      height: @multiple-height;
+    }
+
+    .primary {
+      border-color: @primary-color;
       background-color: @primary-color;
+      color: @white;
+    }
+    .select-button:nth-child(1) {
+      margin-right: 10px;
+    }
+  }
+
+  .@{prefix-cls}-vertical {
+    // margin-bottom: 10px;
+    position: relative;
+    z-index: @layout-basic-z-index;
 
-      .ant-select-selection-item {
-        color: @white;
-      }
+    .select-button {
+      height: @multiple-height;
     }
 
-    :deep(.ant-select-arrow) {
+    .primary {
+      border-color: @primary-color;
+      background-color: @primary-color;
       color: @white;
     }
+
+    .select-button:nth-child(1) {
+      border-radius: 0px;
+      border-top-left-radius: 10px;
+    }
+    .select-button:nth-child(2) {
+      border-radius: 0px;
+    }
   }
 </style>

src/layouts/default/plain.vue

@@ -3,7 +3,6 @@
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader />
-    <SystemSelect class="system-select-for-plain-layout" />
     <SimpleMap />
     <LayoutContent />
   </Layout>
@@ -16,7 +15,7 @@
 
   import LayoutHeader from './header/index.vue';
   import LayoutContent from './content/index.vue';
-  import SystemSelect from './feature/SystemSelect.vue';
+  // import SystemSelect from './feature/SystemSelect.vue';
   import SimpleMap from './feature/SimpleMap.vue';
 
   // import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
@@ -33,7 +32,7 @@
       LayoutHeader,
       LayoutContent,
       Layout,
-      SystemSelect,
+      // SystemSelect,
       SimpleMap,
     },
     setup() {
@@ -91,17 +90,5 @@
       // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
       // margin-left: 1px;
     }
-
-    .system-select-for-plain-layout {
-      z-index: @layout-header-fixed-z-index;
-      position: fixed;
-      top: @header-height;
-      left: 0;
-    }
-  }
-
-  :deep(.jeecg-system-select) {
-    margin-left: 10px;
-    margin-top: 10px;
   }
 </style>

src/layouts/default/sider/LayoutSider.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex; flex-direction: column; height: 100%">
-    <SystemSelect v-if="!getCollapsed" />
+    <SystemSelect v-if="!getCollapsed" :vertical="true" />
     <Sider
       v-show="showClassSideBarRef"
       breakpoint="lg"
@@ -120,7 +120,7 @@
   @prefix-cls: ~'@{namespace}-layout-sideBar';
 
   .@{prefix-cls} {
-    border-top-left-radius: 10px;
+    // border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     z-index: @layout-sider-fixed-z-index;
     flex: 1 !important;

src/views/dashboard/SealedGoaf/index.vue

@@ -1,6 +1,13 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="company-home">
+    <SystemSelect
+      :class="{
+        'custom-system-select': true,
+        'custom-system-select-mine': appStore.getSimpleMapParams.isLeaf,
+      }"
+    />
+
     <template v-if="appStore.getSimpleMapParams.isLeaf">
       <div class="company-title">
         <span class="title-text">
@@ -41,6 +48,7 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { useAppStore } from '/@/store/modules/app';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import SystemSelect from '/@/layouts/default/feature/SystemSelect.vue';
 
   const { title = '老空区永久密闭监测与分析系统' } = useGlobSetting();
   const { data, updateData } = useInitPage(title);
@@ -261,6 +269,13 @@
     z-index: @layout-basic-z-index;
     // 允许点击穿透以支持下面的地图进行交互
     pointer-events: none;
+
+    .custom-system-select {
+      z-index: @layout-header-fixed-z-index;
+      position: absolute;
+      top: 15px;
+      left: 25px;
+    }
   }
   .company-title {
     position: absolute;