OpenDoorManageMini/pages/system/empDetail.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" :title="title"></u-navbar>
		<view class="content">
			<view class="list">
				<u-cell-group :border="false">
					<u-cell title="登录名">
						<input slot="value" placeholder="请输入登录名" type="text" v-model="params.account"
							class="u-slot-value"></input>
					</u-cell>
					<u-cell title="姓名">
						<input slot="value" placeholder="请输入姓名" type="text" v-model="params.name"
							class="u-slot-value"></input>
					</u-cell>
					<u-cell title="密码">
						<input slot="value" placeholder="请输入密码" type="password" v-model="params.password"
							class="u-slot-value"></input>
					</u-cell>
					<u-cell title="手机号">
						<input slot="value" placeholder="请输入手机号" type="number" v-model="params.tel"
							class="u-slot-value"></input>
					</u-cell>
					<!-- <u-cell title="邮箱">
						<input slot="value" placeholder="请输入邮箱" type="number" v-model="params.mail"
							class="u-slot-value"></input>
					</u-cell> -->
					<u-cell title="角色" :isLink="true" @click="popShow=true">
						<text slot="value">{{roleName}}</text>
					</u-cell>
					<u-cell title="备注">
						<input slot="value" placeholder="请输入备注" type="" v-model="params.remark"
							class="u-slot-value"></input>
					</u-cell>
					<u-cell title="可管理设备" :isLink="true" :url="`/pages/system/deviceManage?id=${params.userId}`">
					</u-cell>
					<u-cell title="支付宝" :isLink="true" @click="bindAli">
						<text slot="value">{{params.aliUserId?'已绑定':'未绑定'}}</text>
					</u-cell>
					<u-cell title="状态" :border="false">
						<view slot="value" @click="stop">
							{{params.status?'启用':'禁用'}}
						</view>
					</u-cell>

				</u-cell-group>
			</view>
			<view style="color: red;line-height: 60rpx;text-align: right;padding-right: 26rpx;">
				{{err}}
			</view>
			<view class="btn safe-bottom">
				<xbutton round="82rpx" size="large" @click="sure">保存</xbutton>
			</view>
		</view>

		<xpopup :show="popShow" @close="popClose" @confirm="popSubmit" :showBtn="true" title="选择角色">
			<view class="pop-content flex">
				<!-- 多选 -->
				<view class="u-page__tag-item" v-for="(item, index) in roleList" :key="item.name">
					<u-tag :text="item.name" :plain="!item.checked" type="warning" :name="index" @click="checkboxClick">
					</u-tag>
				</view>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		roleList,
		objByUserId,
		update
	} from "@/api/system/employee.js"
	import {
		showConfirm
	} from '@/utils/common'
	export default {

		data() {
			return {
				id: '',
				title: '',

				params: {
					name: "",
					tel: "",
					// "mail": "",
					password: "",
					roleIds: "",
					account: "",
					status: true,
					remark:""
				},
				popShow: false,
				roleList: [],
				err: ''
			}
		},

		computed: {
			roleName() {
				let val = []
				this.roleList.forEach(i => {
					if (i.checked) {
						val.push(i.name)
					}
				})
				return val.join(',')
			},
			roleIds() {
				let val = []
				this.roleList.forEach(i => {
					if (i.checked) {
						val.push(i.id)
					}
				})
				return val
			}
		},

		onLoad(o) {
			this.title = o.title;
			this.id = o.id;
		},

		async onShow() {
			await this.getRoleList()
			if (this.id) {
				await this.getDetail();
			}
		},

		methods: {
			getRoleList() {
				return new Promise((resolve, reject) => {
					roleList({
						page: {
							current: 1,
							size: 10000
						},
						sysId: uni.getStorageSync('sysId')
					}).then(res => {
						let data = res.data.records;
						if (data.length > 0) {
							let newData = data.map(i => {
								return {
									id: i.id,
									name: i.name,
									checked: false
								}
							})
							this.roleList = newData;
						} else {
							this.roleList = [];
						}
						resolve(data)
					}).catch(err => {
						reject(err)
					})
				})
			},

			getDetail(id) {
				objByUserId({
					userId: this.id
				}).then(res => {
					this.params = res.data;
					//反显角色
					this.roleList.forEach(i => {
						res.data.roleNames.forEach(j => {
							if (j == i.name) {
								i.checked = true
							}
						})
					})
				})
			},

			//禁用
			stop() {
				this.params.status = !this.params.status
			},

			//弹框关闭
			popClose() {
				this.popShow = false
			},

			//弹框提交
			popSubmit() {
				update({
					userId: this.params.userId,
					roleIds: this.roleIds
				}).then(res => {
					this.popClose()
				})
				setTimeout(() => {
					this.getDetail()
				}, 500)
			},

			checkboxClick(name) {
				this.roleList[name].checked = !this.roleList[name].checked
			},

			bindAli() {
				this.$tab.navigateTo('/pages/activeDevice/bindAliAcc?userId=' + this.id)
			},

			sure() {
				let params = {
					userId: this.params.userInfoId,
					name: this.params.name,
					tel: this.params.tel,
					account: this.params.account,
					roleIds: this.roleIds,
					status: this.params.status,
					remark:this.params.remark
				}
				update(params).then(res => {
					this.$modal.msg('保存成功')
					this.$tab.navigateBack()
				}).catch(err => {
					if (err.length > 15) {
						this.err = '请重试!'
					} else {
						this.err = err.substr(0, 12)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;

		.content {
			padding: 0rpx 13rpx 12rpx;
			overflow: hidden;

			.list {
				width: 100%;
				margin-top: 24rpx;
				background-color: #fff;
				padding: 0rpx 30rpx;
				border-radius: 12rpx;

				input {
					text-align: right;
				}

				/deep/ .u-cell__body {
					padding: 30rpx 6rpx;
				}
			}
		}
	}

	.empty {
		margin-top: 40%;
	}

	.btn {
		width: 100%;
		position: fixed;
		left: 0;
		padding: 0 24rpx;
	}

	.del-popup-content {
		padding: 36rpx 24rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.pop-content {
		padding: 24rpx;

		.u-page__tag-item {
			margin-right: 24rpx;
		}
	}
</style>