jp-youdian-Inspection/pages/team/teamAdd.vue

<template>
	<view>
		<u-navbar title="成员信息" title-color="#101010">
			
			
		</u-navbar>
		<view class="list">
			<view class="item">
				<view class="name">
					头像

				</view>
				<view class="value">

					<view class="goto " @click="uploadPhoto">
						<view class="photo">

							<img class="img" :src="addInfo.image" v-if="addInfo.image" alt="">
						</view>


						<u-icon name="arrow-right" style="margin-left: 8rpx;" size="24" color="#BBBBBB"></u-icon>
					</view>

				</view>
			</view>


			<view class="item">
				<view class="name">
					<span>*</span>成员姓名

				</view>
				<view class="value">
					<u-input v-model="addInfo.name" placeholder="请输入成员姓名"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="name">
					<span>*</span>登录手机号

				</view>
				<view class="value">
					<u-input v-model="addInfo.phone" placeholder="请输入登录手机号"></u-input>
				</view>
			</view>
			<view class="item">
				<view class="name">
					登录密码

				</view>
				<view class="value">
					<u-input placeholder="不填写默认123456" v-model="addInfo.password"></u-input>
				</view>
			</view>


		</view>


		<view class="list checkboxMain ">
			
			<u-checkbox-group >
						<u-checkbox 
							 @change="memberListchange"
							v-model="item.checked" 
							v-for="(item, index) in codeList" :key="index" 
							:name="item.value"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
					
			<!-- <u-radio-group v-model="roleId">
				<view class="radiolist">

					<view class="radioitem" v-for="(item, index) in codeList">
						<u-radio :key="index" :name="item.value">
							{{item.name}}
						</u-radio>
					</view>
				</view>
			</u-radio-group> -->
		</view>


		<view class="floating-button">
			<view class="button" @click="submit">

				提交
			</view>

		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTeam.js'

	export default {
		data() {
			return {
				id:"",
				codeList: [],
				roleId: "",
				addInfo: {
					image: "",
					roleName: "XJ"
				}
			};
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id
				
			}
			
			
			this.findByCatalogName({
				catalogName: '巡检角色'
			}, "codeList")
		},
		methods: {
			del() {
			
				uni.showModal({
					title:"提示",
					content: "请确认是否删除用户",
				
					success: (res1) => {
						if (res1.confirm) {
							this.delApi()
						} else if (res1.cancel) {
							//('用户点击取消');
						}
					}
				})
				
				
			},
			delApi() {
			
				API.delUser({
					id:this.id
				}).then((res) => {
			
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			},
			getInfo() {

				API.teamUser({
					id:this.id
				}).then((res) => {

					var info=res.data.user
					this.addInfo.id=info.id
					this.addInfo.image=info.image
					this.addInfo.name=info.name
					this.addInfo.phone=info.phone
					this.addInfo.roleId=info.role
					this.roleId=info.role
					//this.addInfo.id=info.id
					this.codeList.forEach(item=>{
						if(this.roleId.indexOf(item.value)!=-1){
							item.checked=true
						}
					})
					this.$forceUpdate()
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			findByCatalogName(obj, listName) {

				API.findByCatalogName(obj).then((res) => {

					var arr = res.data.dataDictionaryList

					this.codeList= arr
					this.codeList.forEach(item=>{
						item.checked=false
					})
					if(this.id){
						this.getInfo()
					}

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			uploadPhoto() {
				let _self = this;

				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};

				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0];

						var filePath = res.tempFilePaths[0]

						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/myTab/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})

						this.saveRecordConfirmMethod(fileData);




					}
				});
			},
			saveRecordConfirmMethod(fileData) {

				var token = this.jphelp.getToken()

				uni.uploadFile({
					url: process.jphelp.BASE_URL + "uploadPicture", //仅为示例，非真实的接口地址
					filePath: fileData,
					header: {
						'Authorization': token,
						//'Content-Type': 'multipart/form-data',
						'X-Requested-With': 'XMLHttpRequest',
						//	'content-type': 'multipart/form-data'
					},
					name: 'photoFile',
					formData: {
						subFolder: "headimg"
					},
					success: (uploadFileRes) => {


						var obj = JSON.parse(uploadFileRes.data)
						//.log(obj);
						//this.src = obj.data;

						this.addInfo.image = obj.data;
						this.$forceUpdate()
						//this.updatePersonInformation();
						// uni.hideLoading();
					}
				});
			},
			memberListchange(e){
				console.log(e)
				this.$forceUpdate()
			},
			submit() {
				if (!this.addInfo.name) {
					uni.showToast({
						title: "请输入成员姓名"
					})
					return
				}
				if (!this.addInfo.phone) {
					uni.showToast({
						title: "请输入登录手机号"
					})
					return
				}
				var sz=[]
				this.codeList.forEach(item=>{
					if(item.checked){
						sz.push(item.value)
					}
				})
				this.roleId=sz.join()
				if (!this.roleId) {
					uni.showToast({
						title: "请选择成员角色"
					})
					return
				}
				this.addInfo.roleId=this.roleId

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.adduser(this.addInfo).then((res) => {

					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})

					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})


			},
		}
	}
</script>

<style lang="scss">
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);

		margin: 20rpx 0;

		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 40%;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}

				white-space: pre;
			}

			.value {
				font-size: 32rpx;
				width: 60%;
				display: flex;
				justify-content: space-between;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

			}
		}

		.item-plus {
			flex-direction: column;

			.value,
			.name {
				width: 100%;
			}

			.name {
				padding-bottom: 32rpx;
			}
		}
	}

	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;

		width: 100%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}

	.goto {
		display: flex;
		align-items: center;
		color: rgba(119, 119, 119, 1);
		width: 100%;
		justify-content: space-between;

		.photo {
			border-radius: 50px;
			background-color: rgba(229, 229, 229, 1);
			height: 80rpx;
			width: 80rpx;
			overflow: hidden;

			.img {
				width: 100% !important;
				height: 100% !important;
			}
		}

	}
	
	.radiolist{
		.radioitem{
			padding: 24rpx;
			display: flex;
			width: 300%;
			align-items: center;
			justify-content: space-between;
		}
		.radioitem:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}
	}
	.checkboxMain{
		padding: 20rpx;
	}
	.rightslot{
		
		margin-right: 16rpx;
		color: red;
	}
	   ::v-deep .u-checkbox{
		   display: flex;
	   }
	  ::v-deep .u-checkbox-group{
		   display: block;
	  }
</style>