Treeselect.vue 4.1 KB

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