|
@@ -1,76 +1,82 @@
|
|
|
<style lang="scss" scoped>
|
|
|
- .select-project {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
+.select-project {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="select-project">
|
|
|
- <treeselect :multiple="multiple" :disable-branch-nodes="!multiple" :options="options" :load-options="loadOptions"
|
|
|
- placeholder="请选择项目以及账户" v-model="value" :value-consists-of="valueConsistsOf" :auto-load-root-options="false"
|
|
|
- @select="update" @input="emitValue" :limit="2" :default-options="true" :limitText="
|
|
|
+ <treeselect
|
|
|
+ :multiple="multiple"
|
|
|
+ :disable-branch-nodes="!multiple"
|
|
|
+ :options="options"
|
|
|
+ :load-options="loadOptions"
|
|
|
+ placeholder="请选择项目以及账户"
|
|
|
+ v-model="value"
|
|
|
+ :value-consists-of="valueConsistsOf"
|
|
|
+ :auto-load-root-options="false"
|
|
|
+ @select="update"
|
|
|
+ @input="emitValue"
|
|
|
+ :limit="2"
|
|
|
+ :default-options="true"
|
|
|
+ :limitText="
|
|
|
count => {
|
|
|
return '隐藏' + count + '条'
|
|
|
}
|
|
|
- " noChildrenText="该项目下暂无账号" :noOptionsText="showLoading" />
|
|
|
+ "
|
|
|
+ noChildrenText="该项目下暂无账号"
|
|
|
+ :noOptionsText="showLoading"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // @open="getParticipateList"
|
|
|
- // import the component
|
|
|
- import Treeselect from '@riophae/vue-treeselect'
|
|
|
- // import the styles
|
|
|
- import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
- import {
|
|
|
- LOAD_CHILDREN_OPTIONS
|
|
|
- } from '@riophae/vue-treeselect'
|
|
|
+// @open="getParticipateList"
|
|
|
+// import the component
|
|
|
+import Treeselect from '@riophae/vue-treeselect'
|
|
|
+// import the styles
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
|
|
|
|
|
- import {
|
|
|
- getAction,
|
|
|
- postAction
|
|
|
- } from '@/api/manage'
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex'
|
|
|
- // We just use `setTimeout()` here to simulate an async operation
|
|
|
- // instead of requesting a real API server for demo purpose.
|
|
|
- let called = false
|
|
|
- export default {
|
|
|
- data: () => ({
|
|
|
- value: null,
|
|
|
- valueConsistsOf: 'LEAF_PRIORITY',
|
|
|
- options: [],
|
|
|
- showLoading: 'loading...'
|
|
|
- }),
|
|
|
- props: {
|
|
|
- //是否多选
|
|
|
- multiple: {
|
|
|
- type: Boolean,
|
|
|
- default () {
|
|
|
- return true
|
|
|
- }
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+// We just use `setTimeout()` here to simulate an async operation
|
|
|
+// instead of requesting a real API server for demo purpose.
|
|
|
+let called = false
|
|
|
+export default {
|
|
|
+ data: () => ({
|
|
|
+ value: null,
|
|
|
+ valueConsistsOf: 'LEAF_PRIORITY',
|
|
|
+ options: [],
|
|
|
+ showLoading: 'loading...',
|
|
|
+ }),
|
|
|
+ props: {
|
|
|
+ //是否多选
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return true
|
|
|
},
|
|
|
- //判断媒体类型
|
|
|
- request: {
|
|
|
- type: String,
|
|
|
- default () {
|
|
|
- return '2,4'
|
|
|
- }
|
|
|
+ },
|
|
|
+ //判断媒体类型
|
|
|
+ request: {
|
|
|
+ type: String,
|
|
|
+ default() {
|
|
|
+ return '2,4'
|
|
|
},
|
|
|
- //一级请求接口
|
|
|
- reqUrl: {
|
|
|
- type: String,
|
|
|
- default () {
|
|
|
- return '/ctop/projectMember/participateList'
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
},
|
|
|
- components: {
|
|
|
- Treeselect
|
|
|
+ //一级请求接口
|
|
|
+ reqUrl: {
|
|
|
+ type: String,
|
|
|
+ default() {
|
|
|
+ return '/ctop/projectMember/participateListByMediaId'
|
|
|
+ },
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route(n, o) {},
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Treeselect,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(n, o) {},
|
|
|
// appId: {
|
|
|
// handler(n, o) {
|
|
|
// console.log(n)
|
|
@@ -84,103 +90,121 @@
|
|
|
// },
|
|
|
// deep: true
|
|
|
// }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
+ update(node, id) {
|
|
|
+ // console.log(node)
|
|
|
+ // getAction('/ctop/userAllocation/getAccountListByProjectId', {
|
|
|
+ // projectId: node.id,
|
|
|
+ // }).then((res) => {
|
|
|
+ // // console.log(res)
|
|
|
+ // if (res.code == 0) {
|
|
|
+ // if (res.result.length > 0) {
|
|
|
+ // node.children = res.result.map((item) => {
|
|
|
+ // return {
|
|
|
+ // id: item.accountId,
|
|
|
+ // label: item.userName + ' ' + item.authName,
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // new Error('Failed to load options: network error.')
|
|
|
+ // }
|
|
|
+ // })
|
|
|
},
|
|
|
- methods: {
|
|
|
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
- update(node, id) {
|
|
|
- console.log(node)
|
|
|
- getAction('/ctop/userAllocation/getAccountListByProjectId', {
|
|
|
- projectId: node.id
|
|
|
- }).then(res => {
|
|
|
- // console.log(res)
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.result.length > 0) {
|
|
|
- node.children = res.result.map(item => {
|
|
|
- return {
|
|
|
- id: item.accountId,
|
|
|
- label: item.userName + ' ' + item.authName
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
+ emitValue() {
|
|
|
+ this.$emit('update:appId', this.value)
|
|
|
+ },
|
|
|
+ loadOptions({ action, parentNode, callback }) {
|
|
|
+ // Typically, do the AJAX stuff here.
|
|
|
+ // Once the server has responded,
|
|
|
+ // assign children options to the parent node & call the callback.
|
|
|
+ if (action === LOAD_CHILDREN_OPTIONS) {
|
|
|
+ // getAction('/ctop/userAllocation/getAccountListByProjectId', {
|
|
|
+ // projectId: parentNode.id,
|
|
|
+ // }).then((res) => {
|
|
|
+ // if (res.code == 0) {
|
|
|
+ // if (res.result.length > 0) {
|
|
|
+ // parentNode.children = res.result.map((item) => {
|
|
|
+ // return {
|
|
|
+ // id: item.accountId,
|
|
|
+ // label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName,
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // callback()
|
|
|
+ // } else {
|
|
|
+ // parentNode.children = []
|
|
|
+ // callback()
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // callback(new Error('Failed to load options: network error.'))
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getParticipateList() {
|
|
|
+ //我参与的
|
|
|
+ // toutiaoParticipateList
|
|
|
+ var params = {}
|
|
|
+ params.userId = this.userInfo().id
|
|
|
|
|
|
- }
|
|
|
- } else {
|
|
|
- new Error('Failed to load options: network error.')
|
|
|
+ if (this.request == '1,3') {
|
|
|
+ params.type = 'bytedance'
|
|
|
+ } else if (this.request == '2,4') {
|
|
|
+ params.type = 'kuaishou'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
|
|
|
+ postAction(this.reqUrl, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.options = res.result.map((item) => {
|
|
|
+ return {
|
|
|
+ id: item.projectId+"projectId",
|
|
|
+ label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
|
|
|
+ children: item.accountList?item.accountList.map(i=>{
|
|
|
+ return {id:i.accountId,label:i.accountId+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+i.authName+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+i.userName}
|
|
|
+ }):[],
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- emitValue() {
|
|
|
- this.$emit('update:appId', this.value)
|
|
|
- },
|
|
|
- loadOptions({
|
|
|
- action,
|
|
|
- parentNode,
|
|
|
- callback
|
|
|
- }) {
|
|
|
- // Typically, do the AJAX stuff here.
|
|
|
- // Once the server has responded,
|
|
|
- // assign children options to the parent node & call the callback.
|
|
|
- if (action === LOAD_CHILDREN_OPTIONS) {
|
|
|
- getAction('/ctop/userAllocation/getAccountListByProjectId', {
|
|
|
- projectId: parentNode.id
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.result.length > 0) {
|
|
|
- parentNode.children = res.result.map(item => {
|
|
|
- return {
|
|
|
- id: item.accountId,
|
|
|
- label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName
|
|
|
- }
|
|
|
- })
|
|
|
- callback()
|
|
|
- } else {
|
|
|
- parentNode.children = []
|
|
|
- callback()
|
|
|
- }
|
|
|
- } else {
|
|
|
- callback(new Error('Failed to load options: network error.'))
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- getParticipateList() {
|
|
|
- //我参与的
|
|
|
- // toutiaoParticipateList
|
|
|
+ } else {
|
|
|
getAction(this.reqUrl, {
|
|
|
- userId: this.userInfo().id
|
|
|
- }).then(res => {
|
|
|
+ userId: this.userInfo().id,
|
|
|
+ }).then((res) => {
|
|
|
if (res.code == 0) {
|
|
|
if (res.result.length > 0) {
|
|
|
var arr = this.request.split(',')
|
|
|
var dataTwo = []
|
|
|
- var data = res.result.filter(item => {
|
|
|
+ var data = res.result.filter((item) => {
|
|
|
return item.mediaId == arr[0]
|
|
|
})
|
|
|
if (arr.length > 1) {
|
|
|
- dataTwo = res.result.filter(item => {
|
|
|
+ dataTwo = res.result.filter((item) => {
|
|
|
return item.mediaId == arr[1]
|
|
|
})
|
|
|
}
|
|
|
var allData = data.concat(dataTwo)
|
|
|
- this.options = allData.map(item => {
|
|
|
+ this.options = allData.map((item) => {
|
|
|
return {
|
|
|
id: item.projectId,
|
|
|
- label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item
|
|
|
- .advertiserName,
|
|
|
- children: null
|
|
|
+ label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
|
|
|
+ children: null,
|
|
|
}
|
|
|
})
|
|
|
- }else{
|
|
|
- this.showLoading = '暂无数据'
|
|
|
+ } else {
|
|
|
+ this.showLoading = '暂无数据'
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- mounted() {
|
|
|
- this.getParticipateList()
|
|
|
- }
|
|
|
- }
|
|
|
+ mounted() {
|
|
|
+ this.getParticipateList()
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|