瑞安首页

client/.env.dev

@@ -5,7 +5,7 @@ VITE_DEV=false
 
 # 请求路径
 # VITE_BASE_URL='http://10.10.9.113:48080'
-VITE_BASE_URL='http://10.10.10.7:18080'
+VITE_BASE_URL='http://10.10.8.247:48080'
 # VITE_BASE_URL='https://oa.zjugis.com:28080'
 
 # 上传路径

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

@@ -1,11 +1,6 @@
 <template>
   <div class="header">
-    <div class="header-left">
-      <img src="@/assets/imgs/OA/zdww.png" alt="" />
-      <p>{{ titleName }} </p>
-    </div>
     <div class="header-right">
-      <Weather />
       <div class="hx"></div>
       <!-- <div class="message">
         <el-badge :value="3" class="item">

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

@@ -1,12 +1,28 @@
 <template>
   <div class="_layout">
-    <div class="layout-left">
+    <div class="layout-top">
       <Menus />
     </div>
-    <div class="layout-right">
+    <div class="layout-bottom">
       <div class="layout-header">
-        <Header />
-        <TagList />
+        <div class="menus-tabs">
+          <el-menu default-active="2" class="el-menu-vertical-demo">
+            <div
+              v-for="(item, index) in reactiveData.routes"
+              :key="index"
+              class="menuDiv"
+              @mouseenter="handleMouseEnter(item, index)"
+              @mouseleave="handleMouseLeave()"
+              v-show="item.name != '个人档案'"
+            >
+              <el-menu-item @click="menuClick(item, index)" :index="String(index)">
+                <Icon :icon="item.icon" />
+                <span>{{ item.name }}</span>
+              </el-menu-item>
+              <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
+            </div>
+          </el-menu>
+        </div>
       </div>
       <div class="layout-content" v-show="isFrameView">
         <iframe
@@ -31,8 +47,6 @@
 </template>
 <script setup lang="ts">
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import Header from './header.vue'
-import TagList from './tagList.vue'
 import Menus from './menus.vue'
 import subscribe from '@/utils/Subscribe'
 
@@ -48,6 +62,18 @@ const currentIframeId = ref<string>('')
 const getCaches = computed((): string[] => {
   return Array.from(tagsViewStore.cachedViews)
 })
