pbl-teacher-table/src/components/pages/sassPlatform/index.vue

<template>
  <div class="sassPlatform">
    <div class="sp_header">
      <!-- <div class="sp_h_logo">

      </div> -->
      <div class="sp_h_tagArea">
        <span :class="{tagActive:tagIndex==0}" style="margin-left: 10px;" @click="tagIndex = 0">应用中心</span>
        <span :class="{tagActive:tagIndex==1}" style="margin-left: 17.5px;" @click="goTestSmarter()">智能助手</span>
      </div>
    </div>
    <div class="sp_bottom">
      <div class="sp_b_left">
        <div class="sp_b_l_form" v-for="(item,index) in navList" :key="item.navIndex">
          <span @click="item.open = !item.open">{{ item.name }}<svg :style="`transform: rotate(${item.open?'180':'0'}deg);`" t="1739262423649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7079" width="200" height="200"><path d="M52.335 261.072c-31.269 30.397-31.269 79.722 0 110.194l403.212 391.718c31.325 30.382 82.114 30.382 113.377 0l403.197-391.718c31.325-30.466 31.325-79.793 0-110.194-31.28-30.449-82.058-30.449-113.39 0l-346.497 336.64-346.457-336.64c-31.325-30.448-82.105-30.448-113.446 0l0 0z" p-id="7080"></path></svg></span>
          <div v-show="item.open" v-if="item.children.length>0">
            <span v-for="(item2,index2) in item.children" :key="item2.navIndex" @click="changeNavIndex(item2.navIndex,item2)" :class="{formActive:item2.navIndex==navIndex}">{{ item2.name }}</span>
          </div>
        </div>
      </div>
      <div class="sp_b_right">
        <tableView v-if="navType == 'formManage' && navShowCardObj.id" :typeId="navShowCardObj.id" :typeList="navShowCardObj.typeList"/>
        <examine v-if="navType == 'annualAssessment'"/>
        <databoard v-if="navType == 'evaluationDataVisualization'"/>
      </div>
    </div>
  </div>
</template>

<script>
import tableView from './view/tableView.vue';
import examine from './view/examine/index'
import databoard from './view/databoard.vue';
export default {
  components:{
    tableView,
    examine,
    databoard
  },
  data(){
    return{
      tagIndex:0,
      navList:[ ],
      navIndex:'0-0',
      navType:"",
      userId: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role:this.$route.query.role,
    }
  },
  computed:{
    navShowCardObj(){
      let _result = {
        id:"",
        typeList:[],
      }

      if(this.navType == 'formManage'){
        let _indexList = this.navIndex.split("-");
        let _data = this.navList[parseInt(_indexList[0])];
        _result.id = _data.id;
        _result.typeList = _data.typeList;
      }

      return _result;
    }
  },
  methods: {
    getNavType() {
      return new Promise((resolve)=>{
        let params = {
        oid: "",//this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestType", params)
        .then(res => {
          let _data = res.data[0];
          let _type1 = _data.filter(i => i.pid == "");
          _type1.forEach((i,index) => {
            let _typeList = [];
            _typeList = _data.filter(i2 => i2.pid == i.id);

            let _children = [{name:"表单管理",type:"formManage",typeId:i.id,navIndex:`${index}-0`}]
            i.open = false;

            if(i.id=='e18d88b3-e828-11ef-b508-005056924926'){
              _children.push(...[
                {name:"年度考核",type:"annualAssessment",navIndex:`${index}-1`},
                {name:"考核数据可视化",type:"evaluationDataVisualization",navIndex:`${index}-2`},
                ]
              )
              i.open = true;
            }
            i.children = _children;
            i.typeList = _typeList;
            i.navIndex = `${index}`
          });

          this.navList = _type1;
          resolve()
        })
        .catch(err => {
          console.log(err);
        });
      })
    },
    changeNavIndex(newIndex,item){
      this.navIndex = newIndex;
      this.navType = item.type
    },
    goTestSmarter(){
      this.$router.push(
        "/testSmarter?userid=" +
          this.userId +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role+
          "&cid=undefined"+
          "&back=sass"
      );
    },
  },
  mounted(){
    this.getNavType().then(_=>{
      if(this.navList.length>0){
        let _data = this.navList[0].children[0];
        this.changeNavIndex(_data.navIndex,_data)
      }
    });
  }
}
</script>

<style scoped>
.sassPlatform{
  width: 100vw;
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
  background-color: white;
}

.sp_header{
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 0;
  box-sizing: border-box;
  border-bottom: solid 1px #BBBBBB;
}

.sp_h_tagArea{
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}

.sp_h_tagArea>span{
  cursor: pointer;
  font-size: 20px;
  transition: .2s;
  color:#999;
  position: relative;
  padding: 0 15px;
}

.sp_h_tagArea>span:hover{
  color: #000;
}

.tagActive{
  font-weight: bold;
  color: #000 !important;
}

.tagActive::after{
    content: "";
    width: 100%;
    background: #3681FC;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.sp_bottom{
  width: 100%;
  height: calc(100% - 70px);
  display: flex;
}

.sp_b_left{
  width: 15%;
  min-width: 200px;
  height: 100%;
  box-sizing: border-box;
  border-right:solid 1px #D5D5D5;
}

.sp_b_l_form{
  width: 100%;
  height: auto;
  background-color: white;
}

.sp_b_l_form>span{
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 30px;
  cursor: pointer;
  transition: .3s;
  font-size: 18px;
}

.sp_b_l_form>span:hover{
  color: #1684FC;
}

.sp_b_l_form>span:hover>svg{
  fill: #1684FC;
}

.sp_b_l_form>span>svg{
  width: 15px;
  height: 15px;
}

.sp_b_l_form>div{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background-color: #F7F7F7;
}

.sp_b_l_form>div>span{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0 0 45px;
  cursor: pointer;
  transition: .3s;
  font-size: 18px;
}

.sp_b_l_form>div>span:hover{
  color: #1684FC;
}

.formActive{
  color: #1684FC;
}

.sp_b_right{
  flex: 1;
  height: 100%;
  overflow: auto;
}


</style>