389 lines
11 KiB
Vue
389 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { useMessage } from 'naive-ui'
|
|
import { onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
interface MemberItem {
|
|
userId: number | string
|
|
id: number | string
|
|
tenantId: number | string
|
|
avatar: string
|
|
nickname: string
|
|
role: '星主' | '管理人' | '成员'
|
|
type: '付费' | '免费'
|
|
joinTime: string
|
|
expireTime: string
|
|
lastLoginTime: string
|
|
isBlack: '0' | '1'
|
|
userType: number
|
|
communityId: number | string
|
|
joinType: string
|
|
}
|
|
definePageMeta({
|
|
layout: 'planet',
|
|
})
|
|
|
|
const route = useRoute()
|
|
const message = useMessage()
|
|
const memberList = ref<MemberItem[]>([])
|
|
const loading = ref(false)
|
|
const isInitialized = ref(false)
|
|
const params = ref({
|
|
orderByColum: '',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
communityId: route.query.communityId,
|
|
tenantId: route.query.tenantId,
|
|
searchContent: '',
|
|
})
|
|
|
|
// 添加分页数据
|
|
const pagination = ref({
|
|
page: 1,
|
|
pageSize: 10,
|
|
itemCount: 0,
|
|
showSizePicker: false,
|
|
})
|
|
|
|
// 拉黑表单
|
|
const showBlackModal = ref(false)
|
|
const blackForm = ref({
|
|
blackDay: undefined,
|
|
blackReason: '',
|
|
userId: '',
|
|
})
|
|
|
|
// 添加表单验证规则
|
|
const rules = {
|
|
blackDay: {
|
|
required: true,
|
|
message: '请输入拉黑时长',
|
|
trigger: ['blur', 'change'],
|
|
type: 'number',
|
|
validator: (rule: any, value: any) => {
|
|
if (value === undefined || value === null)
|
|
return new Error('请输入拉黑时长')
|
|
return true
|
|
},
|
|
},
|
|
blackReason: {
|
|
required: true,
|
|
message: '请输入拉黑原因',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
}
|
|
|
|
// 表单ref
|
|
const formRef = ref()
|
|
|
|
// 处理分页变化
|
|
function handlePageChange(page: number) {
|
|
pagination.value.page = page
|
|
params.value.pageNum = page
|
|
getMemberList()
|
|
}
|
|
|
|
// 处理搜索
|
|
function handleSearch(e: KeyboardEvent) {
|
|
if (e.key === 'Enter') {
|
|
params.value.pageNum = 1
|
|
pagination.value.page = 1
|
|
getMemberList()
|
|
}
|
|
}
|
|
|
|
// 获取成员列表
|
|
async function getMemberList() {
|
|
try {
|
|
loading.value = true
|
|
const res = await request.post('/communityUser/list', params.value)
|
|
if (res.code === 200) {
|
|
memberList.value = res.rows
|
|
pagination.value.itemCount = res.total
|
|
isInitialized.value = true
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getMemberList()
|
|
})
|
|
|
|
// 拉黑/解除拉黑
|
|
async function handleRemove(item: MemberItem) {
|
|
if (item.userType === 2)
|
|
return
|
|
if (item.isBlack === '1') {
|
|
// 直接解除拉黑
|
|
try {
|
|
const res = await request.post('/communityUser/unBlack', {
|
|
communityId: route.query.communityId,
|
|
tenantId: route.query.tenantId, // 用户userId
|
|
userId: item.userId,
|
|
})
|
|
if (res.code === 200) {
|
|
message.success('解除拉黑成功')
|
|
params.value.pageNum = 1
|
|
pagination.value.page = 1
|
|
getMemberList()
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
else {
|
|
// 显示拉黑弹窗
|
|
blackForm.value = {
|
|
blackDay: undefined,
|
|
blackReason: '',
|
|
userId: item.userId,
|
|
}
|
|
showBlackModal.value = true
|
|
}
|
|
}
|
|
|
|
// 确认拉黑
|
|
async function handleBlack() {
|
|
try {
|
|
await formRef.value?.validate()
|
|
const res = await request.post('/communityUser/black', {
|
|
communityId: route.query.communityId,
|
|
tenantId: route.query.tenantId,
|
|
userId: blackForm.value.userId,
|
|
blackDay: blackForm.value.blackDay,
|
|
blackReason: blackForm.value.blackReason,
|
|
})
|
|
if (res.code === 200) {
|
|
message.success('拉黑成功')
|
|
showBlackModal.value = false
|
|
params.value.pageNum = 1
|
|
pagination.value.page = 1
|
|
getMemberList()
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
// 设置管理员
|
|
async function handleSetAdmin(item: MemberItem) {
|
|
if (item.userType === 2)
|
|
return
|
|
const { tenantId, communityId, userId } = item
|
|
try {
|
|
const res = await request.post('/communityUser/manage', {
|
|
communityId,
|
|
tenantId,
|
|
userId,
|
|
})
|
|
if (res.code === 200) {
|
|
message.success('设置成功')
|
|
params.value.pageNum = 1
|
|
pagination.value.page = 1
|
|
getMemberList()
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
// 复制文本到剪贴板
|
|
function copyToClipboard(text: string) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
message.success('复制成功')
|
|
}).catch(() => {
|
|
message.error('复制失败')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-[#F7F8FA] px-10 py-6 flex gap-4">
|
|
<div class="bg-white rounded-lg flex-1">
|
|
<div class="flex justify-between items-center m-3 text-sm">
|
|
<div class="bg-[#328afe] text-white px-3 py-1 rounded-sm cursor-pointer">
|
|
分享星球
|
|
</div>
|
|
<div class="relative flex items-center w-[300px]">
|
|
<input
|
|
v-model="params.searchContent"
|
|
type="text"
|
|
placeholder="请输入用户名称"
|
|
class="w-full h-9 pl-4 pr-14 border border-[#eee] rounded-lg text-sm placeholder-[#878D95] outline-none focus:border-[#3f7ef7] focus:ring-1 focus:ring-[#3f7ef7] transition-colors"
|
|
@keyup="handleSearch"
|
|
>
|
|
<button class="absolute right-3 flex items-center space-x-1 text-[#4A5563]">
|
|
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667zM14 14l-2.9-2.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- <span class="text-sm font-bold">搜索</span> -->
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-[200px_120px_120px_200px_200px_200px] border-b border-[#eee]">
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
全部成员
|
|
</div>
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
权限
|
|
</div>
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
加入类型
|
|
</div>
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
首次加入时间
|
|
</div>
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
到期时间
|
|
</div>
|
|
<div class="p-3 text-[#1f2329] font-medium">
|
|
操作
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="p-10">
|
|
<n-spin />
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div
|
|
v-for="item in memberList"
|
|
:key="item.id"
|
|
class="grid grid-cols-[200px_120px_120px_200px_200px_200px] border-b border-[#eee] hover:bg-gray-50"
|
|
>
|
|
<div class="p-3 flex items-center gap-2 w-[200px]">
|
|
<img :src="item.avatar" class="w-8 h-8 rounded-full" :alt="item.nickname">
|
|
<span
|
|
class="truncate flex-1 cursor-pointer"
|
|
title="双击复制"
|
|
@dblclick="copyToClipboard(item.nickName)"
|
|
>
|
|
{{ item.nickName }}
|
|
</span>
|
|
</div>
|
|
<div class="p-3 flex items-center">
|
|
{{ item.userType === 0 ? '成员' : item.userType === 1 ? '管理员' : '群主' }}
|
|
</div>
|
|
<div class="p-3 flex items-center">
|
|
{{ item.userType !== 2 ? item.joinType : '-' }}
|
|
</div>
|
|
<div class="p-3 flex items-center">
|
|
{{ item.startTime || '-' }}
|
|
</div>
|
|
<div class="p-3 flex items-center">
|
|
{{ item.endTime || '-' }}
|
|
</div>
|
|
<div class="p-3 w-[300px] flex items-center">
|
|
<div class="w-[100px]">
|
|
<button
|
|
class="text-[#1e80ff] hover:text-[#3b8fff]"
|
|
@click="handleSetAdmin(item)"
|
|
>
|
|
{{ item.userType === 2 ? '-' : item.userType === 0 ? '设为管理员' : '取消管理员' }}
|
|
</button>
|
|
</div>
|
|
<div class="w-[100px]">
|
|
<button
|
|
class="text-[#f85149] hover:text-[#ff6b64]"
|
|
@click="handleRemove(item)"
|
|
>
|
|
{{ item.userType === 2 ? '-' : item.isBlack === '0' ? '拉黑' : '解除拉黑' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-if="isInitialized" class="flex justify-center mt-4">
|
|
<n-pagination
|
|
v-model:page="pagination.page"
|
|
v-model:page-size="pagination.pageSize"
|
|
:item-count="pagination.itemCount"
|
|
:show-size-picker="false"
|
|
@update:page="handlePageChange"
|
|
/>
|
|
</div>
|
|
<n-modal
|
|
v-model:show="showBlackModal"
|
|
:style="{ width: '480px' }"
|
|
:mask-closable="false"
|
|
class="rounded-lg"
|
|
>
|
|
<div class="p-6 bg-white rounded-lg">
|
|
<div class="text-center text-lg font-medium mb-6">
|
|
拉黑成员
|
|
</div>
|
|
<n-form
|
|
ref="formRef"
|
|
:model="blackForm"
|
|
:rules="rules"
|
|
label-placement="left"
|
|
label-width="auto"
|
|
require-mark-placement="right-hanging"
|
|
class="space-y-4"
|
|
>
|
|
<n-form-item label="拉黑时长" path="blackDay">
|
|
<div class="flex items-center gap-2">
|
|
<n-input-number
|
|
v-model:value="blackForm.blackDay"
|
|
placeholder="请输入"
|
|
:min="1"
|
|
@update:value="() => formRef.value?.validate(['blackDay'])"
|
|
/>
|
|
<span class="text-sm">天</span>
|
|
<div class="relative group">
|
|
<div class="i-carbon-information text-gray-400 cursor-help" />
|
|
<div class="absolute left-6 top-0 hidden group-hover:block w-64 p-3 bg-black bg-opacity-75 text-white text-xs rounded-lg">
|
|
拉黑后该成员将不能对星球进行内容发布、点赞、评论内容等操作！拉黑时长结束后将自动解除
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-form-item>
|
|
<n-form-item label="拉黑原因" path="blackReason">
|
|
<n-input
|
|
v-model:value="blackForm.blackReason"
|
|
type="textarea"
|
|
placeholder="请输入内容"
|
|
:autosize="{ minRows: 3, maxRows: 5 }"
|
|
class="w-full"
|
|
/>
|
|
</n-form-item>
|
|
</n-form>
|
|
<div class="flex justify-center gap-4 mt-8">
|
|
<n-button
|
|
class="w-24 h-9 hover:opacity-90"
|
|
@click="showBlackModal = false"
|
|
>
|
|
取消
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
class="w-24 h-9 hover:opacity-90"
|
|
:theme-overrides="{
|
|
common: {
|
|
primaryColor: '#3f7ef7',
|
|
primaryColorHover: '#3f7ef7',
|
|
},
|
|
}"
|
|
@click="handleBlack"
|
|
>
|
|
确定拉黑
|
|
</n-button>
|
|
</div>
|
|
</div>
|
|
</n-modal>
|
|
</div>
|
|
<div class="w-[300px]">
|
|
<PlanetBaseInfo :community-id="route.query.communityId" :tenant-id="route.query.tenantId" />
|
|
</div>
|
|
</div>
|
|
</template>
|