Treeselect.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <style lang="scss" scoped>
  2. .select-project {
  3. width: 50%;
  4. }
  5. </style>
  6. <template>
  7. <div class="select-project">
  8. <treeselect :options="options"
  9. :multiple="multiple"
  10. :disable-branch-nodes="!multiple"
  11. :load-options="loadOptions"
  12. placeholder="请选择项目以及账户"
  13. v-model="value"
  14. :value-consists-of="valueConsistsOf"
  15. :auto-load-root-options="false"
  16. @select="update"
  17. @input="emitValue"
  18. :limit="2"
  19. :limitText="
  20. count => {
  21. return '隐藏' + count + '条'
  22. }
  23. "
  24. noChildrenText="该项目下暂无账号"
  25. noOptionsText="loading..."
  26. >
  27. <div slot="value-label" slot-scope="{ node }">{{ node.raw.customLabel }}</div>
  28. </treeselect>
  29. <!-- <treeselect :options="options" @input="emitValue" placeholder="请选择项目以及账户" v-model="value" :multiple="multiple" noOptionsText="loading..." :limit="2"
  30. :limitText="
  31. count => {
  32. return '隐藏' + count + '条'
  33. }
  34. ">
  35. </treeselect> -->
  36. </div>
  37. </template>
  38. <script>
  39. // import the component
  40. import Treeselect from '@riophae/vue-treeselect'
  41. // import the styles
  42. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  43. import {
  44. LOAD_CHILDREN_OPTIONS
  45. } from '@riophae/vue-treeselect'
  46. import {
  47. getAction,
  48. postAction
  49. } from '@/api/manage'
  50. import {
  51. mapGetters
  52. } from 'vuex'
  53. // We just use `setTimeout()` here to simulate an async operation
  54. // instead of requesting a real API server for demo purpose.
  55. let called = false
  56. export default {
  57. data: () => ({
  58. multiple: true,
  59. value: null,
  60. options: [],
  61. valueConsistsOf: 'LEAF_PRIORITY',
  62. }),
  63. props: {
  64. // multiple: {
  65. // type: Boolean,
  66. // default() {
  67. // return true
  68. // }
  69. // },
  70. appId: {},
  71. // request: {
  72. // type: String,
  73. // default() {
  74. // return '2'
  75. // }
  76. // },
  77. reqUrl: {
  78. type: String,
  79. default () {
  80. return '/ctop/projectMember/participateList'
  81. }
  82. }
  83. },
  84. components: {
  85. Treeselect
  86. },
  87. watch: {
  88. $route(n, o) {},
  89. appId: {
  90. handler(n, o) {
  91. console.log(n)
  92. if (n.length == 0) {
  93. if (this.multiple) {
  94. this.value = []
  95. } else {
  96. this.value = ''
  97. }
  98. }
  99. },
  100. deep: true
  101. }
  102. },
  103. methods: {
  104. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  105. emitValue() {
  106. console.log(this.value)
  107. this.$emit('update:appId', this.value)
  108. },
  109. update(node, id) {
  110. getAction('/ctop/projectMember/bytedanceProjectParticipateInList', { projectId: node.id }).then(res => {
  111. console.log(res)
  112. if (res.code == 0) {
  113. if (res.result.length > 0) {
  114. node.children = res.result.map(item => {
  115. return {
  116. id: item.accountId,
  117. label: item.userName + ' ' + item.authName
  118. }
  119. })
  120. } else {
  121. }
  122. } else {
  123. new Error('Failed to load options: network error.')
  124. }
  125. })
  126. },
  127. getChildren() {},
  128. getParticipateList() {
  129. //我参与的
  130. // toutiaoParticipateList
  131. getAction('/ctop/projectMember/bytedanceProjectParticipateInList').then(res => {
  132. if (res.code == 0) {
  133. this.options = res.result.map(item => {
  134. return {
  135. id: item.id,
  136. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item
  137. .advertiserName
  138. }
  139. })
  140. }
  141. })
  142. },
  143. loadOptions({ action, parentNode, callback }) {
  144. console.log({ action, parentNode, callback })
  145. // Typically, do the AJAX stuff here.
  146. // Once the server has responded,
  147. // assign children options to the parent node & call the callback.
  148. if (action === LOAD_CHILDREN_OPTIONS) {
  149. getAction('/ctop/userAllocation/getAccountListByProjectId', { projectId: parentNode.id }).then(res => {
  150. console.log(res)
  151. if (res.code == 0) {
  152. if (res.result.length > 0) {
  153. parentNode.children = res.result.map(item => {
  154. return {
  155. id: item.accountId,
  156. label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName
  157. }
  158. })
  159. callback()
  160. } else {
  161. parentNode.children = []
  162. callback()
  163. }
  164. } else {
  165. callback(new Error('Failed to load options: network error.'))
  166. }
  167. })
  168. }
  169. },
  170. },
  171. activated() {
  172. this.getParticipateList()
  173. }
  174. }
  175. </script>