ChuangHengWx/components/CusSelect/index.vue

<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-tip" v-if="addShow">团队应该是一个由具有互补技能的成员组成的群体，他们有共同的宗旨和绩效目标，并为此采用共同的工作方法，且成员间彼此相互负责，建议可为同部门、专案项目小组、核心管理层或是因企业战略目标而创建的跨部门成员等等。角色可包含团队负责人、团队成员、赞助人（出资人）、关键利益相关方等。</view>
			<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: 20rpx;" @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:'确定'
			},
			team:{
				typeof:Boolean,
				default:false
			}
		},
		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){
				if(this.$props.team){
					if(!item.functions||item.functions.length===0) return this.$showModal(`该【${item.teamName}】下团队职能类型信息未填写，不能发送报告，请更换或添加团队。`)
					if(!item.organizations||item.organizations.length===0) return this.$showModal(`该【${item.teamName}】下团队模式类型信息未填写，不能发送报告，请更换或添加团队。`)
					if(!item.organizations||item.organizations.length===0) return this.$showModal(`该【${item.teamName}】下团队模式类型信息未填写，不能发送报告，请更换或添加团队。`)
					if(!item.scale) return this.$showModal(`该【${item.teamName}】下团队规模信息未填写，不能发送报告，请更换或添加团队。`)
					if(!item.brief) return this.$showModal(`该【${item.teamName}】下团队简介信息未填写，不能发送报告，请更换或添加团队。`)
				}
				
				this.current = item;
				this.originList.forEach((t,i)=>{
					this.$set(this.originList[i],'select',i===index)
				})
			},
			addTeam(){
				this.$emit('addTeam')
			},
			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-tip{
				background: #F5F8FA;
				border-radius: 24rpx;
				padding: 24rpx 24rpx 20rpx;
				border-radius: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #667E90;
				line-height: 32rpx;
				margin-top: 40rpx;
			}
			.db-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 35rpx;
				right: 30rpx;
			}
			.db-list{
				flex: 1;
				overflow-y: auto;
				margin-top: 10rpx;
				&-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: 20rpx;
			}
		}
	}
</style>