|
|
@@ -0,0 +1,177 @@
|
|
|
+<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>
|
