selectAccount.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <style lang="scss" scoped>
  2. .select-project {
  3. width: 50%;
  4. }
  5. ::v-deep.vue-treeselect__control {
  6. line-height: 20px !important;
  7. }
  8. </style>
  9. <template>
  10. <div class="select-project">
  11. <treeselect
  12. :multiple="multiple"
  13. :disable-branch-nodes="!multiple"
  14. :disable-fuzzy-matching="true"
  15. :options="options"
  16. :load-options="loadOptions"
  17. placeholder="请选择项目以及账户"
  18. v-model="selectedVal"
  19. :value-consists-of="valueConsistsOf"
  20. :auto-load-root-options="false"
  21. @select="update"
  22. @deselect="unUpdate"
  23. @input="emitValue"
  24. :limit="limit"
  25. :default-options="true"
  26. :disabled="disabled"
  27. :limitText="
  28. count => {
  29. return '隐藏' + count + '条'
  30. }
  31. "
  32. noChildrenText="该项目下暂无账号"
  33. :noOptionsText="showLoading"
  34. />
  35. </div>
  36. </template>
  37. <script>
  38. import Treeselect from '@riophae/vue-treeselect' // 引用树组件
  39. import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
  40. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
  41. import { mapGetters } from 'vuex'
  42. import { getAction } from '@/api/manage'
  43. // We just use `setTimeout()` here to simulate an async operation
  44. // instead of requesting a real API server for demo purpose.
  45. export default {
  46. data: () => ({
  47. valueConsistsOf: 'LEAF_PRIORITY',
  48. options: [],
  49. showLoading: 'loading...',
  50. selectRightData: []
  51. }),
  52. props: {
  53. value: {
  54. type: [Number, Array, String],
  55. default() {
  56. return undefined
  57. }
  58. },
  59. //是否展示一个默认值
  60. oneData: {
  61. type: Boolean,
  62. default() {
  63. return false
  64. }
  65. },
  66. //是否多选
  67. multiple: {
  68. type: Boolean,
  69. default() {
  70. return false
  71. }
  72. },
  73. //判断媒体类型 kuaishou/bytedance
  74. type: {
  75. type: String,
  76. default() {
  77. return 'kuaishou'
  78. }
  79. },
  80. //请求接口 process.env.VUE_APP_BASE_REPORT_URL为配置的全局变量
  81. reqUrl: {
  82. type: String,
  83. default() {
  84. return process.env.VUE_APP_BASE_REPORT_URL + '/material/report/getProjectAccountByUserId'
  85. }
  86. },
  87. // 展示条数
  88. limit: {
  89. type: Number,
  90. default() {
  91. return 2
  92. }
  93. },
  94. //是否禁用
  95. disabled: {
  96. type: Boolean,
  97. default() {
  98. return false
  99. }
  100. }
  101. },
  102. components: {
  103. Treeselect
  104. },
  105. computed: {
  106. selectedVal: {
  107. get: function() {
  108. return this.value
  109. },
  110. set: function(val) {
  111. this.$nextTick(() => {
  112. this.$emit('input', val)
  113. this.$emit('change', val)
  114. this.$emit('value')
  115. })
  116. }
  117. }
  118. },
  119. watch: {},
  120. methods: {
  121. ...mapGetters(['userInfo']),
  122. update(node, id) {
  123. if (node.id == 'all') {
  124. this.node(this.options)
  125. this.$nextTick(() => {
  126. this.selectedVal = this.selectRightData.map(item => {
  127. return item.id
  128. })
  129. })
  130. }
  131. },
  132. unUpdate(node, id) {
  133. if (node.id == 'all') {
  134. this.$nextTick(() => {
  135. this.selectedVal = []
  136. this.selectRightData = []
  137. })
  138. } else {
  139. let index = this.selectedVal.findIndex(item => item == 'all')
  140. this.$nextTick(() => {
  141. this.selectedVal.splice(index, 1)
  142. })
  143. }
  144. },
  145. node(data) {
  146. data.forEach(item => {
  147. if (item.children) {
  148. this.node(item.children)
  149. } else {
  150. if (this.selectRightData.findIndex(i => i.id == item.id) == -1) {
  151. this.selectRightData.push(item)
  152. }
  153. }
  154. })
  155. },
  156. emitValue() {},
  157. loadOptions({ action, parentNode, callback }) {
  158. // Typically, do the AJAX stuff here.
  159. // Once the server has responded,
  160. // assign children options to the parent node & call the callback.
  161. if (action === LOAD_CHILDREN_OPTIONS) {
  162. }
  163. },
  164. //获取数据
  165. getParticipateList() {
  166. // toutiaoParticipateList
  167. var params = {}
  168. params.userId = this.userInfo().id
  169. params.type = this.type
  170. if (this.reqUrl === '/ctop/projectMember/getProjectAccountByUserId') {
  171. let mediaType = '2'
  172. if (this.type === 'bytedance') {
  173. mediaType = '1'
  174. } else if (this.type === 'tencent') {
  175. mediaType = '16'
  176. }
  177. getAction(this.reqUrl, {
  178. userId: this.userInfo().id,
  179. mediaType
  180. }).then(res => {
  181. if (res.success || res.code === 0) {
  182. const list = res.data || res.result || []
  183. this.options = list.map(item => {
  184. const project = item.project || {}
  185. const accountList = item.account || []
  186. return {
  187. id: project.projectId + 'projectId',
  188. label: project.projectName,
  189. children: accountList.map(c => {
  190. return {
  191. id: c.accountId,
  192. label:
  193. (c.userName && c.userName.length == 2
  194. ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  195. : c.userName && c.userName.length == 3
  196. ? c.userName + '\xa0\xa0\xa0\xa0'
  197. : c.userName) +
  198. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  199. c.accountId +
  200. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  201. c.authName
  202. }
  203. })
  204. }
  205. })
  206. if (this.multiple) {
  207. this.options.unshift({ id: 'all', label: '全选' })
  208. }
  209. }
  210. })
  211. return
  212. }
  213. this.postDataAction(this.reqUrl, params).then(res => {
  214. if (res.success) {
  215. this.options = res.data
  216. ? res.data.map(item => {
  217. return {
  218. id: item.projectId + 'projectId',
  219. label: item.projectName,
  220. children: item.accountList
  221. ? item.accountList.map(c => {
  222. return {
  223. id: c.accountId,
  224. label:
  225. (c.userName && c.userName.length == 2
  226. ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  227. : c.userName && c.userName.length == 3
  228. ? c.userName + '\xa0\xa0\xa0\xa0'
  229. : c.userName) +
  230. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  231. c.accountId +
  232. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  233. c.authName
  234. }
  235. })
  236. : []
  237. }
  238. })
  239. : res.result.map(item => {
  240. return {
  241. id: item.projectId + 'projectId',
  242. label: item.projectName,
  243. children: item.accountList
  244. ? item.accountList.map(c => {
  245. return {
  246. id: c.accountId,
  247. label:
  248. (c.userName && c.userName.length == 2
  249. ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  250. : c.userName && c.userName.length == 3
  251. ? c.userName + '\xa0\xa0\xa0\xa0'
  252. : c.userName) +
  253. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  254. c.accountId +
  255. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  256. c.authName
  257. }
  258. })
  259. : []
  260. }
  261. })
  262. if (this.multiple) {
  263. this.options.unshift({ id: 'all', label: '全选' })
  264. }
  265. if (this.oneData) {
  266. this.$nextTick(() => {
  267. if (this.multiple) {
  268. this.selectedVal.push(this.options[0].children[0].id)
  269. } else {
  270. this.selectedVal = this.options[0].children[0].id
  271. }
  272. })
  273. // this.value = this.options[0].children[0].id
  274. // this.$emit('input', this.options[0].children[0].id)
  275. // this.$emit('change', this.options[0].children[0].id)
  276. }
  277. }
  278. })
  279. }
  280. },
  281. created() {
  282. this.getParticipateList()
  283. }
  284. }
  285. </script>