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="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="selectShow('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="320rpx" maxlength="-1" fontSize="28rpx" color="#002846" v-model="teamInfo.brief" placeholder="示例：这是一个为公司ERP系统升级而组建的36人团队，成员由公司副总经理、各部门总监以及各部门核心骨干组成。团队成员工作地点分布在香港、上海、苏州、深圳和东莞等地。团队成员年龄在35-50岁之间，男女比例比较均衡，大部份成员在该公司同事超过十年。"></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>
			<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:{ CusSelect, 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:'请选择',
			}
		},
		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;
			},
			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('请选择团队职能类型')
				// 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>