jje_spread_uniapp/pages/groupDetail/groupDetail.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">
						<view class="flex-row input">
							<text class="key">分组名称：</text>
							<u--input disabled v-model="form.name" placeholder="请输入分组名称" border="none"></u--input>
						</view>
					</view>
				</u-form-item>

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

				<u-form-item  borderBottom>
					<view class="item">
						<view class="flex-row justify-between input" @click="openSelectMember">
							<text class="key">选择分组成员</text>
<!--							<u&#45;&#45;input  disabled placeholder="请选择分组成员" border="none"></u&#45;&#45;input>-->
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>

			</u--form>

			<view class="members">
				<view class="membersTitle ">
					<text>已选择的分组成员</text>
				</view>
				<scroll-view scroll-y class="scroll-y" >
					<view class="flex-row justify-between member" v-for="(item,index) in groupUserList">
						<view class="flex-row">
							<u-icon name="account-fill" size="24"></u-icon>
							<text class="name">{{item.userName}}</text>
							<text class="name">{{item.userPhone}}</text>
						</view>
						<view>
							<u-icon name="trash" size="24" @click="delItem(item,index)"></u-icon>
						</view>
					</view>
				</scroll-view>

			</view>

		</view>
		<view class="addGroup" @click="updateGroupUser">
			<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" v-if="noGroupUserList.length>0">
					<view class="flex-row justify-between member" v-for="(item,index) in noGroupUserList" :key="index" @click="selectItem(item,index)">
						<view class="flex-row">
							<text class="name">{{item.userName}}</text>
							<text class="name">{{item.userPhone}}</text>
						</view>
						<u-icon name="checkbox-mark" color="#FFE05C" size="24" v-if="item.select"></u-icon>
					</view>
				</view>
				<view class="dataNull" v-else>
					<view>
						<image :src="'/static/dataNull.png'"></image>
					</view>
					<text>暂无可选人员</text>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				groupUserList:[],
				noGroupUserList:[],

				height: '',
				form:{
					id:'',
					name:'',
					userId:'',
					userName:''
				},
				rules: {
					'groupName': {
						type: 'string',
						required: true,
						min:1,
						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

			this.getGroupUserList(item.id)
			this.getNoGroupUserList()

			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.windowHeight - 120 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {

			updateGroupUser(){
				this.$api.service.updateGroupUser({
					groupId:this.form.id,
					list:this.groupUserList
				}).then(res=>{
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						duration: 2000
					});
					setTimeout(()=>{{
						this.back()
					}},2000)
					console.log('+++++updateGroupUser+++++++',res)
				})
			},

			delItem(item,index){
				item.select=false
				this.noGroupUserList.push(item)
				this.groupUserList.splice(index,1)
			},

			getSelectPerson(){
				this.closePopup()
				this.noGroupUserList = this.noGroupUserList.filter(item=>{
					if (item.select){
						this.groupUserList.push(item)
					}
					return !item.select
				})

			},


			selectItem(item,index){
				item.select = !item.select
				this.$set(this.noGroupUserList,index,item)
			},


			getNoGroupUserList(){
				this.$api.service.getNoGroupUserList().then(res=>{
					console.log(res.data)
					this.noGroupUserList = res.data.data
				})
			},


			getGroupUserList(id){
				this.$api.service.getGroupUserList({
					groupId:id
				}).then(res=>{
					console.log(res.data)
					this.groupUserList = res.data.data
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			openSelectMember(){
				this.$refs.selectPersonPopup.open()
			},
			closePopup(){
				this.$refs.selectPersonPopup.close()
			}

		}
	}
</script>

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