treeList.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <div class="tree-menu" v-loadmore="loadmore">
  3. <ul v-for="menuItem in treeData" :key="menuItem.id">
  4. <en-tree-item :model="menuItem" @selectCaputure="onselected"></en-tree-item>
  5. </ul>
  6. </div>
  7. </template>
  8. <script>
  9. import treeItem from './treeItem.vue'
  10. export default {
  11. name: 'EnTreeList',
  12. props: {
  13. /** 树形数据 */
  14. treeData: {
  15. type: Object,
  16. default: () => ({})
  17. },
  18. /** 是否完成左右穿梭 */
  19. isCompleted: {
  20. type: Boolean,
  21. default: false
  22. },
  23. /** 全选时会有选中数据传入 */
  24. selectedAllData: {
  25. type: Object,
  26. default: {}
  27. }
  28. },
  29. components: {
  30. [treeItem.name]: treeItem
  31. },
  32. data() {
  33. return {
  34. /** 地区数据(全部数据) */
  35. areaData: {},
  36. /** 选中数据 */
  37. chooseData: {}
  38. }
  39. },
  40. watch: {
  41. isCompleted() {
  42. if (this.isCompleted) {
  43. this.chooseData = {}
  44. }
  45. },
  46. selectedAllData() {
  47. if (Object.keys(this.selectedAllData).length) {
  48. this.chooseData = this.selectedAllData
  49. }
  50. },
  51. chooseData() {
  52. if (!Object.keys(this.chooseData).length) { // 如果是空对象
  53. this.$emit('listenCompleted', false)
  54. }
  55. },
  56. treeData() {
  57. // 对象深拷贝
  58. this.areaData = JSON.parse(JSON.stringify(this.treeData))
  59. }
  60. },
  61. mounted() {
  62. // 对象深拷贝
  63. this.areaData = JSON.parse(JSON.stringify(this.treeData))
  64. },
  65. methods: {
  66. /** 加载更多 */
  67. loadmore() {
  68. console.log('触发了滚动加载')
  69. },
  70. /** 监听选中数据 */
  71. onselected(model, parentNode) { // 监听响应 选中之后进行计算现在选中之后的数据
  72. if (model.isSelected) { // 选中时加入选中数据 计算选中数据
  73. switch (model.level) {
  74. case 1: this.chooseData[model.id] = JSON.parse(JSON.stringify(model))
  75. break
  76. case 2: this.addLevelTwoData(model, parentNode)
  77. break
  78. case 3: this.addLevelThreeData(model, parentNode)
  79. break
  80. }
  81. } else { // 未选中时 删除选中数据 从选中数据中删除对应项
  82. switch (model.level) {
  83. case 1: delete this.chooseData[model.id]
  84. break
  85. case 2: this.delLevelTwoData(model, parentNode)
  86. break
  87. case 3: this.delLevelThreeData(model, parentNode)
  88. break
  89. }
  90. }
  91. this.$emit('getChooseData', this.chooseData)
  92. },
  93. /** 添加level2数据 */
  94. addLevelTwoData(model, parentNode) { // 获取选中数据 树形对象
  95. let isExit = false // 是否父节点(level1)已经存在 默认不存在
  96. for (let i in this.chooseData) {
  97. if (parseInt(parentNode.id) === parseInt(i)) { // 存在
  98. isExit = true
  99. }
  100. }
  101. if (!isExit) { // 如果不存在
  102. this.chooseData[parentNode.id] = JSON.parse(JSON.stringify(parentNode))
  103. this.chooseData[parentNode.id].children = {}
  104. }
  105. this.chooseData[parentNode.id].children[model.id] = JSON.parse(JSON.stringify(model))
  106. },
  107. /** 添加level3数据 */
  108. addLevelThreeData(model, parentNode) {
  109. let isExitLevel1 = false // 是否祖节点(level1)已经存在 默认不存在
  110. for (let i in this.chooseData) {
  111. if (parseInt(parentNode.parent_id) === parseInt(i)) { // 祖节点(level1)存在
  112. isExitLevel1 = true
  113. }
  114. }
  115. if (isExitLevel1) { // 如果祖节点存在
  116. let isExitLevel2 = false // 是否父节点(level2)已经存在 默认不存在
  117. for (let j in this.chooseData[parentNode.parent_id].children) {
  118. if (parseInt(parentNode.id) === parseInt(j)) { // 存在
  119. isExitLevel2 = true
  120. }
  121. }
  122. if (!isExitLevel2) { // 父节点不存在 则把父节点赋值 并且置空父节点的children属性
  123. this.chooseData[parentNode.parent_id].children[parentNode.id] = JSON.parse(JSON.stringify(parentNode))
  124. this.chooseData[parentNode.parent_id].children[parentNode.id].children = {}
  125. }
  126. } else { // 如果祖节点不存在 则把祖节点加入 并且置空children属性
  127. this.chooseData[parentNode.parent_id] = this.areaData[parentNode.parent_id]
  128. this.chooseData[parentNode.parent_id].children = {}
  129. // 此时父节点一定不存在 把父节点加入 并且置空父节点children属性
  130. this.chooseData[parentNode.parent_id].children[parentNode.id] = JSON.parse(JSON.stringify(parentNode))
  131. this.chooseData[parentNode.parent_id].children[parentNode.id].children = {}
  132. }
  133. // 把当前节点添加进入对应位置
  134. this.chooseData[parentNode.parent_id].children[parentNode.id].children[model.id] = JSON.parse(JSON.stringify(model))
  135. },
  136. /** 删除level2数据 */
  137. delLevelTwoData(model, parentNode) {
  138. delete this.chooseData[parentNode.id].children[model.id]
  139. this.chooseData[parentNode.id].isSelected = false
  140. },
  141. /** 删除level3数据 */
  142. delLevelThreeData(model, parentNode) {
  143. delete this.chooseData[parentNode.parent_id].children[parentNode.id].children[model.id]
  144. this.chooseData[parentNode.parent_id].children[parentNode.id].isSelected = false
  145. }
  146. }
  147. }
  148. </script>
  149. <style type="text/css" lang="scss" scoped>
  150. .tree-menu {
  151. overflow-y: scroll;
  152. height: 100%;
  153. & > ul {
  154. & li {
  155. text-align: left;
  156. }
  157. }
  158. }
  159. </style>