LSM_OIL_SITE/packageStaff/pages/staff/editStaff/editStaff.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">
			<view class="bg-img margin-bottom user-info-container radius flex align-center" :style="'background-image: url('+mainURL+'login-bg.png)'">
				<view class="placeholder">
					<view class="cu-list no-border menu-avatar ">
						<view class="cu-item ">
							<view class="cu-avatar round lg" :style="'background-image: url('+mainURL+'default-avator.png)'"></view>
							<view class="content">
								<view class="text-white">{{userInfo.cUserName}}</view>
								<view class="text-white flex" @tap="callStaff(userInfo.phone)">
									<view class="text-cut text-df">
										<text class="cuIcon-phone text-white margin-right-xs"></text>
										<text>{{userInfo.phone}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="user-info">
					<view class="cu-list no-border menu-avatar ">
						<view class="cu-item no-border">
							<view class="cu-avatar round lg" :style="'background-image: url('+mainURL+'default-avator.png)'"></view>
							<view class="content">
								<view class="text-white">{{userInfo.cUserName}}</view>
								<view class="text-white flex" @tap="callStaff(userInfo.phone)">
									<view class="text-cut text-df">
										<text class="cuIcon-phone text-white margin-right-xs"></text>
										<text>{{userInfo.phone}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<form class="margin-top-lg ">
				<view class="cu-form-group radius 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>
		<view class="margin-left margin-right padding-lg bottom-bg">
			<button class="bg-main-oil round margin-bottom" @tap="saveInfo">保存</button>
			<button class="oil-main-btn-color text-white round" @tap="deleteUser">删除该员工</button>
		</view>
	</view>
</template>

<script>
	import StaffItem from '@/packageStaff/components/staff-item.vue'
import staffApi from '@/packageStaff/api/staff.js'
	export default {
		components: {
			StaffItem,
		},
		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: {
			callStaff(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			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()
						}, 1500);
					}
				})
			},
			deleteUser() {
				staffApi.unbindingUser({
					cUserId: this.tempUid.id
				}).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			addUser(data4) {
				staffApi.addUser(data4).then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							duration: 3000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			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 lang="scss">
	.placeholder {
		min-height: 160rpx;
		min-width: 100%;
	}

	.user-info-container {
		position: relative;
		min-width: 100%;
		color: #fff;

		.cu-item {
			background-color: transparent;
		}

		.user-info {
			position: absolute;
			top: 0;
			z-index: 1;
			min-width: 100%;


		}
	}

	.cu-list.menu-avatar>.cu-item::after {
		border: none;
	}
</style>