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

<template>
  <div>
    <head-bar :isBack="false">
      <template #title>
        <div style="width: 100%">
          <div class="rightSearch">
            <div class="searchImg" @click="selectAll1">
              <img src="../../assets/images/home/search.png" alt="" />
            </div>
            <el-input v-model="courseName" auto-complete="off" placeholder="搜索课程..."></el-input>
          </div>
        </div>
      </template>
    </head-bar>
    <class-filter @getAll="selectAll"> </class-filter>
    <course-all :courseList="zoneClass"></course-all>
  </div>
</template>

<script>
import { selectTypeCourse2 } from '@/api/home'
import { mapGetters } from 'vuex'
import headBar from '@/components/headBar.vue'
import classFilter from './components/classFilter.vue'
import courseAll from './components/courseAll.vue'
export default {
  components: {
    headBar,
    classFilter,
    courseAll
  },
  data() {
    return {
      courseName: '',
      zoneClass: []
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    selectAll1(){
      this.selectAll({})
    },
    selectAll(tList) {
      var a = '',b = '',c = ''
      if (tList != undefined) {
        var typeList = Object.values(tList);
        a = typeList[0]
        b = typeList[2]
        c = typeList[1]
      }
      const params = {
        uid: this.userinfo.userid,
        oid: this.userinfo.organizeid,
        typea: a != undefined ? a : '',
        typeb: b != undefined ? a : '',
        typec: '',
        typed: c != undefined ? a : '',
        typeE: '',
        cu: '',
        cn: this.courseName,
        classid: this.userinfo.classid,
        org: this.userinfo.org,
        page: 1,
        pageSize: 10
      }
      selectTypeCourse2(params)
        .then(res => {
          this.zoneClass = res[0]
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted() {
    this.selectAll()
  }
}
</script>

<style lang="scss" scoped>
/deep/.rightSearch {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30px;
  position: relative;

  .searchImg {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 9;
    top: 5px;
    left: 5px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .el-input__inner {
    width: 100%;
    height: 30px;
    text-indent: 15px;
    line-height: 30px;
  }
}
</style>