dk-tree-form.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. const tranverse = (e,itemListKey) => {
  2. for (let i in e) {
  3. if (e[i][itemListKey]) {
  4. e[i].open = false;
  5. tranverse(e[i][itemListKey],itemListKey)
  6. }
  7. e[i].selected = false;
  8. }
  9. }
  10. Component({
  11. properties: {
  12. treeList: Object,
  13. depth: {
  14. type: Number,
  15. value: 0
  16. },
  17. itemListKey: { //子list key名
  18. type: String,
  19. value: ""
  20. },
  21. parentIdKey: { //父级的key名
  22. type: String,
  23. value: ""
  24. },
  25. idKey: { // id 的key名
  26. type: String,
  27. value: ""
  28. },
  29. nameKey: { //显示的名字的key
  30. type: String,
  31. value: ""
  32. },
  33. ischekboxFlag: { //是否显示cheakbox
  34. type: Boolean,
  35. value: false
  36. },
  37. isNameImgFlag: { //是否显示名字前图片
  38. type: Boolean,
  39. value: true
  40. },
  41. },
  42. data: {},
  43. ready() {
  44. // const {treeList}=this.properties;
  45. const { treeList } = this.data;
  46. const { itemListKey } = this.data;
  47. for (let i in treeList) {
  48. if (treeList[i][itemListKey]) {
  49. treeList[i].open = false;
  50. tranverse(treeList[i][itemListKey],itemListKey);
  51. }
  52. treeList[i].selected = false;
  53. }
  54. debugger
  55. this.setData({
  56. tree: treeList
  57. })
  58. },
  59. methods: {
  60. //修改折叠状态
  61. changeOpen(tree, id,itemListKey,idKey) {
  62. for (let i = 0; i < tree.length; i += 1) {
  63. if (tree[i][idKey] === id) {
  64. tree[i].open = !tree[i].open;
  65. }
  66. if (tree[i][itemListKey].length !== 0) {
  67. this.changeOpen(tree[i][itemListKey], id,itemListKey);
  68. }
  69. }
  70. return;
  71. },
  72. onchange(e) {
  73. console.log("onchange",e)
  74. const { treeList } = this.data;
  75. const { itemListKey } = this.data;
  76. const { idKey } = this.data;
  77. const { id } = e.currentTarget.dataset;
  78. this.changeOpen(treeList, id, itemListKey,idKey);
  79. this.triggerEvent('change', id, { bubbles: true, composed: true });
  80. this.setData({
  81. tree: treeList
  82. })
  83. },
  84. change(e) {
  85. console.log("change",e)
  86. const id = e.detail;
  87. const { treeList } = this.data;
  88. const { itemListKey } = this.data;
  89. const { idKey } = this.data;
  90. this.changeOpen(treeList, id,itemListKey,idKey);
  91. this.setData({
  92. tree: treeList
  93. })
  94. },
  95. // 点击名字
  96. clickName(e){
  97. console.log("clickName",e.currentTarget.dataset.item.name)
  98. this.triggerEvent('clickName', e );
  99. },
  100. click(e) {
  101. console.log("click")
  102. const t = this.selectAllComponents('#treeSelect');
  103. t.forEach(item => {
  104. item.click(e);
  105. })
  106. const { idKey } = this.data;
  107. let id = '';
  108. if (e.detail) {
  109. id = e.detail[idKey];
  110. }
  111. const { treeList } = this.data;
  112. this.setStatus(treeList, id,idKey);
  113. this.setData({
  114. tree: treeList
  115. })
  116. },
  117. handleClick(e) {
  118. const t = this.selectAllComponents('#treeSelect');
  119. t.forEach(item => {
  120. item.click(e);
  121. })
  122. // const {id}=e.currentTarget.dataset;
  123. const { id, value } = e.currentTarget.dataset;
  124. const { treeList } = this.data;
  125. const { idKey } = this.data;
  126. // const value = this.getData(treeList, id)
  127. this.setStatus(treeList, id,idKey);
  128. this.triggerEvent('onclick', { id, value, treeList }, { composed: true, bubbles: true });
  129. this.setData({
  130. tree: treeList
  131. })
  132. },
  133. //切换选中状态
  134. setStatus(tree, id,idKey) {
  135. for (let i = 0; i < tree.length; i += 1) {
  136. if (tree[i][idKey] == id) {
  137. tree[i].selected = true;
  138. } else {
  139. tree[i].selected = false;
  140. }
  141. if (tree[i][itemListKey]) {
  142. this.setStatus(tree[i][itemListKey], id,idKey);
  143. }
  144. }
  145. return;
  146. },
  147. //获取选中项信息
  148. getData(tree, id,idKey) {
  149. for (let i = 0; i < tree.length; i += 1) {
  150. if (tree[i][idKey] === id) {
  151. return tree[i].name;
  152. }
  153. if (tree[i][itemListKey]) {
  154. this.getData(tree[i][itemListKey], id,idKey);
  155. }
  156. }
  157. return '';
  158. },
  159. }
  160. })