layout修改

client/src/views/OaSystem/attendanceCenter/mine.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="attendanceCenter">
-    <h1>{{ titleOne }}</h1>
+    <h1>{{ titleOne }}考勤</h1>
     <OaCalendar />
   </div>
 </template>
 <script setup lang="ts">
+import moment from 'moment'
 import OaCalendar from '@/views/OaSystem/components/OaCalendar/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
@@ -15,7 +16,7 @@ const user = wsCache.get(CACHE_KEY.USER)
 const userName = user.user.nickname ? user.user.nickname : 'Admin'
 const calendarList = ref([])
 
-const titleOne = ref('2023年11月考勤')
+const titleOne = ref('2023年11月')
 onMounted(() => {
   console.log(user)
 })

client/src/views/OaSystem/oaLayout/header.vue

@@ -7,7 +7,7 @@
         <!-- <span v-if="menuUlShow">|</span> {{ headerTitleName }} -->
       </p>
     </div>
-    <div class="header-right">
+    <!-- <div class="header-right">
       <ul class="menuUl" v-if="menuUlShow">
         <li v-for="(item, index) in reactiveData.routes" :key="index" v-show="item.alwaysShow">
           <router-link :to="'/oaSystem/' + pathBossName + '/' + item.path">
@@ -41,7 +41,7 @@
           </template>
         </ElDropdown>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script setup lang="ts">
@@ -145,12 +145,11 @@ onMounted(() => {
 <style lang="scss" scoped>
 .header {
   width: calc(100%);
-  height: 76px;
-  background: #183868;
+  height: 112px;
+  // background: #183868;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
   box-sizing: border-box;
   .header-left {
     display: flex;
@@ -161,8 +160,9 @@ onMounted(() => {
       margin-right: 15px;
     }
     p {
-      font-size: 24px;
-      color: #fff;
+      font-size: 34px;
+      color: #333f56;
+      font-family: AlibabaPuHuiTiB;
     }
   }
   .header-right {

client/src/views/OaSystem/oaLayout/index.vue

@@ -1,17 +1,31 @@
 <template>
   <div class="_layout">
-    <Header />
+    <!-- <Header />
     <div class="tagBoss">
       <TagList />
     </div>
     <div class="_content">
       <router-view />
+    </div> -->
+
+    <div class="layout-left">
+      <Menus />
+    </div>
+    <div class="layout-right">
+      <div class="layout-header">
+        <Header />
+        <TagList />
+      </div>
+      <div class="layout-content">
+        <router-view />
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import Header from './header.vue'
 import TagList from './tagList.vue'
+import Menus from './menus.vue'
 defineOptions({ name: 'Layout' })
 
 /** 初始化 **/
@@ -22,12 +36,30 @@ onMounted(() => {})
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .layout-left {
+    width: 184px;
+    height: 100%;
+    background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
+  }
+  .layout-right {
+    width: calc(100% - 184px);
+    height: 100%;
+    background: #eaf1f9;
+    padding: 15px 30px;
+    .layout-header {
+      width: 100%;
+      height: 162px;
+    }
+    .layout-content {
+      width: 100%;
+      height: calc(100% - 162px);
+    }
+  }
 }
-._content {
-  width: 100%;
-  height: calc(100% - 111px);
-  background: #fff;
-}
+
 div,
 h1,
 h2,

client/src/views/OaSystem/oaLayout/menus.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="oa_menus">
+    <div class="menus-user">
+      <div class="userImg">
+        <ElAvatar :src="avatar" alt="" class="userIcon" />
+      </div>
+      <div class="userInfo">
+        <h4>{{ userName }}</h4>
+        <p>部门信息</p>
+      </div>
+    </div>
+    <div class="menus-btns">
+      <div class="btn">
+        <img src="@/assets/imgs/OA/sudufaq.png" alt="" />
+        <p>快速发起</p>
+      </div>
+    </div>
+    <div class="menus-tabs">
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <div v-for="(item, index) in reactiveData.routes" :key="index">
+          <el-sub-menu :index="index" v-if="item.children">
+            <template #title>
+              <el-icon><location /></el-icon>
+              <span>{{ item.name }}</span>
+            </template>
+            <el-menu-item @click="menuClick(l, i)" v-for="(l, i) in item.children" :key="i">{{
+              l.name
+            }}</el-menu-item>
+          </el-sub-menu>
+          <el-menu-item @click="menuBossClick(item, index)" :index="index" v-else>
+            <el-icon><location /></el-icon>
+            <span>{{ item.name }}</span>
+          </el-menu-item>
+        </div>
+      </el-menu>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@/components/Icon'
+import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useDesign } from '@/hooks/web/useDesign'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/store/modules/user'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
+defineOptions({ name: 'Header' })
+const { t } = useI18n()
+
+const { wsCache } = useCache()
+
+const { push, replace } = useRouter()
+
+const userStore = useUserStore()
+const appStore = useAppStore()
+const tagsViewStore = useTagsViewStore()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('user-info')
+
+const user = wsCache.get(CACHE_KEY.USER)
+
+const avatar = user.user.avatar ? user.user.avatar : avatarImg
+
+const userName = user.user.nickname ? user.user.nickname : 'Admin'
+const titleName = ref(appStore.title)
+const loginOut = () => {
+  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    type: 'warning'
+  })
+    .then(async () => {
+      await userStore.loginOut()
+      tagsViewStore.delAllViews()
+      replace('/login?redirect=/index')
+    })
+    .catch(() => {})
+}
+const toProfile = async () => {
+  push('/user/profile')
+}
+
+const reactiveData: any = reactive({
+  routes: []
+})
+const headerTitleName: any = ref('') // 标题名称
+const router = useRouter()
+
+const initMenus = async () => {
+  const uid = router.currentRoute.value
+  let locals: any = localStorage.getItem('roleRouters')
+  let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
+
+  let childName = uid.name
+  let childArr = roleRouters.slice(0, roleRouters.length)
+  console.log(childArr)
+  reactiveData.routes = childArr
+}
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const menuClick = (item, index) => {
+  push(item.path)
+}
+const menuBossClick = (item, index) => {
+  push(item.path)
+}
+watch(() => {
+  initMenus()
+})
+/** 初始化 **/
+onMounted(() => {
+  initMenus()
+})
+</script>
+<style lang="scss" scoped>
+.oa_menus {
+  width: calc(100%);
+  height: 100%;
+  // background: #183868;
+
+  .menus-user {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 40px;
+    .userImg {
+      width: 60px;
+      height: 60px;
+      background-color: #fff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      .userIcon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .userInfo {
+      width: 100%;
+      margin-top: -25px;
+      h4 {
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-bottom: 5px;
+      }
+      p {
+        text-align: center;
+        color: #bcd1f0;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .menus-btns {
+    width: 100%;
+    height: 40px;
+    padding: 0 20px;
+    margin-bottom: 10px;
+
+    .btn {
+      width: 100%;
+      height: 100%;
+      background: #05ce9e;
+      border-radius: 20px 20px 20px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      p {
+        margin-left: 8px;
+        color: #fff;
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+  }
+  .menus-tabs {
+    width: 100%;
+    height: calc(100% - 250px);
+    .menuUl {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

client/src/views/OaSystem/oaLayout/tagList.vue

@@ -114,11 +114,11 @@ li {
 }
 ._tagList {
   width: 100%;
-  height: 35px;
-  border-bottom: 1px solid red;
+  height: 50px;
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  background-color: #fff;
+  border-radius: 24px;
   .tag-view {
     ul {
       display: flex;