JTreeDict.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <a-tree-select
  3. allowClear
  4. labelInValue
  5. style="width: 100%"
  6. :disabled="disabled"
  7. :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  8. :placeholder="placeholder"
  9. :loadData="asyncLoadTreeData"
  10. :value="treeValue"
  11. :treeData="treeData"
  12. @change="onChange"
  13. @search="onSearch">
  14. </a-tree-select>
  15. </template>
  16. <script>
  17. import {getAction} from '@/api/manage'
  18. export default {
  19. name: 'JTreeDict',
  20. data() {
  21. return {
  22. treeData: [],
  23. treeValue: "",
  24. url_root: "/sys/category/loadTreeRoot",
  25. url_children: "/sys/category/loadTreeChildren",
  26. url_view: '/sys/category/loadOne',
  27. }
  28. },
  29. props: {
  30. value: {
  31. type: String,
  32. required: false
  33. },
  34. placeholder: {
  35. type: String,
  36. default: '请选择',
  37. required: false
  38. },
  39. parentCode: {
  40. type: String,
  41. default: '',
  42. required: false
  43. },
  44. field: {
  45. type: String,
  46. default: 'id',
  47. required: false
  48. },
  49. root: {
  50. type: Object,
  51. required: false,
  52. default: () => {
  53. return {
  54. pid: '0'
  55. }
  56. }
  57. },
  58. async: {
  59. type: Boolean,
  60. default: false,
  61. required: false
  62. },
  63. disabled: {
  64. type: Boolean,
  65. default: false,
  66. required: false
  67. }
  68. },
  69. watch: {
  70. root: {
  71. handler(val) {
  72. console.log("root-change", val)
  73. },
  74. deep: true
  75. },
  76. parentCode: {
  77. handler() {
  78. this.loadRoot()
  79. }
  80. },
  81. value: {
  82. handler() {
  83. this.loadViewInfo()
  84. }
  85. }
  86. },
  87. created() {
  88. this.loadRoot()
  89. this.loadViewInfo()
  90. },
  91. model: {
  92. prop: 'value',
  93. event: 'change'
  94. },
  95. methods: {
  96. loadViewInfo() {
  97. if (!this.value || this.value == "0") {
  98. this.treeValue = ""
  99. } else {
  100. let param = {
  101. field: this.field,
  102. val: this.value
  103. }
  104. getAction(this.url_view, param).then(res => {
  105. if (res.success) {
  106. this.treeValue = {
  107. value: this.value,
  108. label: res.result.name
  109. }
  110. }
  111. })
  112. }
  113. },
  114. loadRoot() {
  115. let param = {
  116. async: this.async,
  117. pcode: this.parentCode
  118. }
  119. getAction(this.url_root, param).then(res => {
  120. if (res.success) {
  121. this.handleTreeNodeValue(res.result)
  122. console.log("aaaa", res.result)
  123. this.treeData = [...res.result]
  124. } else {
  125. this.$message.error(res.message)
  126. }
  127. })
  128. },
  129. asyncLoadTreeData(treeNode) {
  130. return new Promise((resolve) => {
  131. if (!this.async) {
  132. resolve()
  133. return
  134. }
  135. if (treeNode.$vnode.children) {
  136. resolve()
  137. return
  138. }
  139. let pid = treeNode.$vnode.key
  140. let param = {
  141. pid: pid
  142. }
  143. getAction(this.url_children, param).then(res => {
  144. if (res.success) {
  145. this.handleTreeNodeValue(res.result)
  146. this.addChildren(pid, res.result, this.treeData)
  147. this.treeData = [...this.treeData]
  148. }
  149. resolve()
  150. })
  151. })
  152. },
  153. addChildren(pid, children, treeArray) {
  154. if (treeArray && treeArray.length > 0) {
  155. for (let item of treeArray) {
  156. if (item.key == pid) {
  157. if (!children || children.length == 0) {
  158. item.leaf = true
  159. } else {
  160. item.children = children
  161. }
  162. break
  163. } else {
  164. this.addChildren(pid, children, item.children)
  165. }
  166. }
  167. }
  168. },
  169. handleTreeNodeValue(result) {
  170. let storeField = this.field == 'code' ? 'code' : 'key'
  171. for (let i of result) {
  172. i.value = i[storeField]
  173. i.isLeaf = (!i.leaf) ? false : true
  174. if (i.children && i.children.length > 0) {
  175. this.handleTreeNodeValue(i.children)
  176. }
  177. }
  178. },
  179. onChange(value) {
  180. console.log(value)
  181. this.$emit('change', value.value);
  182. this.treeValue = value
  183. },
  184. onSearch(value) {
  185. console.log(value)
  186. },
  187. getCurrTreeData() {
  188. return this.treeData
  189. }
  190. }
  191. }
  192. </script>