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:'1',
          list:[],
        },
      ],
    };
  },
  watch: {

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

    // 获取头部数据
    GetHeaderData()
    {
        if(this.$store.state.target.subjectList.length > 0)
        {
          this.filtersData[0].list = this.$store.state.target.subjectList;
          
        }
        else
        {
            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 // 
                        }
                    });
                    this.$store.commit('target/SetSubjectList', list)
                    this.filtersData[0].list = list;
                }
            });
        }
        
    },
    
    // 筛选组件回调
    ChangeFilters(e)
    {
      this.filtersData[e.index].value = e.value;
      console.log("打印筛选组件数据",e);
      this.$store.commit('target/SetFilterSubjectCode', e.value)
    },
  },
};
</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>