菜单

src/components/project-one-green/home.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="home">
+    <el-container class="main" :style="{ background: styleInfo.main_bg_color }">
+      <el-header :style="{ background: styleInfo.header_bg_color, 'border-color': styleInfo.aside_border_color }">
+        <HomeHead></HomeHead>
+      </el-header>
+      <el-container>
+        <el-aside width="220px" :style="{ background: styleInfo.aside_bg_color }">
+          <HomeAside></HomeAside>
+        </el-aside>
+        <el-main>
+          <breadcrumb></breadcrumb>
+          <router-view :style="testInfo"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script setup lang="ts">
+import { project_style_Info } from '../../layout/site';
+import HomeAside from './parts/aside-1.vue';
+import HomeHead from './parts/header-1.vue';
+import breadcrumb from './parts/breadcrumb.vue';
+let styleInfo = project_style_Info;
+let testInfo: {
+  height: '86.6vh';
+  background: '#ffffff';
+  'overflow-x': 'hidden';
+  'overflow-y': 'auto';
+  border: '1px solid #f0f0f0';
+  padding: '10px';
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  height: 100vh;
+  .el-header {
+    border-bottom: 1px solid;
+  }
+  .el-aside {
+    height: 93.5vh;
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  .el-main {
+    padding: 10px;
+  }
+}
+</style>

src/components/project-one-green/parts/aside-1.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-row>
+    <el-col :span="24" class="aside">
+      <el-menu
+        :default-active="onRoutes"
+        unique-opened
+        router
+        :background-color="styleInfo.aside_bg_color"
+        :text-color="styleInfo.menus_txt_color"
+        :active-text-color="styleInfo.routerview_bg_color"
+      >
+        <template v-for="item in items">
+          <!-- 二级菜单 -->
+          <template v-if="item.type === '0'">
+            <el-sub-menu :index="item._id || item.index" :key="item._id">
+              <template v-slot:title>
+                <span>{{ item.name }}</span>
+              </template>
+              <template v-for="subItem in item.children">
+                <!-- 三级菜单 -->
+                <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem._id" :key="subItem._id">
+                  <template v-slot:title>
+                    <span>{{ subItem.name }}</span>
+                  </template>
+                  <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
+                    <template v-slot:title>
+                      <span>{{ threeItem.name }}</span>
+                    </template>
+                  </el-menu-item>
+                </el-sub-menu>
+                <el-menu-item v-else :index="subItem.path" :key="subItem.path">
+                  <template v-slot:title>
+                    <span>{{ subItem.name }}</span>
+                  </template>
+                </el-menu-item>
+              </template>
+            </el-sub-menu>
+          </template>
+          <!-- 一级菜单 -->
+          <template v-else>
+            <el-menu-item :index="item.path" :key="item.path">
+              <span>{{ item.name }}</span>
+            </el-menu-item>
+          </template>
+        </template>
+      </el-menu>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import type { Ref } from 'vue';
+import { admin_style_Info } from '../../../layout/site';
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router';
+// 接口
+import { ModuleStore } from '@common/src/stores/admin/module'; //模块
+import { RoleStore } from '@common/src/stores/admin/role'; //模块
+import type { IQueryResult } from '@/util/types.util'; //
+import store from '@/stores/counter';
+const module = ModuleStore();
+const role = RoleStore();
+let route = useRoute();
+let user = store.state.user as { _id: string; name: string; unit_name: string; nick_name: string; role_type: string };
+
+// 请求列表
+let items: Ref<any[]> = ref([]);
+let styleInfo = admin_style_Info as { aside_bg_color: string; routerview_bg_color: string; menus_txt_color: string };
+let onRoutes = route.path;
+const getMenu = async (e: any) => {
+  let name = import.meta.env.VITE_APP_ROUTER;
+  const res: IQueryResult = await module.query({ name: name, is_use: 'Y' });
+  if (res && res.errcode == '0') {
+    if (res.total > 0) {
+      let moduleInfo = res.data[0];
+      let roleInfo: IQueryResult = await role.um();
+      if (roleInfo.errcode == '0') {
+        if (roleInfo.data) {
+          let menus = roleInfo.data[moduleInfo._id];
+          if (menus && menus.length > 0) {
+            items.value = menus;
+          }
+        }
+      }
+    }
+  } else {
+    ElMessage({ message: `${res.errmsg}`, type: 'error' });
+  }
+};
+onMounted(async () => {
+  console.log(import.meta);
+
+  let name = import.meta.env.VITE_APP_ROUTER;
+  const res: IQueryResult = await module.query({ name: name, is_use: 'Y' });
+  if (res && res.errcode == '0') {
+    if (res.total > 0) {
+      let moduleInfo = res.data[0];
+      let roleInfo: IQueryResult = await role.um();
+      if (roleInfo.errcode == '0') {
+        if (roleInfo.data) {
+          let menus = roleInfo.data[moduleInfo._id];
+          if (menus && menus.length > 0) {
+            items.value = menus;
+          }
+        }
+      }
+    }
+  } else {
+    ElMessage({ message: `${res.errmsg}`, type: 'error' });
+  }
+});
+watch(user, (newVal: any) => {
+  if (newVal && newVal._id) getMenu(newVal);
+  else ElMessage({ message: `暂无用户信息，无法获取菜单信息`, type: 'error' });
+});
+</script>
+
+<style scoped></style>

src/components/project-one-green/parts/breadcrumb.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="breadcrumb">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item> <i class="el-icon-s-grid"></i> {{ breTitle }} </el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script lang="ts" setup>
+// 组件
+import { useRoute } from 'vue-router';
+let route = useRoute();
+let breTitle = route.meta.title;
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 0 0.5vw 0;
+}
+</style>

