Treeselect.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  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. :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. //是否多选
  52. multiple: {
  53. type: Boolean,
  54. default() {
  55. return true
  56. },
  57. },
  58. appId: {
  59. default() {
  60. return ''
  61. },
  62. },
  63. //判断媒体类型
  64. request: {
  65. type: String,
  66. default() {
  67. return '2,4'
  68. },
  69. },
  70. //一级请求接口
  71. reqUrl: {
  72. type: String,
  73. default() {
  74. return '/ctop/projectMember/participateListByMediaId'
  75. },
  76. },
  77. },
  78. components: {
  79. Treeselect,
  80. },
  81. watch: {
  82. $route(n, o) {},
  83. appId: {
  84. handler(n, o) {
  85. console.log(n)
  86. if (n.length == 0) {
  87. if (this.multiple) {
  88. this.value = []
  89. } else {
  90. this.value = undefined
  91. }
  92. }else{
  93. this.value=this.appId
  94. }
  95. },
  96. deep: true
  97. }
  98. },
  99. methods: {
  100. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  101. update(node, id) {
  102. // console.log(node)
  103. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  104. // projectId: node.id,
  105. // }).then((res) => {
  106. // // console.log(res)
  107. // if (res.code == 0) {
  108. // if (res.result.length > 0) {
  109. // node.children = res.result.map((item) => {
  110. // return {
  111. // id: item.accountId,
  112. // label: item.userName + ' ' + item.authName,
  113. // }
  114. // })
  115. // } else {
  116. // }
  117. // } else {
  118. // new Error('Failed to load options: network error.')
  119. // }
  120. // })
  121. },
  122. emitValue() {
  123. this.$emit('update:appId', this.value)
  124. },
  125. loadOptions({ action, parentNode, callback }) {
  126. // Typically, do the AJAX stuff here.
  127. // Once the server has responded,
  128. // assign children options to the parent node & call the callback.
  129. if (action === LOAD_CHILDREN_OPTIONS) {
  130. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  131. // projectId: parentNode.id,
  132. // }).then((res) => {
  133. // if (res.code == 0) {
  134. // if (res.result.length > 0) {
  135. // parentNode.children = res.result.map((item) => {
  136. // return {
  137. // id: item.accountId,
  138. // label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName,
  139. // }
  140. // })
  141. // callback()
  142. // } else {
  143. // parentNode.children = []
  144. // callback()
  145. // }
  146. // } else {
  147. // callback(new Error('Failed to load options: network error.'))
  148. // }
  149. // })
  150. }
  151. },
  152. getParticipateList() {
  153. //我参与的
  154. // toutiaoParticipateList
  155. var params = {}
  156. params.userId = this.userInfo().id
  157. if (this.request == '1,3') {
  158. params.type = 'bytedance'
  159. } else if (this.request == '2,4') {
  160. params.type = 'kuaishou'
  161. }
  162. if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
  163. if(this.options.length>0){
  164. return
  165. }
  166. postAction(this.reqUrl, params).then((res) => {
  167. if (res.success) {
  168. this.options = res.result.map((item) => {
  169. return {
  170. id: item.projectId + 'projectId',
  171. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
  172. children: item.accountList
  173. ? item.accountList.map((i) => {
  174. return {
  175. id: i.accountId,
  176. label:
  177. (i.userName.length==2?i.userName+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0':i.userName.length==3?i.userName+'\xa0\xa0\xa0\xa0':i.userName) +
  178. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  179. i.accountId +
  180. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  181. i.authName,
  182. }
  183. })
  184. : [],
  185. }
  186. })
  187. }
  188. })
  189. } else if(this.reqUrl == '/ctop/projectMember/getProjectAccountByUserId'){
  190. getAction(this.reqUrl, {
  191. mediaType: this.request,
  192. }).then((res) => {
  193. if (res.code == 0) {
  194. if (res.result.length > 0) {
  195. res.result.forEach((element,index) => {
  196. if(element){
  197. this.options.push({});
  198. this.options[index].label=element.project.projectName +'_('+ element.project.advertiserName +')';
  199. this.options[index].id='project'+element.project.projectId;
  200. this.options[index].key=element.project.projectId;
  201. this.options[index].mediaId=element.project.mediaId;
  202. this.options[index].children=[];
  203. if(element.account.length){
  204. element.account.forEach((ele,i)=>{
  205. this.options[index].children.push({});
  206. this.options[index].children[i].label=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  207. this.options[index].children[i].id=ele.accountId;
  208. this.options[index].children[i].key=ele.accountId;
  209. })
  210. }
  211. }
  212. });
  213. } else {
  214. this.showLoading = '暂无数据'
  215. }
  216. }
  217. })
  218. }else {
  219. getAction(this.reqUrl, {
  220. userId: this.userInfo().id,
  221. }).then((res) => {
  222. if (res.code == 0) {
  223. if (res.result.length > 0) {
  224. var arr = this.request.split(',')
  225. var dataTwo = []
  226. var data = res.result.filter((item) => {
  227. return item.mediaId == arr[0]
  228. })
  229. if (arr.length > 1) {
  230. dataTwo = res.result.filter((item) => {
  231. return item.mediaId == arr[1]
  232. })
  233. }
  234. var allData = data.concat(dataTwo)
  235. this.options = allData.map((item) => {
  236. return {
  237. id: item.projectId,
  238. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
  239. children: null,
  240. }
  241. })
  242. } else {
  243. this.showLoading = '暂无数据'
  244. }
  245. }
  246. })
  247. }
  248. },
  249. },
  250. mounted() {
  251. this.getParticipateList()
  252. },
  253. }
  254. </script>