crm_front_v3/src/layouts/components/container/index.vue

<script setup>
import { computed, reactive, ref, toRefs,watch } from "vue";
import { useRoute,useRouter } from 'vue-router'
import { useQuitSystem } from '@/hooks/login/use-login'
import { customInterence, roadshowInterence,departInterence } from "@/api/api";
import { ElMessageBox } from 'element-plus'
import { Expand,Fold } from '@element-plus/icons-vue'
import BreadCrumb from '../breadcrumb/index.vue'
import questionMsgDia from '@/components/questionMsgDia.vue'

const props = defineProps({
  isCollapse: Boolean,
});

const emit = defineEmits({
  "changeCollapese" : Function
})

const $route = useRoute()
const $router = useRouter()

const sysUserName = localStorage.getItem('userName') || ''

const done = computed(() => {
  //今日待办是否处理完
  if(!todayList.value.length){
    return false
  }
  // 之前是通过判断列表中是否都有说明,现需要判断列表中都要添加或编辑
  return todayList.value.every(item=>item.isEdited)
})
const Role = computed(() => {
  let role = localStorage.getItem('Role') || '';
  return role;
})
const isShowHelpDoc = computed(() => {
  let role = localStorage.getItem('RoleIdentity') || '';

  const roleArr = ['rai_group','ficc_group','rai_admin','ficc_admin','rai_seller','ficc_seller','admin']
  return roleArr.includes(role)
})

watch(
  () => $route.path,
  (newval) => {
    if(newval === '/sealApprovalList'){
        isShowApprovalNotice.value = true
    }
  }
)


const isCollapse = computed(()=> props.isCollapse)
function collapseHandle() {
  // 派发折叠导航栏事件
  emit('changeCollapese')
}

//获取销售今日待办
const show = ref(false); //显示销售今日待办列表
const todayListOpen = ref("auto"); //auto 自动打开的今日待办 不可关闭 其余为点击导航打开的
const todayList = ref([]);
const todayHistoryList = ref([]); //销售今日待办某项的历史数据
async function getSellerTodayList(type) {
  todayListOpen.value = type;
  let ReasonStatus = -1;
  if (type === "auto") {
    ReasonStatus = -1;
  } else {
    ReasonStatus = 0;
  }
  const res = await customInterence.sellerTodayList({
    ReasonStatus: ReasonStatus,
    PageSize: 10000,
    CurrentIndex: 1,
  });
  if (res.Ret === 200) {
    if (type === "auto" && res.Data.Paging.Totals > 0) {
      // 自动弹出清除上次说明
      res.Data.List &&
        res.Data.List.forEach((item) => (item.RenewalReason = ""));
    }
    if ((type === "auto" && res.Data.Paging.Totals > 0) || type !== "auto") {
      show.value = true;
    } else {
      getSellerFeedBackList();
    }

    todayList.value = res.Data.List;
  }
}

/* 获取销售路演待反馈 */
const isFeedbackDialog = ref(false);
const roadshowFeedbackList = ref([]);
const isShowApprovalNotice = ref(false); // 是否显示用印审批的公告
function getSellerFeedBackList() {
  roadshowInterence.toFeedbacklist().then((res) => {
    if (res.Ret !== 200) return;

    const { Data } = res;

    if (!Data || !Data.length) return;

    isFeedbackDialog.value = true;
    roadshowFeedbackList.value = Data;
  });
}

