123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <style lang="scss" scoped>
- .select-project {
- width: 50%;
- }
- </style>
- <template>
- <div class="select-project">
- <treeselect
- :multiple="multiple"
- :disable-branch-nodes="!multiple"
- :disable-fuzzy-matching="true"
- :options="options"
- :load-options="loadOptions"
- placeholder="请选择项目以及账户"
- v-model="value"
- :value-consists-of="valueConsistsOf"
- :auto-load-root-options="false"
- @select="update"
- @input="emitValue"
- :limit="limit"
- :default-options="true"
- :disabled="disabled"
- :limitText="
- count => {
- return '隐藏' + count + '条'
- }
- "
- 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'
- 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: {
- oneData: {
- type: Boolean,
- default() {
- return false
- }
- },
- //是否多选
- multiple: {
- type: Boolean,
- default() {
- return true
- }
- },
- appId: {
- default() {
- return ''
- }
- },
- //判断媒体类型
- request: {
- type: String,
- default() {
- return '2,4'
- }
- },
- //一级请求接口
- reqUrl: {
- type: String,
- default() {
- return '/ctop/projectMember/participateListByMediaId'
- }
- },
- // 展示条数
- limit: {
- type: Number,
- default() {
- return 2
- }
- },
- disabled: {
- type: Boolean,
- default() {
- return false
- }
- }
- },
- 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 = undefined
- }
- } else {
- this.value = this.appId
- }
- },
- deep: true,
- immediate: true
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- update(node, id) {
- this.$emit('select-value', node)
- console.log(node)
- if (typeof node.id == 'string' && node.id.indexOf('p') != -1) {
- getAction('/ctop/userAllocation/getByProjectId', {
- projectId: node.id.split('p')[0]
- }).then(res => {
- // console.log(res)
- if (res.code == 0) {
- if (res.result.length > 0) {
- node.children = res.result.map(item => {
- return {
- id: item.userId ? item.userId : '',
- label: item.userId ? item.userId : '',
- children: item.accounts.map(c => {
- return {
- id: c.accountId,
- label:
- c.userName +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.authName
- }
- })
- }
- })
- } else {
- }
- } else {
- new Error('Failed to load options: network error.')
- }
- })
- }
- },
- emitValue(value, id) {
- 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/getByProjectId', {
- projectId: parentNode.id.split('p')[0]
- }).then(res => {
- if (res.code == 0) {
- if (res.result.length > 0) {
- parentNode.children = res.result.map(item => {
- return {
- id: item.userId ? item.userId : '',
- label: item.userId ? item.userId : '',
- children: item.accounts.map(c => {
- return {
- id: c.accountId,
- label:
- c.userName +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.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
- if (this.request == '1,3') {
- params.type = 'bytedance'
- } else if (this.request == '2,4') {
- params.type = 'kuaishou'
- }
- if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
- if (this.options.length > 0) {
- return
- }
- // 2021/9/1 蒙蒙让修改 接口增加 userId 原来的url链接并没有使用声明好的params
- getAction('/ctop/projectMember/projectList', {userId: this.userInfo().id}).then(res => {
- if (res.success) {
- this.options = res.data.map(item => {
- return {
- id: item.id + 'projectId',
- label: item.projectName,
- children: null
- }
- })
- if (this.oneData && !this.multiple) {
- var data = this.options.filter(item => {
- if (item.children && item.children.length > 0) {
- return { ...item }
- }
- })
- this.$emit('update:appId', data[0].children[0].id)
- }
- }
- })
- } else if (this.reqUrl == '/ctop/projectMember/getProjectAccountByUserId') {
- getAction(this.reqUrl, {
- mediaType: this.request,
- userId: this.userInfo().id
- }).then(res => {
- if (res.code == 0) {
- if (res.result.length > 0) {
- res.result.forEach((element, index) => {
- if (element) {
- this.options.push({})
- this.options[index].label =
- element.project.projectName + '_(' + element.project.advertiserName + ')'
- this.options[index].id = 'project' + element.project.projectId
- this.options[index].key = element.project.projectId
- this.options[index].mediaId = element.project.mediaId
- this.options[index].children = []
- if (element.account.length) {
- element.account.forEach((ele, i) => {
- this.options[index].children.push({})
- this.options[index].children[i].label =
- ele.userName + '_' + ele.authName + '_' + element.project.projectName
- this.options[index].children[i].id = ele.accountId
- this.options[index].children[i].key = ele.accountId
- })
- }
- }
- })
- } else {
- this.showLoading = '暂无数据'
- }
- }
- })
- } else {
- 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()
- }
- }
- </script>
|