dccloud/uni-app-front/pages/template/SelectCheckProject/SelectCheckProject.vue

<template>
	<view>
		<view>
			<uni-search-bar :radius="100" @confirm="search" @input="input" @cancel="cancel"></uni-search-bar>
		</view>
		<uni-forms ref="form" @submit="submitForm">
			<uni-list v-if="items.length>0">
				<checkbox-group @change="checkboxChange" >
					<uni-list-item v-for="(item,index) in items" :key="index">
						<!-- 自定义 header -->
						<view slot="header" style="width: 10%;">
							<checkbox :value="item.diCode" />
						</view>
						<!-- 自定义 body -->
						<view slot="body" style="width: 25%;">
							{{item.dnCode=='10034'?'质量检查':item.dnCode=='10035'?'安全检查':'材料检查'}}
						</view>	
						<view slot="footer" style="width: 65%;">
							{{item.diName}}
						</view>					
						</uni-list-item>
				</checkbox-group>
			</uni-list>
			<uni-list v-else>
				<checkbox-group @change="checkboxChange" >
					<uni-list-item >						
						<!-- 自定义 body -->
						<view slot="body" class="slot-box">
							
						</view>
						
					</uni-list-item>
				</checkbox-group>
			</uni-list>
			<view class="uni-btn-v uni-column">
				<button type="primary" form-type="submit" style="border-radius: 15px;">选择成功，确认</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {GetQualityAndSafeItems} from '@/common/api/SafeQualityCheckApi.js';
	
	export default {
		data() {
			return {
				items: [],
				checkboxValues: [],
				searchVal: ''
			}
		},
		onLoad: function() {
			this.$util.persistLogin(this);
		},
		created: function() {
			this.getItems();
		},
		methods: {
			getItems: function() {
				var that = this;
				 let type=-1;
				let searchVal=that.searchVal;
				if(that.$util.getQuery("type")!=undefined&&that.$util.getQuery("type")!=""){
					type=that.$util.getQuery("type");
				}
				uni.showLoading({
					title: "页面努力加载中，请稍候...",
					mask: true
				});
				console.info('getitems type:',type);
				console.info('getitems searchVal:',searchVal);
				GetQualityAndSafeItems(type,searchVal).then((res) => {
					uni.hideLoading();
					console.info('GetQualityAndSafeItems',res);
					//console.info(projectCode);
					that.items=[];
					//return;
					res.forEach(function(item, index, array) {
						that.$set(that.items, index, item);
					});
					 
				});
			},
			checkboxChange: function(e) {
				var items = this.items,
					values = e.detail.value;
				this.checkboxValues = values.join(',');
				console.info("values",values); 
				console.info(this.checkboxValues);
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			submitForm(e) {
				console.info('submitForm',this.checkboxValues);
				if(this.checkboxValues.length<=0){
					uni.showToast({
						title:'请选择检查项目',
						icon:'none',
						duration:3000
					});
					return;
				}
				//先记录值，下面this指向会不一样
				let relationContractCodes = this.checkboxValues;
				let arr=relationContractCodes.split(',');
				//console.info('relationContractCodes',relationContractCodes);
				//console.info('this.items',this.items);
				//return;
				let selectChecked=[];
				this.items.forEach(function(item,index,array){
					arr.forEach(function(item1,index1,array1){
						if(item.diCode==item1){
							 
							selectChecked.push(item);
							
						}
					});
				});
				console.info('submitForm selectChecked',selectChecked);
				//将数据发射到父级监听事件中
				uni.$emit('items', selectChecked);
				//关闭当前窗口
				uni.navigateBack({});
			},
			search(res) { //回车搜索
				this.searchvalue = res.value; //赋值
				this.getItems(); //调用搜索方法
			},
			input(res) {
				this.searchVal = res.value
			},
			cancel(res) {
				console.info('点击取消，输入值为：' + res.value);
				
			}
		}
	}
</script>

<style scoped>
	.slot-box {
		margin: 5px 5px;
	}

	.uni-btn-v {
		position: fixed;
		bottom: 0;
		width: 100%;

	}
	uni-view{
		font-size:15px;
	}
</style>