|
@@ -0,0 +1,304 @@
|
|
|
+<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
|
|
|
+ }
|
|
|
+ getAction('/ctop/projectMember/projectList').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
|
|
|
+ }).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>
|