dbsd_kczx/src/views/site/studentWdkc/studentMenu.vue

<template>
  <div id="siteMain">
            <a-row>
              <a-col :lg="24" :xs="{ span: 0 }">
                <a-menu
          v-model:openKeys="openKeys"
                  v-model:selectedKeys="selectedKeys"
                  style="width: 98%;min-height: calc(100vh - 225px); margin: 10px 0;"
                  mode="inline"
          :inline-collapsed="collapsed"
                >
                  <a-menu-item key="sub1" @click="getGzt('tzgg')">
                    <template #icon>
                      <PieChartOutlined />
                    </template>
                    <span>通知公告</span>
                  </a-menu-item>
                  <a-menu-item key="sub2" @click="getGzt('kcjs')">
                    <template #icon>
                      <BarChartOutlined />
                    </template>
                    <span>课程简介</span>
                  </a-menu-item>
                  <a-menu-item key="sub4" @click="getGzt('dqzy')">
                    <template #icon>
                      <SnippetsOutlined />
                    </template>
                    <span>课程作业</span>
                  </a-menu-item>
                  <a-menu-item key="sub5" @click="getGzt('qmks')">
                    <template #icon>
                      <AppstoreOutlined />
                    </template>
                    <span>期末考试</span>
                  </a-menu-item>
                  <a-menu-item key="sub7" @click="getGzt('kcjc')">
                    <template #icon>
                      <AppstoreAddOutlined />
                    </template>
                    <span>课程测验</span>
                  </a-menu-item>
                  <a-menu-item key="sub8" @click="getGzt('kczy')">
                    <template #icon>
                      <BlockOutlined />
                    </template>
                    <span>课程资源</span>
                  </a-menu-item>
                  
                  <a-menu-item key="sub9" @click="getGzt('stuJiaoXueDanYuanNeiRong')">
                    <template #icon>
                      <Icon icon="ant-design:fund-projection-screen-outlined" />
                    </template>
                    <span>教学单元</span>
                  </a-menu-item>
                  
                  <a-menu-item key="sub10" @click="getGzt('tlq')">
                    <template #icon>
                      <Icon icon="ant-design:aliwangwang-outlined" />
                    </template>
                    <span >讨论区</span>
                  </a-menu-item>

                  <a-menu-item key="sub11" @click="getGzt('jxdg')">
                    <template #icon>
                      <Icon icon="ant-design:aliwangwang-outlined" />
                    </template>
                    <span >教学大纲</span>
                  </a-menu-item>
                  
                </a-menu>
              </a-col>
              <a-col :lg="0" :xs="{ span: 24 }" style="text-align: right;">
                <a-menu
                  v-model:selectedKeys="selectedKeys"
                  style="width: 98%; margin: 10px 0; height: 53px;"
                  mode="horizontal"
                >
                <a-sub-menu key="min0">
                  <template #icon>
                    <MenuUnfoldOutlined />
                  </template>
                  <a-menu-item key="min1" @click="getGzt('tzgg')">
                    <span>通知公告</span>
                  </a-menu-item>
                  <a-menu-item key="min2" @click="getGzt('kcjs')">
                    <span>课程简介</span>
                  </a-menu-item>
                  <!-- <a-menu-item key="min3">
                    <span @click="getGzt('jxdg')">教学大纲</span>
                  </a-menu-item> -->
                  <a-menu-item key="min4" @click="getGzt('dqzy')">
                    <span>课程作业</span>
                  </a-menu-item>
                  <a-menu-item key="min6" @click="getGzt('qmks')">
                    <span>期末考试</span>
                  </a-menu-item>
                  <a-menu-item key="min5" @click="getGzt('kcjc')">
                    <span>课程测验</span>
                  </a-menu-item>
                  <a-menu-item key="min8" @click="getGzt('kczy')">
                    <span>课程资源</span>
                  </a-menu-item>
                  <!-- <a-menu-item key="min6">
                    <span @click="getGzt('dcwj')">问卷调查</span>
                  </a-menu-item>
                  <a-menu-item key="min7">
                    <span @click="getGzt('tlq')">讨论区</span>
                  </a-menu-item> -->
                </a-sub-menu>
                </a-menu>
              </a-col>
            </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, unref ,defineExpose } from 'vue';

  import { getUserSf,getSysConfig } from '/@/views/site/utils/index';
  import { defHttp } from '/@/utils/http/axios';
  import { useRouter } from 'vue-router';


  import headerPage from '/@/views/site/common/header.vue';
  import footerPage from '/@/views/site/common/footer.vue';
  import dqxqkc from '/@/views/site/renKeJiaoCheng/checkKecheng/dqxqkc.vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined, MenuUnfoldOutlined,PieChartOutlined,BarChartOutlined,SnippetsOutlined,AppstoreAddOutlined,BlockOutlined } from '@ant-design/icons-vue';


  const maxClassName = ref<any>({});
  const selectedKeys = ref<string[]>([]);
    const openKeys = ref<string[]>(['sub0']);
  //当前路由信息
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  const { rwbh,xqxn,type,teano } = query;//获取传递参数
  let router = useRouter();
  const collapsed = ref<any>(false);


  function getGzt(zytype){
    console.log(`🚀 ~ getGzt ~ type:`, zytype)
    var href = "";
    if(zytype=='dqzy'){//当前作业
      href = "/stuzy/studentDqzy";
    } else if(zytype=='dcwj'){//当前问卷
      href = "/stuzy/stuDcwjWenjuan";
    }else if(zytype=='kcjc'){//课程检测
      href = "/stuzy/stuCeshiWenjuan";
    }else if(zytype=='kcjs'){//课程简介
      href = "/stuzy/studentMain";
    }else if(zytype=='tzgg'){//通知公告
      href = "/stuzy/StudentGonggaoList";
    }else if(zytype=='tlq'){//讨论区
      href = "/stuzy/stuTlq";
    }else if(zytype=='zyhp'){//作业互评
      href = "/stuzy/zyhp";
    }else if(zytype == 'stuJiaoXueDanYuanNeiRong'){//教学单元内容
      router.push({ name: 'stuJiaoXueDanYuanNeiRong', query: { rwbh,xqxn,type,teano } });
      return;
    }else if(zytype=='qmks'){//期末考试
      href = "/stuzy/studentQmks";
    }else if(zytype=='jxdg'){//jxdg
      href = "/stuzy/studentJxdg";
    }else if(zytype=='kczy'){//kczy
      href = "/stuzy/studentKczy";
    }


    router.push({path:href,query: {rwbh,xqxn,type,teano}});
  }

  function toggleCollapsed() {
  collapsed.value = !collapsed.value;
  openKeys.value = collapsed.value ? [] : selectedKeys.value;
}
  //进入就加载
  onMounted(() => {
    console.log('rwbh:',rwbh);
  });
defineExpose({
  toggleCollapsed
  });

</script>
<style lang="less" scoped>
#siteMain {
  // font-size: ;
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1070px;
    //居中
    margin: 0 auto;
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #FFF;
    }
    .ant-layout-sider {
      color: #fff;
      line-height: 120px;
      background: #3ba0e9;
    }
    .ant-layout-content {
      min-height: 120px;
      color: #000;
      line-height: 120px;
      background: #f3f3f4;
    }
  }
}
.ant-menu-overflow {
  flex-direction: row-reverse
}
</style>