treeSelectAccount.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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="selectedVal"
  16. :value-consists-of="valueConsistsOf"
  17. :auto-load-root-options="false"
  18. @select="update"
  19. @input="emitValue"
  20. :limit="limit"
  21. :default-options="true"
  22. :disabled="disabled"
  23. :limitText="
  24. count => {
  25. return '隐藏' + count + '条'
  26. }
  27. "
  28. noChildrenText="该项目下暂无账号"
  29. :noOptionsText="showLoading"
  30. />
  31. </div>
  32. </template>
  33. <script>
  34. // @open="getParticipateList"
  35. // import the component
  36. import Treeselect from '@riophae/vue-treeselect'
  37. // import the styles
  38. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  39. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  40. import { getAction, postAction } from '@/api/manage'
  41. import { mapGetters } from 'vuex'
  42. // We just use `setTimeout()` here to simulate an async operation
  43. // instead of requesting a real API server for demo purpose.
  44. let called = false
  45. export default {
  46. data: () => ({
  47. value: null,
  48. valueConsistsOf: 'LEAF_PRIORITY',
  49. options: [],
  50. showLoading: 'loading...'
  51. }),
  52. props: {
  53. oneData: {
  54. type: Boolean,
  55. default() {
  56. return false
  57. }
  58. },
  59. //是否多选
  60. multiple: {
  61. type: Boolean,
  62. default() {
  63. return false
  64. }
  65. },
  66. appId: {
  67. default() {
  68. return ''
  69. }
  70. },
  71. //判断媒体类型
  72. request: {
  73. type: String,
  74. default() {
  75. return '2,4'
  76. }
  77. },
  78. //一级请求接口
  79. reqUrl: {
  80. type: String,
  81. default() {
  82. return '/ctop/projectMember/getProductProjectAndAccountList'
  83. }
  84. },
  85. // 展示条数
  86. limit: {
  87. type: Number,
  88. default() {
  89. return 2
  90. }
  91. },
  92. disabled: {
  93. type: Boolean,
  94. default() {
  95. return false
  96. }
  97. }
  98. },
  99. components: {
  100. Treeselect
  101. },
  102. computed: {
  103. selectedVal: {
  104. get: function() {
  105. return this.value
  106. },
  107. set: function(val) {
  108. console.log(val)
  109. this.$emit('input', val)
  110. this.$emit('change', val)
  111. }
  112. }
  113. },
  114. watch: {
  115. $route(n, o) {}
  116. // appId: {
  117. // handler(n, o) {
  118. // console.log(n)
  119. // if (n.length == 0) {
  120. // if (this.multiple) {
  121. // this.value = []
  122. // } else {
  123. // this.value = undefined
  124. // }
  125. // } else {
  126. // this.value = this.appId
  127. // }
  128. // },
  129. // deep: true,
  130. // immediate: true
  131. // }
  132. },
  133. methods: {
  134. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  135. update(node, id) {
  136. this.$emit('select-value', node)
  137. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  138. // projectId: node.id,
  139. // }).then((res) => {
  140. // // console.log(res)
  141. // if (res.code == 0) {
  142. // if (res.result.length > 0) {
  143. // node.children = res.result.map((item) => {
  144. // return {
  145. // id: item.accountId,
  146. // label: item.userName + ' ' + item.authName,
  147. // }
  148. // })
  149. // } else {
  150. // }
  151. // } else {
  152. // new Error('Failed to load options: network error.')
  153. // }
  154. // })
  155. },
  156. emitValue() {
  157. this.$emit('update:appId', this.value)
  158. },
  159. loadOptions({ action, parentNode, callback }) {
  160. // Typically, do the AJAX stuff here.
  161. // Once the server has responded,
  162. // assign children options to the parent node & call the callback.
  163. if (action === LOAD_CHILDREN_OPTIONS) {
  164. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  165. // projectId: parentNode.id,
  166. // }).then((res) => {
  167. // if (res.code == 0) {
  168. // if (res.result.length > 0) {
  169. // parentNode.children = res.result.map((item) => {
  170. // return {
  171. // id: item.accountId,
  172. // label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName,
  173. // }
  174. // })
  175. // callback()
  176. // } else {
  177. // parentNode.children = []
  178. // callback()
  179. // }
  180. // } else {
  181. // callback(new Error('Failed to load options: network error.'))
  182. // }
  183. // })
  184. }
  185. },
  186. getParticipateList() {
  187. //我参与的
  188. // toutiaoParticipateList
  189. var params = {}
  190. params.userId = this.userInfo().id
  191. postAction(this.reqUrl, params).then(res => {
  192. if (res.success) {
  193. console.log(res)
  194. this.options = res.result.map(item => {
  195. return {
  196. id: item.productId + 'productId',
  197. label: item.productName,
  198. children: item.projectList
  199. ? item.projectList.map(i => {
  200. return {
  201. id: i.projectId,
  202. label: i.projectName,
  203. children: i.accountList
  204. ? i.accountList.map(c => {
  205. return {
  206. id: c.accountId,
  207. label:
  208. (c.userName && c.userName.length == 2
  209. ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  210. : c.userName && c.userName.length == 3
  211. ? c.userName + '\xa0\xa0\xa0\xa0'
  212. : c.userName) +
  213. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  214. c.accountId +
  215. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  216. c.authName
  217. }
  218. })
  219. : []
  220. }
  221. })
  222. : []
  223. }
  224. })
  225. if (this.oneData && !this.multiple) {
  226. var data = this.options.filter(item => {
  227. if (item.children && item.children.length > 0) {
  228. return { ...item }
  229. }
  230. })
  231. this.$emit('update:appId', data[0].children[0].id)
  232. }
  233. }
  234. })
  235. }
  236. },
  237. mounted() {
  238. this.getParticipateList()
  239. }
  240. }
  241. </script>