ChuangHengWx/components/CusTeamInfoFill/index.vue

<template>
	<view class="ti_page">
		<view class="form">
			<view class="form-item adfacjb">
				<view class="form-item-title">团队名称</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.teamName" placeholder="请输入团队名称" border="none" inputAlign="right" fontSize="28rpx" color="#002846"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">所在公司</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.enterpriseName" placeholder="请输入公司名称" border="none" inputAlign="right" fontSize="28rpx" color="#002846"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">所属地区</view>
				<view class="form-item-inp adfac" @click="pickerShow('areaShow')">
					<text :class="{'active':areaText!=='请选择'}">{{areaText}}</text>
					<u-icon name="arrow-right" size="24rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">所属行业</view>
				<view class="form-item-inp adfac" @click="pickerShow('industryShow')">
					<text :class="{'active':industryText!=='请选择'}">{{industryText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">团队职能类型</view>
				<view class="form-item-inp adfac" @click="pickerShow('functionTypeShow')">
					<text :class="{'active':functionTypeText!=='请选择'}">{{functionTypeText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">团队架构类型</view>
				<view class="form-item-inp adfac" @click="pickerShow('architectureTypeShow')">
					<text :class="{'active':architectureTypeText!=='请选择'}">{{architectureTypeText}}</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('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')">
					<text :class="{'active':teamLevelText!=='请选择'}">{{teamLevelText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title">团队介绍</view>
			<view class="box-textarea">
				<u-textarea border="none" height="470rpx" maxlength="-1" fontSize="28rpx" color="#002846" v-model="teamInfo.brief" placeholder="示例：海普洛斯是肿瘤液体活检和基因大数据国家高新技术企业，专精特新“小巨人”企业，在基因测序、液体活检、生命信息和大数据等领域具有核心技术优势，以科技创新造福人类，致力于成为全球领先的生命科技公司。业务覆盖肿瘤全病程管理、遗传性疾病筛查、重大感染性疾病筛查等领域，已为全国数百家三甲医院、科研院所、体检机构、保险公司以及各地政府提供基因检测技术服务和整体解决方案。此次评估对象为海普洛斯销售板块中的临床销售管理团队，团队人数22人，包括团队负责人（营销副总裁）1人、总监级6人、高级经理级5人、经理级10人。团队主要职能是负责向全国医院系统的推广销售海普洛斯的基因测序、液体活检服务和生命信息数据产品。"></u-textarea>
			</view>
		</view>
		<view class="zt_btn" @click="handleConfirm">{{confirmText}}</view>
		<view class="dialog" v-if="areaShow">
			<view class="dialog-box">
				<cus-province-city-area @cancel="areaShow=false" @confirm="areaConfirm"></cus-province-city-area>
			</view>
		</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="industryShow" :columns="industryData" title="所属行业"
			@cancel="industryShow=false" @confirm="e=>pickerConfirm(e,'industryId','industryText','industryShow')"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="functionTypeShow" :columns="functionTypeData" title="团队职能类型"
			@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>
	</view>
</template>

<script>
	import CusProvinceCityArea from '@/components/CusProvinceCityArea/index.vue'
	export default {
		components:{ CusProvinceCityArea },
		props:{
			confirmText:{
				typeof:String,
				default:'下一步'
			}
		},
		data(){
			return {
				teamInfo:{
					teamName:'',
					enterpriseName:'',
					provinceId:'',
					cityId:'',
					districtId:'',
					industryId:'',
					functionIds:[],
					orgIds:[],
					scale:'',
					hierarchy:'',
					brief:'',
				},
				areaShow:false,
				areaText:'请选择',
				industryShow:false,
				industryData:[['行业1','行业2']],
				industryText:'请选择',
				functionTypeShow:false,
				functionTypeData:[['职能类型1','职能类型2']],
				functionTypeText:'请选择',
				architectureTypeShow:false,
				architectureTypeData:[['架构类型1','架构类型2']],
				architectureTypeText:'请选择',
				teamScaleShow:false,
				teamScaleData:[],
				teamScaleText:'请选择',
				teamLevelShow:false,
				teamLevelData:[],
				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}))]
				})
			},
			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}))]
				})
			},
			confirm(e) {
				const { value } = e;
				this.areaText = value.map(item => item.label).join('-');
				this.areaShow = false;
			},
			cancel() {
				this.areaShow = false;
			},
			close() {
				this.areaShow = false;
			},
			pickerShow(key){
				this[key] = true;
			},
			pickerConfirm(e,key1,key2,key3){
				this.teamInfo[key1] = e.value[0].id;
				this[key2] = e.value[0].name;
				this[key3] = false;
			},
			handleConfirm(){
				// if(!this.teamInfo.industryId) return this.$showToast('请选择所属行业')
				// if(!this.teamInfo.functionIds) return this.$showToast('请选择团队职能类型')
				// if(!this.teamInfo.orgIds) return this.$showToast('请选择团队架构类型')
				
				this.$emit('handleConfirm',this.teamInfo)
			},
			areaConfirm(e){
				const { provinceId, cityId,districtId,provinceName,cityName,districtName } = e
				this.teamInfo.provinceId = provinceId;
				this.teamInfo.cityId = cityId;
				this.teamInfo.districtId = districtId;
				this.areaText = provinceName+' '+cityName+' '+districtName;
				this.areaShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.ti_page{
		width: 100%;
		padding: 0 24rpx 162rpx;
		box-sizing: border-box;
		
		.form{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			&-item{
				padding: 28rpx 24rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				&-title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
					position: relative;
					padding-right: 23rpx;
					&.red{
						&::after{
							content: "*";
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FD4F66;
							line-height: 42rpx;
							position: absolute;
							right: 0;
						}
					}
				}
				&-inp{
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #B3BFC8;
						line-height: 40rpx;
						margin-right: 10rpx;
						&.active{
							color: #002846;
							line-height: 30rpx;
						}
					}
				}
			}
		}
	
		.box{
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 28rpx 24rpx;
		}
		
		.zt_btn{
			width: calc(100% - 100rpx);
			position: fixed;
			left: 50rpx;
			bottom: 54rpx;
			z-index: 1000;
		}
	}
</style>