forked from ccsens_fe/tall-mui-3
6 changed files with 257 additions and 223 deletions
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<view class="secondPopup flex justify-center"> |
|||
<view class="content p-3 pb-8"> |
|||
<view class="mb-3 font-bold text-base flex justify-center">创建分享链接</view> |
|||
<view class="flex flex-col"> |
|||
<view class="mb-1">用户以什么角色加入项目</view> |
|||
<!-- 下拉多选 --> |
|||
<u-dropdown> |
|||
<u-dropdown-item v-model="roleValue" :title="roleValue" :options="allRoles" @change="changeRole"></u-dropdown-item> |
|||
</u-dropdown> |
|||
<!-- 复制链接 --> |
|||
<view class="link flex items-center mt-4"> |
|||
<view class="link-url">{{ links }}</view> |
|||
<!-- <u-button style="border-radius: 0" type="primary" @click="copyPasteboard">复制链接</u-button> --> |
|||
<u-button |
|||
style="border-radius: 0" |
|||
type="primary" |
|||
v-clipboard:copy="links" |
|||
v-clipboard:success="copySuccess" |
|||
v-clipboard:error="copyError" |
|||
> |
|||
复制链接 |
|||
</u-button> |
|||
</view> |
|||
|
|||
<view @click="select"> |
|||
<!-- 全选按钮 --> |
|||
<!-- <view class="flex mt-4"> |
|||
<view> |
|||
<u-checkbox-group> |
|||
<u-checkbox v-model="checked" @change="checkedAll"></u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
<view>已选择({{ this.quantity }})</view> |
|||
<view style="color: #f37378; margin-left: 20px">批量删除</view> |
|||
</view> --> |
|||
<!-- 多选框 --> |
|||
<!-- <view> |
|||
<u-checkbox-group class="checkboxs flex flex-1 items-center mt-4" v-for="(item, index) in list" :key="index"> |
|||
<div class="flex-1 flex items-center"> |
|||
<u-checkbox v-model="item.checked"></u-checkbox> |
|||
<u-avatar :src="item.src" size="55" style="background: #d8dce0; margin-right: 10px"></u-avatar> |
|||
<div style="width: 60%; font-size: 12px"> |
|||
<div style="color: gray">{{ item.name }}</div> |
|||
<div style="color: #c4d0e1">{{ item.joinMethod }}</div> |
|||
</div> |
|||
</div> |
|||
</u-checkbox-group> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters, mapState } from 'vuex'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
roleValue: '观众', |
|||
links: 'https://kdocs.cn/l/cbs', //复制的链接 |
|||
checked: false, //全选按钮是否选中 |
|||
// 多选框列表 |
|||
list: [ |
|||
{ |
|||
name: '冯老师', |
|||
src: '', |
|||
joinMethod: '文件创建者', |
|||
role: '观众', |
|||
checked: false, |
|||
disabled: false, |
|||
}, |
|||
{ |
|||
name: '马壮', |
|||
src: '', |
|||
joinMethod: '通过链接加入', |
|||
role: '干系人', |
|||
checked: false, |
|||
disabled: false, |
|||
}, |
|||
{ |
|||
name: '张野', |
|||
src: '', |
|||
joinMethod: '通过链接加入', |
|||
role: '观众', |
|||
checked: false, |
|||
disabled: false, |
|||
}, |
|||
], |
|||
quantity: 0, //多选里面已选择的数量 |
|||
path: '', |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('role', ['visibleRoles', 'invisibleRoles']), |
|||
...mapGetters('project', ['projectId']), |
|||
|
|||
allRoles() { |
|||
let newArr = []; |
|||
if (this.visibleRoles.length || this.invisibleRoles.length) { |
|||
const arr = this.visibleRoles.concat(this.invisibleRoles); |
|||
arr.forEach(role => { |
|||
let item = { value: '', label: '' }; |
|||
item.id = role.id; |
|||
item.value = role.name; |
|||
item.label = role.name; |
|||
newArr.push(item); |
|||
}); |
|||
const firstItem = { id: '0', value: '观众', label: '观众' }; |
|||
newArr.unshift(firstItem); |
|||
} |
|||
return newArr; |
|||
}, |
|||
}, |
|||
|
|||
async created() { |
|||
this.path = window.location.href.split('?')[0]; |
|||
const { path, projectId } = this; |
|||
const params = { path, projectId, roleId: '0' }; |
|||
await this.creatShare(params); |
|||
}, |
|||
|
|||
methods: { |
|||
// 选择角色 |
|||
async changeRole(value) { |
|||
this.roleValue = value; |
|||
const role = this.allRoles.find(item => item.value == value); |
|||
const { path, projectId } = this; |
|||
const params = { path, projectId, roleId: role.id }; |
|||
await this.creatShare(params); |
|||
}, |
|||
|
|||
// 复制成功 |
|||
copySuccess() { |
|||
this.$t.ui.showToast('复制成功'); |
|||
}, |
|||
// 复制失败 |
|||
copyError() { |
|||
this.$t.ui.showToast('复制失败,请稍后重试'); |
|||
}, |
|||
|
|||
/** |
|||
* 创建分享链接 |
|||
* @param path 路径前缀 |
|||
* @param projectId 项目id |
|||
* @param roleId 角色id |
|||
*/ |
|||
async creatShare(params) { |
|||
try { |
|||
const data = await this.$u.api.createShare(params); |
|||
this.links = data.path; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
}, |
|||
|
|||
//获取粘贴板的内容 |
|||
copyPasteboard() { |
|||
uni.setClipboardData({ |
|||
data: this.links, |
|||
success: function (res) { |
|||
console.log('链接复制成功', res.data); |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
//已选择 |
|||
select() { |
|||
this.quantity = 0; |
|||
this.list.forEach(val => { |
|||
if (val.checked == true) { |
|||
this.quantity++; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 全选 |
|||
checkedAll() { |
|||
this.list.map(val => { |
|||
val.checked = !this.checked; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 330px; |
|||
max-height: 400px; |
|||
} |
|||
|
|||
.link { |
|||
height: 40px; |
|||
border: 1px solid #afbed1; |
|||
} |
|||
|
|||
.link-url { |
|||
color: #afbed1; |
|||
width: 80%; |
|||
line-height: 40px; |
|||
margin-left: 5px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
/deep/ .u-slot-content { |
|||
min-width: 0; |
|||
} |
|||
/deep/ .u-dropdown__content { |
|||
height: 160px !important; |
|||
overflow-y: auto; |
|||
background: #fff !important; |
|||
transition: none !important; |
|||
} |
|||
/deep/.u-dropdown__menu__item .u-flex { |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-wrap: nowrap; |
|||
border: 1px solid #afbed1; |
|||
padding: 0 8px; |
|||
} |
|||
/deep/.u-dropdown__content__mask { |
|||
display: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue