|
@@ -1,173 +1,185 @@
|
|
|
<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"
|
|
|
- :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" :limitText="
|
|
|
count => {
|
|
|
return '隐藏' + count + '条'
|
|
|
}
|
|
|
- "
|
|
|
- noChildrenText="该项目下暂无账号"
|
|
|
- noOptionsText="loading..."
|
|
|
- />
|
|
|
+ " 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: []
|
|
|
- }),
|
|
|
- props: {
|
|
|
- //是否多选
|
|
|
- multiple: {
|
|
|
- type: Boolean,
|
|
|
- default() {
|
|
|
- return true
|
|
|
- }
|
|
|
- },
|
|
|
- //判断媒体类型
|
|
|
- request: {
|
|
|
- type: String,
|
|
|
- default() {
|
|
|
- return '2,4'
|
|
|
- }
|
|
|
- },
|
|
|
- //一级请求接口
|
|
|
- reqUrl: {
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //一级请求接口
|
|
|
+ reqUrl: {
|
|
|
type: String,
|
|
|
default () {
|
|
|
return '/ctop/projectMember/participateList'
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- },
|
|
|
- components: { Treeselect },
|
|
|
- watch: {
|
|
|
- $route(n, o) {},
|
|
|
- appId: {
|
|
|
- handler(n, o) {
|
|
|
- // console.log(n)
|
|
|
- if (n.length == 0) {
|
|
|
- if (this.multiple) {
|
|
|
- this.value = []
|
|
|
- } else {
|
|
|
- this.value = ''
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
- update(node, id) {
|
|
|
- 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.')
|
|
|
- }
|
|
|
- })
|
|
|
},
|
|
|
- emitValue() {
|
|
|
- this.$emit('update:appId', this.value)
|
|
|
+ components: {
|
|
|
+ Treeselect
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(n, o) {},
|
|
|
+ appId: {
|
|
|
+ handler(n, o) {
|
|
|
+ // console.log(n)
|
|
|
+ if (n.length == 0) {
|
|
|
+ if (this.multiple) {
|
|
|
+ this.value = []
|
|
|
+ } else {
|
|
|
+ this.value = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
- 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 => {
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
+ update(node, id) {
|
|
|
+ getAction('/ctop/userAllocation/getAccountListByProjectId', {
|
|
|
+ projectId: node.id
|
|
|
+ }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
if (res.code == 0) {
|
|
|
if (res.result.length > 0) {
|
|
|
- parentNode.children = res.result.map(item => {
|
|
|
+ node.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
|
|
|
+ label: item.userName + ' ' + item.authName
|
|
|
}
|
|
|
})
|
|
|
- callback()
|
|
|
} else {
|
|
|
- parentNode.children = []
|
|
|
- callback()
|
|
|
+
|
|
|
}
|
|
|
} else {
|
|
|
- callback(new Error('Failed to load options: network error.'))
|
|
|
+ new Error('Failed to load options: network error.')
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
- },
|
|
|
- getParticipateList() {
|
|
|
- //我参与的
|
|
|
- // toutiaoParticipateList
|
|
|
- getAction(this.reqUrl, { userId: this.userInfo().id }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- var arr = this.request.split(',')
|
|
|
- var dataTwo = []
|
|
|
- var data = res.result.filter(item => {
|
|
|
- return item.mediaId == arr[0]
|
|
|
- })
|
|
|
- if(arr.length>1){
|
|
|
- dataTwo = res.result.filter(item => {
|
|
|
- return item.mediaId == arr[1]
|
|
|
- })
|
|
|
- }
|
|
|
- var allData = data.concat(dataTwo)
|
|
|
- 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
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ getAction(this.reqUrl, {
|
|
|
+ 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 => {
|
|
|
+ return item.mediaId == arr[0]
|
|
|
+ })
|
|
|
+ if (arr.length > 1) {
|
|
|
+ dataTwo = res.result.filter(item => {
|
|
|
+ return item.mediaId == arr[1]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var allData = data.concat(dataTwo)
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.showLoading = '暂无数据'
|
|
|
+ }
|
|
|
|
|
|
- mounted() {
|
|
|
- this.getParticipateList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getParticipateList()
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</script>
|
|
|
+</script>
|