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