pbl-teacher-table/src/components/pages/liyuan/teacherDevelop.vue

<template>
  <div class="teacherDevelop">
    <topBar title="教师发展" detail="教师年度考核 · 教师成长画像 · AI课堂观察"></topBar>
    <div class="cardBox">
      <card v-for="item in cardData(cardArray)"
      :key="item.title"
      :title="item.title"
      :icon="item.icon"
      :to="item.to"
      :type="item.type"
      :sortId="item.sortId"
      :cardData="item"
      ></card>
    </div>
  </div>
</template>

<script>
import topBar from './components/topBar'
import card from './components/card.vue';
export default {
  components: {
    topBar,
    card
  },
  computed:{
    // 进行权限判断一些只有管理员能看
    cardData(){
      return (val)=>{
          let com = val.filter(e=> e.role==0 || (this.role == 1 && e.role == 1) )
          return com
      }
    }
  },
  data() {
    return {
      role: this.$route.query.role,
      cardArray: [
        { title: '年度考核', icon: require('../../../assets/icon/liyuan/niandukaohe.svg'), type: 1, to: "/examineL",role:0 },
        { title: '个人档案', icon: require('../../../assets/icon/liyuan/gerendangan.svg'), type: 1, to: "/userInfoL",role:0 },
        { title: '教师画像', icon: require('../../../assets/icon/liyuan/jiaoshihuaxiang.svg'), type: 1, to: "/portraitL",role:0 },
        { title: '课堂观察', icon: require('../../../assets/icon/liyuan/ketangguancha.svg'), type: 1, to: "/classroomObservation",role:0 },
        { title: '智能表单', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type: 1, to: "/sassPlatform",role:1,sassPlatFormTypeId:"eefb7195-8ee7-11f0-9c7b-005056924926" },
        { title: '考核资料', icon: require('../../../assets/icon/liyuan/zlsj.svg'), type: 1, to: "/teadTest",role:0,sortId:'eefb7195-8ee7-11f0-9c7b-005056924926' },
        { title: '考核审核', icon: require('../../../assets/icon/liyuan/workTest.svg'), type: 1, to: "/testReview",role:0 },
      ]
    }
  },
}
</script>

<style scoped>
.teacherDevelop{
  width: 100%;
  height: 100%;
  padding: 40px 90px;
  box-sizing: border-box;
  background: #FAFAFA;
}

.cardBox{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}
</style>