xinyouhe/yunke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 列表页移除tab结构(每渠道独立页面,由侧栏菜单驱动)

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
2026-08-15 13:41:49 +08:00
parent 9b21584e9a
commit aa90d9d8f2
4 changed files with 72 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yunkes/src/views/CallList.vue
+17 -19
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, type TabPaneName } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
import { getCalls } from '@/api'
import type { CallChannel, PhoneCall } from '@/api/types'
@@ -88,13 +88,20 @@ function handlePageSizeChange(s: number): void {
load()
}
function onTabChange(_name: TabPaneName): void {
// v-model has already updated callType; just reset paging and reload.
page.value = 1
// 切 tab 时复位 scope,避免把 微信群/好友 筛选带到 WA语音/电话 tab。
voiceScope.value = 'all'
load()
}
// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步通话类型并重载。
watch(
() => route.query.channel,
(q) => {
const next: CallChannel = q === 'whatsapp' ? 'wa_voice_call' : 'voice_call'
if (next !== callType.value) {
callType.value = next
page.value = 1
// 复位 scope,避免把 微信群/好友 筛选带到 WA语音。
voiceScope.value = 'all'
load()
}
},
)
// ---- header 导出：当前 tab 通话类型全量记录 CSV ----
const exporting = ref(false)
@@ -249,7 +256,7 @@ onMounted(load)
<div class="yk-calls">
<div class="yk-calls__header">
<div>
<h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
<h2 style="margin: 0 0 4px; font-size: 16px">{{ tabs.find(t => t.value === callType)?.label }}通话记录</h2>
<span class="yk-calls__sub">
共 {{ total }} 条 · 类型：{{ tabs.find(t => t.value === callType)?.label }}
</span>
@@ -261,15 +268,6 @@ onMounted(load)
</div>
</div>
<el-tabs v-model="callType" class="yk-calls__tabs" @tab-change="onTabChange">
<el-tab-pane
v-for="t in tabs"
:key="t.value"
:label="t.label"
:name="t.value"
/>
</el-tabs>
<el-alert
v-if="errorMsg"
:title="errorMsg"
yunkes/src/views/CustomerList.vue
+13 -20
View File
@@ -192,12 +192,8 @@ function onWechatPageSizeChange(s: number): void { handlePageSizeChange('wechat'
function onWhatsappPageChange(p: number): void { handlePageChange('whatsapp', p) }
function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whatsapp', s) }
function onTabChange(name: string | number): void {
const ch = String(name) as TabKey
channelStore.setChannel(ch)
if (!tabState[ch].loaded) loadTab(ch)
}
// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
// 下方 channelStore watch 负责同步 activeTab + lazy-load。
// ---- 操作列：查看聊天记录 → ChatTimeline ----
function viewChat(row: Customer): void {
if (!row.owner_account_id) {
@@ -357,7 +353,7 @@ onMounted(() => {
<div class="yk-customers">
<div class="yk-customers__header">
<div>
<h2 style="margin: 0 0 4px; font-size: 16px">客户列表</h2>
<h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}客户列表</h2>
<span class="yk-customers__sub">
共 {{ tabState[activeTab].total }} 条
<template v-if="departmentName"> · 部门：{{ departmentName }}</template>
@@ -383,11 +379,10 @@ onMounted(() => {
</div>
</div>
<el-tabs v-model="activeTab" class="yk-customers__tabs" @tab-change="onTabChange">
<!-- ============================================================
微信客户 — 16 列 + 操作，对齐云客 wechatdetail/1/{wxId}.
============================================================ -->
<el-tab-pane label="微信客户" name="wechat">
<!-- ============================================================
微信客户 — 16 列 + 操作，对齐云客 wechatdetail/1/{wxId}.
============================================================ -->
<template v-if="activeTab === 'wechat'">
<el-alert
v-if="tabState.wechat.errorMsg"
:title="tabState.wechat.errorMsg"
@@ -516,12 +511,12 @@ onMounted(() => {
@size-change="onWechatPageSizeChange"
/>
</div>
</el-tab-pane>
</template>
<!-- ============================================================
WhatsApp客户 — 7 列，对齐云客 waBusiness/friendlist.
============================================================ -->
<el-tab-pane label="WhatsApp客户" name="whatsapp">
<!-- ============================================================
WhatsApp客户 — 7 列，对齐云客 waBusiness/friendlist.
============================================================ -->
<template v-if="activeTab === 'whatsapp'">
<el-alert
v-if="tabState.whatsapp.errorMsg"
:title="tabState.whatsapp.errorMsg"
@@ -588,8 +583,7 @@ onMounted(() => {
@size-change="onWhatsappPageSizeChange"
/>
</div>
</el-tab-pane>
</el-tabs>
</template>
<p class="yk-customers__hint">点击任意一行查看客户全部字段。</p>
@@ -672,7 +666,6 @@ onMounted(() => {
}
.yk-customers__sub { color: #909399; font-size: 13px; }
.yk-customers__filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.yk-customers__tabs { margin-top: 4px; }
.yk-customers__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
.yk-customers__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
yunkes/src/views/GroupList.vue
+14 -21
View File
@@ -134,12 +134,8 @@ function onWechatPageSizeChange(s: number): void { handlePageSizeChange('wechat'
function onWhatsappPageChange(p: number): void { handlePageChange('whatsapp', p) }
function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whatsapp', s) }
function onTabChange(name: string | number): void {
const ch = String(name) as TabKey
channelStore.setChannel(ch)
if (!tabState[ch].loaded) loadTab(ch)
}
// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
// 下方 channelStore watch 负责同步 activeTab + lazy-load。
// ---- 操作列：查看聊天记录 → group-chat ----
function viewChat(row: Group): void {
if (!row.owner_account_id) {
@@ -274,7 +270,7 @@ onMounted(() => {
<div class="yk-groups">
<div class="yk-groups__header">
<div>
<h2 style="margin: 0 0 4px; font-size: 16px">群列表</h2>
<h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}群列表</h2>
<span class="yk-groups__sub">
共 {{ tabState[activeTab].total }} 条
<template v-if="ownerId"> · 员工账号：{{ ownerId }}</template>
@@ -290,11 +286,10 @@ onMounted(() => {
</div>
</div>
<el-tabs v-model="activeTab" class="yk-groups__tabs" @tab-change="onTabChange">
<!-- ============================================================
微信群 — 7 列，对齐云客 wechatdetail/2/{wxId}.
============================================================ -->
<el-tab-pane label="微信群" name="wechat">
<!-- ============================================================
微信群 — 7 列，对齐云客 wechatdetail/2/{wxId}.
============================================================ -->
<template v-if="activeTab === 'wechat'">
<el-alert
v-if="tabState.wechat.errorMsg"
:title="tabState.wechat.errorMsg"
@@ -356,13 +351,13 @@ onMounted(() => {
@size-change="onWechatPageSizeChange"
/>
</div>
</el-tab-pane>
</template>
<!-- ============================================================
WhatsApp群 — 8 列，对齐云客 waBusiness/friendlist 群列表 tab.
⚠️ WA 群抓取缺失 → 空表；字段推断，待 WA 抓取实现后核对。
============================================================ -->
<el-tab-pane label="WhatsApp群" name="whatsapp">
<!-- ============================================================
WhatsApp群 — 8 列，对齐云客 waBusiness/friendlist 群列表 tab.
⚠️ WA 群抓取缺失 → 空表；字段推断，待 WA 抓取实现后核对。
============================================================ -->
<template v-if="activeTab === 'whatsapp'">
<el-alert
v-if="tabState.whatsapp.errorMsg"
:title="tabState.whatsapp.errorMsg"
@@ -431,8 +426,7 @@ onMounted(() => {
@size-change="onWhatsappPageSizeChange"
/>
</div>
</el-tab-pane>
</el-tabs>
</template>
<p class="yk-groups__hint">点击任意一行查看群全部字段。</p>
@@ -486,7 +480,6 @@ onMounted(() => {
.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__tabs { margin-top: 4px; }
.yk-groups__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
.yk-groups__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
yunkes/src/views/StaffList.vue
+28 -28
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
@@ -502,10 +502,17 @@ function onWhatsappPageSizeChange(s: number): void {
handlePageSizeChange('whatsapp', s)
}
function onTabChange(name: string | number): void {
const ch = String(name) as TabKey
if (!tabState[ch].loaded) loadTab(ch)
}
// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步渠道并加载。
watch(
() => route.query.channel,
(q) => {
const next: TabKey = q === 'whatsapp' ? 'whatsapp' : 'wechat'
if (next !== activeTab.value) {
activeTab.value = next
if (!tabState[next].loaded) loadTab(next)
}
},
)
// ---------------------------------------------------------------------------
// Header 导出：当前 tab 渠道全量员工账号 CSV
@@ -575,9 +582,8 @@ const drawerAvatarSrc = computed<string | undefined>(() => {
})
onMounted(() => {
// The visible tab on first paint is 微信员工 — load it. The other tab
// lazy-loads on activation.
loadTab('wechat')
// Load the channel requested via ?channel= (sidebar preset).
loadTab(activeTab.value)
})
</script>
@@ -585,7 +591,7 @@ onMounted(() => {
<div class="yk-staff">
<div class="yk-staff__header">
<div>
<h2 style="margin: 0 0 4px; font-size: 16px">员工列表</h2>
<h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}员工列表</h2>
<span class="yk-staff__sub">
按渠道展示员工账号（微信号 / WhatsApp 号），列布局对齐云客后台，点击行查看全部字段。
</span>
@@ -597,12 +603,11 @@ onMounted(() => {
</div>
</div>
<el-tabs v-model="activeTab" class="yk-staff__tabs" @tab-change="onTabChange">
<!-- ============================================================
微信员工 (WeChat staff accounts) — 6 compound columns mirroring
云客 /cms/wechat/wechatlist (员工微信列表).
============================================================ -->
<el-tab-pane label="微信员工" name="wechat">
<!-- ============================================================
微信员工 (WeChat staff accounts) — 6 compound columns mirroring
云客 /cms/wechat/wechatlist (员工微信列表).
============================================================ -->
<template v-if="activeTab === 'wechat'">
<div class="yk-staff__stats-bar">
<span class="yk-staff__stats-label">沟通统计时段</span>
<el-date-picker
@@ -781,14 +786,14 @@ onMounted(() => {
@size-change="onWechatPageSizeChange"
/>
</div>
</el-tab-pane>
</template>
<!-- ============================================================
WhatsApp员工 (WhatsApp staff accounts) — 10 columns mirroring
云客 /cms/wechat/waBusiness/userlist (员工列表), ending in an
操作 column with 好友列表 / 群聊.
============================================================ -->
<el-tab-pane label="WhatsApp员工" name="whatsapp">
<!-- ============================================================
WhatsApp员工 (WhatsApp staff accounts) — 10 columns mirroring
云客 /cms/wechat/waBusiness/userlist (员工列表), ending in an
操作 column with 好友列表 / 群聊.
============================================================ -->
<template v-if="activeTab === 'whatsapp'">
<el-alert
v-if="tabState.whatsapp.errorMsg"
:title="tabState.whatsapp.errorMsg"
@@ -914,8 +919,7 @@ onMounted(() => {
@size-change="onWhatsappPageSizeChange"
/>
</div>
</el-tab-pane>
</el-tabs>
</template>
<YkStaffDetailModal
v-model="detailOpen"
@@ -1007,10 +1011,6 @@ onMounted(() => {
flex-wrap: wrap;
}
.yk-staff__tabs {
margin-top: 4px;
}
.yk-staff__pager {
margin-top: 12px;
display: flex;