treeSelectAccount.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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. console.log(n)
  107. if (n.length == 0) {
  108. if (this.multiple) {
  109. this.value = []
  110. } else {
  111. this.value = undefined
  112. }
  113. } else {
  114. this.value = this.appId
  115. }
  116. },
  117. deep: true,
  118. immediate: true
  119. }
  120. },
  121. methods: {
  122. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  123. update(node, id) {
  124. this.$emit('select-value', node)
  125. console.log(node)
  126. if (typeof node.id == 'string' && node.id.indexOf('p') != -1) {
  127. getAction('/ctop/userAllocation/getByProjectId', {
  128. projectId: node.id.split('p')[0]
  129. }).then(res => {
  130. // console.log(res)
  131. if (res.code == 0) {
  132. if (res.result.length > 0) {
  133. node.children = res.result.map(item => {
  134. return {
  135. id: item.userId ? item.userId : '',
  136. label: item.userId ? item.userId : '',
  137. children: item.accounts.map(c => {
  138. return {
  139. id: c.accountId,
  140. label:
  141. c.userName +
  142. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  143. c.authName
  144. }
  145. })
  146. }
  147. })
  148. } else {
  149. }
  150. } else {
  151. new Error('Failed to load options: network error.')
  152. }
  153. })
  154. }
  155. },
  156. emitValue(value, id) {
  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/getByProjectId', {
  165. projectId: parentNode.id.split('p')[0]
  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.userId ? item.userId : '',
  172. label: item.userId ? item.userId : '',
  173. children: item.accounts.map(c => {
  174. return {
  175. id: c.accountId,
  176. label:
  177. c.userName +
  178. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  179. c.authName
  180. }
  181. })
  182. }
  183. })
  184. callback()
  185. } else {
  186. parentNode.children = []
  187. callback()
  188. }
  189. } else {
  190. callback(new Error('Failed to load options: network error.'))
  191. }
  192. })
  193. }
  194. },
  195. getParticipateList() {
  196. //我参与的
  197. // toutiaoParticipateList
  198. var params = {}
  199. params.userId = this.userInfo().id
  200. if (this.request == '1,3') {
  201. params.type = 'bytedance'
  202. } else if (this.request == '2,4') {
  203. params.type = 'kuaishou'
  204. }
  205. if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
  206. if (this.options.length > 0) {
  207. return
  208. }
  209. // 2021/9/1 蒙蒙让修改 接口增加 userId 原来的url链接并没有使用声明好的params
  210. getAction('/ctop/projectMember/projectList', {userId: this.userInfo().id}).then(res => {
  211. if (res.success) {
  212. this.options = res.data.map(item => {
  213. return {
  214. id: item.id + 'projectId',
  215. label: item.projectName,
  216. children: null
  217. }
  218. })
  219. if (this.oneData && !this.multiple) {
  220. var data = this.options.filter(item => {
  221. if (item.children && item.children.length > 0) {
  222. return { ...item }
  223. }
  224. })
  225. this.$emit('update:appId', data[0].children[0].id)
  226. }
  227. }
  228. })
  229. } else if (this.reqUrl == '/ctop/projectMember/getProjectAccountByUserId') {
  230. getAction(this.reqUrl, {
  231. mediaType: this.request,
  232. userId: this.userInfo().id
  233. }).then(res => {
  234. if (res.code == 0) {
  235. if (res.result.length > 0) {
  236. res.result.forEach((element, index) => {
  237. if (element) {
  238. this.options.push({})
  239. this.options[index].label =
  240. element.project.projectName + '_(' + element.project.advertiserName + ')'
  241. this.options[index].id = 'project' + element.project.projectId
  242. this.options[index].key = element.project.projectId
  243. this.options[index].mediaId = element.project.mediaId
  244. this.options[index].children = []
  245. if (element.account.length) {
  246. element.account.forEach((ele, i) => {
  247. this.options[index].children.push({})
  248. this.options[index].children[i].label =
  249. ele.userName + '_' + ele.authName + '_' + element.project.projectName
  250. this.options[index].children[i].id = ele.accountId
  251. this.options[index].children[i].key = ele.accountId
  252. })
  253. }
  254. }
  255. })
  256. } else {
  257. this.showLoading = '暂无数据'
  258. }
  259. }
  260. })
  261. } else {
  262. getAction(this.reqUrl, {
  263. userId: this.userInfo().id
  264. }).then(res => {
  265. if (res.code == 0) {
  266. if (res.result.length > 0) {
  267. var arr = this.request.split(',')
  268. var dataTwo = []
  269. var data = res.result.filter(item => {
  270. return item.mediaId == arr[0]
  271. })
  272. if (arr.length > 1) {
  273. dataTwo = res.result.filter(item => {
  274. return item.mediaId == arr[1]
  275. })
  276. }
  277. var allData = data.concat(dataTwo)
  278. this.options = allData.map(item => {
  279. return {
  280. id: item.projectId,
  281. label:
  282. item.projectName +
  283. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  284. item.advertiserName,
  285. children: null
  286. }
  287. })
  288. } else {
  289. this.showLoading = '暂无数据'
  290. }
  291. }
  292. })
  293. }
  294. }
  295. },
  296. mounted() {
  297. this.getParticipateList()
  298. }
  299. }
  300. </script>