yos_web/src/SDrpManagement/ProductGroup/modules/Select2.vue

<template>
  <div class="border-bottom">
    <div>
      <ul class="flex-align-center normal-margin-new" >
        <!-- <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" style="margin-left:0" v-for="item in fields" :key="item.sys_enterprise_tradefieldid" @click="clickField(item)">{{item.tradefield}}</li>
      </ul>
      <ul class="flex-align-center normal-margin-new">
        <!-- <li :class="!brand_act?'act':''" class="brand-item border-all" @click="clickBrand('')">全部品牌</li> -->
        <li  :class="brand_act == item.sa_brandid?'act':''" class="brand-item " style="margin-left:0" 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-new">
        <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 ref="tree" style="padding-left:80px" :data="activeClass.subdep" @onClassChange="change"></classTree>
    </div>
  </div>
</template>

<script>
import classTree from './classTree.vue'
export default {
  data () {
    return {
      value:'',
      brands:[],
      fields:[],
      itemclass:[],
      activeClass:{},
      field_act:'',
      tradefield:'',
      brand_act:0,
      class_act:''
    }
  },
  provide () {
    return {
      selectThis:() => this
    }
  },
  inject:['sys_enterpriseid'],
  props: {
    default: {
      type: Boolean,
      default:() => false
    }
  },
  components:{
    classTree
  },
  methods:{
    async queryAgentiInfo (callback) {
      let param = {
        "id": 20230418142202,
        "content": {
            "sys_enterpriseid":this.sys_enterpriseid(),
            "where": {
              "condition": ""
            }
        }
      }
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid
      const res1 = await this.$api.requested(param)
      this.fields = res1.data
      if (this.fields.length) {
        this.field_act = res1.data[0].sys_enterprise_tradefieldid
        this.tradefield = res1.data[0].tradefield
        // this.clickField({sys_enterprise_tradefieldid:this.field_act,tradefield:res1.data[0].tradefield})
      } else {
        this.field_act = 0
        this.tradefield = ''
        // this.clickField(false)
      }
      callback && callback()
    },
    async queryBrands (callback) {
      let param = {
        "id": "20220924163702",
        "content": {
          "pageSize":1000,
          "sys_enterpriseid":this.sys_enterpriseid(),
          "where":{
            "condition":""
          }
        }
      }
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid
      const res = await this.$api.requested(param)
      this.brands = res.data
      if (this.brands.length) {
        this.brand_act = res.data[0].sa_brandid
        // this.clickBrand(res.data[0].sa_brandid)
      } else {
        this.brand_act = 0
        // this.clickBrand(this.brand_act)
      }
      callback && callback()
      
    },

    async queryClass () {
      let param = {
        "id":"20220922110403","content":{"sa_brandid":this.brand_act,"sys_enterpriseid":this.sys_enterpriseid(),where:{istool:0}}
      }
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid
      const res = await this.$api.requested(param)
      console.log(res.data);
      
      this.itemclass = res.data.length ? res.data[0].ttemclass : []
    },
    clickBrand (id) {
      this.brand_act = id ? id : 0
      this.queryClass()
      this.$emit('brandChange',[this.brand_act])
      
    },
    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.$emit('onClassChange',item)
      } else {
        this.class_act = ''
        this.$refs.tree.class_act = 0
        this.$emit('onClassChange',item)
      }
      
    },
    change(n) {
      this.$emit('onClassChange',n)
    },
    clearSearch() {
      this.$emit('clearSearch')
    }
  },
  mounted () {
    this.queryClass()
    this.queryAgentiInfo()
    this.queryBrands()
  }
}

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

</style>