|
@@ -0,0 +1,168 @@
|
|
|
+<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="selectedVal"
|
|
|
+ :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>
|
|
|
+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'
|
|
|
+// 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: [],
|
|
|
+ showLoading: 'loading...'
|
|
|
+ }),
|
|
|
+ props: {
|
|
|
+ //是否展示一个默认值
|
|
|
+ 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.$emit('input', val)
|
|
|
+ this.$emit('change', val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['userInfo']),
|
|
|
+ update(node, id) {
|
|
|
+ this.$emit('select-value', node)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ this.postDataAction(this.reqUrl, params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.options = 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.oneData && !this.multiple) {
|
|
|
+ var data = this.options.filter(item => {
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ return { ...item }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.selectedVal = data[0].children[0].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getParticipateList()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|