pushTreeSelect.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  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. @input="emitValue"
  17. :limit="2"
  18. :limitText="
  19. (count) => {
  20. return '隐藏' + count + '条'
  21. }
  22. "
  23. noChildrenText="该项目下暂无账号"
  24. noOptionsText="暂无项目"
  25. />
  26. </div>
  27. </template>
  28. <script>
  29. // import the component
  30. import Treeselect from '@riophae/vue-treeselect'
  31. // import the styles
  32. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  33. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  34. import { getAction, postAction } from '@/api/manage'
  35. import { mapGetters } from 'vuex'
  36. // We just use `setTimeout()` here to simulate an async operation
  37. // instead of requesting a real API server for demo purpose.
  38. export default {
  39. data: () => ({
  40. value: null,
  41. valueConsistsOf: 'LEAF_PRIORITY',
  42. options: [],
  43. }),
  44. props: {
  45. multiple: {
  46. type: Boolean,
  47. default() {
  48. return true
  49. },
  50. },
  51. appId: {
  52. default() {
  53. return ''
  54. },
  55. },
  56. },
  57. components: { Treeselect },
  58. watch: {
  59. $route(n, o) {
  60. console.log(n, o)
  61. },
  62. appId: {
  63. handler(n, o) {
  64. console.log(n)
  65. if (n.length == 0) {
  66. if (this.multiple) {
  67. this.value = []
  68. } else {
  69. this.value = undefined
  70. }
  71. } else {
  72. this.value = this.appId
  73. }
  74. },
  75. deep: true,
  76. },
  77. },
  78. methods: {
  79. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  80. emitValue() {
  81. this.$emit('update:appId', this.value)
  82. },
  83. getChildren() {},
  84. loadOptions({ action, parentNode, callback }) {
  85. // Typically, do the AJAX stuff here.
  86. // Once the server has responded,
  87. // assign children options to the parent node & call the callback.
  88. if (action === LOAD_CHILDREN_OPTIONS) {
  89. getAction('/ctop/userAllocation/getAccountList', { projectId: parentNode.id, userId: this.userInfo().id }).then(
  90. (res) => {
  91. console.log(res)
  92. if (res.code == 0) {
  93. if (res.result.length > 0) {
  94. parentNode.children = res.result.map((i) => {
  95. return {
  96. id: i.accountId,
  97. label:
  98. (i.userName.length == 2
  99. ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  100. : i.userName.length == 3
  101. ? i.userName + '\xa0\xa0\xa0\xa0'
  102. : i.userName) +
  103. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  104. i.accountId +
  105. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  106. i.authName,
  107. }
  108. })
  109. callback()
  110. } else {
  111. parentNode.children = []
  112. callback()
  113. }
  114. } else {
  115. callback(new Error('Failed to load options: network error.'))
  116. }
  117. }
  118. )
  119. }
  120. },
  121. getParticipateList() {
  122. //我参与的
  123. getAction('/ctop/projectMember/participateListV2', {
  124. userId: this.userInfo().id,
  125. pageSize: 1000000,
  126. pageNo: 1,
  127. }).then((res) => {
  128. if (res.code == 0) {
  129. this.options = res.result.records.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>