jje_spread_uniapp/pages/updateGroup/updateGroup.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="updateGroup">
			<text>修改</text>
		</view>


		<uni-popup ref="selectPersonPopup" type="bottom">
			<view class="selectMemberPopup">
				<view class="flex-row justify-around popupTitle">
					<text @click="closePopup">取消</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: '',
				form:{
					id:'',
					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 item = JSON.parse(e.item)
			this.form.id = item.id
			this.form.name = item.name
			this.form.userId = item.userId
			this.form.userName = item.userName

			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.screenWidth/750 * 650 + 'px'
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			updateGroup(){
				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)
					})
				})

			},

			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()
			},

			openSelectPerson(){
				this.$refs.selectPersonPopup.open()
			},
			closePopup(){
				this.$refs.selectPersonPopup.close()
			}

		}
	}
</script>

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