西海岸：点击图标进入首页增加权限判断

2022-10-18 10:45:40 +08:00 · 2022-10-18 10:45:40 +08:00 · 5f3aad2539
parent 2ebec87514
commit 5f3aad2539
1 changed files with 460 additions and 490 deletions
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@ -1,11 +1,8 @@
 <template>
-  <div
-    class="home-header"
-    :class="[
+  <div class="home-header" :class="[
    select !== 'home' || scrollTop > 500 ? 'white' : '',
    props.showView === 'algorithm-details' ? '' : '',
-    ]"
-  >
+  ]">
    <div class="name" @click="goToHome">
      <div class="name-bg" v-if="!itShowXiHaiAn"></div>
      <div class="name-bg-xihaian" v-else></div>
@ -14,52 +11,26 @@
        <p>(United Capacity System)</p>
      </div>
    </div>
-    <div
-      v-for="item in navList"
-      :key="item.key"
-      @click="jumpPage(item)"
-      class="nav"
-      :class="item.key == select ? 'select' : ''"
-    >
+    <div v-for="item in navList" :key="item.key" @click="jumpPage(item)" class="nav"
+      :class="item.key == select ? 'select' : ''">
      {{ item.name }}
    </div>
    <!-- 购物车 -->
    <a-badge :count="sgcNum">
-      <svg
-        t="1650455446850"
-        class="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="2069"
-        width="0.4rem"
-        height="0.4rem"
-        @click="goToSgc"
-      >
+      <svg t="1650455446850" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="2069" width="0.4rem" height="0.4rem" @click="goToSgc">
        <path
          d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
-          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
-          p-id="2070"
-        ></path>
+          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" p-id="2070"></path>
      </svg>
    </a-badge>
    <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
      <!-- 消息提醒 -->
-      <svg
-        t="1654051054113"
-        class="icon2"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="2187"
-        width="0.35rem"
-        height="0.35rem"
-      >
+      <svg t="1654051054113" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="2187" width="0.35rem" height="0.35rem">
        <path
          d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
-          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
-          p-id="2188"
-        ></path>
+          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" p-id="2188"></path>
      </svg>
      <!-- <a-avatar shape="square" size="large" /> -->
    </a-badge>
@ -88,10 +59,7 @@
        <template #title>
          <span>{{ user.realName }}</span>
        </template>
-        <span
-          class="name"
-          @click="jumpPage({ name: '个人中心', key: 'personalCenter' })"
-        >
+        <span class="name" @click="jumpPage({ name: '个人中心', key: 'personalCenter' })">
          {{ user.realName }}
        </span>
      </a-tooltip>
@ -114,58 +82,54 @@
          fill="#bfbfbf"
        ></path>
      </svg> -->
-      <i
-        @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
-        class="iconTo"
-        v-show="backFlag"
-      ></i>
+      <i @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })" class="iconTo" v-show="backFlag"></i>
    </div>
  </div>
 </template>
 <script setup>
-  import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
-  import { getUserInfo } from '@/api/user'
-  import { recordRoute } from '@/config'
-  import { useRoute, useRouter } from 'vue-router'
-  import { mynotice } from '@/api/home'
-  import { useStore } from 'vuex'
-  import { getSgcTotal } from '@/api/home'
-  import Cookies from 'js-cookie'
-  import mybus from '@/myplugins/mybus'
-  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
-  import { message } from 'ant-design-vue'
+import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
+import { getUserInfo } from '@/api/user'
+import { recordRoute } from '@/config'
+import { useRoute, useRouter } from 'vue-router'
+import { mynotice } from '@/api/home'
+import { useStore } from 'vuex'
+import { getSgcTotal } from '@/api/home'
+import Cookies from 'js-cookie'
+import mybus from '@/myplugins/mybus'
+import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
+import { message } from 'ant-design-vue'

-  const store = useStore()
-  const router = useRouter()
-  const route = useRoute()
-  const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn)
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn)

-  // 用户信息
-  const user = ref({
+// 用户信息
+const user = ref({
  username: store.getters['user/username'],
  realName: store.getters['user/realName'],
-  })
-  const select = ref(router.currentRoute.value.name)
-  const mynoticeFlag = ref(false)
-  const mynoticeData = ref([])
-  const navList = ref(navListManagement.navList)
-  const backFlag = ref(true)
-  getUserInfo().then((res) => {
+})
+const select = ref(router.currentRoute.value.name)
+const mynoticeFlag = ref(false)
+const mynoticeData = ref([])
+const navList = ref(navListManagement.navList)
+const backFlag = ref(true)
+getUserInfo().then((res) => {
  if (
    res.data.data.roleIdList.length == 0 &&
    res.data.data.superAdmin === 0
  ) {
    backFlag.value = false
  }
-  })
-  console.log('navList------------>', navList)
+})
+console.log('navList------------>', navList)

-  const props = defineProps({
+const props = defineProps({
  showView: { type: String, default: '' },
-  })
+})

-  // 退出登录
-  const logout = async () => {
+// 退出登录
+const logout = async () => {
  await store.dispatch('user/logout')
  window.sessionStorage.setItem('visits', JSON.stringify([]))
  // 西海岸不返回登录页
@ -177,15 +141,23 @@
      router.push('/login')
    }
  }
