LSM_OIL_SITE/pages/staff/editStaff/addUser.vue

<template>
	<view class="page-content my-bg">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">员工管理</block>
		</cu-custom>
		<view class="margin radius">
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input :maxlength="8" @input="getChinese" :value="userInfo.cUserName" @blur="showChinese" placeholder="请输入姓名" name="input" />
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input type="number" v-model="userInfo.phone" placeholder="请输入手机号" name="input" />
				</view>

				<view class="cu-form-group text-right">
					<view class="title">权限设置</view>
					<view class>请选择以下权限</view>
				</view>
				<view class=" padding bg-white ">
					<checkbox-group @change="checkboxChange" class="flex flex-wrap justify-between">
						<view class="basis-sm margin-bottom-sm" v-for="(item,index) in checkbox" :key="index">
							<checkbox @tap="item.checked=!item.checked" class="round red" :class="item.checked?'checked':''" :checked="item.checked?true:false"
							 :value="item.value"></checkbox>
							<text class="padding-left-xs">{{item.name}}</text>
						</view>
					</checkbox-group>
				</view>
			</form>
			<view class="padding-top">
				<view class="text-lg">添加说明</view>
				<view class="padding-top-sm text-sm text-grey">
					<view class="margin-bottom-xs">1、员工添加成功后，系统会向该员工发送一条短信，短信中包含了云站的识别码。</view>
					<view class="margin-bottom-xs">2、用户在收到短信后，需要关注“星油云站公众号”，进入小程序，输入云站编码后，根据页面要求输入对应的手机号，姓名，身份证信息，与管理员添加的信息一致方可绑定成功。</view>
					<view class>3、绑定成功后无需再次登录操作。</view>
				</view>
			</view>
		</view>
		<view class="margin-left margin-right padding-lg bottom-bg">
			<button class="bg-main-oil round" @tap="saveInfo">保存</button>
		</view>
	</view>
</template>

<script>
	import staffApi from '@/api/staff.js'
	export default {
		data() {
			return {
				tempUid: uni.getStorageSync('tempUid'),
				checkbox: [],
				userInfo: {},
				mainURL: this.global.mainURL,
				authList: [],
				lastAuthList: []
			}
		},
		created() {
			this.getAllMenu()
			if (this.tempUid.type === 'edit') {
				setTimeout(() => {
					this.getUserInfo()
				}, 200);
			}
		},
		methods: {
			showChinese() {
				const reg = /[\u4e00-\u9fa5]/g
				var names = this.userInfo.cUserName.match(reg);
				this.userInfo.cUserName = names.join("")
				if (names) {
					this.$set(this.userInfo, 'cUserName', names.join(""))
				}
			},
			// 中文提取
			getChinese(e) {
				var value = e.target.value
				console.log('e-target-value', value)
				if (value !== null && value !== '') {
					const reg = /[\u4e00-\u9fa5]/g
					var names = value.match(reg);
					// console.log(names)
					// this.$set(this.userInfo, 'cUserName', names.join(""))
					if (names) {
						this.$set(this.userInfo, 'cUserName', names.join(""))
					}

					console.log('v-model-name', this.userInfo.cUserName)
				}


			},
			calcMenuList() {
				this.checkbox.forEach(item => {
					console.log(item.checked)
					if (item.checked) {
						this.lastAuthList.push(item.value)
					}
				})
				console.log('计算出来的', this.lastAuthList)
			},
			checkboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			updateUser(data4) {
				staffApi.updateUser(data4).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2500);
					}
				})
			},
			addUser(data4) {
				staffApi.addOilUser(data4).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2500);
					}
				})
			},
			saveInfo() {
				if (!this.userInfo.cUserName) {
					uni.showToast({
						title: '请输入员工姓名',
						icon: 'none'
					})
					return false
				}
				if (!this.userInfo.phone) {
					uni.showToast({
						title: '请输入员工手机号',
						icon: 'none'
					})
					return false
				}
				this.calcMenuList()
				const data4 = {
					cUserId: this.userInfo.cUserId,
					cUserName: this.userInfo.cUserName,
					phone: this.userInfo.phone,
					menuIdLst: this.lastAuthList,
					pushState: 1,
					pushProcedureState: 1
				}
				if (this.tempUid.type === 'add') {
					this.addUser(data4)
				} else if (this.tempUid.type === 'edit') {
					this.updateUser(data4)
				}
			},
			getAllMenu() {
				staffApi.getOilSiteAllMenu(this.tempUid.id).then(res => {
					if (res.code === 20000) {
						var auths = []
						var temp = res.data
						temp.forEach(item => {
							auths.push({
								value: item.menuId,
								checked: false,
								name: item.menuName
							})
						})
						this.checkbox = auths
					}
				})
			},
			getUserInfo() {
				staffApi.findUserAuthById(this.tempUid.id).then(res => {
					if (res.code === 20000) {
						this.userInfo = res.data
						this.authList = res.data.authList
						if (this.authList && this.authList.length > 0) {
							console.log('已有权限', this.authList)
							this.authList.forEach((auth, index) => {
								this.checkbox.forEach(item => {
									if (auth.menuId === item.value) {
										this.$set(item, 'checked', true)
									}
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
</style>