forked from ccsens_fe/tall-mui-3
10 changed files with 754 additions and 14 deletions
@ -1,3 +1,6 @@ |
|||||
.min-0 { |
.min-0 { |
||||
min-width: 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