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.
631 lines
24 KiB
631 lines
24 KiB
<template>
|
|
<view class="employ-manage">
|
|
<view class="em-content">
|
|
<view class="ec-search">
|
|
<view>
|
|
<image v-if="!isInputFocus" mode="aspectFit" src="/static/images/icon/search.png"></image>
|
|
<input
|
|
@blur="iptOnBlur"
|
|
@focus="iptOnFocus"
|
|
@confirm="confirmSearch"
|
|
confirm-type="search"
|
|
type="text"
|
|
placeholder="请输入要搜索的员工名字"
|
|
v-model="searchTxt"
|
|
/>
|
|
<image @click="cleanIpt" v-if="isInputFocus" mode="aspectFit" src="/static/images/icon/round_close.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="ec-info">
|
|
<view class="ei-add" @click="addEmployee">
|
|
<image mode="aspectFit" src="/static/images/icon/round_add.png"></image>
|
|
<text>添加员工</text>
|
|
</view>
|
|
<view class="ei-tip" @click="toReview" v-if="employeeInfo.count>0">
|
|
<text>待审核员工</text>
|
|
<view>
|
|
<view v-if="employeeInfo.count>0">{{employeeInfo.count || 0}}</view>
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="ei-user" v-if="employeeInfo.is_super == 1">
|
|
<view>
|
|
<image mode="aspectFill" :src="employeeInfo.admin.avatar_url || ''"></image>
|
|
<view class="eu-name">{{employeeInfo.admin.actual_name || '-'}}</view>
|
|
<view class="eu-tag">超级管理员</view>
|
|
</view>
|
|
<view hover-class="hover-active" @click="changeAdmin">更换</view>
|
|
</view>
|
|
</view>
|
|
<view class="ec-employees">
|
|
<view class="ec-header">
|
|
<view>
|
|
<image mode="aspectFit" src="/static/images/icon/people.png"></image>
|
|
<view>员工总数 <text>{{employeeInfo.total || 0}}</text></view>
|
|
</view>
|
|
<view>
|
|
<text :class="[isFilter?'active':'']" @click="toFilter">筛选</text>
|
|
<text v-if="!isDeleteOperate" @click="openDeleteOperate">删除</text>
|
|
<text class="active" v-if="isDeleteOperate" @click="cancelDeleteOperate">取消</text>
|
|
</view>
|
|
</view>
|
|
<view class="ec-lists">
|
|
<view class="el-item" v-for="k in employeeInfo.employee" :key="k.id" @click="toAuthority(k)">
|
|
<view>
|
|
<image :class="['ei-icon', k.isDelete?'active':'']" mode="aspectFit" :src="k.isDelete?'/static/images/icon/selected_987.png':''" v-if="isDeleteOperate"></image>
|
|
<image class="ei-avatar" mode="aspectFill" :src="k.avatar_url || ''"></image>
|
|
<view class="ei-info">
|
|
<view>{{k.actual_name || '-'}}</view>
|
|
<view class="ei-author">
|
|
<view>权限：</view>
|
|
<view>
|
|
<view
|
|
class="tag-active"
|
|
v-if="isAllAuthor({
|
|
adminLs: k.extension.permission.menu,
|
|
localLs: permissionArr,
|
|
})"
|
|
>全部权限</view>
|
|
<block v-else >
|
|
<block v-for="e in k.extension.permission.menu" :key="e">
|
|
<view v-if="!!permissionObj[e]">{{permissionObj[e] || ''}}</view>
|
|
</block>
|
|
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ec-fixed-bot" v-if="isDeleteOperate">
|
|
<view @click="selectAllDelete">
|
|
<image :class="isSelectedAllDelete?'img-active':''" :src="isSelectedAllDelete?'/static/images/icon/selected_987.png':''"></image>
|
|
<text>全选</text>
|
|
</view>
|
|
<view hover-class="hover-active" @click="employeeDelete">移除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { API } from '../../../js/api';
|
|
import { servers } from '../../../js/server';
|
|
import util from '../../../utils/util'
|
|
import { mapState, mapGetters } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapGetters([ 'permissionArr' ]),
|
|
...mapState([ 'permissionObj', 'brandInfo', ]),
|
|
isFilter(){
|
|
let { filterInfo } = this;
|
|
return !!filterInfo.meun || !!filterInfo.store
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
isDeleteOperate: false, // 是否展开删除员工操作
|
|
isSelectedAllDelete: false, // 全选删除
|
|
isInputFocus: false,
|
|
|
|
searchTxt: '', // 搜索key
|
|
filterInfo: { // 筛选条件
|
|
meun: '', // 小程序权限
|
|
store: '' // 店铺筛选
|
|
},
|
|
|
|
employeeInfo: {
|
|
admin: {}, // 超管信息
|
|
employee: [], // 员工列表
|
|
count: 0, // 待审核人数
|
|
total: 0 // 员工总数
|
|
},
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
onShow(){
|
|
this.refreshEmployList();
|
|
},
|
|
methods: {
|
|
// 是否全部权限
|
|
isAllAuthor({
|
|
adminLs = [],
|
|
localLs = []
|
|
}){
|
|
if(!localLs || !adminLs || !adminLs.length || !localLs.length)return false;
|
|
let _unAuthorLs = localLs.filter(ele=>!adminLs.includes(+ele.key))
|
|
return !_unAuthorLs.length
|
|
},
|
|
// 移除员工
|
|
employeeDelete: util.debounce(function(){
|
|
let _employeeList = this.employeeInfo.employee || [];
|
|
console.log(_employeeList);
|
|
let _deleteArr = _employeeList.filter(ele=>{
|
|
if(ele.isDelete)return ele;
|
|
})
|
|
// if(_deleteArr.length<=0)return util.showNone('请选择要删除的员工！');
|
|
let ids = _deleteArr.map(ele=>ele.id);
|
|
util.showModal({
|
|
title: '提示',
|
|
content: '移除后，该员工将无法登录和使用欧轩智能商家助手小程序',
|
|
showCancel: true,
|
|
success: sucRes=>{
|
|
if(sucRes.confirm){
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.employee.employeeDelete,
|
|
data: {
|
|
id: ids.join(',')
|
|
},
|
|
isDefaultGet: false
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
if(res.data.code == 0){
|
|
this.cancelDeleteOperate();
|
|
util.showNone(res.data.message || '操作成功！');
|
|
setTimeout(_=>{
|
|
this.refreshEmployList()
|
|
},1200)
|
|
}else{
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
})
|
|
.catch(util.hideLoad)
|
|
}
|
|
}
|
|
})
|
|
|
|
},300,300),
|
|
// 确认搜索
|
|
confirmSearch(){
|
|
let { searchTxt } = this;
|
|
this.$nextTick(_=>this.refreshEmployList())
|
|
},
|
|
// 清除搜索输入
|
|
cleanIpt(){
|
|
this.searchTxt = '';
|
|
},
|
|
|
|
iptOnBlur(){
|
|
this.isInputFocus = false;
|
|
},
|
|
iptOnFocus(){
|
|
this.isInputFocus = true;
|
|
},
|
|
// 移除操作-> 全选
|
|
selectAllDelete(){
|
|
let { isSelectedAllDelete } = this;
|
|
this.isSelectedAllDelete = !isSelectedAllDelete;
|
|
this.deleteSelect({
|
|
isAll: true,
|
|
allBol : !isSelectedAllDelete
|
|
})
|
|
},
|
|
// 取消移除操作
|
|
cancelDeleteOperate(){
|
|
this.isDeleteOperate = false;
|
|
this.isSelectedAllDelete = false;
|
|
this.deleteSelect({
|
|
isAll: true,
|
|
allBol : false
|
|
})
|
|
},
|
|
// 打开移除操作
|
|
openDeleteOperate(){
|
|
this.isDeleteOperate = true;
|
|
},
|
|
// 刷新列表
|
|
refreshEmployList(){
|
|
let { searchTxt, filterInfo } = this;
|
|
this.getEmployeeList({
|
|
key: searchTxt,
|
|
stadium_id: filterInfo.store,
|
|
menu: filterInfo.meun
|
|
})
|
|
},
|
|
|
|
// 获取员工列表
|
|
getEmployeeList({
|
|
stadium_id='',
|
|
menu='',
|
|
key='',
|
|
}){
|
|
// util.showLoad();
|
|
servers.get({
|
|
url: API.employee.employeeList,
|
|
data: {
|
|
stadium_id,
|
|
menu,
|
|
key,
|
|
},
|
|
isDefaultGet: false,
|
|
})
|
|
.then(res=>{
|
|
// util.hideLoad();
|
|
let _data = res.data;
|
|
if(_data.code == 0){
|
|
this.employeeInfo = _data.data;
|
|
}else{
|
|
util.showNone(_data.message || '加载失败！');
|
|
}
|
|
})
|
|
// .catch(util.hideLoad)
|
|
},
|
|
// 跳转邀请二维码
|
|
addEmployee(){
|
|
util.routeTo(`/pages/employee/invite_code/invite_code`, 'nT');
|
|
},
|
|
// 更换超管
|
|
changeAdmin(){
|
|
let { brandInfo } = this;
|
|
util.routeTo(`/pages/employee/change_admin/change_admin?brand_id=${brandInfo.brand.id}`, 'nT');
|
|
},
|
|
// 筛选
|
|
toFilter(){
|
|
let { filterInfo } = this;
|
|
util.routeTo(`/pages/employee/authority_filter/authority_filter?filterInfo=${util.jsonStr(filterInfo)}`, 'nT');
|
|
},
|
|
// authority_filter 页面调用筛选
|
|
changeFilter(filterInfo){
|
|
this.filterInfo = filterInfo;
|
|
this.$nextTick(_=>this.refreshEmployList());
|
|
},
|
|
// 员工修改权限
|
|
toAuthority(item){
|
|
let { isDeleteOperate, brandInfo } = this;
|
|
if(isDeleteOperate)return this.deleteSelect({ item });
|
|
console.log(brandInfo);
|
|
console.log(item);
|
|
let _query = {
|
|
type: 'singleEdit',
|
|
brand_id: brandInfo.brand.id,
|
|
userIDS: [item.id],
|
|
userInfo: {
|
|
id: item.id,
|
|
name: item.actual_name,
|
|
avatar_url: item.avatar_url,
|
|
mobile: item.mobile,
|
|
},
|
|
tags: item.extension.permission.tags || [], // 门店权限
|
|
menu: item.extension.permission.menu || [], // 小程序权限
|
|
}
|
|
|
|
util.routeTo(`/pages/employee/authority_select/authority_select?query=${util.jsonStr(_query)}`, 'nT');
|
|
},
|
|
//删除选择
|
|
deleteSelect({ item={}, isAll=false, allBol=false}){
|
|
let employee = this.employeeInfo.employee || [];
|
|
let _employee = employee.slice();
|
|
_employee.forEach((e,i)=>{
|
|
if(isAll)return e.isDelete = allBol
|
|
if(e.id == item.id){
|
|
if(e.isDelete)this.isSelectedAllDelete = false;
|
|
e.isDelete = e.isDelete ? false : true;
|
|
}
|
|
})
|
|
this.employeeInfo.employee = _employee;
|
|
this.$nextTick(_=>this.$forceUpdate());
|
|
},
|
|
toReview(){
|
|
util.routeTo(`/pages/employee/review_list/review_list`, 'nT');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "../../../style/public.scss";
|
|
.em-content{
|
|
padding-bottom: 100upx;
|
|
padding-bottom: calc( 100upx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc( 100upx + env(safe-area-inset-bottom));
|
|
.ec-search{
|
|
margin-bottom: 16upx;
|
|
height: 144upx;
|
|
background-color: #fff;
|
|
@include centerFlex(center);
|
|
>view{
|
|
padding: 0 28upx;
|
|
height: 92upx;
|
|
width: 702upx;
|
|
border-radius: 10upx;
|
|
background-color: #f2f2f7;
|
|
@include centerFlex(space-between);
|
|
>input{
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
}
|
|
>image{
|
|
margin-right: 20upx;
|
|
flex-shrink: 0;
|
|
width: 40upx;
|
|
height: 40upx;
|
|
}
|
|
>input+image{
|
|
margin-left: 20upx;
|
|
margin-right: 0;
|
|
flex-shrink: 0;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
}
|
|
}
|
|
}
|
|
.ec-info{
|
|
margin-bottom: 24upx;
|
|
padding: 0 24upx;
|
|
background-color: #fff;
|
|
.ei-add{
|
|
height: 220upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(center);
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-right: 38upx;
|
|
width: 84upx;
|
|
height: 84upx;
|
|
}
|
|
>text{
|
|
font-weight: 500;
|
|
font-size: 32upx;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
.ei-tip{
|
|
height: 132upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(space-between);
|
|
>text{
|
|
font-size: 32upx;
|
|
color: #333;
|
|
}
|
|
>view{
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 30upx;
|
|
width: 50upx;
|
|
height: 50upx;
|
|
border-radius: 50%;
|
|
line-height: 50upx;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
color: #fff;
|
|
background-color: #ea5061;
|
|
@include textHide(1);
|
|
}
|
|
>image{
|
|
flex-shrink: 0;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
}
|
|
}
|
|
.ei-user{
|
|
height: 140upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
@include centerFlex(flex-start);
|
|
>image{
|
|
margin-right: 20upx;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
border-radius: 10upx;
|
|
}
|
|
.eu-name{
|
|
max-width: 40%;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
.eu-tag{
|
|
display: inline-block;
|
|
margin-left: 24upx;
|
|
padding: 0 6upx;
|
|
height: 32upx;
|
|
line-height: 32upx;
|
|
border-radius: 6upx;
|
|
font-size: 22upx;
|
|
color: $themeColor;
|
|
background-color: rgba(0, 152, 116, .2);
|
|
}
|
|
}
|
|
&+view{
|
|
flex-shrink: 0;
|
|
width: 140upx;
|
|
height: 64upx;
|
|
line-height: 60upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
border: 2upx solid $themeColor;
|
|
font-size: 32upx;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ec-employees{
|
|
background-color: #fff;
|
|
.ec-header{
|
|
padding: 0 24upx;
|
|
height: 132upx;
|
|
border-bottom: 2upx solid #E1E1E1;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
flex-grow: 1;
|
|
@include centerFlex(flex-start);
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-right: 12upx;
|
|
margin-bottom: -4upx;
|
|
width: 48upx;
|
|
height: 48upx;
|
|
}
|
|
>view{
|
|
flex-grow: 1;
|
|
font-size: 32upx;
|
|
color: #9c9c9f;
|
|
@include textHide(1);
|
|
>text{
|
|
margin-left: 10upx;
|
|
color: #1a1a1a;
|
|
}
|
|
}
|
|
}
|
|
&+view{
|
|
font-size: 28upx;
|
|
color: #1A1A1A;
|
|
>text{
|
|
margin: 0 16upx;
|
|
}
|
|
.active{
|
|
color: $themeColor !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ec-lists{
|
|
padding: 0 24upx;
|
|
background-color: #fff;
|
|
.el-item{
|
|
padding: 30upx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&:not(:last-child){
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
}
|
|
>image{
|
|
margin-top: 22upx;
|
|
flex-shrink: 0;
|
|
margin-right: 20upx;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
>view{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
.ei-icon{
|
|
margin-top: 20upx;
|
|
flex-shrink: 0;
|
|
width: 40upx;
|
|
height: 40upx;
|
|
border: 2upx solid #d8d8d8;
|
|
border-radius: 50%;
|
|
&.active{
|
|
border: 2upx solid transparent;
|
|
}
|
|
}
|
|
.ei-avatar{
|
|
flex-shrink: 0;
|
|
margin: 0 20upx;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
border-radius: 10upx;
|
|
}
|
|
.ei-info{
|
|
flex-grow: 1;
|
|
>view:first-child{
|
|
margin-bottom: 2upx;
|
|
font-size: 32upx;
|
|
line-height: 44upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
.ei-author{
|
|
display: flex;
|
|
|
|
>view{
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
margin-right: 4upx;
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9c9c9f;
|
|
}
|
|
&+view{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
>view{
|
|
flex-shrink: 0;
|
|
margin-right: 28upx;
|
|
margin-bottom: 20upx;
|
|
padding: 0 8upx;
|
|
height: 32upx;
|
|
line-height: 28upx;
|
|
font-size: 22upx;
|
|
border-radius: 6upx;
|
|
border: 2upx solid #d8d8d8;
|
|
color: #9C9C9F;
|
|
}
|
|
.tag-active{
|
|
border: 2upx solid $themeColor !important;
|
|
color: $themeColor !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ec-fixed-bot{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
padding-left: 24upx;
|
|
padding-right: 44upx;
|
|
padding-top: 8upx;
|
|
padding-bottom: 8upx;
|
|
padding-bottom: calc( 8upx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc( 8upx + env(safe-area-inset-bottom));
|
|
border-top: 2upx solid #D8D8D8;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
>image{
|
|
margin-right: 22upx;
|
|
vertical-align: middle;
|
|
width: 40upx;
|
|
height: 40upx;
|
|
border-radius: 50%;
|
|
border: 2upx solid #D8D8D8;
|
|
}
|
|
.img-active{
|
|
border: 2upx solid transparent !important;
|
|
}
|
|
>text{
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9c9c9f;
|
|
}
|
|
}
|
|
&+view{
|
|
width: 210upx;
|
|
height: 80upx;
|
|
line-height: 76upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
border: 2upx solid #ea5061;
|
|
color: #ea5061;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|