src/components/project-one-green/parts/header-1.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="header-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="12" class="left">
+          <span>{{ webInfos.zhTitle }}</span>
+          <span>-</span>
+          <span>管理平台</span>
+        </el-col>
+        <el-col :span="12" class="right">
+          <el-button plain v-for="(item, index) in moduleList" :key="index" @click="modulePath(item)" :class="[active == item.active ? 'active' : '']">{{
+            item.name
+          }}</el-button>
+          <el-dropdown @command="toDrop">
+            <el-button type="danger" plain size="large">
+              {{ user && user._id ? user.name || user.unit_name || user.nick_name : '暂无昵称' }}
+              <el-icon class="el-icon--right"> <ArrowDown /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :icon="User" command="center"> 个人中心 </el-dropdown-item>
+                <el-dropdown-item :icon="SwitchButton" command="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { webInfo, project_module_menus } from '../../../layout/site';
+import type { Ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import store from '@/stores/counter';
+import { ArrowDown, User, SwitchButton } from '@element-plus/icons-vue';
+const router = useRouter();
+
+let webInfos = webInfo;
+let active: Ref<number> = ref(2);
+let moduleList: Ref<any[]> = ref([]);
+let user = store.state.user as { _id: string; name: string; unit_name: string; nick_name: string; role_type: string };
+
+const toDrop = (e: string) => {
+  if (e == 'logout') {
+    localStorage.removeItem('token');
+    window.location.href = `${import.meta.env.VITE_APP_HOST}`;
+  } else if (e == 'center') {
+    router.push({ path: '/userInfo/center' });
+  }
+};
+
+// 模块跳转
+const modulePath = (e: { path: string }) => {
+  window.location.href = `${e.path}`;
+};
+onMounted(() => {
+  search();
+});
+const search = () => {
+  let menu = project_module_menus.filter((i: any) => i.role_type.includes(user.role_type));
+  if (user.role_type == '0' || user.role_type == '1') {
+    //
+  } else if (user.role_type == '2') {
+    if (user._id != '6417cbe06da906b0e7b19d66') menu = menu.filter((i) => i.path != '/basic');
+  } else if (user.role_type == '3') {
+    if (user._id != '6417cba86da906b0e7b19b5a') menu = menu.filter((i) => i.path != '/basic');
+  }
+  if (menu) moduleList.value = menu;
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  flex-direction: row;
+  .left {
+    padding: 0.7vw 0;
+    span {
+      color: #ffffff;
+      font-size: 25px;
+      font-weight: bold;
+      font-family: cursive;
+    }
+  }
+  .right {
+    padding: 0.4vw 0;
+    text-align: right;
+    .el-button {
+      margin: 0 0 0 10px;
+    }
+    .active {
+      color: #07c4a8;
+    }
+  }
+}
+</style>

src/layout/site.ts

@@ -23,6 +23,8 @@ export const admin_style_Info = {
   aside_border_color: '#ffffff',
   // 内容显示部分
   routerview_bg_color: '#ffffff',
+  menus_txt_color: '#000000',
+
 };
 // 管理员项目基本设置
 export const basic_style_Info = {