4/9号，地区通过url传递

gold-system/src/router/index.js

@@ -12,7 +12,7 @@ const router = createRouter({
             children: [
 
                 // 工作台
-                { path: '/workspace', name: "workspace", component: () => import("../views/workspace/index.vue") },
+                { path: '/workspace/:area?', name: "workspace", component: () => import("../views/workspace/index.vue") },
                 // 充值审核
                 { path: '/rechargeAudit', name: "rechargeAudit", component: () => import("../views/audit/rechargeAudit.vue") },
                 // 退款审核

gold-system/src/views/index.vue

@@ -1,67 +1,85 @@
 <script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import ElementPlus from 'element-plus'
-import { VscGlobe } from 'vue-icons-plus/vsc'
-import { ElMessage } from 'element-plus'
-import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
-import API from '@/util/http'
-import dmmn from '../assets/动漫美女.png'
+import { ref, onMounted, reactive, computed, watch } from "vue";
+import { useRouter } from "vue-router";
+import ElementPlus from "element-plus";
+import { VscGlobe } from "vue-icons-plus/vsc";
+import { ElMessage } from "element-plus";
+import axios from "axios";
+import { ElMessageBox } from "element-plus";
+import API from "@/util/http";
+import dmmn from "../assets/动漫美女.png";
+import { useRoute } from "vue-router";
 
-const router = useRouter()
-const imgrule1 = dmmn
-const messageVisible = ref(false)
+const router = useRouter();
+const imgrule1 = dmmn;
+const messageVisible = ref(false);
 
 //这是获取用户信息的接口
 const adminData = ref({
-  name: ''
-})
+  name: "",
+});
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
-    adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
+    const result = await API({ url: "/admin/userinfo", data: {} });
+    adminData.value = result;
+    console.log("请求成功", result);
+    console.log("用户信息", adminData.value);
   } catch (error) {
-    console.log('请求失败', error)
+    console.log("请求失败", error);
   }
-}
-
+};
+// 获取地区
+const areas = ref([]);
+const getAreas = async function () {
+  try {
+    const result = await API({ url: "/recharge/user/search", data: {} });
+    areas.value = result.data;
+    console.log("请求成功", result);
+  } catch (error) {
+    console.log("请求失败", error);
+  }
+};
 // 查看个人信息弹出框
 const openMessage = function () {
-  messageVisible.value = true
-}
+  messageVisible.value = true;
+};
 const closeMessage = function () {
-  messageVisible.value = false
-}
+  messageVisible.value = false;
+};
 const message = function () {
-  openMessage()
-}
+  openMessage();
+};
 
 // 获取machineId
 
 function logout() {
-  const machineId = localStorage.getItem('machineId')
-  console.log('machineId:', machineId)
-  localStorage.removeItem('token')
+  const machineId = localStorage.getItem("machineId");
+  console.log("machineId:", machineId);
+  localStorage.removeItem("token");
   // localStorage.clear();
-  router.push('/login?machineId=' + machineId)
+  router.push("/login?machineId=" + machineId);
   //添加刷新页面的代码
   // window.location.reload();
-  ElMessage.success('退出成功')
+  ElMessage.success("退出成功");
 }
 
 // 挂载
 onMounted(async function () {
   // 获取用户信息
-  getAdminData()
-})
-// 察看页面跳转
-const handleSelect = (index) => {
-  console.log('Selected index:', index)
-  router.push(index)
-}
+  getAdminData();
+  // 获取地区
+  getAreas();
+});
+// 处理地区点击事件
+const changeDataByArea = (item) => {
+  router.push({
+    name: "workspace", // 假设工作台路由的名称为 'Workspace'
+    params: {
+      area: item,
+    },
+  });
+  // 替换完url后刷新页面
+};
 </script>
 
 <template>
@@ -257,6 +275,25 @@ const handleSelect = (index) => {
             mode="horizontal"
             :ellipsis="false"
           >
+            <el-sub-menu index="1" class="area" :disabled="isWorkspace">
+              <template #title>
+                <VscGlobe />
+              </template>
+              <el-menu-item
+                v-for="(item, index) in areas"
+                :key="index"
+                @click="changeDataByArea(item)"
+              >
+                {{ item }}
+              </el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+          <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal"
+            :ellipsis="false"
+          >
             <el-sub-menu index="1" class="admin">
               <template #title>
                 <el-image
@@ -269,9 +306,6 @@ const handleSelect = (index) => {
               <el-menu-item @click="message()">查看个人信息</el-menu-item>
               <el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
             </el-sub-menu>
-            <el-menu-item index="2">
-              <VscGlobe />
-            </el-menu-item>
           </el-menu>
         </el-header>
         <!-- 修改 el-main 样式 -->
@@ -331,4 +365,7 @@ const handleSelect = (index) => {
   border: none; /* 去除边框 */
   padding: 0; /* 去除内边距 */
 }
+.el-menu-demo {
+  float: right; /* 将菜单向右浮动 */
+}
 </style>