|
@@ -0,0 +1,153 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+.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"
|
|
|
+ @select="update"
|
|
|
+ @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: [],
|
|
|
+ mediaId: ''
|
|
|
+ }),
|
|
|
+ props: {
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ appId: {}
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ console.log(node, id)
|
|
|
+
|
|
|
+ getAction('/ctop/project/getProjectByAdvertiserAndMediaId', {
|
|
|
+ advertiserId: node.id,
|
|
|
+ mediaId: this.mediaId
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.result.length > 0) {
|
|
|
+ node.children = res.result.map(item => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ label: item.projectName
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ new Error('Failed to load options: network error.')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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/project/getProjectByAdvertiserAndMediaId', {
|
|
|
+ advertiserId: parentNode.id,
|
|
|
+ mediaId: this.mediaId
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.result.length > 0) {
|
|
|
+ parentNode.children = res.result.map(item => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ label: item.projectName
|
|
|
+ }
|
|
|
+ })
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ parentNode.children = []
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback(new Error('Failed to load options: network error.'))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getParticipateList(mediaId) {
|
|
|
+ this.mediaId = mediaId
|
|
|
+ this.value = null
|
|
|
+ getAction('/ctop/advertiser/getAdvertiserByCompany', { userId: this.userInfo().id }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.options = res.result.map(item => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ label: item.name,
|
|
|
+ children: null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {}
|
|
|
+}
|
|
|
+</script>
|