|
@@ -0,0 +1,163 @@
|
|
|
+<template>
|
|
|
+ <div class="categoryTree-wrap">
|
|
|
+ <div style="padding-bottom:10px;" v-if="showTable">
|
|
|
+ <span style="color:red;">*</span> 添加品类:
|
|
|
+ <a-radio-group name="radioGroup">
|
|
|
+ <a-radio :value="1">全选</a-radio>
|
|
|
+ <a-radio :value="2">自主品牌</a-radio>
|
|
|
+ <a-radio :value="3">代理品牌</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-spin :spinning="spinning" tip="Loading..." v-if="showTable">
|
|
|
+ <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
|
|
|
+ <div style="height:350px;overflow: auto;">
|
|
|
+ <a-tree
|
|
|
+ v-show="!showEmpty"
|
|
|
+ checkable
|
|
|
+ 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: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCheck (checkedKeys, info) {
|
|
|
+ console.log('onCheck', checkedKeys, info)
|
|
|
+ this.checkedKeys = checkedKeys
|
|
|
+ this.halfCheckedKeys = info.halfCheckedKeys
|
|
|
+
|
|
|
+ this.getResult()
|
|
|
+ },
|
|
|
+ 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]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log(result)
|
|
|
+ },
|
|
|
+ // 获取所有叶子结节
|
|
|
+ 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 = { ...this.detailData }
|
|
|
+ params.dealerScope = { dealerSn: this.dealerSn }
|
|
|
+ // 品类列表
|
|
|
+ const listData = await dealerUpsPlTree({}).then(res => res.data)
|
|
|
+ this.dataSource = listData
|
|
|
+ // 获取所有叶子节点
|
|
|
+ this.dataSource.map(item => {
|
|
|
+ this.allLeafKeys = this.allLeafKeys.concat(this.getLeafKeys(item))
|
|
|
+ })
|
|
|
+ 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>
|