Treeselect.vue 8.8 KB

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