团队类型页面画写和联调

components/CusTeamInfoFill/index.vue

@@ -29,14 +29,14 @@
 			</view>
 			<view class="form-item adfacjb">
 				<view class="form-item-title red">团队职能类型</view>
-				<view class="form-item-inp adfac" @click="pickerShow('functionTypeShow')">
+				<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 red">团队架构类型</view>
-				<view class="form-item-inp adfac" @click="pickerShow('architectureTypeShow')">
+				<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>
@@ -70,10 +70,6 @@
 		</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>
@@ -110,11 +106,7 @@
 				industryShow:false,
 				industryData:[['行业1','行业2']],
 				industryText:'请选择',
-				functionTypeShow:false,
-				functionTypeData:[['职能类型1','职能类型2']],
 				functionTypeText:'请选择',
-				architectureTypeShow:false,
-				architectureTypeData:[['架构类型1','架构类型2']],
 				architectureTypeText:'请选择',
 				teamScaleShow:false,
 				teamScaleData:[],
@@ -151,6 +143,22 @@
 			pickerShow(key){
 				this[key] = true;
 			},
+			turnPage(type){
+				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(()=>{
@@ -170,8 +178,8 @@
 			},
 			handleConfirm(){
 				// if(!this.teamInfo.industryId) return this.$showToast('请选择所属行业')
-				// if(!this.teamInfo.functionIds) return this.$showToast('请选择团队职能类型')
-				// if(!this.teamInfo.orgIds) return this.$showToast('请选择团队架构类型')
+				if(this.teamInfo.functionIds.length===0) return this.$showToast('请选择团队职能类型')
+				if(this.teamInfo.orgIds.length===0) return this.$showToast('请选择团队架构类型')
 				
 				this.$emit('handleConfirm',this.teamInfo)
 			},
@@ -201,13 +209,14 @@
 				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;
-					padding-right: 23rpx;
+					box-sizing: border-box;
 					&.red{
 						&::after{
 							content: "*";
@@ -217,11 +226,17 @@
 							color: #FD4F66;
 							line-height: 42rpx;
 							position: absolute;
-							right: 0;
+							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;

pages.json

@@ -159,6 +159,12 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "teamTypeMultiple",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},

pagesPublish/teamTypeMultiple.vue

@@ -0,0 +1,216 @@
+<template>
+	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header :title='title'></cus-header>
+		<view class="list">
+			<view class="list-item adfac" v-for="(item,index) in list" :key="item.id" @click="handleSelect(item,index)">
+				<image :src="imgBase+'dx_selected.png'" v-if="item.select"></image>
+				<image :src="imgBase+'dx_not_select.png'" v-else></image>
+				<view class="list-item-info adffc">
+					<view v-if="type==='function'">{{item.functionName}}</view>
+					<view v-else-if="type==='architecture'">{{item.orgName}}</view>
+					<view class="tip">{{item.remark}}</view>
+				</view>
+			</view>
+			<div class="list-item adfac" @click="show=true">
+				<image :src="imgBase+'dx_not_select.png'"></image>
+				<view class="list-item-info adffc">
+					<view>其他</view>
+					<view class="tip">支持用户自定义</view>
+				</view>
+			</div>
+		</view>
+		<view class="zt_btn" @click="confirm">确定</view>
+		<div class="dialog adffc" v-if="show">
+			<div class="box">
+				<div class="box-top adfac">
+					<div class="box-top-btn cancel" @click="show=false">取消</div>
+					<div class="box-top-title">其他自定义</div>
+					<div class="box-top-btn add" @click="handleAdd">添加</div>
+				</div>
+				<div class="box-inp">
+					<u--input type="text" v-model="name" border="none" fontSize="30rpx" color="@B3BFC8" :placeholder="'请输入自定义团队'+(type==='function'?'职能':'架构')+'类型'" maxlength="20" clearable showWordLimit></u--input>
+				</div>
+				<div class="box-textarea">
+					<u-textarea v-model="remark" height="100rpx" border="none" style="font-size: 30rpx;color: #B3BFC8;" :placeholder="'请输入自定义团队'+(type==='function'?'职能':'架构')+'类型的备注'" maxlength="100" count></u-textarea>
+				</div>
+			</div>
+		</div>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				show:false,
+				type:'',
+				title:'选择团队职能类型',
+				list:[],
+				name:'',
+				remark:''
+			}
+		},
+		onLoad(options) {
+			this.type = options.type;
+			if(this.type==='function') this.getTeamFunctionList()
+			else if(this.type==='architecture') this.getTeamArchitecturelist()
+		},
+		methods:{
+			getTeamFunctionList(){
+				this.$api.get('/core/function/list').then(({data:res})=>{
+					if(res.code!==0) return this.$showToast(res.msg)
+					this.list = res.data;
+					this.list.forEach((l,i)=>{
+						this.$set(this.list[i],'select',false)
+					})
+				})
+			},
+			getTeamArchitecturelist(){
+				this.$api.get('/core/organization/list').then(({data:res})=>{
+					if(res.code!==0) return this.$showToast(res.msg)
+					this.list = res.data;
+					this.list.forEach((l,i)=>{
+						this.$set(this.list[i],'select',false)
+					})
+				})
+			},
+			handleSelect(item,index){
+				this.$set(this.list[index],'select',!this.list[index].select)
+			},
+			handleAdd(){
+				if(!this.name) return this.$showToast(`请输入${this.type==='function'?'职能':'结构'}类型名称`)
+				if(!this.remark) return this.$showToast(`请输入${this.type==='function'?'职能':'结构'}类型备注`)
+				if(this.type==='function'){
+					this.$api.post('/core/function',{
+						functionName:this.name,
+						remark:this.remark
+					}).then(({data:res})=>{
+						if(res.code!==0) return this.$showToast(res.msg)
+						this.show = false;
+						this.getTeamFunctionList();
+					})		
+				}else{
+					this.$api.post('/core/organization',{
+						orgName:this.name,
+						remark:this.remark
+					}).then(({data:res})=>{
+						if(res.code!==0) return this.$showToast(res.msg)
+						this.show = false;
+						this.getTeamArchitecturelist();
+					})
+				}
+			},
+			confirm(){
+				if(this.list.filter(l=>l.select).length===0) return this.$showToast(`请至少选择一种团队${this.type==='function'?'职能':'结构'}类型`)
+				this.getOpenerEventChannel().emit('selectConfirm',{
+					type:this.type,
+					ids:this.list.filter(l=>l.select).map(l=>l.id),
+					names:this.list.filter(l=>l.select).map(l=>l[this.type==='function'?'functionName':'orgName'])
+				})
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	::v-deep .u-textarea{
+		padding: 0 !important;
+	}
+	
+	.default_page{
+		padding: 0 30rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+		.list{
+			flex: 1;
+			overflow-y: auto;
+			&-item{
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6EAED;
+				padding: 35rpx 0;
+				&>image{
+					width: 28rpx;
+					height: 28rpx;
+				}
+				&-info{
+					width: calc(100% - 52rpx);
+					margin-left: 24rpx;
+					&>view{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #002846;
+						line-height: 32rpx;
+						&.tip{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #95A5B1;
+							line-height: 32rpx;
+							margin-top: 20rpx;
+						}
+					}
+				}
+			}
+		}
+		
+		.zt_btn{
+			margin: 40rpx 0 80rpx;
+		}
+	
+		.dialog{
+			position: fixed;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			z-index: 1000;
+			background: rgba(0, 0, 0, .4);
+			.box{
+				width: 100%;
+				border-radius: 24rpx 24rpx 0 0;
+				background: #FFFFFF;
+				padding: 36rpx 36rpx 100rpx;
+				box-sizing: border-box;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				&-top{
+					&-btn{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 30rpx;
+						line-height: 42rpx;
+						width: 80rpx;
+						&.cancel{
+							color: #002846;
+						}
+						&.add{
+							color: #009191;
+							text-align: right;
+						}
+					}
+					&-title{
+						flex: 1;
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 36rpx;
+						color: #002846;
+						line-height: 50rpx;
+						text-align: center;
+					}
+				}
+				&-inp{
+					margin-top: 98rpx;
+					padding-bottom: 30rpx;
+					border-bottom: 1rpx solid #E2E2E2;
+				}
+				&-textarea{
+					margin-top: 30rpx;
+					padding-bottom: 30rpx;
+					border-bottom: 1rpx solid #E2E2E2;
+				}
+			}
+		}
+	}
+</style>