treeSelectProject.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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. type: [Number, Array, String],
  68. default() {
  69. return ""
  70. }
  71. },
  72. //判断媒体类型
  73. request: {
  74. type: String,
  75. default() {
  76. return '2,4'
  77. }
  78. },
  79. //一级请求接口
  80. reqUrl: {
  81. type: String,
  82. default() {
  83. return '/ctop/projectMember/getProductProjectList'
  84. }
  85. },
  86. // 展示条数
  87. limit: {
  88. type: Number,
  89. default() {
  90. return 2
  91. }
  92. },
  93. disabled: {
  94. type: Boolean,
  95. default() {
  96. return false
  97. }
  98. }
  99. },
  100. components: {
  101. Treeselect
  102. },
  103. computed: {
  104. selectedVal: {
  105. get: function() {
  106. return this.value
  107. },
  108. set: function(val) {
  109. console.log(val)
  110. this.$emit('input', val)
  111. this.$emit('change', val)
  112. }
  113. }
  114. },
  115. watch: {
  116. $route(n, o) {},
  117. // appId: {
  118. // handler(n, o) {
  119. // console.log(n)
  120. // if (n.length == 0) {
  121. // if (this.multiple) {
  122. // this.value = []
  123. // } else {
  124. // this.value = undefined
  125. // }
  126. // } else {
  127. // this.value = this.appId
  128. // }
  129. // },
  130. // deep: true,
  131. // immediate: true
  132. // }
  133. },
  134. methods: {
  135. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  136. update(node, id) {
  137. this.$emit('select-value', node)
  138. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  139. // projectId: node.id,
  140. // }).then((res) => {
  141. // // console.log(res)
  142. // if (res.code == 0) {
  143. // if (res.result.length > 0) {
  144. // node.children = res.result.map((item) => {
  145. // return {
  146. // id: item.accountId,
  147. // label: item.userName + ' ' + item.authName,
  148. // }
  149. // })
  150. // } else {
  151. // }
  152. // } else {
  153. // new Error('Failed to load options: network error.')
  154. // }
  155. // })
  156. },
  157. emitValue() {
  158. // this.$emit('update:appId', this.value)
  159. },
  160. loadOptions({ action, parentNode, callback }) {
  161. // Typically, do the AJAX stuff here.
  162. // Once the server has responded,
  163. // assign children options to the parent node & call the callback.
  164. if (action === LOAD_CHILDREN_OPTIONS) {
  165. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  166. // projectId: parentNode.id,
  167. // }).then((res) => {
  168. // if (res.code == 0) {
  169. // if (res.result.length > 0) {
  170. // parentNode.children = res.result.map((item) => {
  171. // return {
  172. // id: item.accountId,
  173. // label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName,
  174. // }
  175. // })
  176. // callback()
  177. // } else {
  178. // parentNode.children = []
  179. // callback()
  180. // }
  181. // } else {
  182. // callback(new Error('Failed to load options: network error.'))
  183. // }
  184. // })
  185. }
  186. },
  187. getParticipateList() {
  188. //我参与的
  189. // toutiaoParticipateList
  190. var params = {}
  191. params.userId = this.userInfo().id
  192. postAction(this.reqUrl, params).then(res => {
  193. if (res.success) {
  194. console.log(res)
  195. this.options = res.result.map(item => {
  196. return {
  197. id: item.productId + 'productId',
  198. label: item.productName,
  199. children: item.projectList
  200. ? item.projectList.map(i => {
  201. return {
  202. id: i.projectId,
  203. label: i.projectName
  204. }
  205. })
  206. : []
  207. }
  208. })
  209. if (this.oneData && !this.multiple) {
  210. var data = this.options.filter(item => {
  211. if (item.children && item.children.length > 0) {
  212. return { ...item }
  213. }
  214. })
  215. this.$emit('update:appId', data[0].children[0].id)
  216. }
  217. }
  218. })
  219. }
  220. },
  221. mounted() {
  222. this.getParticipateList()
  223. }
  224. }
  225. </script>