jje_spread_uniapp/pages/addGroup/addGroup.vue

<template>
	<view class="page">
		<uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" left-icon="left"
			title="新增分组" @clickLeft="back" />
		<view>

				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">

					<u-form-item prop="name" borderBottom>
						<view class="item">
							<text class="key">分组名称</text>
							<view class="flex-row input">
								<u--input v-model="form.name" placeholder="请输入分组名称" border="none"></u--input>
							</view>
						</view>
					</u-form-item>

					<u-form-item prop="userName" borderBottom>
						<view class="item">
							<text class="key">负责人</text>
							<view class="flex-row input" @click="openSelectPerson">
								<u--input v-model="form.userName" disabled placeholder="请选择负责人" border="none"></u--input>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</u-form-item>
				</u--form>

		</view>
		<view class="addGroup" @click="addGroup">
			<text>新增</text>
		</view>


		<uni-popup ref="selectPersonPopup" type="bottom">
			<view class="selectMemberPopup">
				<view class="flex-row justify-around popupTitle">
					<text @click="closePopup('selectPersonPopup')">取消</text>
					<text>选择分组负责人</text>
					<text @click="getSelectPerson">确定</text>
				</view>
				<view class="scroll-y-view ">
					<mescroll-item ref="MescrollItem" :i="0"  :index="0"  :height="height">
					</mescroll-item>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				height: '650px',
				form:{
					name:'',
					userId:'',
					userName:''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						min:1,
						message: '请输入分组名称',
						trigger: ['blur', 'change']
					},

					'userName': {
						type: 'string',
						required: true,
						min:2,
						message: '请选择分组负责人',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad(e) {
			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.screenWidth/750 * 650 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},


			openSelectPerson(){
				this.$refs.selectPersonPopup.open()
			},
			closePopup(){
				this.$refs.selectPersonPopup.close()
			},
			getSelectPerson(){
				let a = this.$refs.MescrollItem.getSelectPerson()
				console.log('选择的负责人',a)
				if (!a){
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: '请选择负责人'
					});
					return
				}
				this.form.userId = a.id
				this.form.username = a.name
				this.$set(this.form,'userName', a.name)
				this.closePopup()
			},

			addGroup(){
				this.$refs.uForm.validate().then(res => {
					this.$api.service.addUpdateGroup(this.form).then(res=>{
						console.log(res)
						uni.showToast({
							icon: 'success',
							duration: 2000,
							title: '新增成功'
						});
						setTimeout(()=>{
							this.back()
						},2000)
					})
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>