浅念
dfdd0595d2
Adds groups.user_id filter; viewCustomers/viewGroups push owner_account_id query; CustomerList/GroupList read it. Co-Authored-By: Claude <noreply@anthropic.com>
451 lines
12 KiB
Vue
451 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { getGroups } from '@/api'
|
||
import type { Channel, Group } from '@/api/types'
|
||
import { useChannelStore } from '@/stores/channel'
|
||
import { channelLabel, formatTime } from '@/utils/format'
|
||
import { buildGroupSections, readField } from '@/utils/groupFields'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const channelStore = useChannelStore()
|
||
|
||
const ownerId = computed<string | null>(() =>
|
||
route.query.owner_account_id ? String(route.query.owner_account_id) : null,
|
||
)
|
||
|
||
const groups = ref<Group[]>([])
|
||
const total = ref(0)
|
||
const page = ref(1)
|
||
const pageSize = ref(20)
|
||
const loading = ref(false)
|
||
const errorMsg = ref<string | null>(null)
|
||
|
||
// All-fields drawer state.
|
||
const drawerOpen = ref(false)
|
||
const drawerGroup = ref<Group | null>(null)
|
||
|
||
const channelOptions = [
|
||
{ value: 'all' as const, label: '全部渠道' },
|
||
{ value: 'wechat' as const, label: '微信' },
|
||
{ value: 'whatsapp' as const, label: 'WhatsApp' },
|
||
]
|
||
|
||
const channelLabelCurrent = computed(() =>
|
||
channelLabel(channelStore.channel === 'all' ? null : channelStore.channel),
|
||
)
|
||
|
||
function channelTagType(c: Group['channel']) {
|
||
return c === 'wechat' ? 'success' : 'warning'
|
||
}
|
||
|
||
function onChannelChange(value: string | number | boolean | undefined): void {
|
||
channelStore.setChannel(value as Channel | 'all')
|
||
}
|
||
|
||
async function load(): Promise<void> {
|
||
loading.value = true
|
||
errorMsg.value = null
|
||
try {
|
||
const res = await getGroups({
|
||
channel: channelStore.channel,
|
||
page: page.value,
|
||
page_size: pageSize.value,
|
||
owner_account_id: ownerId.value ?? undefined,
|
||
})
|
||
groups.value = res.items
|
||
total.value = res.total
|
||
} catch (e) {
|
||
errorMsg.value = (e as Error).message
|
||
ElMessage.error(`群列表加载失败：${(e as Error).message}`)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function handlePageChange(p: number): void {
|
||
page.value = p
|
||
load()
|
||
}
|
||
|
||
function handlePageSizeChange(s: number): void {
|
||
pageSize.value = s
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
// React to the top-bar channel filter + owner_account_id query.
|
||
watch(
|
||
() => [channelStore.channel, ownerId.value] as const,
|
||
() => {
|
||
page.value = 1
|
||
load()
|
||
},
|
||
)
|
||
|
||
/** Drop the ``owner_account_id`` query param while preserving any others. */
|
||
function clearOwnerFilter(): void {
|
||
const { owner_account_id: _drop, ...rest } = route.query
|
||
void _drop
|
||
router.replace({ query: rest })
|
||
}
|
||
|
||
/**
|
||
* Read a raw_json camelCase key off a group, preferring the structured
|
||
* snake_case column when it is populated. The first argument is the row so the
|
||
* table can use the same helper as the drawer.
|
||
*/
|
||
function cell(row: Group, camelKey: string): unknown {
|
||
return readField(row, camelKey)
|
||
}
|
||
|
||
function cellText(row: Group, camelKey: string): string {
|
||
const v = cell(row, camelKey)
|
||
return v === null || v === undefined || v === '' ? '--' : String(v)
|
||
}
|
||
|
||
function imageCell(row: Group, camelKey: string): string | undefined {
|
||
const v = cell(row, camelKey)
|
||
return typeof v === 'string' && v !== '' ? v : undefined
|
||
}
|
||
|
||
function timeCell(row: Group, camelKey: string): number | undefined {
|
||
const v = cell(row, camelKey)
|
||
return typeof v === 'number' ? v : undefined
|
||
}
|
||
|
||
function openDrawer(row: Group): void {
|
||
// Row click opens the all-fields drawer; the timeline is reached from the
|
||
// drawer's 查看聊天记录 action (preserves the owner/room/channel keying).
|
||
drawerGroup.value = row
|
||
drawerOpen.value = true
|
||
}
|
||
|
||
const drawerSections = computed(() =>
|
||
drawerGroup.value ? buildGroupSections(drawerGroup.value) : [],
|
||
)
|
||
|
||
const drawerAvatarSrc = computed<string | undefined>(() => {
|
||
const g = drawerGroup.value
|
||
if (!g) return undefined
|
||
return imageCell(g, 'headImageUrl') ?? undefined
|
||
})
|
||
|
||
const drawerCanChat = computed(() => !!drawerGroup.value?.owner_account_id)
|
||
|
||
function goChatFromDrawer(): void {
|
||
const row = drawerGroup.value
|
||
if (!row) return
|
||
if (!row.owner_account_id) {
|
||
ElMessage.warning('该群缺少归属账号，无法查看聊天记录')
|
||
return
|
||
}
|
||
router.push({
|
||
name: 'group-chat',
|
||
params: {
|
||
channel: row.channel,
|
||
ownerId: row.owner_account_id,
|
||
roomId: row.room_id,
|
||
},
|
||
})
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="yk-groups">
|
||
<div class="yk-groups__header">
|
||
<div>
|
||
<h2 style="margin: 0 0 4px; font-size: 16px">群列表</h2>
|
||
<span class="yk-groups__sub">
|
||
共 {{ total }} 条
|
||
<template v-if="ownerId"> · 员工账号：{{ ownerId }}</template>
|
||
· 渠道：{{ channelLabelCurrent }}
|
||
</span>
|
||
</div>
|
||
<div class="yk-groups__filters">
|
||
<el-radio-group
|
||
:model-value="channelStore.channel"
|
||
size="small"
|
||
@change="onChannelChange"
|
||
>
|
||
<el-radio-button
|
||
v-for="opt in channelOptions"
|
||
:key="opt.value"
|
||
:value="opt.value"
|
||
>
|
||
{{ opt.label }}
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button
|
||
v-if="ownerId"
|
||
size="small"
|
||
type="info"
|
||
plain
|
||
@click="clearOwnerFilter"
|
||
>
|
||
清除员工筛选
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-alert
|
||
v-if="errorMsg"
|
||
:title="errorMsg"
|
||
type="error"
|
||
show-icon
|
||
:closable="false"
|
||
style="margin-bottom: 12px"
|
||
/>
|
||
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="groups"
|
||
stripe
|
||
border
|
||
row-key="room_id"
|
||
style="width: 100%"
|
||
:row-class-name="() => 'yk-clickable-row'"
|
||
empty-text="暂无群数据"
|
||
@row-click="openDrawer"
|
||
>
|
||
<el-table-column label="群名" min-width="180">
|
||
<template #default="{ row }">
|
||
{{ row.room_name || cellText(row, 'chatRoomName') || row.room_id }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="群ID" min-width="200" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
<span style="font-family: monospace; font-size: 12px">{{ row.room_id }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="成员数" prop="member_count" width="90" align="right">
|
||
<template #default="{ row }">{{ row.member_count ?? '--' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="群主" min-width="140">
|
||
<template #default="{ row }">
|
||
<span v-if="cell(row, 'userName') || cell(row, 'userPhone')">
|
||
<template v-if="cell(row, 'userName')">{{ cellText(row, 'userName') }}</template>
|
||
<span
|
||
v-if="cell(row, 'userName') && cell(row, 'userPhone')"
|
||
style="color: #c0c4cc"
|
||
>
|
||
/
|
||
</span>
|
||
<template v-if="cell(row, 'userPhone')">{{ cellText(row, 'userPhone') }}</template>
|
||
</span>
|
||
<span v-else style="color: #c0c4cc">--</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="归属微信" min-width="130">
|
||
<template #default="{ row }">
|
||
<span v-if="row.owner_account_nickname">{{ row.owner_account_nickname }}</span>
|
||
<span v-else-if="cell(row, 'wechatNickName')">{{ cellText(row, 'wechatNickName') }}</span>
|
||
<span v-else-if="row.owner_account_id">{{ row.owner_account_id }}</span>
|
||
<span v-else style="color: #c0c4cc">--</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="消息数" prop="message_count" width="90" align="right">
|
||
<template #default="{ row }">{{ row.message_count ?? '--' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="最近聊天" width="160">
|
||
<template #default="{ row }">
|
||
{{ formatTime(row.last_chat_time ?? timeCell(row, 'lastChatTime')) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="渠道" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="channelTagType(row.channel)" size="small" effect="plain">
|
||
{{ channelLabel(row.channel) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="yk-groups__pager">
|
||
<el-pagination
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
:page-sizes="[20, 50, 100]"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
background
|
||
@current-change="handlePageChange"
|
||
@size-change="handlePageSizeChange"
|
||
/>
|
||
</div>
|
||
<p class="yk-groups__hint">点击任意一行查看群全部字段。</p>
|
||
|
||
<!-- All-fields drawer -->
|
||
<el-drawer
|
||
v-model="drawerOpen"
|
||
:title="drawerGroup ? `群详情 · ${drawerGroup.room_name ?? drawerGroup.room_id}` : '群详情'"
|
||
direction="rtl"
|
||
size="560px"
|
||
>
|
||
<template v-if="drawerGroup">
|
||
<div class="yk-drawer__topbar">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
:disabled="!drawerCanChat"
|
||
@click="goChatFromDrawer"
|
||
>
|
||
查看聊天记录
|
||
</el-button>
|
||
<span v-if="!drawerCanChat" class="yk-drawer__topbar-hint">
|
||
该群缺少归属账号，无法查看聊天
|
||
</span>
|
||
</div>
|
||
|
||
<div class="yk-drawer__avatar">
|
||
<el-avatar :size="56" :src="drawerAvatarSrc" shape="square">
|
||
{{ (drawerGroup.room_name || drawerGroup.room_id || '?').slice(0, 1) }}
|
||
</el-avatar>
|
||
<div class="yk-drawer__avatar-meta">
|
||
<div class="yk-drawer__avatar-name">
|
||
{{ drawerGroup.room_name || drawerGroup.room_id }}
|
||
</div>
|
||
<div class="yk-drawer__avatar-sub">
|
||
{{ channelLabel(drawerGroup.channel) }}
|
||
<template v-if="cell(drawerGroup, 'wechatNickName')">
|
||
· {{ cell(drawerGroup, 'wechatNickName') }}
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
|
||
<el-divider content-position="left">{{ section.title }}</el-divider>
|
||
<dl class="yk-drawer__kv">
|
||
<div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
|
||
<dt>{{ f.label }}</dt>
|
||
<dd v-if="f.render === 'image'" class="yk-drawer__img">
|
||
<el-image
|
||
:src="String(f.value)"
|
||
:preview-src-list="[String(f.value)]"
|
||
fit="cover"
|
||
hide-on-click-modal
|
||
/>
|
||
</dd>
|
||
<dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
|
||
<dd v-else>{{ f.text }}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</template>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.yk-groups__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.yk-groups__sub {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.yk-groups__filters {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.yk-groups__pager {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.yk-groups__hint {
|
||
margin: 8px 2px 0;
|
||
font-size: 12px;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.yk-drawer__topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.yk-drawer__topbar-hint {
|
||
color: #c0c4cc;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.yk-drawer__avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.yk-drawer__avatar-meta {
|
||
min-width: 0;
|
||
}
|
||
|
||
.yk-drawer__avatar-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.yk-drawer__avatar-sub {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.yk-drawer__kv {
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.yk-drawer__kv-item {
|
||
display: grid;
|
||
grid-template-columns: 110px 1fr;
|
||
gap: 8px 12px;
|
||
padding: 3px 0;
|
||
}
|
||
|
||
.yk-drawer__kv dt {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.yk-drawer__kv dd {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: #303133;
|
||
word-break: break-all;
|
||
min-width: 0;
|
||
}
|
||
|
||
.yk-drawer__img :deep(.el-image) {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--el-border-color-light, #e4e7ed);
|
||
}
|
||
|
||
.yk-drawer__empty {
|
||
color: #c0c4cc;
|
||
}
|
||
</style>
|