+}
+// 返回首页
+const goToHome = () => {
+  // 西海岸
+  if (itShowXiHaiAn.value) {
+    if (
+      !xhaHasPermissionUser.list.includes(user.value.username)
+    ) {
+      return message.warn('暂无权限')
+    }
  }
-  // 返回首页
-  const goToHome = () => {
  router.push({
    path: '/home',
  })
-  }
-  // 跳转页面
-  const jumpPage = (item) => {
+}
+// 跳转页面
+const jumpPage = (item) => {
  // 西海岸
  if (itShowXiHaiAn.value) {
    let _arr = ['共享门户', '能力云图', '能力统计', '需求中心', '赋能案例']
@ -271,50 +243,50 @@
      router.push('/home')
      break
  }
-  }
-  const scrollTop = ref(0)
-  window.onscroll = function () {
+}
+const scrollTop = ref(0)
+window.onscroll = function () {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  scrollTop.value =
    document.documentElement.scrollTop || document.body.scrollTop
  // console.log('滚动距离' + scrollTop.value)
-  }
-  mybus.on('getSgcNum', () => {
+}
+mybus.on('getSgcNum', () => {
  getSgcTotal().then((res) => {
    sgcNum.value = res.data.data.count
    // console.log('申购车总数========================>', res.data.data.count)
  })
-  })
+})

-  const sgcNum = ref(0)
-  const goToSgc = () => {
+const sgcNum = ref(0)
+const goToSgc = () => {
  window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
  router.push('/personalCenter')
-  }
-  const mynoticeNum = ref(0)
-  // 我的消息
-  const getMynotice = () => {
+}
+const mynoticeNum = ref(0)
+// 我的消息
+const getMynotice = () => {
  mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
    // console.log('我的消息', res.data.data)
    mynoticeNum.value = res.data.data.total
    mynoticeData.value = res.data.data.list
  })
-  }
-  const goToView = () => {
+}
+const goToView = () => {
  router.push({
    path: '/mynoticeView',
  })
-  }
-  // const read = (item) => {
-  //   mynoticeRead(item.id).then((res) => {
-  //     console.log('已读', res)
-  //     getMynotice()
-  //   })
-  // }
-  // 建立链接 -- 携带cookie参数
+}
+// const read = (item) => {
+//   mynoticeRead(item.id).then((res) => {
+//     console.log('已读', res)
+//     getMynotice()
+//   })
+// }
+// 建立链接 -- 携带cookie参数

-  onMounted(() => {
+onMounted(() => {
  getSgcTotal().then((res) => {
    // console.log('初始化========================>', res.data.data.count)
    sgcNum.value = res.data.data.count
@ -348,19 +320,19 @@
  mybus.on('getMynotice', () => {
    getMynotice()
  })
-  })
-  onBeforeUnmount(() => {
+})
+onBeforeUnmount(() => {
  mybus.off('getSgcNum')
  mybus.off('getMynotice')
-  })
+})
 </script>
 <style lang="less" scoped>
-  @font-face {
+@font-face {
  font-family: 'header-typeface';
  src: url('~@/assets/newHome/font/header-typeface.ttf');
-  }
+}

-  .home-header {
+.home-header {
  height: 0.64rem;
  width: 100%;
  max-width: 1920px;
@ -397,8 +369,7 @@
    .name-bg-xihaian {
      height: 0.6rem;
      width: 0.6rem;
-        background: url('~@/assets/newHome/newHome-title-bg-xihaian.png')
-          no-repeat;
+      background: url('~@/assets/newHome/newHome-title-bg-xihaian.png') no-repeat;
      background-size: 100%;
      margin-right: 0.15rem;
    }
@ -478,9 +449,9 @@
      cursor: pointer;
    }
  }
-  }
+}

-  .white {
+.white {
  background-color: #fff;
  box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);

@ -513,15 +484,13 @@
      color: #000;
    }
  }
-  }
+}

-  .blue {
+.blue {
  position: absolute;
-    background: linear-gradient(
-      to right,
+  background: linear-gradient(to right,
      rgba(15, 90, 253, 0.8),
-      rgba(36, 25, 248, 0.8)
-    );
+      rgba(36, 25, 248, 0.8));

  .name {
    color: #fff;
@ -541,9 +510,9 @@
      color: #fff;
    }
  }
-  }
+}

-  .mynotice {
+.mynotice {
  width: 4rem;
  height: 3rem;
  background: #eee;
@ -560,18 +529,19 @@
    color: #000;
    font-size: 0.16rem;
  }
-  }
+}

-  .mynotice::-webkit-scrollbar {
+.mynotice::-webkit-scrollbar {
  display: none;
-  }
+}

-  :deep(.ant-list-item) {
+:deep(.ant-list-item) {
  border-bottom: 0.01rem solid #ccc;
  padding: 0.1rem;
-  }
+}
+
+:deep(.ant-list-item-meta-title) {

-  :deep(.ant-list-item-meta-title) {
  // display: flex;
  // justify-content: space-around;
  // align-items: center;
@ -597,18 +567,18 @@
      font-size: 0.1rem;
    }
  }
-  }
+}

-  .iconTo {
+.iconTo {
  display: block;
  width: 0.35rem;
  height: 0.35rem;
  background: url('~@/assets/newHome/iconTo.png') no-repeat;
  cursor: pointer;
-  }
+}
 </style>
 <style>
-  html::-webkit-scrollbar {
+html::-webkit-scrollbar {
  display: none;
-  }
+}
 </style>