/* 消息代办 */
const noticeState = reactive({
  noticeList:[],//消息提醒列表
  isShowNotice:false,//显示提示红点
  currentNoticeList:[],//当前显示的消息提醒列表
  noticeType:'客户',//消息类型 客户/合同/用印
  noticeCount:0,//总共多少消息
  flag1:false,//显示客户提示红点
  flag2:false,//显示合同提示红点
  flag3:false,//显示用印提示红点
  flag4:false,
  flag5:false,//显示ETA试用相关的红点
  flag6:false,//显示出差相关的红点
})
/* 待办事项列表 */
function getNotice() {
  customInterence.noticeList().then(res => {
    if(res.Ret === 200) {
      res.Data.Company.List&&res.Data.Company.List.forEach(item => {
        item.CreateTime =  item.CreateTime.replace(/-/g,'.')
      });
      res.Data.Contract.List&&res.Data.Contract.List.forEach(item => {
        item.CreateTime =  item.CreateTime.replace(/-/g,'.')
      });
      res.Data.Seal.List&&res.Data.Seal.List.forEach(item => {
        item.CreateTime =  item.CreateTime.replace(/-/g,'.')
      });
      res.Data.EdbReplace.List&&res.Data.EdbReplace.List.forEach(item => item.CreateTime =  item.CreateTime.replace(/-/g,'.'));
      res.Data.BusinessTrip.List&&res.Data.BusinessTrip.List.forEach(item => item.CreateTime =  item.CreateTime.replace(/-/g,'.'));

      noticeState.noticeList = res.Data;
      noticeState.noticeCount= Role.value === 'admin' ? res.Data.EdbReplace.Total+res.Data.BusinessTrip.Total : 
      res.Data.Company.Total+res.Data.Contract.Total+res.Data.Seal.Total + res.Data.EdbReplace.Total+res.Data.BusinessTrip.Total;

      noticeState.noticeType = Role.value === 'admin' ? '更新' : '客户';
      // 默认显示客户
      noticeState.currentNoticeList = Role.value === 'admin' ? res.Data.EdbReplace.List : res.Data.Company.List

      // 检查是否有未读的
      if(Role.value !=='admin'){
        noticeState.flag1=res.Data.Company.List.some(item => {
          return item.MessageStatus === 0;
        })
        noticeState.flag2=res.Data.Contract.List.some(item => {
          return item.MessageStatus === 0;
        })
        noticeState.flag3=res.Data.Seal.List.some(item => {
          return item.MessageStatus === 0;
        })
      }

      noticeState.flag5=res.Data.ETATrial.List.some(item => {
        return item.MessageStatus === 0;
      })
      noticeState.flag6=res.Data.BusinessTrip.List.some(item => {
        return item.MessageStatus === 0;
      })
      
    }
  })
}
getNotice()
 // 切换通知消息类型
function handleNoticeTypeChange(e){
  noticeState.noticeType=e
  if(e==='客户'){
    noticeState.currentNoticeList=noticeState.noticeList.Company.List
  }else if(e==='合同'){
    noticeState.currentNoticeList=noticeState.noticeList.Contract.List
  }else if (e === '用印'){
    noticeState.currentNoticeList=noticeState.noticeList.Seal.List
  }else if(e==='ETA试用'){
    noticeState.currentNoticeList=noticeState.noticeList.ETATrial.List
  }else if(e==='出差'){
    noticeState.currentNoticeList=noticeState.noticeList.BusinessTrip.List
  }else{
    noticeState.currentNoticeList=noticeState.noticeList.EdbReplace.List
  }
}
/* 点击消息列表 跳转审批列表 */
function noticeClick(item) {
  customInterence.readNotice({
    Id:Number(item.Id)
  }).then(res => {
    if(res.Ret===200) {
      item.MessageStatus = 1;
      if(noticeState.noticeType==='客户'){
        if($route.path!='/approvalList') {
          $router.push({
            path:'/approvalList'
          })
        }else {
          window.location.reload();
        }
      }else if(noticeState.noticeType==='合同'){
        let Role=localStorage.getItem('Role')
        // 主管跳转合同审批列表
        if(Role==='ficc_admin'||Role==='rai_admin'){
          if($route.path!='/contractapprovallist') {
            $router.push({
              path:'/contractapprovallist'
            })
          }else {
            window.location.reload();
          }
        }else{
          if($route.path!='/contractmanagelist') {
            $router.push({
              path:'/contractmanagelist'
            })
          }else {
            window.location.reload();
          }
        }
      }else if(noticeState.noticeType==='用印'){
        // 用印
        if($route.path!='/sealApprovalList') {
          $router.push({
            path:'/sealApprovalList'
          })
        }else {
          window.location.reload();
        }
      }else if(noticeState.noticeType==='ETA试用'){
        const path = $route.path
        let pushPath = '/etaApprovalList'
        //非管理员:若通过跳转用户列表，若驳回跳转审批列表
        //const etaApprovalListType = item.Content.includes('通过')?'approved':'all'
        const etaApprovalListType = item.Redirect===1?'approved':'all'
        sessionStorage.setItem('etaApprovalListType',etaApprovalListType)
        if(path==pushPath){
          window.location.reload();
        }else{
          $router.push(pushPath)
        }
      }else if(noticeState.noticeType==='出差'){
        const path = $route.path
        let pushPath;
        if(item.ApprovalStatus!=1){
          // 跳到申请列表
          pushPath= '/businessTripApplication'
        }else{
          // 跳到审批列表
          pushPath = '/businessTripApproval'
        } 
        if(path==pushPath){
          window.location.reload();
        }else{
          $router.push(pushPath)
        }
      }
      
    }
  })
}

