| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
- <style lang="scss" scoped>
- .select-project {
- width: 50%;
- }
- ::v-deep.vue-treeselect__control {
- line-height: 20px !important;
- }
- </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="selectedVal"
- :value-consists-of="valueConsistsOf"
- :auto-load-root-options="false"
- @select="update"
- @deselect="unUpdate"
- @input="emitValue"
- :limit="limit"
- :default-options="true"
- :disabled="disabled"
- :limitText="
- count => {
- return '隐藏' + count + '条'
- }
- "
- noChildrenText="该项目下暂无账号"
- :noOptionsText="showLoading"
- />
- </div>
- </template>
- <script>
- import Treeselect from '@riophae/vue-treeselect' // 引用树组件
- import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
- import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
- import { mapGetters } from 'vuex'
- import { getAction } from '@/api/manage'
- // We just use `setTimeout()` here to simulate an async operation
- // instead of requesting a real API server for demo purpose.
- export default {
- data: () => ({
- valueConsistsOf: 'LEAF_PRIORITY',
- options: [],
- showLoading: 'loading...',
- selectRightData: []
- }),
- props: {
- value: {
- type: [Number, Array, String],
- default() {
- return undefined
- }
- },
- //是否展示一个默认值
- oneData: {
- type: Boolean,
- default() {
- return false
- }
- },
- //是否多选
- multiple: {
- type: Boolean,
- default() {
- return false
- }
- },
- //判断媒体类型 kuaishou/bytedance
- type: {
- type: String,
- default() {
- return 'kuaishou'
- }
- },
- //请求接口 process.env.VUE_APP_BASE_REPORT_URL为配置的全局变量
- reqUrl: {
- type: String,
- default() {
- return process.env.VUE_APP_BASE_REPORT_URL + '/material/report/getProjectAccountByUserId'
- }
- },
- // 展示条数
- limit: {
- type: Number,
- default() {
- return 2
- }
- },
- //是否禁用
- disabled: {
- type: Boolean,
- default() {
- return false
- }
- }
- },
- components: {
- Treeselect
- },
- computed: {
- selectedVal: {
- get: function() {
- return this.value
- },
- set: function(val) {
- this.$nextTick(() => {
- this.$emit('input', val)
- this.$emit('change', val)
- this.$emit('value')
- })
- }
- }
- },
- watch: {},
- methods: {
- ...mapGetters(['userInfo']),
- update(node, id) {
- if (node.id == 'all') {
- this.node(this.options)
- this.$nextTick(() => {
- this.selectedVal = this.selectRightData.map(item => {
- return item.id
- })
- })
- }
- },
- unUpdate(node, id) {
- if (node.id == 'all') {
- this.$nextTick(() => {
- this.selectedVal = []
- this.selectRightData = []
- })
- } else {
- let index = this.selectedVal.findIndex(item => item == 'all')
- this.$nextTick(() => {
- this.selectedVal.splice(index, 1)
- })
- }
- },
- node(data) {
- data.forEach(item => {
- if (item.children) {
- this.node(item.children)
- } else {
- if (this.selectRightData.findIndex(i => i.id == item.id) == -1) {
- this.selectRightData.push(item)
- }
- }
- })
- },
- emitValue() {},
- 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) {
- }
- },
- //获取数据
- getParticipateList() {
- // toutiaoParticipateList
- var params = {}
- params.userId = this.userInfo().id
- params.type = this.type
- if (this.reqUrl === '/ctop/projectMember/getProjectAccountByUserId') {
- let mediaType = '2'
- if (this.type === 'bytedance') {
- mediaType = '1'
- } else if (this.type === 'tencent') {
- mediaType = '16'
- }
- getAction(this.reqUrl, {
- userId: this.userInfo().id,
- mediaType
- }).then(res => {
- if (res.success || res.code === 0) {
- const list = res.data || res.result || []
- this.options = list.map(item => {
- const project = item.project || {}
- const accountList = item.account || []
- return {
- id: project.projectId + 'projectId',
- label: project.projectName,
- children: accountList.map(c => {
- return {
- id: c.accountId,
- label:
- (c.userName && c.userName.length == 2
- ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : c.userName && c.userName.length == 3
- ? c.userName + '\xa0\xa0\xa0\xa0'
- : c.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.authName
- }
- })
- }
- })
- if (this.multiple) {
- this.options.unshift({ id: 'all', label: '全选' })
- }
- }
- })
- return
- }
- this.postDataAction(this.reqUrl, params).then(res => {
- if (res.success) {
- this.options = res.data
- ? res.data.map(item => {
- return {
- id: item.projectId + 'projectId',
- label: item.projectName,
- children: item.accountList
- ? item.accountList.map(c => {
- return {
- id: c.accountId,
- label:
- (c.userName && c.userName.length == 2
- ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : c.userName && c.userName.length == 3
- ? c.userName + '\xa0\xa0\xa0\xa0'
- : c.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.authName
- }
- })
- : []
- }
- })
- : res.result.map(item => {
- return {
- id: item.projectId + 'projectId',
- label: item.projectName,
- children: item.accountList
- ? item.accountList.map(c => {
- return {
- id: c.accountId,
- label:
- (c.userName && c.userName.length == 2
- ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : c.userName && c.userName.length == 3
- ? c.userName + '\xa0\xa0\xa0\xa0'
- : c.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- c.authName
- }
- })
- : []
- }
- })
- if (this.multiple) {
- this.options.unshift({ id: 'all', label: '全选' })
- }
- if (this.oneData) {
- this.$nextTick(() => {
- if (this.multiple) {
- this.selectedVal.push(this.options[0].children[0].id)
- } else {
- this.selectedVal = this.options[0].children[0].id
- }
- })
- // this.value = this.options[0].children[0].id
- // this.$emit('input', this.options[0].children[0].id)
- // this.$emit('change', this.options[0].children[0].id)
- }
- }
- })
- }
- },
- created() {
- this.getParticipateList()
- }
- }
- </script>
|