自定义下拉单选框

components/CusSelect/index.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="sdialog adffc" v-if="show">
+		<view class="dbox adffc">
+			<view class="db-top">{{title}}</view>
+			<image class="db-close" :src="imgBase+'remind_close.png'" @click="close"></image>
+			<view class="db-bottom" @click="addTeam" v-if="addShow">{{addText}}</view>
+			<view class="db-list">
+				<view class="db-list-item adfacjb" v-for="(item,index) in originList" :key="item.id" @click="selectItem(item,index)">
+					<view class="db-list-item-left" :class="{'active':item.select}">{{item.name}}</view>
+					<view class="db-list-item-right">
+						<u-icon name="checkbox-mark" color="#199C9C" size="42rpx" v-if="item.select"></u-icon>
+					</view>
+				</view>
+			</view>
+			<view class="zt_btn" style="margin-top: 40rpx;" @click="confirmTeam">{{confirmText}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			title:{
+				typeof:String,
+				default:'选择团队'
+			},
+			show:{
+				typeof:Boolean,
+				default:false
+			},
+			addShow:{
+				typeof:Boolean,
+				default:false
+			},
+			addText:{
+				typeof:String,
+				default:'+ 新增团队'
+			},
+			list:{
+				typeof:Array,
+				default:[]
+			},
+			confirmText:{
+				typeof:String,
+				default:'确定'
+			}
+		},
+		data(){
+			return {
+				originList:[],
+				current:null
+			}
+		},
+		watch: {
+			list: {
+			  handler(newValue) {
+				this.originList = newValue;
+			  },
+			  immediate: true,
+			  deep: true 
+			}
+		},
+		mounted() {
+			this.originList = this.list;
+		},
+		methods:{
+			close(){
+				this.$emit('close')
+			},
+			selectItem(item,index){
+				this.current = item;
+				this.originList.forEach((t,i)=>{
+					this.$set(this.originList[i],'select',i===index)
+				})
+			},
+			confirmTeam(){
+				this.$emit('confirmTeam',this.current)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.sdialog{
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 1000;
+		background: rgba(0, 0, 0, .4);
+		justify-content: flex-end;
+		.dbox{
+			width: 100%;
+			height: 1200rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
+			border-radius: 24rpx 24rpx 0rpx 0rpx;
+			padding: 41rpx 30rpx 64rpx;
+			box-sizing: border-box;
+			position: relative;
+			.db-top{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #002846;
+				line-height: 36rpx;
+				text-align: center;
+			}
+			.db-close{
+				width: 48rpx;
+				height: 48rpx;
+				position: absolute;
+				top: 35rpx;
+				right: 30rpx;
+			}
+			.db-list{
+				flex: 1;
+				overflow-y: auto;
+				margin-top: 58rpx;
+				&-item{
+					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
+					padding: 39rpx 0;
+					&-left{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 32rpx;
+						color: #002846;
+						line-height: 32rpx;
+						&.active{
+							font-weight: bold;
+							color: #009191;
+						}
+					}
+				}
+			}
+			.db-bottom{
+				width: 100%;
+				height: 88rpx;
+				background: rgba(25,156,156,0.1);
+				border-radius: 44rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #009191;
+				line-height: 88rpx;
+				text-align: center;
+				margin-top: 40rpx;
+			}
+		}
+	}
+</style>

components/CusTeamInfoFill/index.vue

@@ -43,14 +43,14 @@
 			</view>
 			<view class="form-item adfacjb">
 				<view class="form-item-title">团队规模</view>
-				<view class="form-item-inp adfac" @click="pickerShow('teamScaleShow')">
+				<view class="form-item-inp adfac" @click="selectShow('teamScaleShow')">
 					<text :class="{'active':teamScaleText!=='请选择'}">{{teamScaleText}}</text>
 					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
 				</view>
 			</view>
 			<view class="form-item adfacjb">
 				<view class="form-item-title">团队层级</view>
-				<view class="form-item-inp adfac" @click="pickerShow('teamLevelShow')">
+				<view class="form-item-inp adfac" @click="selectShow('teamLevelShow')">
 					<text :class="{'active':teamLevelText!=='请选择'}">{{teamLevelText}}</text>
 					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
 				</view>
@@ -74,17 +74,16 @@
 			@cancel="functionTypeShow=false" @confirm="e=>pickerConfirm(e,'functionIds','functionTypeText','functionTypeShow')"></u-picker>
 		<u-picker :itemHeight="88" :immediateChange="true" :show="architectureTypeShow" :columns="architectureTypeData" title="团队架构类型"
 			@cancel="architectureTypeShow=false" @confirm="e=>pickerConfirm(e,'orgIds','architectureTypeText','architectureTypeShow')"></u-picker>
-		<u-picker :itemHeight="88" :immediateChange="true" :show="teamScaleShow" :columns="teamScaleData" title="团队规模" keyName="name"
-			@cancel="teamScaleShow=false" @confirm="e=>pickerConfirm(e,'scale','teamScaleText','teamScaleShow')"></u-picker>
-		<u-picker :itemHeight="88" :immediateChange="true" :show="teamLevelShow" :columns="teamLevelData" title="团队层级" keyName="name"
-			@cancel="teamLevelShow=false" @confirm="e=>pickerConfirm(e,'hierarchy','teamLevelText','teamLevelShow')"></u-picker>
+			<cus-select :show="teamScaleShow" title="选择团队规模" :list="teamScaleData" @close="teamScaleShow=false" @confirmTeam="e=>selectConfirm(e,'scale','teamScaleText','teamScaleShow')"></cus-select>
+			<cus-select :show="teamLevelShow" title="选择团队层级" :list="teamLevelData" @close="teamLevelShow=false" @confirmTeam="e=>selectConfirm(e,'hierarchy','teamLevelText','teamLevelShow')"></cus-select>
 	</view>
 </template>
 
 <script>
+	import CusSelect from '@/components/CusSelect/index.vue'
 	import CusProvinceCityArea from '@/components/CusProvinceCityArea/index.vue'
 	export default {
-		components:{ CusProvinceCityArea },
+		components:{ CusSelect, CusProvinceCityArea },
 		props:{
 			confirmText:{
 				typeof:String,
@@ -125,21 +124,17 @@
 				teamLevelText:'请选择',
 			}
 		},
-		mounted() {
-			this.getTeamScaleData()
-			this.getTeamHierarchyData()
-		},
 		methods:{
 			getTeamScaleData(){
 				this.$api.get('/getListByType/team_scale').then(({data:res})=>{
 					if(res.code!==0) return this.$showToast(res.msg)
-					this.teamScaleData = [res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))]
+					this.teamScaleData = res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))
 				})
 			},
 			getTeamHierarchyData(){
 				this.$api.get('/getListByType/team_hierarchy').then(({data:res})=>{
 					if(res.code!==0) return this.$showToast(res.msg)
-					this.teamLevelData = [res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))]
+					this.teamLevelData = res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))
 				})
 			},
 			confirm(e) {
@@ -156,11 +151,23 @@
 			pickerShow(key){
 				this[key] = true;
 			},
+			selectShow(key){
+				this[key] = true;
+				this.$nextTick(()=>{
+					if(key==='teamScaleShow') this.getTeamScaleData();
+					if(key==='teamLevelShow') this.getTeamHierarchyData();
+				})
+			},
 			pickerConfirm(e,key1,key2,key3){
 				this.teamInfo[key1] = e.value[0].id;
 				this[key2] = e.value[0].name;
 				this[key3] = false;
 			},
+			selectConfirm(e,key1,key2,key3){
+				this.teamInfo[key1] = e.id;
+				this[key2] = e.name;
+				this[key3] = false;
+			},
 			handleConfirm(){
 				// if(!this.teamInfo.industryId) return this.$showToast('请选择所属行业')
 				// if(!this.teamInfo.functionIds) return this.$showToast('请选择团队职能类型')

pagesHome/questionnaireEdit.vue

@@ -68,22 +68,7 @@
 		<view class="bottom">
 			<view class="zt_btn" @click="confirmPublish">确认发布</view>
 		</view>
-		<view class="dialog adffc" v-if="teamShow">
-			<view class="dbox adffc">
-				<view class="db-top">选择团队</view>
-				<image class="db-close" :src="imgBase+'remind_close.png'" @click="teamShow=false"></image>
-				<view class="db-bottom" @click="addTeam">+ 新增团队</view>
-				<view class="db-list">
-					<view class="db-list-item adfacjb" v-for="(item,index) in teamList" :key="item.id" @click="selectTeam(item,index)">
-						<view class="db-list-item-left" :class="{'active':item.select}">{{item.name}}</view>
-						<view class="db-list-item-right">
-							<u-icon name="checkbox-mark" color="#199C9C" size="42rpx" v-if="item.select"></u-icon>
-						</view>
-					</view>
-				</view>
-				<view class="zt_btn" style="margin-top: 40rpx;" @click="confirmTeam">确定</view>
-			</view>
-		</view>
+		<cus-select :show="teamShow" :list="teamList" :addShow="true" @close="teamShow=false" @confirmTeam="confirmTeam"></cus-select>
 		<u-datetime-picker ref="datetimePicker1" title="开始时间" :minDate="minStartTime" itemHeight="88" :show="startShow" v-model="dto.startTime" mode="datetime" :formatter="formatter" @cancel="startShow=false" @confirm="startConfirm"></u-datetime-picker>
 		<u-datetime-picker ref="datetimePicker2" title="结束时间" :minDate="minEndTime" itemHeight="88" :show="endShow" v-model="dto.endTime" mode="datetime" :formatter="formatter" @cancel="endShow=false" @confirm="endConfirm"></u-datetime-picker>
 	</view>
@@ -91,8 +76,9 @@
 
 <script>
 	import CusNumberBox from '@/components/CusNumberBox/index.vue'
+	import CusSelect from '@/components/CusSelect/index.vue'
 	export default {
-		components:{ CusNumberBox },
+		components:{ CusNumberBox, CusSelect },
 		data(){
 			return {
 				limit:true,
@@ -139,11 +125,6 @@
 					url:'/pagesPublish/questionnairePreview'
 				})
 			},
-			selectTeam(item,index){
-				this.teamList.forEach((t,i)=>{
-					this.$set(this.teamList[i],'select',i===index)
-				})
-			},
 			addTeam(){
 				uni.navigateTo({
 					url:'/pagesPublish/fillTeamInfo?type=add',
@@ -331,74 +312,5 @@
 			bottom: 0;
 			z-index: 888;
 		}
-	
-		.dialog{
-			position: fixed;
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			z-index: 1000;
-			background: rgba(0, 0, 0, .4);
-			justify-content: flex-end;
-			.dbox{
-				width: 100%;
-				height: 1200rpx;
-				background: #FFFFFF;
-				box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
-				border-radius: 24rpx 24rpx 0rpx 0rpx;
-				padding: 41rpx 30rpx 64rpx;
-				box-sizing: border-box;
-				position: relative;
-				.db-top{
-					font-family: PingFang-SC, PingFang-SC;
-					font-weight: bold;
-					font-size: 36rpx;
-					color: #002846;
-					line-height: 36rpx;
-					text-align: center;
-				}
-				.db-close{
-					width: 48rpx;
-					height: 48rpx;
-					position: absolute;
-					top: 35rpx;
-					right: 30rpx;
-				}
-				.db-list{
-					flex: 1;
-					overflow-y: auto;
-					margin-top: 58rpx;
-					&-item{
-						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
-						padding: 39rpx 0;
-						&-left{
-							font-family: PingFangSC, PingFang SC;
-							font-weight: 400;
-							font-size: 32rpx;
-							color: #002846;
-							line-height: 32rpx;
-							&.active{
-								font-weight: bold;
-								color: #009191;
-							}
-						}
-					}
-				}
-				.db-bottom{
-					width: 100%;
-					height: 88rpx;
-					background: rgba(25,156,156,0.1);
-					border-radius: 44rpx;
-					font-family: PingFang-SC, PingFang-SC;
-					font-weight: bold;
-					font-size: 32rpx;
-					color: #009191;
-					line-height: 88rpx;
-					text-align: center;
-					margin-top: 40rpx;
-				}
-			}
-		}
 	}
 </style>