Browse Source

选择列表组件封装

lilei 4 years ago
parent
commit
69142adcc5
2 changed files with 149 additions and 42 deletions
  1. 132 0
      components/uni-check-list/uni-check-list.vue
  2. 17 42
      pages/evaluatePlan/evaluatePlan.vue

+ 132 - 0
components/uni-check-list/uni-check-list.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="check-list-pages">
+		<view>
+			<view
+			class="selList"
+			v-for="(item, index) in list" :key="index" 
+			>
+				<view class="radios" @click="chooseItem(item)">
+					<radio v-if="types=='radio'" :checked="item.checked" :value="item.id" />
+					<checkbox v-if="types=='checkbox'" :checked="item.checked" :value="item.id" />
+					<text>{{item[titleKeys]}}</text>
+				</view>
+				<view class="details" @click="rightClick(item)">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+		<!-- 选择按钮 -->
+		<view v-if="types=='checkbox'" @click="kpOk" class="kp-ok">
+			确认选择
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		name: 'UniCheckList',
+		props: {
+			listData: {
+				type: Array,
+				default: []
+			},
+			// 类型 radio 或 checkbox
+			types:{
+				type: String,
+				default: 'radio'
+			},
+			// 标题显示的字段
+			titleKeys:{
+				type: String,
+				default: 'name'
+			}
+		},
+		data() {
+			return {
+				list: this.listData,
+				value: []
+			}
+		},
+		mounted() {
+			this.hasCheck()
+		},
+		methods: {
+			hasCheck(){
+				this.list.map(item => {
+					let a = this.value.indexOf(item.id)
+					item.checked = a >= 0
+				})
+				this.list.splice()
+			},
+			// 选中
+			chooseItem(item) {
+				// 单选
+				if(this.types == 'radio'){
+					this.value[0] = item.id
+					this.$emit('ok',this.value)
+				}else{
+					// 取消选中
+					if(item.checked){
+						let index = this.value.indexOf(item.id)
+						this.value.splice(index,1)
+					}else{
+						this.value.push(item.id)
+					}
+				}
+				this.hasCheck()
+			},
+			rightClick(item){
+				this.$emit('rightClick',item)
+			},
+			kpOk(){
+				this.$emit('ok',this.value)
+			}
+		},
+	}
+</script>
+
+<style lang="less">
+	.check-list-pages{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> view{
+			&:first-child{
+				flex-grow: 1;
+			}
+		}
+	}
+	.selList{
+		width: 100%;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		align-items: center;
+		.radios{
+			display: flex;
+			align-items: center;
+			flex-grow: 1;
+			width: 50%;
+			padding: 26upx 20upx;
+			&:active{
+				background-color: #F8F8F8;
+			}
+			text{
+				word-break: break-all;
+			}
+		}
+		.details{
+			color: #007AFF;
+			padding-right: 20upx;
+			&:active{
+				color: #D9363E;
+			}
+		}
+	}
+	.kp-ok{
+		text-align: center;
+		padding: 26upx;
+		background: #55aaff;
+		color: #fff;
+		font-size: 18px;
+	}
+</style>

+ 17 - 42
pages/evaluatePlan/evaluatePlan.vue

@@ -1,19 +1,9 @@
 <template>
-	<view>
-		<view
-		class="selList"
-		v-for="(item, index) in list" :key="index" 
-		>
-			<view class="radios" @click="chooseItem(item)">
-				<radio :checked="item.id == value" :value="item.name" />
-				<text>{{item.name}}</text>
-			</view>
-			<view class="details" @click="viewDetail(item)">
-				详情 <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
-			</view>
+	<uni-check-list :listData="list" types="radio" @ok="chooseOk" @rightClick="viewDetail">
+		<view slot="right">
+			详情 <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
 		</view>
-		
-	</view>
+	</uni-check-list>
 </template>
 
 <script>
@@ -38,9 +28,17 @@
 			}
 		},
 		methods: {
-			// 选中方案
-			chooseItem(item) {
-				this.value = item.id
+			// 选中方案,item 返回的是数组
+			chooseOk(item) {
+				console.log(item)
+				if(item.length==0){
+					uni.showToast({
+						icon:'none',
+						title:'请选择考评方案'
+					})
+				}else{
+					//关闭当前页面,这里处理数据逻辑
+				}
 			},
 			// 查看详情
 			viewDetail(item){
@@ -53,30 +51,7 @@
 </script>
 
 <style lang="scss">
-	.selList{
-		width: 100%;
-		border-bottom: 1px solid #eee;
-		display: flex;
-		align-items: center;
-		.radios{
-			display: flex;
-			align-items: center;
-			flex-grow: 1;
-			width: 50%;
-			padding: 26upx 20upx;
-			&:active{
-				background-color: #F8F8F8;
-			}
-			text{
-				word-break: break-all;
-			}
-		}
-		.details{
-			color: #007AFF;
-			padding-right: 20upx;
-			&:active{
-				color: #D9363E;
-			}
-		}
+	page{
+		height: 100%;
 	}
 </style>