ChuangHengWx/components/CusTeamInfoFill/index.vue

<template>
	<view class="ti_page">
		<view class="form">
			<view class="form-item adfacjb">
				<view class="form-item-title red">团队名称</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.teamName" placeholder="请输入团队名称" placeholder-style="color:#B3BFC8;" border="none" inputAlign="right" fontSize="30rpx" color="#667E90"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">所在公司</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.enterpriseName" placeholder="请输入公司名称" placeholder-style="color:#B3BFC8;" border="none" inputAlign="right" fontSize="30rpx" color="#667E90"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">企业官网</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.enterpriseWebsite" maxlength="500" placeholder="无官网请填写“无”" placeholder-style="color:#B3BFC8;" border="none" inputAlign="right" fontSize="30rpx" color="#667E90" />
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">所属地区</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="turnPage('industry')">
					<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" :class="{'red':isqtype}">团队职能类型</view>
				<view class="form-item-inp adfac" @click="turnPage('function')">
					<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" :class="{'red':isqtype}">团队模式类型</view>
				<view class="form-item-inp adfac" @click="turnPage('architecture')">
					<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" :class="{'red':isqtype}">团队规模</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" :class="{'red':isqtype}">团队层级</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-row">
				<view class="box-title" :class="{'red':isqtype}">团队简介</view>
				<view class="box-title-tip" @click="briefTipShow=true">
					<u-icon name="question-circle" size="32rpx" color="#B3BFC8"></u-icon>
				</view>
			</view>
			<view class="box-textarea">

				<u-textarea border="none" height="320rpx" maxlength="-1" style="color: #667E90;padding: 0;" :placeholderStyle="{'color':'#B3BFC8','font-size':'30rpx','line-height':'40rpx'}"
				v-model="teamInfo.brief" placeholder="示例：这是一个为推动公司ERP系统升级后的落地应用而组建的团队，36名成员由公司副总经理、各部门总监以及核心骨干组成，大部分成员在该公司同事超过10年，团队成员的工作地点分布在香港、深圳、上海、苏州和东莞等地。公司升级ERP系统是配合”中国区业务战略统一”的大方向，促进建立一致性的运作流程体系。但在新ERP系统落地应用的过程中，不同区域、不同业务单元的认知理解不一，推动新系统应用的力度也参差不去，还造成了不同业务单元之间、不同职能部门之间的协作混乱。公司董事会期待这个团队能够精诚合作，打破部门壁垒，积极推动新ERP系统的落地应用，促进公司战略目标达成。"></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>
		<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> -->
		<!-- 团队简介提示弹层 -->
		<u-popup :show="briefTipShow" mode="center" :round="20" :closeable="true" @close="briefTipShow=false">
			<view class="brief-tip-content">
				<view class="brief-tip-title">示例</view>
				<view class="brief-tip-text">这是一个为推动公司ERP系统升级后的落地应用而组建的团队，36名成员由公司副总经理、各部门总监以及核心骨干组成，大部分成员在该公司同事超过10年，团队成员的工作地点分布在香港、深圳、上海、苏州和东莞等地。</view>
				<view class="brief-tip-text">公司升级ERP系统是配合"中国区业务战略统一"的大方向，促进建立一致性的运作流程体系。但在新ERP系统落地应用的过程中，不同区域、不同业务单元的认知理解不一，推动新系统应用的力度也参差不齐，还造成了不同业务单元之间、不同职能部门之间的协作混乱。</view>
				<view class="brief-tip-text">公司董事会期待这个团队能够精诚合作，打破部门壁垒，积极推动新ERP系统的落地应用，促进公司战略目标达成。</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CusSelect from '@/components/CusSelect/index.vue'
	import CusProvinceCityArea from '@/components/CusProvinceCityArea/index.vue'
	import CusTeamBackgroundFiles from '@/components/CusTeamBackgroundFiles/index.vue'
	import teamBackgroundRules from '@/utils/teamBackgroundFile.js'
	const { createTeamSubmitPayload, validateEnterpriseWebsite } = teamBackgroundRules
	export default {
		components:{ CusSelect, CusProvinceCityArea, CusTeamBackgroundFiles },
		props:{
			confirmText:{
				typeof:String,
				default:'下一步'
			},
			qtype:{
				typeof:Boolean,
				default:false
			},
			teamId: { type: [String, Number], default: '' },
			submitting: { type: Boolean, default: false }
		},
		options: { styleIsolation: 'shared' },
		data(){
			return {
				teamInfo:{
					teamName:'',
					enterpriseName:'',
					enterpriseWebsite:'',
					provinceId:'',
					cityId:'',
					districtId:'',
					industryId:'',
					functionIds:[],
					orgIds:[],
					scale:'',
					hierarchy:'',
					brief:'',
					backgroundFileCount:0
				},
				areaShow:false,
				areaText:'请选择',
				industryText:'请选择',
				functionTypeText:'请选择',
				architectureTypeText:'请选择',
				teamScaleShow:false,
				teamScaleData:[],
				teamScaleText:'请选择',
				teamLevelShow:false,
				teamLevelData:[],
				teamLevelText:'请选择',
				isqtype:false,
				briefTipShow:false

			}
		},
		mounted() {
			this.isqtype = this.$props.qtype||false;
		},
		methods:{
			backgroundCountChange(count){
				this.teamInfo.backgroundFileCount = count;
			},
			flushBackgroundFiles(teamId) {
				return this.$refs.backgroundRef.flushPendingFiles(teamId)
			},
			hasDeferredPcUpload() {
				return this.$refs.backgroundRef.hasDeferredPcUpload()
			},
			waitForDeferredPcUpload(teamId) {
				return this.$refs.backgroundRef.waitForDeferredPcUpload(teamId)
			},
			hasUnresolvedBackgroundFiles() {
				return this.$refs.backgroundRef.hasUnresolvedFiles()
			},
			isBackgroundUploadActive() {
				return this.$refs.backgroundRef.isUploadActive()
			},
			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}))
				})
			},
			setTeamInfo(info){
				this.teamInfo = Object.assign({
					teamName:'', enterpriseName:'', enterpriseWebsite:'', provinceId:'', cityId:'',
					districtId:'', industryId:'', functionIds:[], orgIds:[], scale:'',
					hierarchy:'', brief:'', backgroundFileCount:0
				}, info || {});
			},
			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;
			},
			turnPage(type){
				if(type==='industry'){
					uni.navigateTo({
						url:'/pagesPublish/industry',
						events:{
							selectConfirm:data=>{
								this.teamInfo.industryId = data.industryId;
								this.industryText = data.industryName;
							}
						}
					})
				}else{
					uni.navigateTo({
						url:'/pagesPublish/teamTypeMultiple?type='+type,
						events:{
							selectConfirm:data=>{
								if(data.type==='function'){
									this.teamInfo.functionIds = data.ids;
									this.functionTypeText = data.names.join(',');
								}else if(data.type==='architecture'){
									this.teamInfo.orgIds = data.ids;
									this.architectureTypeText = data.names.join(',');
								}
							}
						}
					})
				}
			},
			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;
			},
			async handleConfirm(){
				if(this.confirming || this.submitting) return
				if(!this.teamInfo.teamName) return this.$showToast('请输入团队名称')
				if(!this.teamInfo.enterpriseName) return this.$showToast('请输入公司名称')
				const enterpriseWebsite = String(this.teamInfo.enterpriseWebsite || '').trim()
				const websiteError = validateEnterpriseWebsite(enterpriseWebsite)
				if(websiteError) return this.$showToast(websiteError)
				this.teamInfo.enterpriseWebsite = enterpriseWebsite
				if(!this.teamInfo.districtId) return this.$showToast('请选择所属地区')
				if(!this.teamInfo.industryId) return this.$showToast('请选择所属行业')
				if(this.isqtype){
					if(this.teamInfo.functionIds.length===0) return this.$showToast('请选择团队职能类型')
					if(this.teamInfo.orgIds.length===0) return this.$showToast('请选择团队模式类型')
					if(!this.teamInfo.scale) return this.$showToast('请选择团队规模')
					// if(!this.teamInfo.hierarchy) return this.$showToast('请选择团队层级')
					if(!this.teamInfo.brief) return this.$showToast('请输入团队简介')
				}
				this.confirming = true
				try {
					if(this.teamId){
						const uploadResult = await this.flushBackgroundFiles(this.teamId)
						if(uploadResult.failed > 0 || this.hasUnresolvedBackgroundFiles()){
							this.$showToast('仍有背景资料未上传成功，请重试后再保存')
							return
						}
					}
					this.$emit('handleConfirm',createTeamSubmitPayload(this.teamInfo))
				} catch(error) {
					this.$showToast(error && (error.message || error.msg) || '背景资料处理失败，请重试')
				} finally {
					this.confirming = false
				}
			},
			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">
	::v-deep .u-textarea{
		padding: 36rpx 0 !important;
	}
	::v-deep .u-textarea textarea{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #667E90;
		line-height: 40rpx;
	}
	
	.ti_page{
		width: 100%;
		padding: 0 24rpx 162rpx;
		box-sizing: border-box;
		
		.form{
			background: #FFFFFF;
			border-radius: 24rpx;
			&-item{
				padding: 28rpx 24rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				&-title{
					width: 180rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
					position: relative;
					box-sizing: border-box;
					&.red{
						&::after{
							content: "*";
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FD4F66;
							line-height: 42rpx;
							position: absolute;
							left: -16rpx;
						}
					}
				}
				&-inp{
					width: calc(100% - 180rpx);
					padding-left: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #B3BFC8;
						line-height: 40rpx;
						margin-right: 10rpx;
						&.active{
							color: #667E90;
							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;
			&-title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #002846;
				line-height: 42rpx;
				position: relative;
				&.red{
					&::after{
						content: "*";
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #FD4F66;
						line-height: 42rpx;
						position: absolute;
						left: -16rpx;
					}
				}
			}
			&-title-row{
				display: flex;
				align-items: center;
			}
			&-title-tip{
				margin-left: 12rpx;
				display: flex;
				align-items: center;
			}
		}


		.brief-tip-content{
			width: 600rpx;
			max-height: 70vh;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			overflow-y: auto;
		}
		.brief-tip-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #002846;
			line-height: 44rpx;
			margin-bottom: 24rpx;
			text-align: center;
		}
		.brief-tip-text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #667E90;
			line-height: 44rpx;
			margin-bottom: 20rpx;
			text-indent: 2em;
		}

		.zt_btn{
			width: calc(100% - 100rpx);
			position: fixed;
			left: 50rpx;
			bottom: 54rpx;
			z-index: 1000;
			&.disabled{
				opacity: .55;
			}
		}
	}
</style>