yos_web/src/SDrpManagement/Products/modules/Select.vue

<template>
  <div class="border-bottom">
    <div>
      <ul class="flex-align-center normal-margin">
        <li :class="field_act === ''?'act':''" class="brand-item border-all" @click="clickField('')">全部领域</li>
        <li :class="field_act === item.sys_enterprise_tradefieldid?'act':''" class="brand-item margin-notAll" v-for="item in fields" :key="item.sys_enterprise_tradefieldid" @click="clickField(item)">{{item.tradefield}}</li>
      </ul>
      <ul class="flex-align-center normal-margin">
        <li :class="!brand_act?'act':''" class="brand-item border-all" @click="clickBrand('')">全部品牌</li>
        <li :class="brand_act === item.sa_brandid?'act':''" class="brand-item margin-notAll" v-for="item in brands" :key="item.sa_brandid" @click="clickBrand(item.sa_brandid)">{{item.brandname}}</li>
      </ul>
      <ul class="flex-align-center normal-margin">
        <li :class="class_act === ''?'act':''" class="brand-item border-all" @click="clickClass('')">全部分类</li>
        <li :class="class_act === item.itemclassnum?'act':''" class="brand-item margin-notAll" v-for="item in itemclass" :key="item.itemclassnum" @click="clickClass(item)">{{item.itemclassname}}</li>
      </ul>
      <classTree style="padding-left:31px" :data="activeClass.subdep" @onClassChange="change"></classTree>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
import classTree from './classTree.vue'
export default {
  data () {
    return {
      value:'',
      brands:[],
      fields:[],
      itemclass:[],
      activeClass:{},
      field_act:'',
      brand_act:0,
      class_act:''
    }
  },
  props: {
    default: {
      type: Boolean,
      default:() => false
    }
  },
  components:{
    classTree
  },
  methods:{
    async queryAgentiInfo () {
      const res1 = await this.$api.requested({
        "id": 20221223141802,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
              "condition": ""
            }
        }
      })
      this.fields = res1.data
      this.field_act = ''
    },
    async queryBrands () {
      const res = await this.$api.requested({
        "id": "20220924163702",
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.brands = res.data
      this.brand_act = 0
    },

    async queryClass () {
      const res = await this.$api.requested({
        "id":"20220922110403","content":{"sa_brandid":this.brand_act,where:{istool:0}}
      })
      console.log(res.data,'pop')
      this.itemclass = res.data[0].ttemclass
    },
    clickBrand (id) {
      this.brand_act = id ? id : 0
      this.queryClass()
    },
    clickField (item) {
      this.field_act = item ? item.sys_enterprise_tradefieldid : ''
      this.$emit('clickField',item)
    },
    clickClass (item) {
      if (item) {
        this.activeClass = item
        this.class_act = item.itemclassnum
        this.change(item)
      } else {
        this.class_act = ''
        this.$emit('onClassChange',item)
      }
      
    },
    change(n) {
      console.log(n)
      this.$emit('onClassChange',n)
    },
    clearSearch() {
      this.$emit('clearSearch')
    }
  },
  mounted () {
    this.queryClass()
    this.queryAgentiInfo()
    this.queryBrands()
  }
}

</script>
<style>
</style>
<style scoped>
.brand-item{
  margin:0 25px;
  color: #333;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 13px;
}
.act{
  color:#3874f6;
  font-weight: bold;
}
.border-bottom{
  padding-bottom:16px;
  border-bottom: 1px solid #e3e5ea;
}
.border-all{
  margin-left: 0px
}
.margin-notAll{
  margin-left: -18px
}

</style>