pbl-app/src/views/eva/index.vue

<template>
  <!-- 学生评价 -->
  <div>
    <!-- 搜索框开始 -->
    <div class="search">
      <van-search v-model.trim="userName" placeholder="学生姓名" />
    </div>
    <div style="height: 54px;width: 100%;"></div>

    <!-- 模糊搜索页面 -->
    <div class="searchPage" v-if="searchList.length">
      <!-- <selects :listContent="classLists" :tit="'请选择班级'"></selects> -->
      <div class="students">
        <div class="stuBlock" v-for="(i, index) in searchList" :key="index + 'p'" @click="gotoStudentDetail2(i)">
          {{ i.username }}
        </div>
      </div>
    </div>

    <div>
      <van-tabs @change="ggg" v-if="!searchList.length" swipeable @click="spread">
        <van-tab v-for="(e, index) in classLists" :key="index + 't'" :name="e.id" :title="e.name">
          <!-- <classList :claName="i"></classList> -->
          <div class="students">
            <div class="stuBlock" v-for="(i, index) in stuList" :key="index + 'p'" @click="gotoStudentDetail(i.id, e)">
              {{ i.name }}
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { selectClassStudent } from '@/api/eva'
import { selectSerStudent } from '@/api/eva'
import { select_techerAllClass } from '@/api/eva'
// import classList from './components/classList.vue'
// 多选框组件
// import selects from './components/selects.vue'

export default {
  // components: { selects },
  data() {
    return {
      // 搜索栏数据
      userName: '',
      // 班级名称数组
      classLists: [],

      // 班级学生数组
      stuList: [],
      // 搜索结果数组
      searchList: []
    }
  },
  watch: {
    userName(val) {
      // console.log(val)
      if (val !== '') {
        this.likeSearch(val)
      } else {
        this.searchList = []
      }
    }
  },
  methods: {
    likeSearch(e) {
      console.log(e)
      const data = {
        id: this.$store.state.user.userinfo.organizeid,
        txt: e
      }
      selectSerStudent(data).then(res => {
        console.log('res', res)
        this.searchList = res[0]
        if (!res[0].length) {
          this.searchList = [{ username: '暂时没有您想要查询的学生' }]
        }
      })
    },
    // 切换导航栏获取数据
    ggg(e) {
      // console.log('ggg', e, i)
      // this.claName.id = e
      selectClassStudent({ cid: e }).then(res => {
        console.log('res', res)
        this.stuList = res[0]
      })
    },
    // 班级入口跳转详情页
    gotoStudentDetail(e, i) {
      // e学生id，i班级id
      // return console.log(e, i)
      localStorage.setItem('userId', e)
      this.$router.push(`/studentDetail?cid=${i.id}`)
      // this.$router.push('/studentDetail')
    },
    // 搜索按钮跳转详情页
    gotoStudentDetail2(i) {
      localStorage.setItem('userId', i.userid)
      this.$router.push('/searchstuDetail')
    },
    spread(name, tit) {
      // console.log(5555);
      // return console.log('spread', name)
      // selectClassStudent({ cid: name }).then(res => {
      //   console.log('res', res)
      //   this.stuList = res[0]
      // })
    },
    // 获取老师所管理班级
    getData() {
      const id = this.$store.state.user.userinfo.organizeid
      select_techerAllClass({ cid: id }).then(res => {
        console.log('获取老师所管理班级学生', res)
        this.classLists = res[0]
        // 调用一次，将导航栏数据展示出来
        this.ggg(this.classLists[0].id)
      })
    }
  },
  mounted() {},
  created() {
    this.getData()
    console.log('state', this.$store.state)
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-tab {
  width: 100px;
  text-align: center;
}

/deep/ .van-tabs__line {
  width: 90px;
  height: 2px;
  flex-shrink: 0;
  background: #4a8efc;
}

/deep/ .van-tab__pane {
  height: calc(100vh - 150px);
}

.searchPage {
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  min-height: 300px;
}

.search {
  position: fixed;
  top: 0;
  width: 100%;
  // height: 54px;
}

.students {
  width: 95%;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px;

  .stuBlock {
    min-width: 100px;
    margin-top: 10px;
    margin-right: 15px;
    display: flex;
    box-sizing: border-box;
    padding: 4px 5px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #f6fafb;
    color: rgba(0, 0, 0, 0.9);
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-style: normal;
  }
}

// 搜索框开始
.searchBlock {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(232, 232, 235, 1);

  // 搜索框结束
}

.claTit {
  margin-top: 20px;
  margin-left: 10px;
  width: 130px;
  height: 30px;
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}
</style>