ChuangHengWx/pagesPublish/teamTypeMultiple.vue

<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>