You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
8.1 KiB
309 lines
8.1 KiB
2 years ago
|
<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.userName}}</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.userName}}</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'
|
||
|
|
import oliSiteApi from '@/api/oli-site.js'
|
||
|
|
import oliUserApi from '@/api/oli-user.js'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
StaffItem,
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
// console.log(JSON.parse(option.staff))
|
||
|
|
this.userInfo = JSON.parse(option.staff)
|
||
|
|
console.log('这里是onload',this.userInfo )
|
||
|
|
this.getAllMenu()
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
itmeInfo:{},
|
||
|
|
tempUid: uni.getStorageSync('tempUid'),
|
||
|
|
checkbox: [],
|
||
|
|
userInfo: {},
|
||
|
|
mainURL: this.global.mainURL,
|
||
|
|
authList: [],
|
||
|
|
lastAuthList: [],
|
||
|
|
channelId:uni.getStorageSync('channelId'),
|
||
|
|
tempUser:uni.getStorageSync('tempUser')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
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) {
|
||
|
|
console.log(data4)
|
||
|
|
oliUserApi.addNewStaff(data4).then(res => {
|
||
|
|
if (res.code === 20000) {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
duration: 3000
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
deleteUser() {
|
||
|
|
console.log( this.tempUser.id)
|
||
|
|
oliUserApi.removeStaff({
|
||
|
|
id: this.tempUser.id,
|
||
|
|
channelId:this.channelId
|
||
|
|
}).then(res => {
|
||
|
|
if (res.code === 20000) {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
duration: 3000
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
addUser(data4) {
|
||
|
|
staffApi.addNewStaff(data4).then(res => {
|
||
|
|
if (res.code === 20000) {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
duration: 3000
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
saveInfo() {
|
||
|
|
if (!this.userInfo.userName) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入员工姓名',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!this.userInfo.phone) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入员工手机号',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
this.calcMenuList()
|
||
|
|
const data4 = {
|
||
|
|
id: this.userInfo.id,
|
||
|
|
userName: this.userInfo.userName,
|
||
|
|
phone: this.userInfo.phone,
|
||
|
|
roleIds: this.lastAuthList.toString(),
|
||
|
|
pushState: 1,
|
||
|
|
pushProcedureState: 1
|
||
|
|
}
|
||
|
|
console.log('未进入判断')
|
||
|
|
if (this.tempUid.type === 'add') {
|
||
|
|
this.addUser(data4)
|
||
|
|
console.log('这里是添加')
|
||
|
|
} else if (this.tempUid.type === 'edit') {
|
||
|
|
this.updateUser(data4)
|
||
|
|
console.log('这里是更新')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// console.log(this.userInfo.roleIds)
|
||
|
|
// let roleList = this.userInfo.roleIds.split(',')
|
||
|
|
// console.log(roleList)
|
||
|
|
oliSiteApi.getRoleList().then( (res)=>{
|
||
|
|
if (res.code === 20000) {
|
||
|
|
let _that = this
|
||
|
|
var auths = []
|
||
|
|
var temp = res.data
|
||
|
|
temp.forEach(item => {
|
||
|
|
auths.push({
|
||
|
|
value: item.id,
|
||
|
|
checked: false,
|
||
|
|
name: item.roleName
|
||
|
|
})
|
||
|
|
})
|
||
|
|
_that.checkbox = auths
|
||
|
|
_that.getUserInfo()
|
||
|
|
console.log('这里是chekcbox',_that.checkbox)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getUserInfo() {
|
||
|
|
console.log('这里是用户信息',this.userInfo)
|
||
|
|
let userMenu = this.userInfo.roleIds.split(','),
|
||
|
|
checkLisrt = this.checkbox
|
||
|
|
userMenu.forEach(item=>{
|
||
|
|
console.log(item)
|
||
|
|
checkLisrt.forEach(items=>{
|
||
|
|
if(item == items.value){
|
||
|
|
this.$set(items, 'checked', true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// console.log('二级',items)
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
console.log( this.checkbox)
|
||
|
|
// console.log(userMenu)
|
||
|
|
// staffApi.findUserAuthById(this.tempUid.id).then(res => {
|
||
|
|
// console.log('这里是获取信息',res.data)
|
||
|
|
// 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>
|