123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <template>
- <div class="categoryTree-wrap">
- <div style="padding-bottom:10px;">
- <span style="color:red;">*</span> 添加品类:
- <a-checkbox v-model="check1" @change="(e)=> onAllChange(e,0)" v-show="!showEmpty">
- 全选
- </a-checkbox>
- <a-checkbox v-model="check2" @change="(e)=> onAllChange(e,1)" v-show="!showEmpty">
- 自主品牌
- </a-checkbox>
- <a-checkbox v-model="check3" @change="(e)=> onAllChange(e,2)" v-show="!showEmpty">
- 代理品牌
- </a-checkbox>
- </div>
- <a-spin :spinning="spinning" tip="Loading...">
- <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
- <div v-show="!showEmpty" style="height:350px;overflow: auto;">
- <a-tree
- checkable
- :selectable="false"
- v-model="checkedKeys"
- :tree-data="dataSource"
- :replaceFields="{children:'sonList', title:'name', key:'sn' }"
- @check="onCheck"
- >
- </a-tree>
- </div>
- </a-spin>
- </div>
- </template>
- <script>
- import { commonMixin } from '@/utils/mixin'
- import { VSelect } from '@/components'
- import { dealerUpsPlTree } from '@/api/dealer'
- import { Empty } from 'ant-design-vue'
- import ProductBrand from '@/views/common/productBrand.js'
- import ProductType from '@/views/common/productType.js'
- export default {
- name: 'DetailProductList',
- mixins: [commonMixin],
- components: { VSelect, ProductType, ProductBrand },
- props: {
- newLoading: {
- type: Boolean,
- default: false
- },
- maxHeight: {
- type: [String, Number],
- default: '300'
- },
- showTable: {
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- spinning: false,
- simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
- dataSource: [],
- showEmpty: true,
- dealerSn: undefined,
- parentDealerSn: undefined,
- checkedKeys: [],
- halfCheckedKeys: [],
- allLeafKeys: [],
- allBrands: [],
- check1: false,
- check2: false,
- check3: false
- }
- },
- computed: {
- },
- methods: {
- onCheck (checkedKeys, info) {
- // console.log('onCheck', checkedKeys, info)
- this.checkedKeys = checkedKeys
- this.halfCheckedKeys = info.halfCheckedKeys
- if (this.check1) {
- this.check1 = false
- }
- if (this.check2) {
- this.check2 = false
- }
- if (this.check3) {
- this.check3 = false
- }
- },
- getResult () {
- // 所有已选叶子节点
- const ret = this.allLeafKeys.filter(item => this.checkedKeys.includes(item.sn))
- console.log(ret)
- const result = []
- ret.map(item => {
- const a = item.sn.replace('-1_1_', '')
- const b = a.split('_2_')
- const c = b[1].split('_3_')
- const d = c[1].split('_4_')
- result.push({
- 'productBrandSn': b[0],
- 'productTypeSn1': c[0],
- 'productTypeSn2': d[0],
- 'productTypeSn3': d[1]
- })
- })
- return result
- },
- // 筛选并全选
- onAllChange (e, type) {
- console.log(e.target.checked, type)
- if (type == 0) {
- this.check2 = false
- this.check3 = false
- this.check1 = e.target.checked
- this.allCheck(this.check1, type)
- }
- if (type == 1) {
- this.check1 = false
- this.check3 = false
- this.check2 = e.target.checked
- this.allCheck(this.check2, type)
- }
- if (type == 2) {
- this.check1 = false
- this.check2 = false
- this.check3 = e.target.checked
- this.allCheck(this.check3, type)
- }
- },
- // 全选树
- allCheck (checked, type) {
- if (checked) {
- this.checkedKeys = []
- this.allLeafKeys.map(item => {
- // 自主或代理
- if (type) {
- const psn = item.sn.split('_2_')[0]
- const prow = this.dataSource.find(k => k.sn == psn)
- if (prow && prow.productBrandType == type) {
- this.checkedKeys.push(item.sn)
- }
- } else {
- // 全品类
- this.checkedKeys.push(item.sn)
- }
- })
- } else {
- this.checkedKeys = []
- }
- },
- // 获取所有叶子结节
- getLeafKeys (tree) {
- const leafNodes = []
- function traverse (nodes) {
- nodes.forEach(node => {
- if (node.sonList && node.sonList.length) {
- traverse(node.sonList)
- } else {
- leafNodes.push(node)
- }
- })
- }
- traverse([tree]) // 假设tree是单个根节点
- return leafNodes
- },
- // 查询品类列表
- handleSearch () {
- if (this.dealerSn) {
- this.getTreeData()
- } else {
- this.$message.info('请选择上级经销商')
- }
- },
- async getTreeData () {
- this.dataSource = []
- this.allLeafKeys = []
- this.spinning = true
- const params = { dealerSn: this.dealerSn, upsDealerSn: this.parentDealerSn }
- // 品类列表
- const listData = await dealerUpsPlTree(params).then(res => res.data)
- if (listData) {
- this.dataSource = listData.sort((a, b) => a.productBrandType - b.productBrandType)
- // 获取所有叶子节点
- this.dataSource.map(item => {
- this.allLeafKeys = this.allLeafKeys.concat(this.getLeafKeys(item))
- // 获取所有品牌sn
- this.allBrands.push(item.sn)
- })
- this.showEmpty = this.dataSource.length <= 0
- }
- this.spinning = false
- },
- pageInit (detailData, parentDealerSn, dealerSn) {
- this.detailData = detailData
- this.parentDealerSn = parentDealerSn
- this.dealerSn = dealerSn
- // 获取列表
- this.handleSearch()
- }
- }
- }
- </script>
- <style lang="less">
- .categoryTree-wrap{
- .empty-data{
- color: #999;
- text-align: center;
- padding: 20px;
- }
- .ant-tree{
- display:flex;
- justify-content: space-between;
- flex-wrap: wrap;
- }
- .ant-tree > li{
- width: 33%;
- }
- }
- </style>
|