Treeselect.vue 4.7 KB

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