优化小程序菜单管理功能

src/layout/components/header-tools.vue

@@ -19,19 +19,16 @@
       </a-tree-select>
     </div>
     <!-- 商户名称 -->
-    <template v-if="getMerchantName()">
+    <template v-if="merchants.length > 0">
       <div class="ele-admin-header-tool-item">
-        <a-button @click="openUrl(`/booking/school`)">{{
-          getMerchantName()
-        }}</a-button>
+        <MerchantSelect
+          :merchants="merchants"
+          v-model:value="merchantName"
+          @done="onMerchant"
+        />
       </div>
     </template>
-    <!--    <div-->
-    <!--      class="ele-admin-header-tool-item"-->
-    <!--      @click="openUrl('https://b.gxwebsoft.com')"-->
-    <!--    >-->
-    <!--      旧版-->
-    <!--    </div>-->
+
     <!-- 消息通知 -->
     <div class="ele-admin-header-tool-item" @click="openUrl(`/user/notice`)">
       <header-notice />
@@ -163,9 +160,6 @@
   import {
     DownOutlined,
     CopyOutlined,
-    UserOutlined,
-    MoreOutlined,
-    LogoutOutlined,
     ExclamationCircleOutlined,
     FullscreenOutlined,
     FullscreenExitOutlined,
@@ -183,6 +177,9 @@
   import { listMenus } from '@/api/system/menu';
   import { isExternalLink, toTreeData } from 'ele-admin-pro';
   import { getMerchantName } from '@/utils/merchant';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { listMerchant } from '@/api/shop/merchant';
+  import MerchantSelect from './merchant-select.vue';
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -214,6 +211,8 @@
   const menuTree = ref<Menu[]>([]);
   const parentId = ref<number>();
   const bordered = ref<boolean>(false);
+  const merchants = ref<Merchant[]>([]);
+  const merchantName = ref();
 
   /* 用户信息下拉点击 */
   const onUserDropClick = ({ key }) => {
@@ -261,7 +260,17 @@
     if (item?.component) {
       return push(item.path);
     }
-    // bordered.value = true;
+  };
+
+  // 选择商户
+  const onMerchant = (id: number) => {
+    const item = merchants.value.find((d) => d.merchantId == id);
+    if (item) {
+      merchantName.value = item.merchantName;
+      localStorage.setItem('MerchantName', `${item.merchantName}`);
+      localStorage.setItem('MerchantId', `${item.merchantId}`);
+      window.location.reload();
+    }
   };
 
   /* 切换全屏 */
@@ -274,8 +283,9 @@
     settingVisible.value = true;
   };
 
-  const getMenus = () => {
-    if (!getMerchantName()) {
+  const reload = () => {
+    if (loginUser.value.username == 'admin') {
+      // 查询菜单列表
       listMenus({ menuType: 0, hide: 0 }).then((data) => {
         if (data) {
           menuList.value = data;
@@ -289,9 +299,19 @@
         }
       });
     }
+    merchantName.value = getMerchantName();
+    if (loginUser.value.merchants) {
+      listMerchant({ merchantIds: loginUser.value.merchants }).then((res) => {
+        merchants.value = res.map((d) => {
+          d.label = d.merchantName;
+          d.value = d.merchantId;
+          return d;
+        });
+      });
+    }
   };
 
-  getMenus();
+  reload();
 </script>
 
 <script lang="ts">

src/layout/components/merchant-select.vue

@@ -0,0 +1,54 @@
+<!-- 选择下拉框 -->
+<template>
+  <div>
+    <a-select
+      :options="merchants"
+      v-model:value="value"
+      :placeholder="placeholder"
+      @update:value="updateValue"
+      :style="`width: 200px`"
+      @blur="onBlur"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string, item: any): void;
+    (e: 'done', item: Merchant): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      merchants?: Merchant[];
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择场馆'
+    }
+  );
+
+  // 字典数据
+  const options = ref<Merchant[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    const item = options.value?.find((d) => d.merchantName == value);
+    emit('update:value', value, item);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+
+  const onChange = (item: any) => {
+    emit('done', item);
+  };
+
+</script>