<!-- 选择项目弹框 -->
<uni-popup ref="popup" type="center" :maskClick="false">
<view class="popup-project">
<view class="title"><text>选择项目</text></view>
<view class="checkboxgroupBox">
<scroll-view class="scroll-view_H" scroll-y="true">
<checkbox-group name="checkbox" @change="checkboxChange">
<view v-for="(item,index) in deptProjectList" :key="index">
<view class="proList uni-flex uni-row" @click="checkProject(item)">
<checkbox :value="item.projectId" :checked="item.checked" /><text class="tite">{{item.projectName}}</text>
</view>
</view>
</checkbox-group>
</scroll-view>
</view>
<view class="uni-flex uni-row buttonBox">
<button type="default" plain="true" size="mini" @tap="cancelPopup">取消</button>
<button type="primary" plain="true" size="mini" @tap="okPopup">确认</button>
</view>
</view>
</uni-popup>
点击弹出层按钮:
//添加项目弹框
addProject () {
//this.showTextArea = false;
this.$refs['popup'].open();
//每次弹框都把是否选中状态设置为false
let initProjectList = this.deptProjectList;
if(initProjectList.length > 0){
for (let item of initProjectList) {
item.checked = false;
}
}
//与日报已经关联的项目列表,也就是之前选中过的,这里使用两层循环一 一比对进行回显
let projectListAlready = this.reportDetails.tableData.dailyProjectList;
for (let projectAlready of projectListAlready) { // let ... of遍历出的结果是value, let ... in遍历出的结果是key
for (let deptProject of initProjectList) {
if(projectAlready.projectId == deptProject.projectId){
deptProject.checked = true; //已经与日报关联的项目 这里默认选中
break;
}
}
}
},
勾选复选框事件处理方法:
复选框选中后,点击确认:
// 确认
okPopup: function() {
//选中的item列表
let selectedProject = [];
for (let project of this.deptProjectList) { // let ... of遍历出的结果是value, let ... in遍历出的结果是key
if(project.checked){
selectedProject.push(project);
}
}
//this.reportDetails.tableData.dailyProjectList = selectedProject; 浅拷贝 会引发问题
// 这里把实际最后选中的这些items赋值给data里面对应的属性
this.reportDetails.tableData.dailyProjectList = JSON.parse(JSON.stringify(selectedProject));
this.cancelPopup();
},
部分样式:
.uni-checkbox .uni-checkbox-input{
width: 30upx;
height: 30upx;
}
.addProject{
font-size: 32upx;
color: #363636;
padding: 20upx 0 20upx 30upx;
align-items: center;
.iconfont{
margin-right: 10upx;
}
}
.project-list{
.list{
padding: 20upx 30upx;
align-items: center;
justify-content: space-between;
color: #363636;
text{
font-size: 32upx;
}
}
.progectname{
align-items: center;
font-size: 32upx;
.iconfont{
font-size: 32upx;
margin-right: 10upx;
color: red;
}
}
.title{
font-weight: bold;
border-bottom: 2upx solid #f5f5f5;
}
.procon{
border-bottom: 2upx solid #f5f5f5;
}
}
.popup-project{
background: #fff;
width: 600upx;
height: 800upx;
position: relative;
border-radius: 16upx;
box-shadow: 0 0 20upx #5d5d5d;
overflow-y: auto;
.title{
border-bottom: 2upx solid #f5f5f5;
width: 100%;
position: absolute;
height: 80upx;
line-height: 80upx;
background-color: #fff;
z-index: 10;
text{
font-size: 32upx;
color: #363636;
padding-left: 40upx;
}
}
.checkboxgroupBox{
padding-top: 80upx;
height: 600upx;
overflow-y: auto;
.scroll-view_H{
width: 100%;
height: 100%;
}
}
.proList{
padding: 20upx 30upx;
align-items: center;
.tit{
font-size: 32upx;
color: #363636;
}
}
.buttonBox{
position: absolute;
background-color: #fff;
z-index: 10;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 20upx;
}
}