categoryTree.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div class="categoryTree-wrap">
  3. <div style="padding-bottom:10px;">
  4. <span style="color:red;">*</span> 添加品类:
  5. <a-checkbox v-model="check1" @change="(e)=> onAllChange(e,0)" v-show="!showEmpty">
  6. 全选
  7. </a-checkbox>
  8. <a-checkbox v-model="check2" @change="(e)=> onAllChange(e,1)" v-show="!showEmpty">
  9. 自主品牌
  10. </a-checkbox>
  11. <a-checkbox v-model="check3" @change="(e)=> onAllChange(e,2)" v-show="!showEmpty">
  12. 代理品牌
  13. </a-checkbox>
  14. </div>
  15. <a-spin :spinning="spinning" tip="Loading...">
  16. <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
  17. <div v-show="!showEmpty" style="height:350px;overflow: auto;">
  18. <a-tree
  19. checkable
  20. :selectable="false"
  21. v-model="checkedKeys"
  22. :tree-data="dataSource"
  23. :replaceFields="{children:'sonList', title:'name', key:'sn' }"
  24. @check="onCheck"
  25. >
  26. </a-tree>
  27. </div>
  28. </a-spin>
  29. </div>
  30. </template>
  31. <script>
  32. import { commonMixin } from '@/utils/mixin'
  33. import { VSelect } from '@/components'
  34. import { dealerUpsPlTree } from '@/api/dealer'
  35. import { Empty } from 'ant-design-vue'
  36. import ProductBrand from '@/views/common/productBrand.js'
  37. import ProductType from '@/views/common/productType.js'
  38. export default {
  39. name: 'DetailProductList',
  40. mixins: [commonMixin],
  41. components: { VSelect, ProductType, ProductBrand },
  42. props: {
  43. newLoading: {
  44. type: Boolean,
  45. default: false
  46. },
  47. maxHeight: {
  48. type: [String, Number],
  49. default: '300'
  50. },
  51. showTable: {
  52. type: Boolean,
  53. default: false
  54. }
  55. },
  56. data () {
  57. return {
  58. spinning: false,
  59. simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  60. dataSource: [],
  61. showEmpty: true,
  62. dealerSn: undefined,
  63. parentDealerSn: undefined,
  64. checkedKeys: [],
  65. halfCheckedKeys: [],
  66. allLeafKeys: [],
  67. allBrands: [],
  68. check1: false,
  69. check2: false,
  70. check3: false
  71. }
  72. },
  73. computed: {
  74. },
  75. methods: {
  76. onCheck (checkedKeys, info) {
  77. // console.log('onCheck', checkedKeys, info)
  78. this.checkedKeys = checkedKeys
  79. this.halfCheckedKeys = info.halfCheckedKeys
  80. if (this.check1) {
  81. this.check1 = false
  82. }
  83. if (this.check2) {
  84. this.check2 = false
  85. }
  86. if (this.check3) {
  87. this.check3 = false
  88. }
  89. },
  90. getResult () {
  91. // 所有已选叶子节点
  92. const ret = this.allLeafKeys.filter(item => this.checkedKeys.includes(item.sn))
  93. console.log(ret)
  94. const result = []
  95. ret.map(item => {
  96. const a = item.sn.replace('-1_1_', '')
  97. const b = a.split('_2_')
  98. const c = b[1].split('_3_')
  99. const d = c[1].split('_4_')
  100. result.push({
  101. 'productBrandSn': b[0],
  102. 'productTypeSn1': c[0],
  103. 'productTypeSn2': d[0],
  104. 'productTypeSn3': d[1]
  105. })
  106. })
  107. return result
  108. },
  109. // 筛选并全选
  110. onAllChange (e, type) {
  111. console.log(e.target.checked, type)
  112. if (type == 0) {
  113. this.check2 = false
  114. this.check3 = false
  115. this.check1 = e.target.checked
  116. this.allCheck(this.check1, type)
  117. }
  118. if (type == 1) {
  119. this.check1 = false
  120. this.check3 = false
  121. this.check2 = e.target.checked
  122. this.allCheck(this.check2, type)
  123. }
  124. if (type == 2) {
  125. this.check1 = false
  126. this.check2 = false
  127. this.check3 = e.target.checked
  128. this.allCheck(this.check3, type)
  129. }
  130. },
  131. // 全选树
  132. allCheck (checked, type) {
  133. if (checked) {
  134. this.checkedKeys = []
  135. this.allLeafKeys.map(item => {
  136. // 自主或代理
  137. if (type) {
  138. const psn = item.sn.split('_2_')[0]
  139. const prow = this.dataSource.find(k => k.sn == psn)
  140. if (prow && prow.productBrandType == type) {
  141. this.checkedKeys.push(item.sn)
  142. }
  143. } else {
  144. // 全品类
  145. this.checkedKeys.push(item.sn)
  146. }
  147. })
  148. } else {
  149. this.checkedKeys = []
  150. }
  151. },
  152. // 获取所有叶子结节
  153. getLeafKeys (tree) {
  154. const leafNodes = []
  155. function traverse (nodes) {
  156. nodes.forEach(node => {
  157. if (node.sonList && node.sonList.length) {
  158. traverse(node.sonList)
  159. } else {
  160. leafNodes.push(node)
  161. }
  162. })
  163. }
  164. traverse([tree]) // 假设tree是单个根节点
  165. return leafNodes
  166. },
  167. // 查询品类列表
  168. handleSearch () {
  169. if (this.dealerSn) {
  170. this.getTreeData()
  171. } else {
  172. this.$message.info('请选择上级经销商')
  173. }
  174. },
  175. async getTreeData () {
  176. this.dataSource = []
  177. this.allLeafKeys = []
  178. this.spinning = true
  179. const params = { dealerSn: this.dealerSn, upsDealerSn: this.parentDealerSn }
  180. // 品类列表
  181. const listData = await dealerUpsPlTree(params).then(res => res.data)
  182. if (listData) {
  183. this.dataSource = listData.sort((a, b) => a.productBrandType - b.productBrandType)
  184. // 获取所有叶子节点
  185. this.dataSource.map(item => {
  186. this.allLeafKeys = this.allLeafKeys.concat(this.getLeafKeys(item))
  187. // 获取所有品牌sn
  188. this.allBrands.push(item.sn)
  189. })
  190. this.showEmpty = this.dataSource.length <= 0
  191. }
  192. this.spinning = false
  193. },
  194. pageInit (detailData, parentDealerSn, dealerSn) {
  195. this.detailData = detailData
  196. this.parentDealerSn = parentDealerSn
  197. this.dealerSn = dealerSn
  198. // 获取列表
  199. this.handleSearch()
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="less">
  205. .categoryTree-wrap{
  206. .empty-data{
  207. color: #999;
  208. text-align: center;
  209. padding: 20px;
  210. }
  211. .ant-tree{
  212. display:flex;
  213. justify-content: space-between;
  214. flex-wrap: wrap;
  215. }
  216. .ant-tree > li{
  217. width: 33%;
  218. }
  219. }
  220. </style>