mirror of
https://github.com/TangSengDaoDao/TangSengDaoDaoManager
synced 2025-06-05 00:28:11 +00:00
feat: ✨新增群列表聊天记录和黑名单成员
This commit is contained in:
wanglihui
parent
9c99b0d97d
commit
87ae166e1f
@ -17,3 +17,21 @@ export function groupDisablelistGet(params: any) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 群成员
|
||||
export function groupGroupmembersGet(params: any, groupNo: string) {
|
||||
return request({
|
||||
url: `/manager/groups/${groupNo}/members`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 黑名单列表
|
||||
export function groupBlacklistGet(params: any, groupNo: string) {
|
||||
return request({
|
||||
url: `/manager/groups/${groupNo}/members/blacklist`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ export function messageProhibitWordsGet(params: any) {
|
||||
});
|
||||
}
|
||||
|
||||
// 聊天消息
|
||||
// 单聊天消息
|
||||
export function messageRecordpersonalGet(params: any) {
|
||||
return request({
|
||||
url: '/manager/message/recordpersonal',
|
||||
@ -26,3 +26,12 @@ export function messageRecordpersonalGet(params: any) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 群聊天消息
|
||||
export function messageRecordGet(params: any) {
|
||||
return request({
|
||||
url: '/manager/message/record',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@ -26,3 +26,20 @@ export function userFriendsGet(params: any) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 黑名单列表
|
||||
export function userBlacklistGet(params: any) {
|
||||
return request({
|
||||
url: 'manager/user/blacklist',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 用户封禁/解禁
|
||||
export function userLiftbanPut(params: any) {
|
||||
return request({
|
||||
url: `manager/user/liftban/${params.uid}/${params.status}`,
|
||||
method: 'put'
|
||||
});
|
||||
}
|
||||
|
||||
177
src/pages/group/groupblacklist.vue
Normal file
177
src/pages/group/groupblacklist.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col">
|
||||
<!-- 布局 -->
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
的黑名单成员
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="好友昵称/uid" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="getTableList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 黑名单成员
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElAvatar, ElText } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { groupBlacklistGet } from '@/api/group';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '头像',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['uid']) {
|
||||
img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
|
||||
}
|
||||
return (
|
||||
<ElAvatar src={img_url} size={54}>
|
||||
{scope.row['name']}
|
||||
</ElAvatar>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户昵称'
|
||||
},
|
||||
{
|
||||
prop: 'uid',
|
||||
label: '用户ID'
|
||||
},
|
||||
{
|
||||
prop: 'role',
|
||||
label: '操作者',
|
||||
render: (scope: any) => {
|
||||
let text = '成员';
|
||||
let type: any = 'primary';
|
||||
// 群主
|
||||
if (scope?.row['role'] == 1) {
|
||||
text = '群主';
|
||||
type = 'success';
|
||||
}
|
||||
// 群主
|
||||
if (scope?.row['role'] == 2) {
|
||||
text = '管理员';
|
||||
type = 'warning';
|
||||
}
|
||||
return <ElText type={type}>{text}</ElText>;
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'create_at',
|
||||
label: '拉入黑名单时间'
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getTableList = () => {
|
||||
loadTable.value = true;
|
||||
groupBlacklistGet(queryFrom, route.query.groupNo as string).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res.list;
|
||||
total.value = res.count;
|
||||
});
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getTableList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
@ -63,10 +63,13 @@ meta:
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { groupListGet } from '@/api/group';
|
||||
|
||||
const router = useRouter();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
@ -140,13 +143,13 @@ const column = reactive<Column.ColumnOptions[]>([
|
||||
</ElButton>
|
||||
<ElDropdown
|
||||
v-slots={{
|
||||
default: () => <ElButton>更多</ElButton>,
|
||||
default: () => <ElButton class={'bu-button'}>更多</ElButton>,
|
||||
dropdown: () => {
|
||||
return (
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem onClick={() => bb(scope.row)}>群成员</ElDropdownItem>
|
||||
<ElDropdownItem>聊天记录</ElDropdownItem>
|
||||
<ElDropdownItem>黑名单成员</ElDropdownItem>
|
||||
<ElDropdownItem onClick={() => onGroupdisablelist(scope.row)}>群成员</ElDropdownItem>
|
||||
<ElDropdownItem onClick={() => onRcord(scope.row)}>聊天记录</ElDropdownItem>
|
||||
<ElDropdownItem onClick={() => onBlackList(scope.row)}>黑名单成员</ElDropdownItem>
|
||||
<ElDropdownItem>{scope.row.forbidden === 1 ? '禁言中' : '禁言'}</ElDropdownItem>
|
||||
<ElDropdownItem>{scope.row.status === 1 ? '封禁' : '解禁'}</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
@ -192,11 +195,40 @@ const onCurrentChange = (current: number) => {
|
||||
getUserList();
|
||||
};
|
||||
|
||||
const aa = (a: any) => {
|
||||
console.log(a);
|
||||
// 群成员
|
||||
const onGroupdisablelist = (item: any) => {
|
||||
router.push({
|
||||
path: '/group/groupmembers',
|
||||
query: {
|
||||
groupNo: item.group_no,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const bb = (a: any) => {
|
||||
// 聊天记录
|
||||
const onRcord = (item: any) => {
|
||||
router.push({
|
||||
path: '/message/record',
|
||||
query: {
|
||||
groupNo: item.group_no,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 黑名单列表
|
||||
const onBlackList = (item: any) => {
|
||||
router.push({
|
||||
path: '/group/groupblacklist',
|
||||
query: {
|
||||
groupNo: item.group_no,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const aa = (a: any) => {
|
||||
console.log(a);
|
||||
};
|
||||
|
||||
|
||||
222
src/pages/group/groupmembers.vue
Normal file
222
src/pages/group/groupmembers.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col">
|
||||
<!-- 布局 -->
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
群成员
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="成员昵称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="getUserList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 群成员
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElText, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { groupGroupmembersGet } from '@/api/group';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户昵称',
|
||||
fixed: 'left',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '用户头像',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['uid']) {
|
||||
img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
|
||||
}
|
||||
return (
|
||||
<ElAvatar src={img_url} size={54}>
|
||||
{scope.row['name']}
|
||||
</ElAvatar>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'uid',
|
||||
label: '用户ID',
|
||||
fixed: 'left',
|
||||
width: 320
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '成员角色',
|
||||
width: 120,
|
||||
render: (scope: any) => {
|
||||
let text = '成员';
|
||||
let type: any = 'primary';
|
||||
// 群主
|
||||
if (scope?.row['role'] == 1) {
|
||||
text = '群主';
|
||||
type = 'success';
|
||||
}
|
||||
// 群主
|
||||
if (scope?.row['role'] == 2) {
|
||||
text = '管理员';
|
||||
type = 'warning';
|
||||
}
|
||||
return <ElText type={type}>{text}</ElText>;
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '群内备注'
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: '入群时间',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
render: (scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="primary">发消息</ElButton>
|
||||
<ElButton type="danger" onClick={() => onDel(scope.row)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</ElSpace>
|
||||
);
|
||||
}
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getUserList = () => {
|
||||
loadTable.value = true;
|
||||
groupGroupmembersGet(queryFrom, route.query.groupNo as string).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res.list;
|
||||
total.value = res.count;
|
||||
});
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onDel = (_item: any) => {
|
||||
ElMessageBox.confirm('确定，是否删除此成员?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '开发中..'
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消成功！'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
233
src/pages/message/record.vue
Normal file
233
src/pages/message/record.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col">
|
||||
<!-- 布局 -->
|
||||
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
的聊天记录
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="发送者名字/消息内容" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="getUserList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 聊天记录
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { messageRecordGet } from '@/api/message';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'message_id',
|
||||
label: '消息编号',
|
||||
fixed: 'left',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'sender_name',
|
||||
label: '发送者名字',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: 'sender',
|
||||
label: '发送者ID',
|
||||
width: 260
|
||||
},
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '发送者头像',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['sender']) {
|
||||
img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['sender']}/avatar`;
|
||||
}
|
||||
return (
|
||||
<ElAvatar src={img_url} size={54}>
|
||||
{scope.row['sender_name']}
|
||||
</ElAvatar>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'payload',
|
||||
label: '消息内容',
|
||||
minWidth: 300,
|
||||
render: (scope: any) => {
|
||||
const showContent = scope.row['payload'];
|
||||
// 是否加密
|
||||
if (scope.row['is_encrypt'] == 1) {
|
||||
return '加密消息，无法查看';
|
||||
} else {
|
||||
return showContent?.content;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'revoke',
|
||||
label: '是否撤回',
|
||||
width: 120,
|
||||
formatter(row: any) {
|
||||
return row.revoke === 1 ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'is_deleted',
|
||||
label: '是否删除',
|
||||
width: 120,
|
||||
formatter(row: any) {
|
||||
return row.is_deleted === 1 ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: '发送时间',
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="danger" onClick={() => onDel(scope.row)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</ElSpace>
|
||||
);
|
||||
}
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
channel_id: route.query.groupNo,
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getUserList = () => {
|
||||
loadTable.value = true;
|
||||
messageRecordGet(queryFrom).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res.list;
|
||||
total.value = res.count;
|
||||
});
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onDel = (_item: any) => {
|
||||
ElMessageBox.confirm('确定，是否删除此消息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '开发中..'
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消成功！'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
@ -209,8 +209,7 @@ const onCurrentChange = (current: number) => {
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onDel = (item: any) => {
|
||||
console.log(item);
|
||||
const onDel = (_item: any) => {
|
||||
ElMessageBox.confirm('确定，是否删除此消息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
||||
@ -63,10 +63,10 @@ meta:
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { ElButton, ElSpace, ElAvatar } from 'element-plus';
|
||||
import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { userDisablelistGet } from '@/api/user';
|
||||
import { userDisablelistGet, userLiftbanPut } from '@/api/user';
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
@ -136,7 +136,7 @@ const column = reactive([
|
||||
render: (scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="primary" onClick={() => aa(scope.row)}>
|
||||
<ElButton type="primary" onClick={() => onUseLiftban(scope.row)}>
|
||||
解禁
|
||||
</ElButton>
|
||||
</ElSpace>
|
||||
@ -177,8 +177,39 @@ const onCurrentChange = (current: number) => {
|
||||
getUserList();
|
||||
};
|
||||
|
||||
const aa = (a: any) => {
|
||||
console.log(a);
|
||||
// 解禁
|
||||
const onUseLiftban = (item: any) => {
|
||||
ElMessageBox.confirm(`确定要解禁用户${item.name} 吗`, `解禁用户`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const fromLiftban = {
|
||||
uid: item.uid,
|
||||
status: 1
|
||||
};
|
||||
userLiftbanPut(fromLiftban)
|
||||
.then((_res: any) => {
|
||||
getUserList();
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `解禁用户成功！`
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status == 400) {
|
||||
ElMessage.error(err.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消成功！'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
|
||||
163
src/pages/user/userblacklist.vue
Normal file
163
src/pages/user/userblacklist.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col">
|
||||
<!-- 布局 -->
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
的黑名单
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="好友昵称/uid" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="getTableList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 黑名单列表
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElAvatar } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { userBlacklistGet } from '@/api/user';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'name',
|
||||
label: '好友昵称',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'uid',
|
||||
label: '好友ID',
|
||||
width: 320
|
||||
},
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '好友头像',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['uid']) {
|
||||
img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
|
||||
}
|
||||
return (
|
||||
<ElAvatar src={img_url} size={54}>
|
||||
{scope.row['name']}
|
||||
</ElAvatar>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'create_at',
|
||||
label: '拉入黑名单时间',
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
minWidth: 260
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
uid: route.query.uid,
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getTableList = () => {
|
||||
loadTable.value = true;
|
||||
userBlacklistGet(queryFrom).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res;
|
||||
total.value = res.length;
|
||||
});
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getTableList();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getTableList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
@ -65,16 +65,16 @@ meta:
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
|
||||
import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { userListGet } from '@/api/user';
|
||||
import { userListGet, userLiftbanPut } from '@/api/user';
|
||||
|
||||
const router = useRouter();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive([
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名',
|
||||
@ -180,13 +180,13 @@ const column = reactive([
|
||||
<i-bd-every-user class={'mr-4px'} />
|
||||
好友列表
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem>
|
||||
<ElDropdownItem onClick={() => onUseBlackList(scope.row)}>
|
||||
<i-bd-personal-privacy class={'mr-4px'} />
|
||||
黑名单列表
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem>
|
||||
<ElDropdownItem onClick={() => onUseLiftban(scope.row)}>
|
||||
<i-bd-info class={'mr-4px'} />
|
||||
禁封
|
||||
{scope.row.status === 1 ? '封禁' : '解禁'}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
);
|
||||
@ -246,6 +246,53 @@ const onFriends = (item: any) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 黑名单列表
|
||||
const onUseBlackList = (item: any) => {
|
||||
router.push({
|
||||
path: '/user/userblacklist',
|
||||
query: {
|
||||
uid: item.uid,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 用户封禁/解封操作
|
||||
const onUseLiftban = (item: any) => {
|
||||
const text = item.status == 1 ? '封禁' : '解禁';
|
||||
ElMessageBox.confirm(`确定要${text}用户${item.name} 吗`, `${text}用户`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const fromLiftban = {
|
||||
uid: item.uid,
|
||||
status: item.status == 1 ? 0 : 1
|
||||
};
|
||||
userLiftbanPut(fromLiftban)
|
||||
.then((_res: any) => {
|
||||
getUserList();
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `${text}用户成功！`
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status == 400) {
|
||||
ElMessage.error(err.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消成功！'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getUserList();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user