OpenDoorManageMini/pages/system/addEmployee.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" 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="number" v-model="params.tel"
							class="u-slot-value"></input>
					</u-cell>
					<u-cell title="邮箱">
						<input slot="value" placeholder="请输入邮箱" type="" v-model="params.mail"
							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="角色" :isLink="true" @click="popShow=true">
						<text slot="value">{{roleName}}</text>
					</u-cell>
					<u-cell title="备注" :border="false">
						<input slot="value" placeholder="请输入备注" type="" v-model="params.remark"
							class="u-slot-value"></input>
					</u-cell>
				</u-cell-group>
			</view>
			<view style="color: red;line-height: 60rpx;text-align: right;padding-right: 20rpx;">
				{{err}}
			</view>
			<view class="btn safe-bottom">
				<xbutton round="82rpx" size="large" @click="submit">创建</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 {
		save,
		roleList
	} from "@/api/system/employee.js"
	export default {
		data() {
			return {
				params: {
					"name": "",
					"tel": "",
					"mail": "",
					"password": "",
					"roleIds": "",
					"account": "",
					"remark":""
				},
				roleName: '',
				popShow: false,
				roleList: [],
				err: ''
			}
		},

		onLoad(o) {
			this.getRoleList()
		},

		methods: {
			getRoleList() {
				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 = [];
					}
				})
			},

			//弹框提交
			submit() {
				save(this.params).then(res => {
					this.$modal.msg('保存成功')
					this.$tab.navigateBack()
					this.err = ''
				}).catch(err => {
					if (err.length > 15) {
						this.err = '请重试!'
					} else {
						this.err = err.substr(0, 12)
					}
				})
			},

			//滚动到底加载更多
			onReachBottom() {
				if (this.noMore) return
				this.page++
				this.getPointList()
			},

			//禁用
			stop() {
				this.popShow = true
			},

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

			//弹框提交
			popSubmit() {
				this.popClose()
				let nameVal = []
				let idVal = []
				this.roleList.forEach(i => {
					if (i.checked) {
						nameVal.push(i.name)
						idVal.push(i.id)
					}
				})
				this.roleName = nameVal.join(',')
				this.params.roleIds = idVal
			},

			checkboxClick(name) {
				this.roleList[name].checked = !this.roleList[name].checked
			}
		}
	}
</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;
	}

	.popup-content {
		padding: 36rpx 24rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;

		input {
			border: 1rpx solid #999;
			border-radius: 6rpx;
			width: 530rpx;
			padding: 0 24rpx;
		}

		&.edit-point {
			flex-direction: column;
			align-items: flex-start;

			.edit-point-item {
				width: 100%;
				padding-left: 170rpx;
				position: relative;

				&+.edit-point-item {
					margin-top: 12rpx;
				}

				>view:nth-child(1) {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

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

	.pop-content {
		padding: 24rpx;

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