// 跳转去其他的系统
async function linkToOtherMS(key){
  /**
   * HR_MANAGEMENT_SYSTEM -- HR管理系统
   * FINANCIAL_MANAGEMENT_SYSTEM -- 财务管理系统
   */

  let href = import.meta.env[key]
  console.log(href);
  if(key==='VITE_ETA_SYSTEM'){//跳转ETA系统
    // 获取临时code
    const res=await departInterence.getToETASysCode()
    if(res.Ret===200){
      href=`${href}?code=${res.Data}`
    }
  }
  window.open(href,'_blank');
}

function toOperation (url) {
  let {href} = $router.resolve({path:`/${url}`});
  window.open(href,'_blank');
}

/* 退出 */
function logout() {
  ElMessageBox.confirm(
    '确认退出吗?',
    '提示',
    { type: 'warning', }
  )
  .then(() => {
    useQuitSystem()
  })
  .catch()
}

//修改密码
function resetpwd() {
  $router.push({ path: "/resetpsd" });
}

const { noticeList,isShowNotice,currentNoticeList,noticeType,noticeCount,flag1,flag2,flag3,flag4,flag5,flag6 } = toRefs(noticeState);
</script>
<template>
  <el-container>
    <div id="main_right">
      <div class="main_right_top">
        <div class="main_left_container">
          <div class="main_left_section">
            <!-- 折叠按钮 -->
            <div class="coll_btn" @click="collapseHandle">
              <el-icon class="coll_ico" v-if="isCollapse">
                <Expand />
              </el-icon>
              <el-icon class="coll_ico" v-else>
                <Fold />
              </el-icon>
            </div>
            
            <!-- 面包屑 -->
            <BreadCrumb/>
          </div>

          <div class="approval_notice" v-show="isShowApprovalNotice">
            <img src="~@/assets/img/approval_ notice.png" alt="用印审批公告" />
            <div>纸质合同的用印交付时间为上午10:30-11:30，下午16:00-17:30</div>
          </div>
        </div>

        <div class="right_section">
          <!-- 财务系统 -->
          <div
            class="jump-other-sys-item"
            @click="linkToOtherMS('VITE_FINANCIAL_MANAGEMENT_SYSTEM')"
          >
            <img class="icon" src="~@/assets/img/home/icon01.png" alt="" />
            <span>财务系统</span>
          </div>
          <div
            class="jump-other-sys-item"
            @click="linkToOtherMS('VITE_HR_MANAGEMENT_SYSTEM')"
          >
            <img class="icon" src="~@/assets/img/home/icon02.png" alt="" />
            <span>HR系统</span>
          </div>
          <div class="jump-other-sys-item" @click="linkToOtherMS('VITE_ETA_SYSTEM')">
            <img class="icon" src="~@/assets/img/home/icon03.png" alt="" />
            <span>ETA投研系统</span>
          </div>

          <!-- 留言板消息通知 -->
          <questionMsgDia></questionMsgDia>

          <el-popover
            placement="bottom"
            width="610"
            trigger="hover"
            popper-class="notice_poper"
          >
            <div>
              <h4 style="padding-bottom: 12px; border-bottom: 1px solid #dcdfe6">
                待办事项({{ noticeCount }}项)
              </h4>
              <div class="notice-nav-box">
                <div
                  class="notice-nav-item"
                  @click="handleNoticeTypeChange('客户')"
                  :class="noticeType === '客户' ? 'notice-nav-active' : ''"
                  v-if="Role !== 'admin'"
                >
                  <span>客户</span>
                  <span
                    style="
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #f00;
                      display: block;
                      position: absolute;
                      right: -8px;
                      top: 0px;
                    "
                    v-if="flag1"
                  ></span>
                </div>
                <div
                  class="notice-nav-item"
                  @click="handleNoticeTypeChange('合同')"
                  :class="noticeType === '合同' ? 'notice-nav-active' : ''"
                  v-if="Role !== 'admin'"
                >
                  <span>合同</span>
                  <span
                    style="
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #f00;
                      display: block;
                      position: absolute;
                      right: -8px;
                      top: 0px;
                    "
                    v-if="flag2"
                  ></span>
                </div>
                <div
                  class="notice-nav-item"
                  @click="handleNoticeTypeChange('用印')"
                  :class="noticeType === '用印' ? 'notice-nav-active' : ''"
                  v-if="Role !== 'admin'"
                >
                  <span>用印</span>
                  <span
                    style="
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #f00;
                      display: block;
                      position: absolute;
                      right: -8px;
                      top: 0px;
                    "
                    v-if="flag3"
                  ></span>
                </div>
                <div
                  class="notice-nav-item"
                  @click="handleNoticeTypeChange('ETA试用')"
                  :class="noticeType === 'ETA试用' ? 'notice-nav-active' : ''"
                >
                  <span>ETA试用</span>
                  <span
                    style="
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #f00;
                      display: block;
                      position: absolute;
                      right: -8px;
                      top: 0px;
                    "
                    v-if="flag5"
                  ></span>
                </div>
                <div
                  class="notice-nav-item"
                  @click="handleNoticeTypeChange('出差')"
                  :class="noticeType === '出差' ? 'notice-nav-active' : ''"
                >
                  <span>出差</span>
                  <span
                    style="
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #f00;
                      display: block;
                      position: absolute;
                      right: -8px;
                      top: 0px;
                    "
                    v-if="flag6"
                  ></span>
                </div>
              </div>
              <ul style="margintop: 20px" v-if="currentNoticeList.length">
                <li
                  class="notice_item"
                  v-for="item in currentNoticeList"
                  :key="item"
                  @click="noticeClick(item)"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    cursor: pointer;
                    margin-bottom: 15px;
                  "
                >
                  <div style="display: flex; align-items: center">
                    <div
                      style="
                        width: 36px;
                        min-width: 36px;
                        height: 36px;
                        background: #409eff;
                        border-radius: 50%;
                        color: #fff;
                        text-align: center;
                        line-height: 36px;
                        margin-right: 8px;
                        font-size: 12px;
                      "
                    >
                      {{ item.RealName.substr(item.RealName.length - 2) }}
                    </div>
                    <span :style="item.MessageStatus === 0 ? '' : 'color:#bbb'">
                      {{
                        (Role == "rai_admin" || Role == "ficc_admin") &&
                        noticeType !== "出差"
                          ? item.RealName
                          : ""
                      }}
                      {{ item.Content }}
                    </span>
                  </div>
                  <span
                    style="color: #b2b5bb; margin-left: 15px; min-width: 110px"
                    >{{ item.CreateTime }}</span
                  >
                </li>
              </ul>
              <div
                style="text-align: center; margin: 40px 0; color: #999"
                v-else
              >
                暂无通知
              </div>
            </div>
            <template #reference>
              <div class="icon-box-item" @click="getNotice">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M16.7344 15.4904L15.2941 12.9564V7.84847C15.2941 5.89142 13.8231 3.77337 11.6786 2.99732C11.5741 1.96012 10.8811 1.20374 9.97287 1.20374C9.06595 1.20374 8.37036 1.96014 8.26717 2.99732C6.12392 3.77337 4.65292 5.8914 4.65292 7.84847V12.9564L3.14258 15.6146C3.04183 15.7903 3.04429 16.0054 3.14504 16.1799C3.24581 16.3544 3.43263 16.4601 3.63415 16.4601H7.22871C7.49293 17.7357 8.62233 18.6967 9.97289 18.6967C11.3247 18.6967 12.4541 17.7357 12.7171 16.4601H16.3116C16.3215 16.4601 16.3288 16.4601 16.3374 16.4601C16.6508 16.4601 16.904 16.2082 16.904 15.8948C16.904 15.7362 16.8401 15.5925 16.7344 15.4904ZM9.97287 2.33803C10.1769 2.33803 10.3415 2.49286 10.4472 2.7239C10.2899 2.70792 10.1375 2.67106 9.97287 2.67106C9.8082 2.67106 9.65583 2.70792 9.49851 2.7239C9.60422 2.49284 9.76889 2.33803 9.97287 2.33803ZM9.97287 17.5636C9.25396 17.5636 8.65303 17.1016 8.41951 16.4601H11.5262C11.2927 17.1015 10.693 17.5636 9.97287 17.5636ZM4.60745 15.3282L5.71102 13.3853C5.76015 13.3017 5.78719 13.2034 5.78719 13.1051V7.84847C5.78719 5.93934 7.57648 3.80413 9.97287 3.80413C12.3692 3.80413 14.161 5.93934 14.161 7.84847V13.1051C14.161 13.2034 14.1868 13.3017 14.2347 13.3853L15.3395 15.3282H4.60745Z"
                    fill="currentColor"
                  />
                </svg>
                <span
                  style="
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #f00;
                    display: block;
                    position: absolute;
                    right: 5px;
                    top: 3px;
                  "
                  v-if="flag1 || flag2 || flag3 || flag4 || flag5 || flag6"
                ></span>
              </div>
            </template>
          </el-popover>

          <!-- 销售待办 -->
          <el-tooltip effect="dark" content="待办事项" placement="bottom" 
              v-if="['rai_seller','ficc_seller'].includes(Role)">
            <div
              class="icon-box-item"
              @click="handleShowSallerTodayList"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2.35855 17.4322V2.4931C2.35855 2.41005 2.42588 2.34244 2.50893 2.34244H15.0778C15.1609 2.34244 15.2285 2.41005 15.2285 2.4931V8.52028H16.3187V2.4931C16.3187 1.80903 15.7622 1.2522 15.0778 1.2522H2.50893C1.82487 1.2522 1.26831 1.80903 1.26831 2.4931V17.4322C1.26831 18.1163 1.82487 18.6731 2.50893 18.6731H9.54544V17.5829H2.50893C2.42588 17.5829 2.35855 17.5153 2.35855 17.4322Z"
                  fill="currentColor"
                />
                <path
                  d="M5.61836 10.7966C5.31731 10.7966 5.07324 11.0404 5.07324 11.3417C5.07324 11.643 5.31731 11.8868 5.61836 11.8868H7.79512C8.09616 11.8868 8.34024 11.643 8.34024 11.3417C8.34024 11.0404 8.09616 10.7966 7.79512 10.7966H5.61836ZM12.4324 8.39255C12.4324 8.09124 12.1883 7.84743 11.8872 7.84743H5.61836C5.31731 7.84743 5.07324 8.09124 5.07324 8.39255C5.07324 8.69385 5.31731 8.93767 5.61836 8.93767H11.8872C12.1883 8.93767 12.4324 8.69385 12.4324 8.39255ZM11.8872 5.00577H5.61836C5.31731 5.00577 5.07324 5.24958 5.07324 5.55089C5.07324 5.85219 5.31731 6.09601 5.61836 6.09601H11.8872C12.1883 6.09601 12.4324 5.85219 12.4324 5.55089C12.4324 5.24958 12.1883 5.00577 11.8872 5.00577ZM16.0233 14.038H14.9365V12.2749C14.9365 11.9736 14.6924 11.7298 14.3914 11.7298C14.0903 11.7298 13.8463 11.9736 13.8463 12.2749V14.5832C13.8463 14.8845 14.0903 15.1283 14.3914 15.1283H16.0233C16.3243 15.1283 16.5684 14.8845 16.5684 14.5832C16.5684 14.2818 16.3243 14.038 16.0233 14.038Z"
                  fill="currentColor"
                />
                <path
                  d="M14.4272 10.0611C12.0589 10.0611 10.1389 11.981 10.1389 14.3493C10.1389 16.7177 12.0588 18.6376 14.4272 18.6376C16.7955 18.6376 18.7155 16.7177 18.7155 14.3493C18.7155 11.981 16.7955 10.0611 14.4272 10.0611ZM14.4272 17.5474C12.6638 17.5474 11.2292 16.1127 11.2292 14.3493C11.2292 12.5859 12.6638 11.1513 14.4272 11.1513C16.1906 11.1513 17.6252 12.5859 17.6252 14.3493C17.6253 16.1127 16.1906 17.5474 14.4272 17.5474Z"
                  fill="currentColor"
                />
              </svg>
            </div>
          </el-tooltip>

          <!-- 系统帮助文档 -->
          <el-tooltip effect="dark" content="帮助文档" placement="bottom" v-if="isShowHelpDoc">
            <div
              class="icon-box-item"
              @click="toOperation('fingerpost')"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9.24255 14.5C9.24255 14.0858 9.57834 13.75 9.99255 13.75C10.4068 13.75 10.7426 14.0858 10.7426 14.5C10.7426 14.9142 10.4068 15.25 9.99255 15.25C9.57834 15.25 9.24255 14.9142 9.24255 14.5Z"
                  fill="currentColor"
                />
                <path
                  d="M9.99261 5.00763C8.32056 5.00763 6.96136 6.36682 6.96136 8.03888H8.21136C8.21136 7.05718 9.01092 6.25763 9.99261 6.25763C10.9743 6.25763 11.7739 7.05718 11.7739 8.03888C11.7739 8.71106 11.2183 9.3851 10.4931 9.67971L10.4899 9.68101C9.82793 9.95419 9.36767 10.6052 9.36767 11.3656V12.5H10.6177V11.3656C10.6177 11.1228 10.7618 10.9216 10.9655 10.837C11.9996 10.4161 13.0239 9.37337 13.0239 8.03888C13.0239 6.36682 11.6647 5.00763 9.99261 5.00763Z"
                  fill="currentColor"
                />
                <path
                  d="M18.7427 10C18.7427 5.16751 14.8252 1.25 9.99268 1.25C5.16019 1.25 1.24268 5.16751 1.24268 10C1.24267 14.8325 5.16018 18.75 9.99267 18.75C14.8252 18.75 18.7427 14.8325 18.7427 10ZM17.4927 10C17.4927 14.1421 14.1348 17.5 9.99267 17.5C5.85054 17.5 2.49267 14.1421 2.49268 10C2.49268 5.85786 5.85054 2.5 9.99268 2.5C14.1348 2.5 17.4927 5.85787 17.4927 10Z"
                  fill="currentColor"
                />
              </svg>
            </div>
          </el-tooltip>

          <div class="userinfo">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link userinfo-inner">
                <img src="~@/assets/img/set_m/user_img.png" />
                {{ sysUserName + "，欢迎您！" }}
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item divided @click="resetpwd"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item divided @click="logout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <section
        class="content-container"
        id="displayMain"
        ref="displayMain"
        :style="isCollapse ? 'left:70px' : 'left:200px'"
      >
        <el-row
          class="grid-content bg-purple-light contentc"
          style="min-width: 900px"
        >
          <el-col :span="24" class="content-wrapper">
              <!-- 加入key 解决不同路由到同一个文件时的缓存问题 -->
              <router-view :key="$route.path" v-slot="{Component}">
                <!-- <transition name="fade" mode="out-in"> -->
                  <component :is="Component"></component>
                <!-- </transition> -->
              </router-view>
          </el-col>
        </el-row>
      </section>
    </div>
  </el-container>
