278 lines
7.6 KiB
Vue
278 lines
7.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 搜索栏（按姓名/头衔搜索） -->
|
||
<view class="search my2">
|
||
<div class="flex flex-center">
|
||
<input
|
||
type="text"
|
||
v-model="searchKey"
|
||
placeholder="请输入姓名/头衔搜索"
|
||
class="flex1 px2 py1"
|
||
@confirm="getList"
|
||
/>
|
||
<button class="btn man ml2" @click="getList">搜索</button>
|
||
</div>
|
||
</view>
|
||
|
||
<!-- 新增按钮 -->
|
||
<button class="btn succ my2" @click="goToEdit">新增成员</button>
|
||
|
||
<!-- 成员列表 -->
|
||
<div class="table bg1 rounded">
|
||
<!-- 表头 -->
|
||
<div class="flex bg5 txt6 py2 px2">
|
||
<div class="col-3 txt-center">头像</div>
|
||
<div class="col-4 txt-center">姓名</div>
|
||
<div class="col-4 txt-center">手机号</div>
|
||
<div class="col-4 txt-center">头衔</div>
|
||
<div class="col-4 txt-center">状态</div>
|
||
<div class="col-3 txt-center">性别</div>
|
||
<div class="col-3 txt-center">学历</div>
|
||
<div class="col-3 txt-center">操作</div>
|
||
</div>
|
||
|
||
<!-- 列表内容 -->
|
||
<div class="list" v-if="list.length > 0">
|
||
<div
|
||
class="flex py2 px2 border-b border-bg6"
|
||
v-for="item in list"
|
||
:key="item.id"
|
||
>
|
||
<div class="col-3 txt-center">
|
||
<image :src="item.avatar" mode="aspectFill" class="w-10 h-10 rounded-full"></image>
|
||
</div>
|
||
<div class="col-4 txt-center">{{ item.name }}</div>
|
||
<div class="col-4 txt-center">{{ item.mobile }}</div>
|
||
<div class="col-4 txt-center">{{ getTitleText(item.usertitle) }}</div>
|
||
<div class="col-4 txt-center">
|
||
<span :class="getStatusTagClass(item.stpstatus)">{{ getStatusText(item.stpstatus) }}</span>
|
||
</div>
|
||
<div class="col-3 txt-center">{{ getSexText(item.sex) }}</div>
|
||
<div class="col-3 txt-center">{{ getEducationText(item.education) }}</div>
|
||
<div class="col-3 txt-center flex flex-center justify-center gap2">
|
||
<button class="btn def sm" @click.stop="goToEdit(item.id)">编辑</button>
|
||
<button class="btn dag sm" @click.stop="delMember(item.id)">删除</button>
|
||
<button
|
||
class="btn sm"
|
||
:class="item.stpstatus === 30 ? 'warn' : 'succ'"
|
||
@click.stop="auditMember(item.id, item.stpstatus === 30 ? 40 : 30)"
|
||
>
|
||
{{ item.stpstatus === 30 ? '设为历史' : '设为在册' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空数据提示 -->
|
||
<div class="txt-center py10 txt3" v-if="list.length === 0">
|
||
暂无成员数据
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="table page flex justify-end mt2" v-if="total > pageSize">
|
||
<button
|
||
class="btn def sm mr1"
|
||
@click="page--; getList()"
|
||
:disabled="page <= 1"
|
||
>上一页</button>
|
||
<span class="px2">{{ page }} / {{ Math.ceil(total / pageSize) }}</span>
|
||
<button
|
||
class="btn def sm ml1"
|
||
@click="page++; getList()"
|
||
:disabled="page >= Math.ceil(total / pageSize)"
|
||
>下一页</button>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [], // 成员列表
|
||
searchKey: '', // 搜索关键词（姓名/头衔）
|
||
page: 1, // 当前页码
|
||
pageSize: 15, // 每页条数
|
||
total: 0, // 总条数
|
||
sexMap: {
|
||
10: '男',
|
||
20: '女',
|
||
90: '其他'
|
||
},
|
||
titleMap: {
|
||
10: '主任',
|
||
20: '副主任',
|
||
30: '顾问',
|
||
40: '名誉主任',
|
||
50: '教授',
|
||
60: '副教授',
|
||
70: '讲师',
|
||
80: '研究员'
|
||
},
|
||
statusMap: {
|
||
10: '负责人',
|
||
20: '科研秘书',
|
||
30: '在册成员',
|
||
40: '历史成员',
|
||
50: '外部成员'
|
||
},
|
||
educationMap: {
|
||
50: '本科',
|
||
60: '硕士',
|
||
70: '博士'
|
||
}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// 获取成员列表（按姓名/头衔搜索）
|
||
async getList() {
|
||
try {
|
||
const res = await uni.request({
|
||
url: '/web/ambap/member.php',
|
||
method: 'POST',
|
||
data: {
|
||
act: 'member.list',
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
searchKey: this.searchKey, // 后台接收该参数，同时匹配姓名/头衔
|
||
searchType: 'name,title' // 明确搜索类型：姓名+头衔
|
||
}
|
||
});
|
||
|
||
if (res.data.code === 1) {
|
||
this.list = res.data.list;
|
||
this.total = res.data.total;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.errmsg || '获取列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: '网络错误',
|
||
icon: 'none'
|
||
});
|
||
console.error('获取列表失败：', err);
|
||
}
|
||
},
|
||
|
||
// 跳转到编辑页
|
||
goToEdit(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/lab/useredit?id=${id || ''}`
|
||
});
|
||
},
|
||
|
||
// 删除成员
|
||
async delMember(id) {
|
||
const confirm = await uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除该成员吗？'
|
||
});
|
||
|
||
if (!confirm.confirm) return;
|
||
|
||
try {
|
||
const res = await uni.request({
|
||
url: '/web/ambap/member.php',
|
||
method: 'POST',
|
||
data: {
|
||
act: 'member.del',
|
||
id: id
|
||
}
|
||
});
|
||
|
||
if (res.data.code === 1) {
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success'
|
||
});
|
||
this.getList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.errmsg || '删除失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: '网络错误',
|
||
icon: 'none'
|
||
});
|
||
console.error('删除失败：', err);
|
||
}
|
||
},
|
||
|
||
// 切换成员状态
|
||
async auditMember(id, status) {
|
||
try {
|
||
const res = await uni.request({
|
||
url: '/web/ambap/member.php',
|
||
method: 'POST',
|
||
data: {
|
||
act: 'member.audit',
|
||
id: id,
|
||
status: status
|
||
}
|
||
});
|
||
|
||
if (res.data.code === 1) {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success'
|
||
});
|
||
this.getList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.errmsg || '操作失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: '网络错误',
|
||
icon: 'none'
|
||
});
|
||
console.error('状态切换失败：', err);
|
||
}
|
||
},
|
||
|
||
// 性别文本转换
|
||
getSexText(sex) {
|
||
return this.sexMap[sex] || '未知';
|
||
},
|
||
|
||
// 头衔文本转换
|
||
getTitleText(title) {
|
||
return this.titleMap[title] || '未知头衔';
|
||
},
|
||
|
||
// 状态文本转换
|
||
getStatusText(status) {
|
||
return this.statusMap[status] || '未知状态';
|
||
},
|
||
|
||
// 状态标签样式
|
||
getStatusTagClass(status) {
|
||
switch(status) {
|
||
case 10: return 'cata_man'; // 负责人-主色
|
||
case 20: return 'cata_warn'; // 科研秘书-警示色
|
||
case 30: return 'cata_succ'; // 在册成员-成功色
|
||
case 40: return 'cata_def'; // 历史成员-默认色
|
||
case 50: return 'cata_dag'; // 外部成员-失败色
|
||
default: return 'cata_def';
|
||
}
|
||
},
|
||
|
||
// 学历文本转换
|
||
getEducationText(edu) {
|
||
return this.educationMap[edu] || '未知学历';
|
||
}
|
||
}
|
||
};
|
||
</script> |