forked from ccsens_fe/tall-mui-3
10 changed files with 754 additions and 14 deletions
@ -1,3 +1,6 @@ |
|||
.min-0 { |
|||
min-width: 0; |
|||
} |
|||
.border-b-1 { |
|||
border-bottom-width: 1px; |
|||
} |
|||
|
|||
@ -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: `${path}share=1`, 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> |
|||
@ -0,0 +1,320 @@ |
|||
<template> |
|||
<div class="new-projects-box" :style="{ height: arrow ? '330px' : '580px' }"> |
|||
<div class="form"> |
|||
<!-- 项目名称 --> |
|||
<view class="popupTitle flex justify-center">新建任务</view> |
|||
<div class="flex items-center"> |
|||
<div>名称</div> |
|||
<u-input v-model="nameValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 起止时间 --> |
|||
<div class="flex items-center"> |
|||
<div>起止-截止时间</div> |
|||
<u-input v-model="timeValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 多选框 --> |
|||
<div class="flex justify-between items-center"> |
|||
<div>负责人</div> |
|||
<div label="负责人" style="width: 85%"> |
|||
<u-dropdown ref="uDropdown"> |
|||
<u-dropdown-item :title="dropTitle"> |
|||
<view class="slot-content bg-white"> |
|||
<div |
|||
class="multiple-choice flex flex-row justify-between mb-1" |
|||
v-for="(option, optionIndex) in options" |
|||
:key="optionIndex" |
|||
@click="change(optionIndex)" |
|||
> |
|||
<view v-model="option.value">{{ option.label }}</view> |
|||
<u-icon v-if="option.dropdownShow" name="checkbox-mark" color="#2979ff" size="28"></u-icon> |
|||
</div> |
|||
</view> |
|||
</u-dropdown-item> |
|||
</u-dropdown> |
|||
</div> |
|||
</div> |
|||
<!-- 下拉图标 --> |
|||
<div class="flex justify-center" style="margin-top: 20px"> |
|||
<u-icon v-if="arrow" name="arrow-down" size="28" @click="openDropdown"></u-icon> |
|||
<u-icon v-else name="arrow-up" size="28" @click="closeSecondDropdown"></u-icon> |
|||
</div> |
|||
<!-- 下拉框的内容 --> |
|||
<div v-if="show"> |
|||
<!-- 描述 --> |
|||
<div class="flex items-center"> |
|||
<div>描述</div> |
|||
<u-input v-model="decripeValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 所属项目 --> |
|||
<div class="w flex items-center"> |
|||
<div>所属项目</div> |
|||
<div class="xiangmu" style="position: relative; background: #fff">当前项目</div> |
|||
</div> |
|||
<!-- 所属任务 --> |
|||
<div class="w flex items-center"> |
|||
<div>所属任务</div> |
|||
<div class="renwu">当前任务</div> |
|||
</div> |
|||
<!-- 上道工序 --> |
|||
<div class="flex items-center"> |
|||
<div>上道工序</div> |
|||
<u-input v-model="lastValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 检查人多选框 --> |
|||
<div class="flex justify-between items-center"> |
|||
<div>检查人</div> |
|||
<div class="" label="检查人" style="width: 85%"> |
|||
<u-dropdown ref="dropdown"> |
|||
<u-dropdown-item :title="secondDropTitle" style="border: none"> |
|||
<view class="slot-content bg-white"> |
|||
<div |
|||
class="mb-1 multiple-choice flex flex-row justify-between" |
|||
v-for="(checkoutOption, Index) in checkoutOptions" |
|||
:key="Index" |
|||
@click="choose(Index)" |
|||
> |
|||
<view v-model="checkoutOption.value">{{ checkoutOption.label }}</view> |
|||
<u-icon v-if="checkoutOption.dropdownShow" name="checkbox-mark" color="#2979ff" size="28"></u-icon> |
|||
</div> |
|||
</view> |
|||
</u-dropdown-item> |
|||
</u-dropdown> |
|||
</div> |
|||
</div> |
|||
<!-- 是否是日常任务 --> |
|||
<div class="flex justify-between items-center" style="padding: 25px 0; border-bottom: 1px solid #adadad"> |
|||
<div>是否日常任务</div> |
|||
<u-switch v-model="checked" size="28"></u-switch> |
|||
</div> |
|||
<div style="padding-top: 25px"> |
|||
<div>交付物</div> |
|||
<u-input style="border-bottom: 1px solid #dcdfe6" placeholder="交付物名称1" :type="type" :border="border" /> |
|||
<u-input style="border-bottom: 1px solid #dcdfe6" placeholder="交付物名称2" :type="type" :border="border" /> |
|||
</div> |
|||
</div> |
|||
<div class="flex justify-between items-center btns"> |
|||
<u-button class="btn flex justify-center" type="primary" shape="circle" size="medium" @click="$emit('closeMask')">提交</u-button> |
|||
<u-button class="btn flex justify-center" shape="circle" size="medium" @click="$emit('closeMask')">取消</u-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
projects: ['我是睡', '我叫什么', '我的名字是'], |
|||
title: 'tall1', |
|||
arrow: true, |
|||
show: false, |
|||
checked: false, //开关选择器默认关闭 |
|||
nameValue: '', //名称 |
|||
timeValue: '', //起止时间 |
|||
decripeValue: '', //描述 |
|||
projectValue: '', //所属项目 |
|||
projectShow: false, //所属项目模糊搜索展示 |
|||
taskValue: '', //所属任务 |
|||
lastValue: '', //上道工序 |
|||
type: 'text', |
|||
border: true, |
|||
dropTitle: '观众,干系人', //负责人默认多选 |
|||
secondDropTitle: '干系人', //检查人默认多选 |
|||
// 负责人下拉多选列表 |
|||
options: [ |
|||
{ |
|||
label: '观众', |
|||
value: 1, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
{ |
|||
label: '距离优先', |
|||
value: 2, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
{ |
|||
label: '价格优先', |
|||
value: 3, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
], |
|||
// 检查人下拉多选列表 |
|||
checkoutOptions: [ |
|||
{ |
|||
label: '观众', |
|||
value: 1, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
{ |
|||
label: '距离优先', |
|||
value: 2, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
{ |
|||
label: '价格优先', |
|||
value: 3, |
|||
dropdownShow: false, |
|||
status: false, |
|||
}, |
|||
], |
|||
// 交付物 |
|||
diliverables: [], |
|||
// 所属项目下拉单选 |
|||
projectOptions: [ |
|||
{ |
|||
label: 'tall1', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: 'tall2', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: 'tall3', |
|||
value: 3, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
isProjectShow($event) { |
|||
console.log(this.projectValue); |
|||
console.log($event); |
|||
this.projectShow = true; |
|||
}, |
|||
|
|||
// 下拉多选确定按钮 |
|||
closeDropdown() { |
|||
this.$refs.uDropdown.close(); |
|||
}, |
|||
|
|||
// 下拉多选确定按钮 |
|||
dropdownClosed() { |
|||
this.$refs.dropdown.close(); |
|||
}, |
|||
|
|||
// 负责人下拉多选选中 |
|||
change(index) { |
|||
console.log(index); |
|||
let arr = [...this.options]; |
|||
// 选择多选项图标的展示 |
|||
arr[index].dropdownShow = !arr[index].dropdownShow; |
|||
// 多选展示的改变 |
|||
this.dropTitle = arr[index].label; |
|||
let shows = ''; |
|||
// 遍历arr，如果选中，添加到多选展示框上 |
|||
arr.map(val => { |
|||
if (val.dropdownShow === true) { |
|||
shows += val.label + ','; |
|||
} |
|||
}); |
|||
this.options = [...arr]; |
|||
// 删除最后的',' |
|||
this.dropTitle = shows.slice(0, shows.length - 1); |
|||
console.log(this.dropTitle); |
|||
}, |
|||
// 检查人下拉多选选中 |
|||
choose(index) { |
|||
console.log(index); |
|||
let arr = [...this.checkoutOptions]; |
|||
// 选择多选项图标的展示 |
|||
arr[index].dropdownShow = !arr[index].dropdownShow; |
|||
// 多选展示的改变 |
|||
this.secondDropTitle = arr[index].label; |
|||
let shows = ''; |
|||
// 遍历arr，如果选中，添加到多选展示框上 |
|||
arr.map(val => { |
|||
if (val.dropdownShow === true) { |
|||
shows += val.label + ','; |
|||
} |
|||
}); |
|||
this.checkoutOptions = [...arr]; |
|||
// 删除最后的',' |
|||
this.secondDropTitle = shows.slice(0, shows.length - 1); |
|||
console.log(this.secondDropTitle); |
|||
// this.dropTitle = arr[value - 1].label; |
|||
}, |
|||
|
|||
// 所属项目下拉单选框 |
|||
// project(value) { |
|||
// console.log(value); |
|||
// this.title = this.projectOptions[value - 1].label; |
|||
// }, |
|||
|
|||
// 打开下拉框 |
|||
openDropdown() { |
|||
this.arrow = !this.arrow; |
|||
this.show = true; |
|||
}, |
|||
// 关闭下拉框 |
|||
closeSecondDropdown() { |
|||
this.arrow = !this.arrow; |
|||
this.show = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.projectBelong { |
|||
height: auto; |
|||
background: #fff; |
|||
padding: 0 10px; |
|||
color: #c0c4cc; |
|||
position: absolute; |
|||
z-index: 55; |
|||
} |
|||
|
|||
.form { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 550px; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
/deep/.u-input--border { |
|||
border: none; |
|||
border-radius: 0; |
|||
} |
|||
/deep/.u-dropdown__menu__item > uni-view { |
|||
border: none !important; |
|||
padding: 5px; |
|||
} |
|||
.u-input { |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
.btn { |
|||
margin-top: 20px; |
|||
} |
|||
.popupTitle { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 5px; |
|||
} |
|||
.new-projects-box { |
|||
margin-top: 20px; |
|||
padding: 15px; |
|||
width: 330px; |
|||
overflow: hidden; |
|||
} |
|||
.btns { |
|||
padding: 0 30px; |
|||
} |
|||
.xiangmu { |
|||
margin-left: 11px; |
|||
color: rgb(192, 196, 204); |
|||
} |
|||
.renwu { |
|||
margin-left: 11px; |
|||
color: rgb(192, 196, 204); |
|||
} |
|||
.w { |
|||
width: 300px; |
|||
height: 39px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue