123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- <style lang="scss" scoped>
- .select-project {
- width: 50%;
- }
- .row-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .row-item:last-of-type {
- margin-bottom: 0;
- }
- .row-item .hint-item {
- width: 24px;
- min-width: 24px;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 9px;
- }
- .row-item .label-item {
- position: relative;
- align-items: flex-start;
- align-self: flex-start;
- line-height: 20px;
- height: 20px;
- margin-top: 10px;
- width: 140px;
- // min-width: 80px;
- .text-item {
- font-size: 14px;
- width: 120px;
- }
- }
- .row-item .required-item {
- width: 4px;
- height: 4px;
- border-radius: 2px;
- background: #f45858;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- }
- .row-item .input-item {
- min-width: 480px;
- position: relative;
- // height: 35px;
- .tip {
- font-size: 12px;
- color: tomato;
- }
- .inventory-tags-lists-header {
- background-color: #F8F9FA;
- border: 1px solid #E4E9ED;
- height: 36px;
- line-height: 33px;
- border-radius: 4px 4px 0 0;
- font-weight: bold;
- display: flex;
- }
- .inventory-tags-lists-container {
- border: 1px solid #E4E9ED;
- margin-top: -1px;
- height: 100%;
- padding: 4px 0px;
- border-radius: 0 0 4px 4px;
- }
- .inventory-tags-lists-item {
- width: 100%;
- height: 37px;
- line-height: 37px;
- padding-left: 12px;
- padding-right: 12px;
- display: flex;
- font-size: 14px;
- color: #333;
- }
- }
- </style>
- <template>
- <div class="select-project">
- <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%">
- <!-- <span style="margin-bottom:15px">是否同步快手主页</span> -->
- <div class="row-item">
- <div class="hint-item"></div>
- <div class="label-item">
- <div class="text-item">是否同步快手主页</div>
- <!-- <div class="required-item"></div> -->
- </div>
- <div class="input-item">
- <a-form-item>
- <a-switch v-model="shieldBackwardSwitch" />
- </a-form-item>
- </div>
- </div>
- <!-- <treeselect
- :multiple="multiple"
- :disable-branch-nodes="!multiple"
- :branch-nodes-first="true"
- :options="options"
- :load-options="loadOptions"
- placeholder="请选择项目"
- v-model="value"
- :value-consists-of="valueConsistsOf"
- :auto-load-root-options="false"
- :auto-select-descendants="false"
- @select="update"
- @input="emitValue"
- :limit="2"
- :default-options="true"
- :limitText="
- (count) => {
- return '隐藏' + count + '条'
- }
- "
- noChildrenText="该项目下暂无账号"
- :noOptionsText="showLoading"
- /> -->
- <!-- :default-expanded-keys="[2, 3]"
- :default-checked-keys="[5]" -->
- <el-tree
- :data="options"
- show-checkbox
- node-key="id"
- :props="defaultProps"
- :load="loadOptions"
- lazy
- :check-strictly="true"
- ref="tree"
- >
- </el-tree>
- </a-modal>
- </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: () => ({
- defaultProps: {
- children: 'children',
- label: 'label',
- id: 'id',
- },
- shieldBackwardSwitch: true,
- showEdit: false,
- value: null,
- valueConsistsOf: 'LEAF_PRIORITY',
- options: [],
- showLoading: 'loading...',
- }),
- props: {
- //是否多选
- multiple: {
- type: Boolean,
- default() {
- return true
- },
- },
- //判断媒体类型
- request: {
- type: String,
- default() {
- return '2,4'
- },
- },
- //一级请求接口
- reqUrl: {
- type: String,
- default() {
- return '/ctop/projectMember/participateListByMediaId'
- },
- },
- },
- 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: {
- getCheckedKeys() {
- console.log(this.$refs.tree.getCheckedKeys())
- },
- handleOk(e) {
- console.log(e)
- var data = this.$refs.tree.getCheckedKeys()
- var dataArr = data.map(item=>{
- return item.split('@')[0]
- })
- // console.log(dataArr)
- this.showEdit = false
- this.$emit('synchro', {treeData:dataArr,shieldBackwardSwitch:this.shieldBackwardSwitch})
- },
- close() {
- this.showEdit = false
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- update(node, id) {
- // console.log(node)
- getAction('/ctop/userAllocation/getAccountIdListByUserId', {
- userId: node.id.split(',')[1],
- }).then((res) => {
- console.log(res)
- // if (res.code == 0) {
- // if (res.result.length > 0) {
- // node.children = res.result.map((item) => {
- // return {
- // id: item.accountId,
- // label: item.userName + ' ' + item.authName,
- // isDisabled: true,
- // }
- // })
- // } else {
- // }
- // } else {
- // new Error('Failed to load options: network error.')
- // }
- })
- },
- emitValue() {
- // this.$emit('update:appId', this.value)
- },
- loadOptions(node, resolve) {
- // Typically, do the AJAX stuff here.
- // Once the server has responded,
- // assign children options to the parent node & call the callback.
- console.log(node)
- var data = []
- if (node.level == 1) {
- var id = node.key.split('@')[1]
- getAction('/ctop/userAllocation/getAccountIdListByUserId', {
- userId: id,
- }).then((res) => {
- console.log(res)
- if (res.code == 0) {
- if (res.result.length > 0) {
- data = res.result.map((item) => {
- return {
- id: item.accountId,
- label:
- (item.userName.length == 2
- ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : item.userName.length == 3
- ? item.userName + '\xa0\xa0\xa0\xa0'
- : item.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.authName,
- disabled: true,
- }
- })
- resolve(data)
- } else {
- data = []
- resolve(data)
- }
- } else {
- }
- })
- } else {
- data = []
- resolve(data)
- }
- },
- getParticipateList(productId) {d:
- //我参与的
- // toutiaoParticipateList
- this.showEdit = true
- getAction('/ctop/userAllocation/getUserIdListByProductId', {
- productId: productId,
- userId: this.userInfo().id
- }).then((res) => {
- if (res.code == 0) {
- console.log(res)
- this.options = res.result.map((item) => {
- return {
- id: item.accountId+'@'+item.userId,
- label: item.userId+'-'+item.projectName,
- children: [],
- }
- })
- } else {
- this.showLoading = '暂无数据'
- }
- })
- },
- },
- mounted() {
- // this.getParticipateList()
- },
- }
- </script>
|