365 lines
9.3 KiB
Vue
365 lines
9.3 KiB
Vue
<template>
|
|
<view class="projectUser-box">
|
|
<u-search class="search-box" placeholder="输入昵称或手机号搜索" :show-action="true" v-model="searchValue" @custom="onSearchFn" @change="onSearchFn" @search="onSearchFn"></u-search>
|
|
<mescroll-body top="100" ref="mescrollRef" bottom="100" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="user-list">
|
|
<view class="user-item" v-for="item in userList" :key="item.userId">
|
|
<view class="user-left">
|
|
<view class="user-icon">
|
|
<u-icon name="account-fill" size="70"></u-icon>
|
|
</view>
|
|
<view class="user-main">
|
|
<view class="user-name">昵称：{{item.nickName}}</view>
|
|
<view class="user-phone">手机：{{item.phoneNumber}}</view>
|
|
<view class="user-role">角色：{{item.roleName}}</view>
|
|
<view class="user-role" >状态：
|
|
<text v-if="getUserStatus(item)" style="color: #ffaa00">未注册</text>
|
|
<text v-else style="color: #00AB40">正常</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="user-btn" v-if="item.roleKey!='root'">
|
|
<u-icon name="edit-pen" v-if="!getUserStatus(item)" size="50" color="#0066cc" @click="openEditMenu(item)" style="padding: 20rpx;"></u-icon>
|
|
<u-icon name="trash" size="50" color="#dc2727" @click="delUser(item)" style="padding: 20rpx;"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<view class="btn-list" @click="openAddUserModel">
|
|
<view class="btn-box">
|
|
添加项目用户
|
|
</view>
|
|
</view>
|
|
<u-modal v-model="addUserModalShow" title="添加用户" :show-cancel-button="true"
|
|
@confirm="$throttle(addUser, 500)">
|
|
<view class="slot-content">
|
|
<u-input v-model="userPhone" :focus="true" border type="text" placeholder="请输入用户手机号" ></u-input>
|
|
<!-- <view class="user-item">
|
|
<text>角色：</text>
|
|
<text @click="select">{{getRoleName(role)}}</text>
|
|
</view> -->
|
|
</view>
|
|
</u-modal>
|
|
<u-toast ref="uToast" />
|
|
<u-select v-model="roleModelShow" :list="roleList" @confirm="confirmRole"></u-select>
|
|
<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
export default {
|
|
mixins:[MescrollMixin],
|
|
data() {
|
|
return {
|
|
editMenuList:[
|
|
// {
|
|
// text: '项目移交',
|
|
// },
|
|
{
|
|
text: '修改成员角色',
|
|
}
|
|
],
|
|
editMenuShow:false,
|
|
roleModelShow: false,
|
|
roleList: [
|
|
{
|
|
value: 'personal',
|
|
label: '普通成员'
|
|
},
|
|
{
|
|
value: 'operator',
|
|
label: '设备运维员'
|
|
}
|
|
],
|
|
userList:[],
|
|
addUserModalShow:false,
|
|
userPhone:'',
|
|
role:'personal',
|
|
searchValue:'',
|
|
projectId:'',
|
|
activeUser:{}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
console.log("option",option)
|
|
this.projectId = option.projectId;
|
|
},
|
|
methods:{
|
|
getUserStatus(item){
|
|
return item.status==1&&item.userId==null;
|
|
},
|
|
confirmRole(e) {
|
|
console.log(e);
|
|
uni.showModal({
|
|
title: '提示',
|
|
content:'确认要修改用户角色为(' + e[0].label + ')吗？',
|
|
confirmText:'确认',
|
|
cancelText:'取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$put("/app/project/" + this.projectId+'/'+this.activeUser.userId+'/'+e[0].value,{}).then((res)=>{
|
|
if(res.code == 200){
|
|
this.$refs.uToast.show({
|
|
title: '修改成功',
|
|
type: 'success',
|
|
})
|
|
this.mescroll.resetUpScroll();
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: res.msg,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}).catch((err)=>{
|
|
this.$refs.uToast.show({
|
|
title: err.msg,
|
|
type: 'error',
|
|
})
|
|
})
|
|
}else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
});
|
|
},
|
|
openEditMenu(val){
|
|
this.activeUser = val;
|
|
this.editMenuShow = true;
|
|
},
|
|
selectMenu(e){
|
|
console.log("点击菜单",this.editMenuList[e].text)
|
|
if(this.editMenuList[e].text == '项目移交'){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content:'确认要将项目移交给用户(' + this.activeUser.nickName + ')吗？',
|
|
confirmText:'确认',
|
|
cancelText:'取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$post("/app/project/transfer",{
|
|
projectId:this.projectId,
|
|
userId:this.activeUser.userId
|
|
}).then((res)=>{
|
|
console.log("res",res)
|
|
if(res.code == 200){
|
|
this.$refs.uToast.show({
|
|
title: '项目移交成功',
|
|
type: 'success',
|
|
})
|
|
this.addUserModalShow = false;
|
|
this.mescroll.resetUpScroll();
|
|
}else{
|
|
|
|
}
|
|
}).catch((err)=>{
|
|
|
|
})
|
|
}else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
});
|
|
}else if(this.editMenuList[e].text == '修改成员角色'){
|
|
this.roleModelShow = true;
|
|
}
|
|
},
|
|
getRoleName(val){
|
|
let name = '点击选择角色'
|
|
this.roleList.forEach(item=>{
|
|
if(item.value == val){
|
|
name = item.label;
|
|
}
|
|
})
|
|
return name;
|
|
},
|
|
openAddUserModel(){
|
|
this.userPhone = '';
|
|
this.addUserModalShow = true;
|
|
},
|
|
addUser(){
|
|
this.$post("/app/project/useradd",{
|
|
projectId:this.projectId,
|
|
phone:this.userPhone
|
|
}).then((res)=>{
|
|
console.log("res",res)
|
|
if(res.code == 200){
|
|
this.$refs.uToast.show({
|
|
title: '添加成功',
|
|
type: 'success',
|
|
})
|
|
this.addUserModalShow = false;
|
|
this.mescroll.resetUpScroll();
|
|
}else{
|
|
|
|
}
|
|
}).catch((err)=>{
|
|
|
|
})
|
|
},
|
|
delUser(user){
|
|
console.log("user",user)
|
|
uni.showModal({
|
|
title: '提示',
|
|
content:'确认要删除用户(' + user.nickName + ')吗？',
|
|
confirmText:'确认',
|
|
cancelText:'取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
let flag = this.getUserStatus(user);
|
|
if(flag){
|
|
console.log("删除项目临时成员")
|
|
this.$DELETE("/app/project/temp/" + this.projectId+'/'+user.phoneNumber,{}).then((res)=>{
|
|
console.log("res",res)
|
|
if(res.code == 200){
|
|
this.$refs.uToast.show({
|
|
title: '删除成功',
|
|
type: 'success',
|
|
})
|
|
this.mescroll.resetUpScroll();
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: res.msg,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}).catch((err)=>{
|
|
this.$refs.uToast.show({
|
|
title: err.msg,
|
|
type: 'error',
|
|
})
|
|
})
|
|
}else{
|
|
this.$DELETE("/app/project/" + this.projectId+'/'+user.userId,{}).then((res)=>{
|
|
console.log("res",res)
|
|
if(res.code == 200){
|
|
this.$refs.uToast.show({
|
|
title: '删除成功',
|
|
type: 'success',
|
|
})
|
|
this.mescroll.resetUpScroll();
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: res.msg,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}).catch((err)=>{
|
|
this.$refs.uToast.show({
|
|
title: err.msg,
|
|
type: 'error',
|
|
})
|
|
})
|
|
}
|
|
|
|
}else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
});
|
|
},
|
|
onSearchFn(e){
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
/*上拉加载的回调*/
|
|
upCallback(page) {
|
|
let obj = {
|
|
phoneNumber:this.searchValue,
|
|
projectId: this.projectId,
|
|
}
|
|
this.$get("/app/project/userlist",obj).then((res)=>{
|
|
if (res.rows && res.rows.length>0) {
|
|
// 接口返回的当前页数据列表 (数组)
|
|
let curPageData = res.rows;
|
|
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
let curPageLen = curPageData.length;
|
|
//设置列表数据
|
|
this.userList = curPageData; //追加新数据
|
|
this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
|
// this.mescroll.endByPage(curPageLen, res.data.total)
|
|
// this.mescroll.endSuccess(curPageData.length);
|
|
} else{
|
|
this.userList = [];
|
|
this.mescroll.endErr();
|
|
this.mescroll.showEmpty();
|
|
// this.mescroll.endUpScroll(true);
|
|
}
|
|
}).catch(()=>{
|
|
//联网失败, 结束加载
|
|
this.mescroll.endErr();
|
|
}).finally(()=>{
|
|
// this.dropdownIsOpen = false;
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.search-box{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
background-color: #fff;
|
|
z-index: 10;
|
|
}
|
|
.user-list{
|
|
padding: 20rpx;
|
|
.user-item{
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #ddd;
|
|
padding: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.user-left{
|
|
display: flex;
|
|
align-items: center;
|
|
.user-icon{
|
|
padding: 10rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.user-main{
|
|
font-size:28rpx;
|
|
color: #666;
|
|
|
|
}
|
|
}
|
|
.user-btn{
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.slot-content{
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.btn-list{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 140rpx;
|
|
padding: 20rpx 20rpx;
|
|
background: #fff;
|
|
.btn-box{
|
|
background: #0066cc;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
|
|
</style> |