bigDataStudent/src/views/targetImprove/components/TargetSubject.vue

<template>
   <div class="target_filter">
      <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters"/>
    </div>
</template>
<script>
import FiltersItem from "@/components/FiltersItem_ruoyan.vue"//筛选组件

export default {
  components: {
    FiltersItem,
  },


  computed: {
   
  },
  data() {
    return {
      activeMenuName: "/targetImprove",
      filtersData:[
        {
          name:'科目名称',
          value:'',
          list:this.$store.state.target.subjectList,
        },
      ],
    };
  },
  watch: {

  },
  created() {
    
  },
  mounted() {
   
    this.GetHeaderData();//获取头部数据
    
  },
  methods: {

    // 获取头部数据
    GetHeaderData()
    {
        
      this.$api.target.getTargetHeaderData().then(res => {
          if(res.code == 200)
          {
              console.log("打印顶部筛选数据",res.data);
              let list=(res.data.subjectData || []).map(item => {
                  return {
                      label: item.subjectName,   // 后端显示文本，例如 "化学"
                      value: item.subjectCode // 
                  }
              });
              let gradesList=(res.data.gradeData || []).map(item => {
                  return {
                      label: item.gradeName,   // 后端显示文本，例如 " chemistry"
                      value: item.gradeCode, // 
                      gradeId:item.yearGradeId,//年级id
                  }
              });
              this.$store.commit('target/SetSubjectList', list)
              this.$store.commit('target/SetGradesList',gradesList)
              this.filtersData[0].list = list;
              this.filtersData[0].value = list[0].value;
              this.$store.commit('target/SetLevelCode',res.data.levelCode)
              let obj={
                subjectCode:list[0].value,
                subjectName:list[0].label
              };
              this.$store.commit('target/SetFilterSubjectCode',obj )  
          }
      });
        
        
    },
    
    // 筛选组件回调
    ChangeFilters(e)
    {
      this.filtersData[e.index].value = e.value;
      console.log("打印筛选组件数据",e);
      let subjectItem=this.filtersData[0].list.find(item=>item.value==e.value);
      let obj={
        subjectCode:subjectItem.value,
        subjectName:subjectItem.label
      };
      this.$store.commit('target/SetFilterSubjectCode', obj)
    },
  },
};
</script>
<style lang="scss" scoped>
.target_filter
{
    width: 100%;
    height:48px;
    background: #fff;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 2px;
    margin-bottom: 10px;
}
</style>