+const reactiveData: any = reactive({
+  routes: []
+})
+
+const initMenus = async () => {
+  let locals: any = localStorage.getItem('roleRouters')
+  let roleRouters = JSON.parse(JSON.parse(locals).v)?.[0]?.children
+
+  let childArr = roleRouters?.slice(0, roleRouters?.length)
+  reactiveData.routes = childArr
+}
+
 const filterIframe = (arr): any[] => {
   return arr.filter((item) => {
     if (item && item.query && item.query.iframe == '1') {
@@ -98,40 +124,71 @@ watch(
     immediate: true
   }
 )
+const { push } = useRouter()
+const mouseenterIndex = ref(-1)
+const menuData = ref()
+const router = useRouter()
+const handleMouseEnter = (item: any, index: any) => {
+  if (item.children != null) {
+    mouseenterIndex.value = index
+    menuData.value = item
+  } else {
+    mouseenterIndex.value = -1
+  }
+}
+const handleMouseLeave = () => {
+  mouseenterIndex.value = -1
+}
+const menuClick = (item: any, idx: any) => {
+  if (item.name == '运营中心') {
+    const url = router.resolve({
+      path: '/oaView/marketView'
+    })
+    // 打开新窗口
+    window.open(url.href)
+    return
+  }
+  if (item.children == null) {
+    push('/oaSystem/' + item.path)
+  } else {
+    return
+  }
+}
+/** 初始化 **/
+onMounted(() => {
+  initMenus()
+})
 </script>
 <style>
 @import url('./content.scss');
 </style>
 <style lang="scss" scoped>
 ._layout {
-  display: flex;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-
-  .layout-left {
-    width: 184px;
-    height: 100%;
-    background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
+  .layout-top {
+    width: 100%;
   }
 
-  .layout-right {
-    width: calc(100% - 184px);
-    height: 100%;
+  .layout-bottom {
+    border: 1px solid #f00;
+    width: 100%;
+    height: calc(100% - 110px);
     padding: 15px;
     background: #eaf1f9;
-
+    display: flex;
+    vertical-align: top;
     .layout-header {
-      width: 100%;
-      height: 100px;
+      width: 140px;
+      border: 1px solid #f00;
+      height: 100%;
+      vertical-align: top;
     }
 
     .layout-content {
-      width: 100%;
-      height: calc(100% - 140px);
-      margin-top: 40px;
+      border: 1px solid #f00;
+      width: calc(100% - 140px);
+      height: 100%;
     }
   }
 }

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

@@ -1,50 +1,30 @@
 <template>
   <div class="oa_menus">
-    <div class="menus-user">
+    <div class="header">
+      <div class="header-logo">
+        <img src="../../../assets/imgs/logo.png" />
+        <img src="../../../assets/imgs/logo_title.png" />
+        <span class="circle"></span>
+        <span class="title">自然资源和规划局一体化系统</span>
+      </div>
       <div class="userImg" @click="userImgClick">
         <ElAvatar :src="user.user.avatar ?? avatarImg" alt="" class="userIcon" />
-        <div class="glBox" v-show="data?.sl">
-          <span>司龄{{ data?.sl }}年</span>
-        </div>
-        <div class="userHover">
-          <p>个人档案</p>
-        </div>
-      </div>
-      <div class="userInfo">
-        <h4>{{ userName }}</h4>
-        <p>{{ deptName }}</p>
-      </div>
-    </div>
-    <div class="menus-btns">
-      <div class="btn" @click="toMainOfficeCenter()">
-        <img src="@/assets/imgs/OA/bjzx_icon.png" alt="" />
-        <p>办件中心</p>
-        <div class="tip" v-show="attendCount > 0">{{ attendCount }}</div>
+        <p class="userInfo">{{ userName }}</p>
       </div>
     </div>
     <div class="menus-tabs">
-      <el-menu default-active="2" class="el-menu-vertical-demo">
-        <div
-          v-for="(item, index) in reactiveData.routes"
-          :key="index"
-          class="menuDiv"
-          @mouseenter="handleMouseEnter(item, index)"
-          @mouseleave="handleMouseLeave(item, index)"
-          v-show="item.name != '个人档案'"
-        >
-          <el-menu-item @click="menuClick(item, index)" :index="String(index)">
-            <Icon :icon="item.icon" />
-            <span>{{ item.name }}</span>
-            <span
-              class="project_corner"
-              v-if="['个人中心'].includes(item.name) && projectCorner > 0"
-            >
-              {{ projectCorner }}
-            </span>
-          </el-menu-item>
-          <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
+      <div
+        v-for="(item, index) in reactiveData.routes"
+        :key="index"
+        class="menuDiv"
+        @mouseenter="handleMouseEnter(item, index)"
+        @mouseleave="handleMouseLeave(item, index)"
+        v-show="item.name != '个人档案'"
+      >
+        <div @click="menuClick(item, index)" :index="String(index)">
+          <span>{{ item.name }}</span>
         </div>
-      </el-menu>
+      </div>
     </div>
   </div>
 </template>
@@ -176,99 +156,52 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+$logo_w_h: 50px;
 .oa_menus {
-  width: calc(100%);
+  width: 100%;
   height: 100%;
-  // background: #183868;
-
-  .menus-user {
-    display: flex;
+  > .header {
     width: 100%;
-    height: 180px;
-    padding-top: 40px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #5383bd;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    .userImg {
-      position: relative;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: url('../../../assets/imgs/header_bg.png') no-repeat;
+    background-size: 100% 100%;
+    > .header-logo {
       display: flex;
-      width: 60px;
-      height: 60px;
-      padding: 3px;
-      cursor: pointer;
-      background-color: #fff;
-      border-radius: 50%;
       align-items: center;
-      justify-content: center;
-
-      .userIcon {
-        width: 100%;
-        height: 100%;
-      }
-
-      .glBox {
-        position: absolute;
-        bottom: -10px;
-        left: 50%;
-        z-index: 1;
-        display: flex;
-        width: 64px;
-        height: 18px;
-        margin-left: -32px;
-        background: #f9a527;
-        border-radius: 14px;
-        align-items: center;
-        justify-content: center;
-
-        span {
-          font-size: 12px;
-          color: #fff;
-        }
+      > img {
+        height: $logo_w_h;
       }
-
-      .userHover {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: none;
-        width: 100%;
-        height: 100%;
-        background-color: rgba($color: #000, $alpha: 30%);
+      > .circle {
+        width: 8px;
+        height: 8px;
+        display: block;
         border-radius: 50%;
-        align-items: center;
-        justify-content: center;
-
-        p {
-          font-size: 10px;
-          color: #fff;
-        }
+        background: #fff;
+        margin: 0px 8px;
       }
-    }
-
-    .userImg:hover {
-      .userHover {
-        display: flex;
+      > .title {
+        color: #fff;
+        font-size: 26px;
       }
     }
-
-    .userInfo {
-      width: 100%;
-      margin-top: 0;
-
-      h4 {
-        margin-bottom: 5px;
-        font-size: 18px;
-        color: #fff;
-        text-align: center;
+    .userImg {
+      position: relative;
+      cursor: pointer;
+      > .userIcon {
+        display: inline-block;
+        width: $logo_w_h;
+        height: $logo_w_h;
+        border-radius: 50%;
+        vertical-align: middle;
       }
-
-      p {
-        font-size: 14px;
-        font-weight: 400;
-        color: #bcd1f0;
-        text-align: center;
+      > .userInfo {
+        display: inline-block;
+        color: #fff;
+        vertical-align: middle;
+        margin-left: 5px;
       }
     }
   }
@@ -287,50 +220,23 @@ onMounted(() => {
     font-size: 14px !important;
     text-align: center;
   }
-  .menus-btns {
-    width: 100%;
-    height: 40px;
-    padding: 0 20px;
-    margin-bottom: 10px;
-    position: relative;
-    .tip {
-      background-color: #f00;
-      position: absolute;
-      right: 15px;
-      top: -10px;
-      font-size: 12px;
-      color: #fff;
-      width: 22px;
-      height: 22px;
-      line-height: 22px;
-      border-radius: 50%;
-      text-align: center;
-    }
-    .btn {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      background: #05ce9e;
-      border-radius: 20px;
-      align-items: center;
-      justify-content: center;
-
-      p {
-        margin-left: 8px;
-        font-size: 16px;
-        font-weight: bold;
-        color: #fff;
-      }
-    }
-  }
 
   .menus-tabs {
     width: 100%;
-    height: calc(100% - 250px);
-    .menuDiv {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d3dff0;
+    > .menuDiv {
+      height: 50px;
+      line-height: 50px;
       position: relative;
-
+      padding: 0px 20px;
+      box-sizing: border-box;
+      border-bottom: 3px solid transparent;
+      cursor: pointer;
+      &:hover {
+        border-bottom: 3px solid #417cf7;
+      }
       :deep(.el-menu-item) {
         justify-content: center;
       }
@@ -344,8 +250,8 @@ onMounted(() => {
     border: none;
 
     span {
-      font-size: 16px;
-      color: #fff;
+      font-size: 14px;
+      color: #333;
     }
 
     .is-active {
@@ -353,11 +259,14 @@ onMounted(() => {
     }
 
     .el-menu-item:hover {
-      background-color: #113468;
     }
   }
 }
-
+:deep(.el-menu-item) {
+  height: auto;
+  line-height: auto;
+  padding: 5px 10px;
+}
 :deep(.el-menu-item > span) {
   font-size: 18px !important;
 }

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

@@ -97,13 +97,13 @@
                     effect="dark"
                     :disabled="(item?.query?.name ?? '') === ''"
                     :content="`${item.meta.title}
-                    ${item.meta.title === '' ? item?.query?.title ?? '' : ''}
+                    ${item.meta.title === '' ? (item?.query?.title ?? '') : ''}
                     ${(item?.query?.name ?? '') !== '' ? `（ ${item?.query?.name} ）` : ''}`"
                     placement="top-start"
                   >
                     <p>
                       {{ item.meta.title }}
-                      {{ item.meta.title === '' ? item?.query?.title ?? '' : '' }}
+                      {{ item.meta.title === '' ? (item?.query?.title ?? '') : '' }}
                       <!-- 用于多开页面的区分展示（例如详情页）-->
                       <!-- {{ (item?.query?.name ?? '') !== '' ? `(${item?.query?.name})` : '' }}-->
                     </p>