From 75ec5bd990d36329fcda2f53b7cc1101c1e88a97 Mon Sep 17 00:00:00 2001 From: zhoushihao <zsh19950802@163.com> Date: 星期一, 15 四月 2024 09:22:46 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- UI-Project/src/layout/MainErpView.vue | 221 +++++++++++++++++++++++++------------------------------ 1 files changed, 101 insertions(+), 120 deletions(-) diff --git a/UI-Project/src/layout/MainErpView.vue b/UI-Project/src/layout/MainErpView.vue index 20334e7..bc44154 100644 --- a/UI-Project/src/layout/MainErpView.vue +++ b/UI-Project/src/layout/MainErpView.vue @@ -1,57 +1,60 @@ <script setup> -import { RouterLink,useRouter} from 'vue-router' -import useUserInfoStore from '@/stores/userInfo' +import {useRouter} from 'vue-router' +import useUserInfoStore from '@/stores/userInfo' +import userInfo from '@/stores/userInfo' import request from "@/utils/request"; import {ElMessage} from "element-plus"; -import {onMounted, reactive, ref, watch} from "vue" +import {ref, watch} from "vue" import deepClone from "@/utils/deepClone" -import userInfo from '@/stores/userInfo' -import {Close, Grid, Histogram, MessageBox, SwitchButton} from "@element-plus/icons-vue"; -const store=userInfo() + +const store = userInfo() const router = useRouter() const userStore = useUserInfoStore() const user = userStore.user.userName -store.createWebSocket(); -function quit(){ + +// store.createWebSocket(); +function quit() { userStore.$patch({ - user:null + user: null }) router.push("/login") } //鎻愬彇妯″潡鍒楄〃 -let menuList=$ref([]) -request.get("/menu").then((res) => { - if(res.code==200){ - menuList= deepClone(res.data) - }else{ +let menuList = $ref([]) +request.get('/menu/sysMenu/list').then((res) => { + if (res.code == 200) { + menuList = deepClone(res.data) + } else { ElMessage.warning(res.msg) - router.push("/login") + router.push('/login') } }) //鑾峰彇鑿滃崟鍒楄〃 -let menuItemList=$ref([]) -request.get("/menuItem").then((res) => { - if(res.code==200){ - menuItemList= deepClone(res.data) - }else{ - ElMessage.warning(res.msg) - router.push("/login") - } -}) +// let menuItemList = $ref([]) +// request.get('/menuItem').then((res) => { +// if (res.code == 200) { +// menuItemList = deepClone(res.data) +// } else { +// ElMessage.warning(res.msg) +// router.push('/login') +// } +// }) const menu = ref(null) let indexKey = ref(null) + function handleOpen(key) { - indexKey.value=key + indexKey.value = key } -watch(indexKey,(newVal,oldVal) => { - if(oldVal !== newVal && oldVal !== null){ - menu.value.close(oldVal) - } + +watch(indexKey, (newVal, oldVal) => { + if (oldVal !== newVal && oldVal !== null) { + menu.value.close(oldVal) + } }, {deep:true} ) @@ -75,70 +78,45 @@ </script> <template> - <div> + <div id="all"> <el-container> <el-header > - <div style="height: 100%;width: 100%;display: flex"> + <div style="height: 100%;width: 100%;display: flex;background-color: #fff;"> <img src="../assets/northGlass.ico" alt="" style="max-width: 100%;max-height: 100%"> - <h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 娆㈣繋{{ user }}浣跨敤鍖楃幓ERP绯荤粺锛�</h3> - <span style="height: 70%;width: 78vw;margin-top: 1rem;" > - - <el-button class="sys-quit" @click="quit" type="info" round> - <el-icon size="large"><SwitchButton size=""/></el-icon> + <h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 娆㈣繋{{ user }}浣跨敤鍖楃幓MES绯荤粺锛�</h3> + <span style="height: 70%;width: 78vw;margin-top: 1rem;"> + <el-button class="sys-quit" @click="quit" round> + <el-icon size="large"><SwitchButton size=""/></el-icon> </el-button> </span> - </div> </el-header> - <el-container > - <el-aside width="160px" style="height: 97%; " > -<!-- <el-menu - style=" border-radius:0.5rem;border: 0.01rem solid #409EFF;margin-bottom: 0.5rem" - @open="handleOpen" - ref="menu" - active-color="#ffd04b" - background-color="#409EFF" - default-active="2" - text-color="#fff"> - <el-sub-menu - - v-for="items in menuList" - :index="items.id" - :key="items.id"> - <template #title> - <el-icon v-if="items.id==1"><Grid/></el-icon> - <el-icon v-if="items.id==2"><Histogram/></el-icon> - <el-icon v-if="items.id==3"><MessageBox/></el-icon> - <span style="font-weight: bold;">{{items.menuName}}</span> - </template> - <router-link - v-show="items.id==menuItem.menuID" - v-for="menuItem in menuItemList" - :to="{path:menuItem.url}"> - <el-menu-item > - {{ menuItem.itemName}} - </el-menu-item> - </router-link> - - </el-sub-menu> - </el-menu>--> - <div class="menu" > - <div v-for="items in menuList"> - <div class='menu_title' @click="openMenu(items.id)" >{{items.menuName}}<span class='indicator' >鈻�</span></div> - <ul class='enter-x-left' v-show="openFlag==items.id"> - - <li v-for="menuItem in menuItemList" - v-show="items.id==menuItem.menuID" - style="margin-bottom: 2px" - > - <router-link - :to="{path:menuItem.url}"> - {{ menuItem.itemName}} - </router-link> - - </li> - </ul> + <div id="line"></div> + <el-container> + <el-aside width="160px" + style="height: 99%; background-color: #fff;"> + <div class="menu"> + <div v-for="items in menuList"> + <div class='menu_title' + @click="openMenu(items.id)"> + <!-- <span class='indicator' >鈱�</span> --> + <!-- <span class='indicator' >鈮�</span> --> + <!-- <img src="../assets/9.png" alt="" style="max-width: 50%;max-height: 50%;"> --> + <span>鈽�</span> + {{ items.menuName }} </div> + <ul class='enter-x-left' + v-show="openFlag==items.id"> + + <li v-for="menuItem in items.children" + style="margin-bottom:2px"> + <router-link :to="{path:menuItem.url}"> + {{ menuItem.menuName }} + </router-link> + + </li> + </ul> + </div> </div> </el-aside> @@ -154,9 +132,13 @@ </template> <style scoped> +#all{ + background-color: #eee; + height: 100%; +} .el-container{ height: 100vh; - width: 100vw + width: 99vw } *{ @@ -167,7 +149,17 @@ float: right; margin-right: 1rem; width: 5rem; - +} +/* 妯嚎 */ +#line{ +float:right; +width: 100%; +height: 1px; +/* margin-top: 0.5em; */ +margin-bottom: 0.5em; +background:#d4c4c4; +position: relative; +text-align: center; } :deep(span){ margin-right: 0; @@ -181,17 +173,11 @@ width: 99%; float: right; height: 99%; + background-color: #fff; } - - - - /*------------*/ - - - -.menu div div{ +/* .menu div div{ width: 138px; height: 35px; @@ -208,16 +194,12 @@ border-bottom: 12px ; margin-bottom:4px; text-align: left; - cursor: pointer; - border-radius:8px; + cursor: pointer; */ + /* border-radius:8px; */ /* outline: none; */ - - background-color:#5CADFE; - box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); - - - -} + /* background-color:#5CADFE; */ + /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ +/* } */ .menu { width: 138px; @@ -243,21 +225,21 @@ height: 28px; line-height: 30px; - background: rgb(128, 128, 128); + /* background: rgb(128, 128, 128); */ color: #000000; padding-left: 36px; cursor: pointer; overflow: hidden; text-align: left; - border-radius:8px; + /* border-radius:8px; */ /* outline: none; */ - background: #5CADFE; - box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); + /* background: #5CADFE; */ + /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ } ul li:hover { - background:#5CADFE ; + /* background:#5CADFE ; */ color: #ffffff; } @@ -268,7 +250,7 @@ } ul li a:hover { - color: #ffffff; + color: #1087ff; } .item_divider { @@ -282,6 +264,7 @@ width: 138px; height: 35px; display: block; + /* text-align: justify; */ text-decoration: none; color: white; font-size: 14px; @@ -289,12 +272,12 @@ } .menu_title { - width: 138px; - height: 35px; - line-height: 35px; - background: #fafafa; - color: rgb(128, 128, 128); - font-size: 16px; + width: 140px; + height: 45px; + line-height: 55px; + /* background: #fafafa; */ + color: rgb(43, 42, 42); + font-size: 17px; padding-left: 15px; transition: all 0.3s ease; cursor: pointer; @@ -306,12 +289,12 @@ .menu_title:hover { /* background: #dedede; */ - color: #ffffff; + color: #3b9af9; } .indicator { display: block; - width: 50px; + width: 40px; height: 35px; font-weight: bold; position: absolute; @@ -344,8 +327,6 @@ .enter-x-left:nth-child(4){ animation-delay: 0.4s; } - - @keyframes enter-x-left { to { opacity: 1; -- Gitblit v1.8.0