123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <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"
- @input="emitValue"
- :limit="2"
- :limitText="
- (count) => {
- return '隐藏' + count + '条'
- }
- "
- noChildrenText="该项目下暂无账号"
- noOptionsText="暂无项目"
- />
- </div>
- </template>
- <script>
- // 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.
- export default {
- data: () => ({
- value: null,
- valueConsistsOf: 'LEAF_PRIORITY',
- options: [],
- }),
- props: {
- multiple: {
- type: Boolean,
- default() {
- return true
- },
- },
- appId: {
- default() {
- return ''
- },
- },
- },
- components: { Treeselect },
- watch: {
- $route(n, o) {
- console.log(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,
- },
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
-
- emitValue() {
- this.$emit('update:appId', this.value)
- },
- getChildren() {},
- 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/getAccountList', { projectId: parentNode.id, userId: this.userInfo().id }).then(
- (res) => {
- console.log(res)
- if (res.code == 0) {
- if (res.result.length > 0) {
- parentNode.children = res.result.map((i) => {
- return {
- id: i.accountId,
- label:
- (i.userName.length == 2
- ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : i.userName.length == 3
- ? i.userName + '\xa0\xa0\xa0\xa0'
- : i.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- i.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- i.authName,
- }
- })
- callback()
- } else {
- parentNode.children = []
- callback()
- }
- } else {
- callback(new Error('Failed to load options: network error.'))
- }
- }
- )
- }
- },
- getParticipateList() {
- //我参与的
- getAction('/ctop/projectMember/participateListV2', {
- userId: this.userInfo().id,
- pageSize: 1000000,
- pageNo: 1,
- }).then((res) => {
- if (res.code == 0) {
- this.options = res.result.records.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,
- }
- })
- }
- })
- },
- },
- mounted() {
- this.getParticipateList()
- },
- }
- </script>
|