pco/app/pages/user/addUser.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title" v-if="!form.id">添加用户</text>
				<text class="title" v-else>编辑用户</text>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>用户名：</view>
				<view class="r">
					<u-input placeholder="用户名" v-model="form.name">
					</u-input>
				</view>
			</view>
			<view class="item" v-if="!form.id">
				<view class="l"><text style="color: red;">*</text>密码：</view>
				<view class="r">
					<u-input placeholder="密码" type="password" v-model="form.password">
					</u-input>
				</view>
			</view>
			<view class="item" v-if="!form.id">
				<view class="l"><text style="color: red;">*</text>再输一次：</view>
				<view class="r">
					<u-input placeholder="再输一次" type="password" v-model="form.againPassword">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>角色：</view>
			</view>
			<view class="item">
				<view class="l">
					<u-checkbox-group v-model="roleList">
						<u-checkbox :customStyle="{marginBottom: '10px',marginLeft:'10px'}"
							v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.id">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="item" v-show="form.id">
				<view class="l">
					状态：
				</view>
				<view class="r">
					<radio-group @change="statusChange">
						<label class="radio">
							<radio value="1"  :checked="form.status==1" />可用
						</label>
						<label class="radio" style="margin-left: 20rpx;">
							<radio value="2"  :checked="form.status==2"/>禁用
						</label>
					</radio-group>
				</view>
			</view>

		</view>
		<u-button type="primary" text="确定" @click="saveFn"></u-button>
		<!-- ---------------------------------------------------------- -->
		<view class="bottom-safety"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				roleList: [],
				checkboxList: [],
				form: {
					id: '',
					status: 1,
					customerId: '',
					name: '',
					password: '',
					againPassword: '',
				},
				perList: []
			}
		},
		onLoad(options) {
			this.form.id = options.id;
			this.form.name = options.name;
			this.form.status = options.status;
			this.roleList = options.roleId ? options.roleId.split(',').map(id => parseInt(id)) : [];
			console.log(this.roleList)
			let info = uni.getStorageSync('userInfo');
			let customerId = info.customerId;
			this.form.customerId = customerId;
			this.getRoleList();
		},
		onShow() {
			this.perList = uni.getStorageSync('perList');
		},
		onBackPress() {
			this.$common.to('/pages/user/user-index');
			return true;
		},
		methods: {
			statusChange(e) {
				this.form.status = e.detail.value
			},
			getRoleList() {
				this.$api.getRoleList({
					customerId: this.form.customerId
				}).then(resp => {
					this.checkboxList = resp.data;
				})
			},
			saveFn() {
				if (!this.form.name) {
					this.$common.toast('请填写用户名');
					return;
				}
				if (!this.form.password &&!this.form.id) {
					this.$common.toast('请填写密码');
					return;
				}
				if (this.form.password != this.form.againPassword) {
					this.$common.toast('两次密码不一致');
					return;
				}
				if (this.roleList.length == 0) {
					this.$common.toast('请选择用户角色');
					return;
				}
				this.form.roleId = this.roleList.join(',');
				if (this.form.id) {
					this.$api.editCustomerAdmin(this.$common.removeNull(this.form)).then(resp => {
						if (resp.code == 200) {
							this.$common.to('/pages/user/addUserSuccess')
						}
					})
				} else {
					this.$api.addCustomerAdmin(this.$common.removeNull(this.form)).then(resp => {
						if (resp.code == 200) {
							this.$common.to('/pages/user/addUserSuccess')
						}
					})
				}
			},
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.hs-item {
		text-align: center;
	}

	.item-line {
		color: #a2a2a2;
		padding: 5px 0 10px 29px;
		border-bottom: 1px solid #E5E5E5;
	}

	.hj {
		padding: 50rpx;
		font-size: 40rpx;
		color: red;
		font-weight: bold;
	}

	.save-btn {
		background-color: #ff4200;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 10rpx;
	}

	@import '@/common/common.scss'
</style>