pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基本功能都已完成

Browse Source
This commit is contained in:
王利强
2026-02-08 09:30:43 +08:00
parent 1ad538f351
commit 721ef0ad54
494 changed files with 6837 additions and 42302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

695
pages/membermanagemen/membermanagemen.vue
View File

@@ -1,38 +1,50 @@
<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="page padding">
<!-- 成员管理卡片 -->
<view class="member-card bg-white radius">
<!-- 卡片头部：公司名称 + 角色标签 -->
<view class="card-header">
<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 class="border-line"></view>
<view class="text-bold margin-left-sm">{{ userInfo.deptName || '未知部门' }}</view>
</view>
<view class="tag-outline">负责人</view>
<view class="role-tag">{{ roleText }}</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 class="member-list">
<view
class="member-item"
v-for="(item, index) in list"
:key="item.userId"
:class="{ 'border-bottom': index < list.length - 1 }"
>
<view class="cu-avatar radius lg bg-gray" style="background-image:url(https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png);"></view>
<view class="member-info">
<view class="flex align-center">
<text class="member-name">{{ item.nickName }}</text>
<view class="status-tag" :class="item.statusName === '正常' ? 'status-normal' : 'status-locked'">
{{ item.statusName }}
</view>
</view>
<view class="member-phone text-gray">
<text>手机：{{ item.phonenumber || '未设置' }}</text>
</view>
</view>
<button class="btn-lock bg-blue" @click="Lock(item)">
{{ item.status === '1' ? '解锁' : '锁定' }}
</button>
</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 class="add-btn-wrapper">
<button class="add-btn" @click="showPopup = true">
<text class="cuIcon-add"></text>
<text>添加成员</text>
</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">
@@ -42,43 +54,49 @@
<view class="popup-close" @click="showPopup = false">×</view>
</view>
<view class="popup-body">
<scroll-view class="popup-body" scroll-y>
<!-- 用户名 -->
<view class="form-item">
<view class="form-label">用户名<text class="text-red">*</text></view>
<input class="form-input" v-model="formData.username" placeholder="请输入用户名" />
<up-input v-model="formData.username" placeholder="请输入用户名" border="surround"></up-input>
</view>
<!-- 昵称 -->
<view class="form-item">
<view class="form-label">昵称</view>
<input class="form-input" v-model="formData.nickname" placeholder="请输入昵称" />
<up-input v-model="formData.nickname" placeholder="请输入昵称" border="surround"></up-input>
</view>
<!-- 手机号 -->
<view class="form-item">
<view class="form-label">手机号</view>
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号" type="number" />
<up-input v-model="formData.phone" placeholder="请输入手机号" type="number" border="surround"></up-input>
</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 />
<up-input v-model="formData.password" placeholder="请输入密码（6-16位）" password border="surround"></up-input>
</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 || '请选择主部门' }}
<view class="form-label">角色类型<text class="text-red">*</text></view>
<view class="form-select" @click="showRolePicker = true">
<text :class="selectedRoleName ? '' : 'text-gray'">
{{ selectedRoleName || '请选择角色类型' }}
</text>
<text class="cuIcon-unfold"></text>
</view>
<up-picker :show="showDeptPicker" :columns="deptColumns" @confirm="onDeptConfirm"
@cancel="showDeptPicker = false" @close="showDeptPicker = false"></up-picker>
<up-picker
:show="showRolePicker"
:columns="roleColumns"
@confirm="onRoleConfirm"
@cancel="showRolePicker = false"
@close="showRolePicker = false"
></up-picker>
</view>
</view>
</scroll-view>
<view class="popup-footer">
<button class="btn-cancel" @click="showPopup = false">取消</button>
@@ -91,259 +109,396 @@
</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);
import { ref, reactive, computed, onMounted } from 'vue';
import { addMember, getMemberList, lockOrUnlockMember } from '@/request/api.js';
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;
}
// 用户信息（从storage获取）
const userInfo = ref({
deptId: '',
deptName: '',
nickName: '',
role: '',
userId: '',
username: ''
});
// 构建请求参数（根据接口要求的字段名）
const params = {
userName: formData.username,
nickName: formData.nickname || '',
phonenumber: formData.phone || '',
password: formData.password,
roleType: 'common'
};
// 角色显示文本
const roleText = computed(() => {
const role = userInfo.value.role;
if (role === 'manage' || role === 'admin') {
return '管理人员';
} else if (role === 'common') {
return '执行人员';
}
return '成员';
});
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 getUserInfo = () => {
try {
const userInfoStr = uni.getStorageSync('userInfo');
if (userInfoStr) {
userInfo.value = JSON.parse(userInfoStr);
console.log('用户信息:', userInfo.value);
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
};
// 成员列表
const list = ref([]);
// 获取成员列表
const fetchMemberList = async () => {
try {
const res = await getMemberList();
if (res.code === 0 && res.data) {
list.value = res.data;
console.log('成员列表:', res.data);
}
} catch (error) {
console.error('获取成员列表失败:', error);
}
};
// 弹窗控制
const showPopup = ref(false);
const showRolePicker = ref(false);
const selectedRoleName = ref('');
// 表单数据
const formData = reactive({
username: '',
nickname: '',
phone: '',
password: '',
roleType: ''
});
// 角色类型选择器数据
const roleColumns = reactive([
['管理员', '普通成员']
]);
// 角色名称与值的映射
const roleMap = {
'管理员': 'manage',
'普通成员': 'common'
};
// 角色类型选择确认
const onRoleConfirm = (e) => {
if (e.value && e.value.length > 0) {
selectedRoleName.value = e.value[0];
formData.roleType = roleMap[e.value[0]];
}
showRolePicker.value = false;
};
// 重置表单
const resetForm = () => {
formData.username = '';
formData.nickname = '';
formData.phone = '';
formData.password = '';
formData.roleType = '';
selectedRoleName.value = '';
};
// 提交表单
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;
}
if (!formData.roleType) {
uni.showToast({ title: '请选择角色类型', icon: 'none' });
return;
}
const params = {
userName: formData.username,
nickName: formData.nickname || '',
phonenumber: formData.phone || '',
password: formData.password,
roleType: formData.roleType
};
// 锁定/解锁成员
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'
});
try {
const res = await addMember(params);
if (res.code === 0) {
uni.showToast({ title: '添加成功', icon: 'success' });
showPopup.value = false;
resetForm();
// 刷新成员列表
fetchMemberList();
} else {
uni.showToast({ title: res.msg || '添加失败', icon: 'none' });
}
} catch (error) {
console.error('添加成员失败:', error);
uni.showToast({ title: '请求失败', icon: 'none' });
}
};
// 锁定/解锁成员
const Lock = (item) => {
const isLocked = item.status === '1';
const actionText = isLocked ? '解锁' : '锁定';
const newStatus = 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: Number(newStatus)
});
if (result.code === 0) {
uni.showToast({ title: `${actionText}成功`, icon: 'success' });
// 更新本地状态
item.status = newStatus;
item.statusName = newStatus === '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;
};
});
};
// 页面加载
onMounted(() => {
getUserInfo();
fetchMemberList();
});
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: #EBF2FC;
}
.page {
min-height: 100vh;
background: #EBF2FC;
}
.border-tite {
// 成员卡片
.member-card {
padding: 0;
overflow: hidden;
}
// 卡片头部
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.border-line {
width: 8rpx;
height: 32rpx;
background: #2667E9;
border-radius: 8rpx;
}
}
.tag-outline {
padding: 4rpx 16rpx;
border-radius: 8rpx;
background: #EEF3FF;
color: #2E7CF3;
font-size: 24rpx;
// 角色标签
.role-tag {
padding: 8rpx 24rpx;
background: #EEF3FF;
color: #2667E9;
font-size: 24rpx;
border-radius: 24rpx 0 0 24rpx;
margin-right: -30rpx;
}
// 成员列表
.member-list {
padding: 0 30rpx;
}
// 成员项
.member-item {
display: flex;
align-items: center;
padding: 24rpx 0;
&.border-bottom {
border-bottom: 1rpx solid #f5f5f5;
}
.cu-avatar {
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;
// 成员信息
.member-info {
flex: 1;
margin-left: 20rpx;
overflow: hidden;
.member-name {
font-size: 30rpx;
color: #333;
font-weight: 500;
}
.member-phone {
font-size: 24rpx;
margin-top: 8rpx;
}
}
.btn-confirm {
flex: 1;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: #fff;
font-size: 30rpx;
// 状态标签
.status-tag {
margin-left: 12rpx;
padding: 4rpx 12rpx;
font-size: 22rpx;
border-radius: 6rpx;
&.status-normal {
background: #E8F5E9;
color: #4CAF50;
}
</style>
&.status-locked {
background: #FFEBEE;
color: #F44336;
}
}
// 锁定按钮
.btn-lock {
width: 120rpx;
height: 56rpx;
line-height: 56rpx;
padding: 0;
font-size: 26rpx;
border-radius: 28rpx;
flex-shrink: 0;
}
// 添加成员按钮
.add-btn-wrapper {
padding: 30rpx;
border-top: 1rpx solid #f0f0f0;
}
.add-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 88rpx;
background: #fff;
border: 2rpx dashed #2667E9;
border-radius: 12rpx;
color: #2667E9;
font-size: 30rpx;
.cuIcon-add {
margin-right: 10rpx;
font-size: 32rpx;
}
&::after {
border: none;
}
}
// 弹出框样式
.popup-content {
width: 600rpx;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
}
.popup-title {
font-size: 34rpx;
color: #333;
}
.popup-close {
font-size: 48rpx;
color: #999;
line-height: 1;
}
.popup-body {
padding: 30rpx;
max-height: 700rpx;
overflow-y: auto;
}
.form-item {
margin-bottom: 24rpx;
}
.form-label {
font-size: 28rpx;
color: #333;
margin-bottom: 12rpx;
display: flex;
align-items: center;
}
.form-select {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
border: 2rpx solid #dadbde;
border-radius: 8rpx;
padding: 0 24rpx;
font-size: 28rpx;
}
.popup-footer {
display: flex;
border-top: 1rpx solid #eee;
button {
flex: 1;
height: 90rpx;
line-height: 90rpx;
border-radius: 0;
font-size: 30rpx;
&::after {
border: none;
}
}
}
.btn-cancel {
background: #fff;
color: #666;
}
.btn-confirm {
color: #fff;
}
</style>