|
|
@@ -0,0 +1,150 @@
|
|
|
+<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(null)" >全部领域</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-new">
|
|
|
+ <li :class="!brand_act?'act':''" class="brand-item border-all" @click="clickBrand(null)">全部品牌</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-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 v-if="brand_act !== ''" 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:'',
|
|
|
+ brand_act:'',
|
|
|
+ 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 = ''
|
|
|
+ // this.clickBrand(res.data[0].sa_brandid)
|
|
|
+ },
|
|
|
+
|
|
|
+ async queryClass () {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id":"20220922110403","content":{"sa_brandid":this.brand_act,where:{istool:1}}
|
|
|
+ })
|
|
|
+ this.itemclass = res.data[0].ttemclass
|
|
|
+ },
|
|
|
+ clickBrand (id) {
|
|
|
+ this.brand_act = id ? id : ''
|
|
|
+ this.queryClass()
|
|
|
+
|
|
|
+ },
|
|
|
+ clickField (item) {
|
|
|
+ this.field_act = item ? item.sys_enterprise_tradefieldid : ''
|
|
|
+ console.log( item,this.field_act)
|
|
|
+ this.$emit('clickField',item)
|
|
|
+ },
|
|
|
+ clickClass (item) {
|
|
|
+ if (item) {
|
|
|
+ this.activeClass = item
|
|
|
+ console.log(item);
|
|
|
+
|
|
|
+ this.class_act = item.itemclassnum
|
|
|
+ this.change(item)
|
|
|
+ } else {
|
|
|
+ this.class_act = ''
|
|
|
+ this.$emit('onClassChange',item)
|
|
|
+ }
|
|
|
+ console.log(this.class_act);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ 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:5px 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>
|
