pushTreeSelect.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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. :disable-fuzzy-matching="true"
  12. :options="options"
  13. :load-options="loadOptions"
  14. placeholder="请选择项目以及账户"
  15. v-model="value"
  16. :value-consists-of="valueConsistsOf"
  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. default() {
  54. return ''
  55. },
  56. },
  57. },
  58. components: { Treeselect },
  59. watch: {
  60. $route(n, o) {
  61. console.log(n, o)
  62. },
  63. appId: {
  64. handler(n, o) {
  65. console.log(n)
  66. if (n.length == 0) {
  67. if (this.multiple) {
  68. this.value = []
  69. } else {
  70. this.value = undefined
  71. }
  72. } else {
  73. this.value = this.appId
  74. }
  75. },
  76. deep: true,
  77. },
  78. },
  79. methods: {
  80. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  81. emitValue() {
  82. this.$emit('update:appId', this.value)
  83. },
  84. getChildren() {},
  85. loadOptions({ action, parentNode, callback }) {
  86. // Typically, do the AJAX stuff here.
  87. // Once the server has responded,
  88. // assign children options to the parent node & call the callback.
  89. },
  90. getParticipateList() {
  91. //我参与的
  92. this.postDataAction('/ctop/projectMember/participateListByMediaId', {
  93. userId: this.userInfo().id,
  94. }).then((res) => {
  95. if (res.code == 0) {
  96. this.options = res.result.map((item) => {
  97. return {
  98. id: item.projectId + 'projectId',
  99. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
  100. children: item.accountList
  101. ? item.accountList.map((i) => {
  102. return {
  103. id: i.accountId,
  104. label:
  105. (i.userName?i.userName.length == 2
  106. ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  107. : i.userName.length == 3
  108. ? i.userName + '\xa0\xa0\xa0\xa0'
  109. : i.userName:'') +
  110. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  111. i.accountId +
  112. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  113. i.authName,
  114. }
  115. })
  116. : [],
  117. }
  118. })
  119. }
  120. })
  121. },
  122. },
  123. mounted() {
  124. this.getParticipateList()
  125. },
  126. }
  127. </script>