JTreeSelect.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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. /*
  18. * 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
  19. * <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
  20. * */
  21. import {getAction} from '@/api/manage'
  22. export default {
  23. name: 'JTreeSelect',
  24. props: {
  25. value: {
  26. type: String,
  27. required: false
  28. },
  29. placeholder: {
  30. type: String,
  31. default: '请选择',
  32. required: false
  33. },
  34. dict: {
  35. type: String,
  36. default: '',
  37. required: false
  38. },
  39. pidField: {
  40. type: String,
  41. default: 'pid',
  42. required: false
  43. },
  44. pidValue: {
  45. type: String,
  46. default: '0',
  47. required: false
  48. },
  49. disabled: {
  50. type: Boolean,
  51. default: false,
  52. required: false
  53. },
  54. hasChildField: {
  55. type: String,
  56. default: '',
  57. required: false
  58. }
  59. },
  60. data() {
  61. return {
  62. treeValue: "",
  63. treeData: [],
  64. url: "/sys/dict/loadTreeData",
  65. view: '/sys/dict/loadDictItem/',
  66. tableName: "",
  67. text: "",
  68. code: "",
  69. }
  70. },
  71. watch: {
  72. value() {
  73. this.loadItemByCode()
  74. },
  75. dict() {
  76. this.initDictInfo()
  77. this.loadRoot();
  78. }
  79. },
  80. created() {
  81. this.initDictInfo()
  82. this.loadRoot()
  83. this.loadItemByCode()
  84. },
  85. methods: {
  86. loadItemByCode() {
  87. if (!this.value || this.value == "0") {
  88. this.treeValue = ""
  89. } else {
  90. getAction(`${this.view}${this.dict}`, {key: this.value}).then(res => {
  91. console.log(res.result)
  92. if (res.success) {
  93. this.treeValue = {
  94. key: this.value,
  95. value: this.value,
  96. label: res.result
  97. }
  98. }
  99. })
  100. }
  101. },
  102. initDictInfo() {
  103. let arr = this.dict.split(",")
  104. this.tableName = arr[0]
  105. this.text = arr[1]
  106. this.code = arr[2]
  107. },
  108. asyncLoadTreeData(treeNode) {
  109. return new Promise((resolve) => {
  110. if (treeNode.$vnode.children) {
  111. resolve()
  112. return
  113. }
  114. let pid = treeNode.$vnode.key
  115. let param = {
  116. pid: pid,
  117. tableName: this.tableName,
  118. text: this.text,
  119. code: this.code,
  120. pidField: this.pidField,
  121. hasChildField: this.hasChildField
  122. }
  123. getAction(this.url, param).then(res => {
  124. if (res.success) {
  125. for (let i of res.result) {
  126. i.value = i.key
  127. if (i.leaf == false) {
  128. i.isLeaf = false
  129. } else if (i.leaf == true) {
  130. i.isLeaf = true
  131. }
  132. }
  133. this.addChildren(pid, res.result, this.treeData)
  134. this.treeData = [...this.treeData]
  135. }
  136. resolve()
  137. })
  138. })
  139. },
  140. addChildren(pid, children, treeArray) {
  141. if (treeArray && treeArray.length > 0) {
  142. for (let item of treeArray) {
  143. if (item.key == pid) {
  144. if (!children || children.length == 0) {
  145. item.isLeaf = true
  146. } else {
  147. item.children = children
  148. }
  149. break
  150. } else {
  151. this.addChildren(pid, children, item.children)
  152. }
  153. }
  154. }
  155. },
  156. loadRoot() {
  157. let param = {
  158. pid: this.pidValue,
  159. tableName: this.tableName,
  160. text: this.text,
  161. code: this.code,
  162. pidField: this.pidField,
  163. hasChildField: this.hasChildField
  164. }
  165. getAction(this.url, param).then(res => {
  166. if (res.success && res.result) {
  167. console.log(res.result)
  168. for (let i of res.result) {
  169. i.value = i.key
  170. // i.disabled = true
  171. if (i.leaf == false) {
  172. i.isLeaf = false
  173. } else if (i.leaf == true) {
  174. i.isLeaf = true
  175. }
  176. }
  177. this.treeData = [...res.result]
  178. } else {
  179. console.log("数根节点查询结果-else", res)
  180. }
  181. })
  182. },
  183. onChange(value) {
  184. if (!value) {
  185. this.$emit('change', '');
  186. this.treeValue = ''
  187. } else {
  188. this.$emit('change', value.value);
  189. this.treeValue = value
  190. }
  191. },
  192. onSearch(value) {
  193. console.log(value)
  194. },
  195. getCurrTreeData() {
  196. return this.treeData
  197. }
  198. },
  199. //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  200. model: {
  201. prop: 'value',
  202. event: 'change'
  203. }
  204. }
  205. </script>