</template>
<style scoped lang="scss">
#main_right {
  width: 100%;
  overflow: hidden;
  background: #f5f7f9;
  .main_right_top {
    // width: 100%;
    background: #fff;
    height: 60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    .main_left_container {
      display: flex;
      align-items: center;
      .main_left_section {
        display: flex;
        flex-shrink: 0;
        align-items: center;
      }
      .approval_notice {
        display: flex;
        align-items: center;
        margin-left: 45px;
        img {
          margin-right: 10px;
        }
        div {
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ee9a34;
          line-height: 19px;
        }
      }
    }

    .coll_btn {
      margin-right: 20px;
      .coll_ico {
        font-size: 22px;
        display: block;
        cursor: pointer;
        color: #606266;
        &:hover {
          color: #4099ef;
        }
      }
    }
    .userinfo {
      min-width: 210px;
      width: 220px;
      height: 60px;
      text-align: right;
      overflow: hidden;
      position: relative;
      margin-left: 15px;
      margin-right: 4%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .theme-picker {
        position: absolute;
        top: 14px;
        left: 0px;
      }
      .userinfo-fingerpost {
        margin-left: 20px;
      }
      .item {
        padding: 4px;
        position: absolute;
        top: 14px;
        left: 110px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .item:hover {
        color: #5882ef;
      }
      .userinfo-inner {
        cursor: pointer;
        color: #666 !important;
        overflow: hidden;
        line-height: 60px;
        font-size: 16px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px;
          float: left;
        }
      }
      .userinfo-inner:hover {
        color: #5882ef;
      }
    }
  }
  .right_section {
    display: flex;
    align-items: center;
    .jump-other-sys-item {
      height: 32px;
      padding: 0 10px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 30px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #eaf3fe;
      }
      .icon {
        height: 20px;
        margin-right: 3px;
      }
      span {
        line-height: 19px;
      }
    }
  }
  .content-container {
    //height: calc(100vh - 90px);
    background: #f5f7f9;
    // position: relative;
    overflow-y: auto;
    position: absolute;
    //padding-top: 22px;
    left: 200px;
    top: 68px;
    bottom: 0;
    right: 0;
    z-index: 100;
    /*修改滚动条样式*/
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #888;
    }
    &::-webkit-scrollbar-corner {
      background: #666;
    }
    /**/
    .contentc {
      width: 100%;
      overflow: auto;
      .content-wrapper {
        width: 100%;
        padding: 22px 30px;
        box-sizing: border-box;
        overflow: auto;
        background: #f5f7f9;
      }
      .note_entrance {
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 50%;
        height: 100%;
        transform: translateY(-50%);
        > img {
          width: 20px;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }
}
.icon-box-item {
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #333;
  position: relative;
  &:hover {
    background-color: #eaf3fe;
    color: #409eff;
  }
  svg {
    width: 20px;
    height: 20px;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
.notice_item:hover {
  color: #409EFF;
}
.notice_poper {
  max-height: 500px;
  overflow-y: auto;
  .notice-nav-box{
    display: flex;
    padding-top: 12px;
    padding-left: 5px;
    .notice-nav-item{
      cursor: pointer;
      line-height: 2;
      margin-right: 30px;
      position: relative;
    }
  }
  .notice-nav-active{
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
  }
}
</style>