forked from ccsens_fe/tall-mui-3
wangrongrong
4 years ago
4 changed files with 721 additions and 120 deletions
@ -0,0 +1,292 @@ |
|||
<template> |
|||
<div style="padding: 15px; width: 330px"> |
|||
<div class="form"> |
|||
<!-- 项目名称 --> |
|||
<div class="flex items-center" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>名称</div> |
|||
<u-input v-model="nameValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 起止时间 --> |
|||
<div class="flex items-center" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>起止-截止时间</div> |
|||
<u-input v-model="timeValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 多选框 --> |
|||
<div class="flex justify-between items-center" style="border-bottom: 1px solid #dcdfe6; width: 100%"> |
|||
<div>负责人</div> |
|||
<div class="" label="负责人" style="width: 85%"> |
|||
<u-dropdown ref="uDropdown"> |
|||
<u-dropdown-item :title="dropTitle" style="border: none"> |
|||
<view class="slot-content" style="background-color: #ffffff; height: auto"> |
|||
<div |
|||
class="multiple-choice flex flex-row justify-between" |
|||
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> |
|||
<u-button type="primary" @click="closeDropdown">确定</u-button> |
|||
</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" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>描述</div> |
|||
<u-input v-model="decripeValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 所属项目 --> |
|||
<div class="flex items-center" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>所属项目</div> |
|||
<div class="" style="position: relative; background: #fff"> |
|||
<u-input v-model="projectValue" :type="type" :border="border" @click="isProjectShow" /> |
|||
<div v-if="projectShow" class="projectBelong" @blur="projectShow = false"> |
|||
<div v-for="project in projects" :key="project"> |
|||
{{ project }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 所属任务 --> |
|||
<div class="flex items-center" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>所属任务</div> |
|||
<u-input v-model="taskValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 上道工序 --> |
|||
<div class="flex items-center" style="border-bottom: 1px solid #dcdfe6"> |
|||
<div>上道工序</div> |
|||
<u-input v-model="lastValue" :type="type" :border="border" /> |
|||
</div> |
|||
<!-- 检查人多选框 --> |
|||
<div class="flex justify-between items-center" style="border-bottom: 1px solid #dcdfe6; width: 100%"> |
|||
<div>检查人</div> |
|||
<div class="" label="检查人" style="width: 85%"> |
|||
<u-dropdown ref="dropdown"> |
|||
<u-dropdown-item :title="secondDropTitle" style="border: none"> |
|||
<view class="slot-content" style="background-color: #ffffff; height: auto"> |
|||
<div |
|||
class="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> |
|||
<u-button type="primary" @click="dropdownClosed">确定</u-button> |
|||
</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> |
|||
<u-button class="flex justify-center" style="margin-top: 20px" type="primary">提交</u-button> |
|||
</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; |
|||
} |
|||
/deep/.u-dropdown__menu__item > uni-view { |
|||
border: none !important; |
|||
padding: 5px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue