349 lines
8.5 KiB
Vue
349 lines
8.5 KiB
Vue
<template>
|
||
<view class=" page padding ">
|
||
<view class=" padding bg-white radius margin-bottom" v-for="(item,index) in list" :key="item.id">
|
||
<view class="flex justify-between align-center">
|
||
<view class="flex align-center">
|
||
<view class="border-tite"></view>
|
||
<view class="text-bold margin-left-xs" @click="show = true">湘西自治州和谐网络科技有限公司</view>
|
||
<up-picker :show="show" :columns="columns"></up-picker>
|
||
</view>
|
||
<view class="tag-outline">负责人</view>
|
||
</view>
|
||
|
||
<view class="flex margin-top">
|
||
<view class="cu-avatar radius lg"
|
||
style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);">
|
||
</view>
|
||
<view class="margin-left">
|
||
<view class="flex">
|
||
<view>{{item.nickName}}</view>
|
||
<view class="margin-left-xs light bg-olive padding-left-xs padding-right-xs">{{item.statusName}}</view>
|
||
</view>
|
||
<view class="flex text-gray">
|
||
<view>手机设置：</view>
|
||
<view>{{item.phonenumber}}</view>
|
||
</view>
|
||
<view class="flex text-gray">
|
||
<view>登录IP：</view>
|
||
<view>45.135.228.172</view>
|
||
</view>
|
||
</view>
|
||
<button class="bg-blue btn-lock" @click="Lock(item)">{{ item.lockStatus === 1 ? '解锁' : '锁定' }}</button>
|
||
</view>
|
||
|
||
</view>
|
||
<button class="lg cuIcon-add bg-blue round margin-top-xl" @click="showPopup = true">添加成员</button>
|
||
|
||
<!-- 添加成员弹出框 -->
|
||
<u-popup :show="showPopup" mode="center" round="20" @close="showPopup = false">
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<view class="popup-title text-bold">添加成员</view>
|
||
<view class="popup-close" @click="showPopup = false">×</view>
|
||
</view>
|
||
|
||
<view class="popup-body">
|
||
<!-- 用户名 -->
|
||
<view class="form-item">
|
||
<view class="form-label">用户名<text class="text-red">*</text></view>
|
||
<input class="form-input" v-model="formData.username" placeholder="请输入用户名" />
|
||
</view>
|
||
|
||
<!-- 昵称 -->
|
||
<view class="form-item">
|
||
<view class="form-label">昵称</view>
|
||
<input class="form-input" v-model="formData.nickname" placeholder="请输入昵称" />
|
||
</view>
|
||
|
||
<!-- 手机号 -->
|
||
<view class="form-item">
|
||
<view class="form-label">手机号</view>
|
||
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号" type="number" />
|
||
</view>
|
||
|
||
<!-- 密码 -->
|
||
<view class="form-item">
|
||
<view class="form-label">密码<text class="text-red">*</text></view>
|
||
<input class="form-input" v-model="formData.password" placeholder="请输入密码（6-16位）" password />
|
||
</view>
|
||
|
||
<!-- 主部门 -->
|
||
<view class="form-item">
|
||
<view class="form-label">主部门<text class="text-red">*</text></view>
|
||
<view class="form-input form-select" @click="showDeptPicker = true">
|
||
<text :class="formData.department ? '' : 'text-gray'">
|
||
{{ formData.department || '请选择主部门' }}
|
||
</text>
|
||
</view>
|
||
<up-picker :show="showDeptPicker" :columns="deptColumns" @confirm="onDeptConfirm"
|
||
@cancel="showDeptPicker = false" @close="showDeptPicker = false"></up-picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup-footer">
|
||
<button class="btn-cancel" @click="showPopup = false">取消</button>
|
||
<button class="btn-confirm bg-blue" @click="handleSubmit">确定</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<TabBar />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,reactive } from 'vue';
|
||
import { addMember,getMemberList,lockOrUnlockMember} from '@/request/api.js';
|
||
//成员列表
|
||
const list = ref([]);
|
||
getMemberList().then(res => {
|
||
list.value = res.data;
|
||
});
|
||
const showPopup = ref(false);
|
||
const showDeptPicker = ref(false);
|
||
|
||
const formData = reactive({
|
||
username: '',
|
||
nickname: '',
|
||
phone: '',
|
||
password: '',
|
||
department: ''
|
||
});
|
||
const handleSubmit = async () => {
|
||
// 表单验证
|
||
if (!formData.username) {
|
||
uni.showToast({
|
||
title: '请输入用户名',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!formData.password || formData.password.length < 6 || formData.password.length > 16) {
|
||
uni.showToast({
|
||
title: '请输入6-16位密码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 构建请求参数（根据接口要求的字段名）
|
||
const params = {
|
||
userName: formData.username,
|
||
nickName: formData.nickname || '',
|
||
phonenumber: formData.phone || '',
|
||
password: formData.password,
|
||
roleType: 'common'
|
||
};
|
||
|
||
try {
|
||
const res = await addMember(params);
|
||
if (res.code === 0) {
|
||
uni.showToast({
|
||
title: '添加成功',
|
||
icon: 'success'
|
||
});
|
||
showPopup.value = false;
|
||
// 重置表单
|
||
formData.username = '';
|
||
formData.nickname = '';
|
||
formData.phone = '';
|
||
formData.password = '';
|
||
formData.department = '';
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '添加失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('添加成员失败:', error);
|
||
uni.showToast({
|
||
title: '请求失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 锁定/解锁成员
|
||
const Lock = (item) => {
|
||
// 当前是锁定状态则解锁，否则锁定
|
||
const isLocked = item.lockStatus === 1;
|
||
const actionText = isLocked ? '解锁' : '锁定';
|
||
const newLockStatus = isLocked ? 0 : 1;
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `确定要${actionText}该成员吗？`,
|
||
confirmColor: '#2667E9',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
const result = await lockOrUnlockMember({
|
||
userId: item.userId,
|
||
lockStatus: newLockStatus
|
||
});
|
||
if (result.code === 0) {
|
||
uni.showToast({
|
||
title: `${actionText}成功`,
|
||
icon: 'success'
|
||
});
|
||
// 更新本地状态
|
||
item.lockStatus = newLockStatus;
|
||
item.statusName = newLockStatus === 1 ? '已锁定' : '正常';
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg || `${actionText}失败`,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error(`${actionText}成员失败:`, error);
|
||
uni.showToast({
|
||
title: '请求失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
//选择部门（顶部切换用）
|
||
const show = ref(false);
|
||
const columns = reactive([
|
||
['湘西自治州和谐网络科技有限公司', '湘西自治州和谐云科技有限公司']
|
||
]);
|
||
|
||
// 主部门选择器数据
|
||
const deptColumns = reactive([
|
||
['湘西自治州和谐网络科技有限公司', '湘西自治州和谐云科技有限公司', '研发部门', '深圳总公司', '若依科技']
|
||
]);
|
||
|
||
// 主部门选择确认
|
||
const onDeptConfirm = (e) => {
|
||
console.log('选择的部门:', e);
|
||
// e.value 是选中的值数组
|
||
if (e.value && e.value.length > 0) {
|
||
formData.department = e.value[0];
|
||
}
|
||
showDeptPicker.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
|
||
.border-tite {
|
||
width: 8rpx;
|
||
height: 32rpx;
|
||
background: #2667E9;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.tag-outline {
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
background: #EEF3FF;
|
||
color: #2E7CF3;
|
||
font-size: 24rpx;
|
||
flex-shrink: 0;
|
||
margin-right: -30rpx;
|
||
border-radius: 24rpx 0rpx 0rpx 24rpx;
|
||
}
|
||
|
||
.btn-lock {
|
||
width: 112rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
padding: 0;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 弹出框样式
|
||
.popup-content {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.popup-body {
|
||
max-height: 700rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
border-radius: 12rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-select {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 2rpx solid #2667E9;
|
||
border-radius: 40rpx;
|
||
background: #fff;
|
||
color: #2667E9;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.btn-confirm {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
</style> |