feat(staff): action buttons → filtered customer/group list
Adds groups.user_id filter; viewCustomers/viewGroups push owner_account_id query; CustomerList/GroupList read it. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -33,6 +33,10 @@ const departmentId = computed<string | null>(() =>
|
||||
route.query.department_id ? String(route.query.department_id) : null,
|
||||
)
|
||||
|
||||
const ownerId = computed<string | null>(() =>
|
||||
route.query.owner_account_id ? String(route.query.owner_account_id) : null,
|
||||
)
|
||||
|
||||
const departmentName = computed(() => {
|
||||
if (!departmentId.value) return null
|
||||
return org.findNode(departmentId.value)?.label ?? departmentId.value
|
||||
@@ -96,6 +100,7 @@ async function load(): Promise<void> {
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
department_id: departmentId.value ?? undefined,
|
||||
owner_account_id: ownerId.value ?? undefined,
|
||||
})
|
||||
customers.value = res.items
|
||||
total.value = res.total
|
||||
@@ -118,9 +123,16 @@ function handlePageSizeChange(s: number): void {
|
||||
load()
|
||||
}
|
||||
|
||||
// React to top-bar channel + dept tree selection.
|
||||
/** 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 })
|
||||
}
|
||||
|
||||
// React to top-bar channel + dept tree selection + owner_account_id query.
|
||||
watch(
|
||||
() => [channelStore.channel, departmentId.value] as const,
|
||||
() => [channelStore.channel, departmentId.value, ownerId.value] as const,
|
||||
() => {
|
||||
page.value = 1
|
||||
load()
|
||||
@@ -174,6 +186,7 @@ onMounted(load)
|
||||
<span class="yk-customers__sub">
|
||||
共 {{ total }} 条
|
||||
<template v-if="departmentName"> · 部门:{{ departmentName }}</template>
|
||||
<template v-if="ownerId"> · 员工账号:{{ ownerId }}</template>
|
||||
· 渠道:{{ channelLabelCurrent }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -200,6 +213,15 @@ onMounted(load)
|
||||
>
|
||||
清除部门筛选
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="ownerId"
|
||||
size="small"
|
||||
type="info"
|
||||
plain
|
||||
@click="clearOwnerFilter"
|
||||
>
|
||||
清除员工筛选
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getGroups } from '@/api'
|
||||
import type { Channel, Group } from '@/api/types'
|
||||
@@ -8,9 +8,14 @@ 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)
|
||||
@@ -48,6 +53,7 @@ async function load(): Promise<void> {
|
||||
channel: channelStore.channel,
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
owner_account_id: ownerId.value ?? undefined,
|
||||
})
|
||||
groups.value = res.items
|
||||
total.value = res.total
|
||||
@@ -70,15 +76,22 @@ function handlePageSizeChange(s: number): void {
|
||||
load()
|
||||
}
|
||||
|
||||
// React to the top-bar channel filter.
|
||||
// React to the top-bar channel filter + owner_account_id query.
|
||||
watch(
|
||||
() => channelStore.channel,
|
||||
() => [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
|
||||
@@ -148,7 +161,9 @@ onMounted(load)
|
||||
<div>
|
||||
<h2 style="margin: 0 0 4px; font-size: 16px">群列表</h2>
|
||||
<span class="yk-groups__sub">
|
||||
共 {{ total }} 条 · 渠道:{{ channelLabelCurrent }}
|
||||
共 {{ total }} 条
|
||||
<template v-if="ownerId"> · 员工账号:{{ ownerId }}</template>
|
||||
· 渠道:{{ channelLabelCurrent }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="yk-groups__filters">
|
||||
@@ -165,6 +180,15 @@ onMounted(load)
|
||||
{{ opt.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button
|
||||
v-if="ownerId"
|
||||
size="small"
|
||||
type="info"
|
||||
plain
|
||||
@click="clearOwnerFilter"
|
||||
>
|
||||
清除员工筛选
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -171,19 +171,26 @@ function waSerial(index: number): number {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Action buttons (WhatsApp 操作 column) — jump to the corresponding list and
|
||||
// preset the global channel filter to WhatsApp. Per-staff filtering is not yet
|
||||
// supported by CustomerList/GroupList, so we land on the channel-wide list.
|
||||
// Action buttons (操作 column) — jump to the corresponding list scoped to the
|
||||
// row's account, presetting the global channel filter to the row's channel.
|
||||
// owner_account_id is the staff's account_id (wxId for WeChat, uid for WA),
|
||||
// which both CustomerList and GroupList already filter on server-side.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function viewCustomers(): void {
|
||||
channelStore.setChannel('whatsapp')
|
||||
router.push('/customers')
|
||||
function viewCustomers(row: Account): void {
|
||||
channelStore.setChannel(row.channel)
|
||||
router.push({
|
||||
path: '/customers',
|
||||
query: { owner_account_id: row.account_id },
|
||||
})
|
||||
}
|
||||
|
||||
function viewGroups(): void {
|
||||
channelStore.setChannel('whatsapp')
|
||||
router.push('/groups')
|
||||
function viewGroups(row: Account): void {
|
||||
channelStore.setChannel(row.channel)
|
||||
router.push({
|
||||
path: '/groups',
|
||||
query: { owner_account_id: row.account_id },
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -607,11 +614,11 @@ onMounted(() => {
|
||||
|
||||
<!-- 操作 -->
|
||||
<el-table-column label="操作" width="150" fixed="right" align="center">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click.stop="viewCustomers">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click.stop="viewCustomers(row)">
|
||||
好友列表
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" @click.stop="viewGroups">
|
||||
<el-button link type="primary" size="small" @click.stop="viewGroups(row)">
|
||||
群聊
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user