Treeselect.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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. :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 true
  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/participateListByMediaId'
  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. watch: {
  103. $route(n, o) {},
  104. appId: {
  105. handler(n, o) {
  106. if (n.length == 0) {
  107. if (this.multiple) {
  108. this.value = []
  109. } else {
  110. this.value = undefined
  111. }
  112. } else {
  113. this.value = this.appId
  114. }
  115. },
  116. deep: true,
  117. immediate:true
  118. },
  119. },
  120. methods: {
  121. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  122. update(node, id) {
  123. // console.log(node)
  124. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  125. // projectId: node.id,
  126. // }).then((res) => {
  127. // // console.log(res)
  128. // if (res.code == 0) {
  129. // if (res.result.length > 0) {
  130. // node.children = res.result.map((item) => {
  131. // return {
  132. // id: item.accountId,
  133. // label: item.userName + ' ' + item.authName,
  134. // }
  135. // })
  136. // } else {
  137. // }
  138. // } else {
  139. // new Error('Failed to load options: network error.')
  140. // }
  141. // })
  142. },
  143. emitValue() {
  144. this.$emit('update:appId', this.value)
  145. },
  146. loadOptions({ action, parentNode, callback }) {
  147. // Typically, do the AJAX stuff here.
  148. // Once the server has responded,
  149. // assign children options to the parent node & call the callback.
  150. if (action === LOAD_CHILDREN_OPTIONS) {
  151. // getAction('/ctop/userAllocation/getAccountListByProjectId', {
  152. // projectId: parentNode.id,
  153. // }).then((res) => {
  154. // if (res.code == 0) {
  155. // if (res.result.length > 0) {
  156. // parentNode.children = res.result.map((item) => {
  157. // return {
  158. // id: item.accountId,
  159. // label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName,
  160. // }
  161. // })
  162. // callback()
  163. // } else {
  164. // parentNode.children = []
  165. // callback()
  166. // }
  167. // } else {
  168. // callback(new Error('Failed to load options: network error.'))
  169. // }
  170. // })
  171. }
  172. },
  173. getParticipateList() {
  174. //我参与的
  175. // toutiaoParticipateList
  176. var params = {}
  177. params.userId = this.userInfo().id
  178. if (this.request == '1,3') {
  179. params.type = 'bytedance'
  180. } else if (this.request == '2,4') {
  181. params.type = 'kuaishou'
  182. }
  183. if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
  184. if (this.options.length > 0) {
  185. return
  186. }
  187. postAction(this.reqUrl, params).then((res) => {
  188. if (res.success) {
  189. this.options = res.result.map((item) => {
  190. return {
  191. id: item.projectId + 'projectId',
  192. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
  193. children: item.accountList
  194. ? item.accountList.map((i) => {
  195. return {
  196. id: i.accountId,
  197. label:
  198. (i.userName.length == 2
  199. ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  200. : i.userName.length == 3
  201. ? i.userName + '\xa0\xa0\xa0\xa0'
  202. : i.userName) +
  203. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  204. i.accountId +
  205. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  206. i.authName,
  207. }
  208. })
  209. : [],
  210. }
  211. })
  212. if (this.oneData&&!this.multiple) {
  213. var data = this.options.filter((item) => {
  214. if (item.children&&item.children.length > 0) {
  215. return { ...item }
  216. }
  217. })
  218. this.$emit('update:appId', data[0].children[0].id)
  219. }
  220. }
  221. })
  222. } else if (this.reqUrl == '/ctop/projectMember/getProjectAccountByUserId') {
  223. getAction(this.reqUrl, {
  224. mediaType: this.request,
  225. }).then((res) => {
  226. if (res.code == 0) {
  227. if (res.result.length > 0) {
  228. res.result.forEach((element, index) => {
  229. if (element) {
  230. this.options.push({})
  231. this.options[index].label = element.project.projectName + '_(' + element.project.advertiserName + ')'
  232. this.options[index].id = 'project' + element.project.projectId
  233. this.options[index].key = element.project.projectId
  234. this.options[index].mediaId = element.project.mediaId
  235. this.options[index].children = []
  236. if (element.account.length) {
  237. element.account.forEach((ele, i) => {
  238. this.options[index].children.push({})
  239. this.options[index].children[i].label =
  240. ele.userName + '_' + ele.authName + '_' + element.project.projectName
  241. this.options[index].children[i].id = ele.accountId
  242. this.options[index].children[i].key = ele.accountId
  243. })
  244. }
  245. }
  246. })
  247. } else {
  248. this.showLoading = '暂无数据'
  249. }
  250. }
  251. })
  252. } else {
  253. getAction(this.reqUrl, {
  254. userId: this.userInfo().id,
  255. }).then((res) => {
  256. if (res.code == 0) {
  257. if (res.result.length > 0) {
  258. var arr = this.request.split(',')
  259. var dataTwo = []
  260. var data = res.result.filter((item) => {
  261. return item.mediaId == arr[0]
  262. })
  263. if (arr.length > 1) {
  264. dataTwo = res.result.filter((item) => {
  265. return item.mediaId == arr[1]
  266. })
  267. }
  268. var allData = data.concat(dataTwo)
  269. this.options = allData.map((item) => {
  270. return {
  271. id: item.projectId,
  272. label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
  273. children: null,
  274. }
  275. })
  276. } else {
  277. this.showLoading = '暂无数据'
  278. }
  279. }
  280. })
  281. }
  282. },
  283. },
  284. mounted() {
  285. this.getParticipateList()
  286. },
  287. }
  288. </script>