This commit is contained in:
Your Name
2026-05-07 11:50:48 +08:00
parent 9d405ebed9
commit c4dd196e72
6 changed files with 842 additions and 219 deletions
+356 -37
View File
@@ -123,7 +123,10 @@
</el-card>
<el-card class="yeji-panel yeji-main-tabs-card" shadow="never">
<div class="yeji-table-tabs-head">表格统计</div>
<div class="yeji-table-tabs-head">
<span class="yeji-table-tabs-head__title">表格统计</span>
<span class="yeji-table-tabs-head__hint">列较多时可横向滚动浏览部门 / 排名列在滚动时保持固定</span>
</div>
<el-tabs v-model="yejiDisplayTab" class="yeji-view-tabs">
<el-tab-pane label="医生统计" name="doctor" lazy>
<el-card
@@ -208,7 +211,8 @@
{{ leaderboardBlock.channel_name }}
</span>
</div>
<table class="yeji-table__body">
<div class="yeji-table__scroll" tabindex="0" role="region" aria-label="排行榜可横向滚动">
<table class="yeji-table__body yeji-table__body--leaderboard">
<thead>
<tr>
<th class="col-rank">排名</th>
@@ -274,6 +278,7 @@
</tr>
</tbody>
</table>
</div>
<div class="yeji-table__foot yeji-table__foot--left">
<span>诊金单位 · 被指派数与部门业绩表同口径 · 接诊率 = 诊金 ÷ 进线/进线</span>
<span v-if="lb.er_center_subtree">
@@ -381,7 +386,8 @@
<div class="yeji-table__header">
{{ buildTableTitle(tb) }}
</div>
<table class="yeji-table__body">
<div class="yeji-table__scroll" tabindex="0" role="region" aria-label="业绩数据表可横向滚动">
<table class="yeji-table__body yeji-table__body--data">
<thead>
<tr>
<th class="col-dept">部门</th>
@@ -444,24 +450,24 @@
<el-tooltip placement="top" effect="dark" :show-after="200">
<template #content>
<div style="max-width: 300px; line-height: 1.7; font-size: 12px">
按订单<b>创建时间</b>统计处方订单列表业绩合计口径一致<br />
按订单<b>创建时间</b>统计处方订单列表业绩合计口径一致<b>诊单医助</b>归属展示部门<br />
<b>不受渠道筛选影响</b>展示部门下全部订单
</div>
</template>
<el-icon class="col-info"><InfoFilled /></el-icon>
</el-tooltip>
</th>
<th v-if="tb.channel_name" class="col-completed">
<span>{{ buildChannelColTitle(tb, '业绩') }}</span>
<th v-if="tb.channel_name" class="col-completed col-narrow-head">
<span class="yeji-th-label">{{ yejiChannelMetricShort('perf') }}</span>
<el-tooltip placement="top" effect="dark" :show-after="200">
<template #content>
<div style="max-width: 340px; line-height: 1.7; font-size: 12px">
处方订单列表业绩<b>同口径</b>按订单 <b>create_time</b> 归日<br />
fulfillment_status 4<br />
渠道判定 EXISTS该患者有任一挂号 <b>channels 命中字典 + status=3</b>不限挂号时点
{{ tb.channel_name }}渠道业绩与卡片标题渠道一致处方订单列表业绩<b>同口径</b>按订单
<b>create_time</b> 归日剔除履约已取消(4)<br />
渠道判定用 EXISTS该患者有任一挂号 <b>channels 命中字典 + status=3</b>不限挂号时点
</div>
</template>
<el-icon class="col-info"><InfoFilled /></el-icon>
<el-icon class="col-info" aria-label="说明"><InfoFilled /></el-icon>
</el-tooltip>
</th>
<th>
@@ -488,27 +494,27 @@
<el-icon class="col-info"><InfoFilled /></el-icon>
</el-tooltip>
</th>
<th v-if="tb.channel_name" class="col-completed">
<span>{{ buildChannelColTitle(tb, '成交单') }}</span>
<th v-if="tb.channel_name" class="col-completed col-narrow-head">
<span class="yeji-th-label">{{ yejiChannelMetricShort('deal') }}</span>
<el-tooltip placement="top" effect="dark" :show-after="200">
<template #content>
<div style="max-width: 320px; line-height: 1.7; font-size: 12px">
{{ tb.channel_name }}业绩同源统计区间内 <b>非取消业务订单</b> 条数fulfillment_status 4<br />
按订单 <b>create_time</b> 归日渠道判定同业绩列患者须有对应 channels 的已完成挂号
{{ tb.channel_name }}渠道成交单数与渠道业绩同源区间内 <b>非取消业务订单</b> 条数按订单
<b>create_time</b> 归日渠道判定同业绩列
</div>
</template>
<el-icon class="col-info"><InfoFilled /></el-icon>
<el-icon class="col-info" aria-label="说明"><InfoFilled /></el-icon>
</el-tooltip>
</th>
<th v-if="tb.channel_name" class="col-completed">
<span>{{ buildChannelColTitle(tb, '客单价') }}</span>
<th v-if="tb.channel_name" class="col-completed col-narrow-head">
<span class="yeji-th-label">{{ yejiChannelMetricShort('aov') }}</span>
<el-tooltip placement="top" effect="dark" :show-after="200">
<template #content>
<div style="max-width: 280px; line-height: 1.7; font-size: 12px">
{{ tb.channel_name }}业绩 ÷ {{ tb.channel_name }}接诊诊单均值
{{ tb.channel_name }}渠道客单价 渠道业绩 ÷ 渠道成交单
</div>
</template>
<el-icon class="col-info"><InfoFilled /></el-icon>
<el-icon class="col-info" aria-label="说明"><InfoFilled /></el-icon>
</el-tooltip>
</th>
<th>
@@ -609,6 +615,7 @@
</tr>
</tbody>
</table>
</div>
<div class="yeji-table__foot">
<span>区间{{ tb.start_date }} ~ {{ tb.end_date }}</span>
<span v-if="tb.channel_name"> · 渠道{{ tb.channel_name }}</span>
@@ -830,7 +837,7 @@
<el-drawer
v-model="orderDrawerVisible"
direction="rtl"
size="min(960px, 96vw)"
size="min(1120px, 98vw)"
destroy-on-close
class="yeji-order-drawer"
:show-close="true"
@@ -861,7 +868,36 @@
orderDrawerConsultCount === null ? '—' : orderDrawerConsultCount.toLocaleString('zh-CN')
}} 次</span>
</div>
<div class="yeji-order-drawer__stat-card yeji-order-drawer__stat-card--accent">
<template v-if="orderDrawerChannelSplitActive && orderDrawerSplitPerfCache">
<div class="yeji-order-drawer__stat-card yeji-order-drawer__stat-card--total">
<span class="yeji-order-drawer__stat-label">
合计业绩
<span class="yeji-order-drawer__stat-note"
>(与看板「合计业绩」列同口径,不限渠道;{{ orderDrawerSplitPerfCache.totalOrderCount.toLocaleString('zh-CN') }} 笔)</span
>
</span>
<span class="yeji-order-drawer__stat-value yeji-order-drawer__stat-value--money">
¥{{ formatOrderDrawerMoney(orderDrawerSplitPerfCache.totalAmount) }}
</span>
</div>
<div class="yeji-order-drawer__stat-card yeji-order-drawer__stat-card--accent">
<span class="yeji-order-drawer__stat-label">
{{ orderDrawerChannelLabel }}业绩
<span class="yeji-order-drawer__stat-note"
>(与看板「{{ orderDrawerChannelLabel }}业绩」同口径;{{
orderDrawerSplitPerfCache.channelOrderCount.toLocaleString('zh-CN')
}} 笔)</span
>
</span>
<span class="yeji-order-drawer__stat-value yeji-order-drawer__stat-value--money">
¥{{ formatOrderDrawerMoney(orderDrawerChannelStatAmount) }}
</span>
</div>
</template>
<div
v-else
class="yeji-order-drawer__stat-card yeji-order-drawer__stat-card--accent"
>
<span class="yeji-order-drawer__stat-label">
业务订单金额合计
<span class="yeji-order-drawer__stat-note">(不含履约已取消,与上方业绩口径一致)</span>
@@ -879,6 +915,16 @@
</div>
</section>
<el-tabs
v-if="orderDrawerChannelSplitActive"
v-model="orderDrawerListTab"
class="yeji-order-drawer__list-tabs"
@tab-change="onOrderDrawerListTabChange"
>
<el-tab-pane label="合计业绩(全量订单)" name="total" />
<el-tab-pane :label="`渠道筛选(${orderDrawerChannelLabel}`" name="channel" />
</el-tabs>
<div v-loading="orderDrawerLoading" class="yeji-order-drawer__body">
<el-table
v-if="orderDrawerLists.length > 0 || orderDrawerLoading"
@@ -892,6 +938,39 @@
>
<el-table-column type="index" label="#" width="46" :index="orderDrawerIndexMethod" />
<el-table-column prop="order_no" label="订单号" min-width="152" show-overflow-tooltip />
<el-table-column label="关联挂号" min-width="218">
<template #default="{ row }">
<div v-if="row.linked_appointment" class="yeji-order-appt-lines">
<div class="yeji-order-appt-line">
<span class="yeji-order-appt-k">日期</span>
{{ orderDrawerApptSchedule(row.linked_appointment) }}
</div>
<div class="yeji-order-appt-line">
<span class="yeji-order-appt-k">状态</span>
{{ row.linked_appointment.status_desc || '—' }}
<span
v-if="row.linked_appointment.doctor_name"
class="yeji-order-appt-sub"
>
· {{ row.linked_appointment.doctor_name }}
</span>
</div>
<div class="yeji-order-appt-line">
<span class="yeji-order-appt-k">类型</span>
{{ row.linked_appointment.appointment_type_desc || '—' }}
</div>
<div class="yeji-order-appt-line">
<span class="yeji-order-appt-k">渠道</span>
{{
row.linked_appointment.channel_source_desc ||
row.linked_appointment.channel_source ||
'—'
}}
</div>
</div>
<span v-else class="yeji-order-appt-empty">—</span>
</template>
</el-table-column>
<el-table-column label="金额" width="108" align="right">
<template #default="{ row }">
<span class="yeji-order-amt">¥{{ row.amount ?? '—' }}</span>
@@ -955,7 +1034,7 @@
class="yeji-unassigned-dialog__table"
:empty-text="unassignedDialogLoading ? '加载中…' : '暂无数据'"
>
<el-table-column prop="name" label="创建人" min-width="120" show-overflow-tooltip />
<el-table-column prop="name" label="诊单医助" min-width="120" show-overflow-tooltip />
<el-table-column label="账号" width="88" align="right">
<template #default="{ row }">
{{ row.admin_id > 0 ? row.admin_id : '—' }}
@@ -1822,6 +1901,15 @@ const orderDrawerLists = ref<Array<Record<string, any>>>([])
const orderDrawerCount = ref(0)
const orderDrawerPage = ref(1)
const orderDrawerPageSize = ref(15)
/** 侧栏列表:有渠道筛选时,合计业绩=全量订单 / 渠道=收窄订单 */
const orderDrawerListTab = ref<'total' | 'channel'>('channel')
/** 渠道模式下接口返回的合计 vs 渠道业绩快照(切换 Tab 时用于对照卡片) */
const orderDrawerSplitPerfCache = ref<{
totalAmount: number
totalOrderCount: number
channelAmount: number
channelOrderCount: number
} | null>(null)
type OrderDrawerFilter =
| { mode: 'dept'; deptId: number; deptName: string; start: string; end: string }
@@ -1862,6 +1950,28 @@ const orderDrawerPageAmountSum = computed(() =>
orderDrawerLists.value.reduce((s, row) => s + Number(row.amount ?? 0), 0)
)
const orderDrawerChannelSplitActive = computed(
() => Boolean(selectedChannel.value) && orderDrawerVisible.value
)
const orderDrawerChannelLabel = computed(() => {
const code = selectedChannel.value
if (!code) return ''
for (const g of channelGroups.value) {
const c = g.channels?.find((x: ChannelOption) => x.channel_code === code)
if (c?.channel_name) return String(c.channel_name)
}
return code
})
const orderDrawerChannelStatAmount = computed(() => {
const c = orderDrawerSplitPerfCache.value
if (c && orderDrawerListTab.value === 'total') {
return Number.isFinite(c.channelAmount) ? c.channelAmount : null
}
return orderDrawerTotalAmount.value
})
// ── 目标进度卡片 ──────────────────────────────
interface TargetProgressSection {
dept_id: number
@@ -2273,6 +2383,16 @@ function orderDrawerIndexMethod(index: number) {
return (orderDrawerPage.value - 1) * orderDrawerPageSize.value + index + 1
}
/** 挂号展示:预约日期 + 时段 + 时点 */
function orderDrawerApptSchedule(a: Record<string, any>): string {
const date = a?.appointment_date != null && String(a.appointment_date) !== '' ? String(a.appointment_date) : ''
const period = a?.period != null && String(a.period) !== '' ? String(a.period) : ''
const time = a?.appointment_time != null && String(a.appointment_time) !== '' ? String(a.appointment_time) : ''
const tail = [period, time].filter(Boolean).join(' ')
if (date && tail) return `${date} ${tail}`
return date || tail || '—'
}
function formatOrderDrawerTime(t: unknown): string {
if (t == null || t === '') return '—'
const n = Number(t)
@@ -2316,10 +2436,32 @@ async function fetchOrderDrawerPage() {
params.yeji_er_center_revisit_slot = f.erCenterRevisitSlot
}
}
if (
selectedChannel.value &&
orderDrawerChannelSplitActive.value &&
orderDrawerListTab.value === 'channel'
) {
params.channel_code = selectedChannel.value
}
const res: any = await prescriptionOrderLists(params)
orderDrawerLists.value = Array.isArray(res?.lists) ? res.lists : []
orderDrawerCount.value = Number(res?.count ?? 0)
orderDrawerExtend.value = res?.extend && typeof res.extend === 'object' ? res.extend : null
if (
selectedChannel.value &&
orderDrawerListTab.value === 'channel' &&
orderDrawerExtend.value &&
orderDrawerExtend.value.stats_yeji_drawer_total_performance_amount != null
) {
orderDrawerSplitPerfCache.value = {
totalAmount: Number(orderDrawerExtend.value.stats_yeji_drawer_total_performance_amount),
totalOrderCount: Number(
orderDrawerExtend.value.stats_yeji_drawer_total_performance_order_count ?? 0
),
channelAmount: Number(orderDrawerExtend.value.stats_order_amount_performance ?? 0),
channelOrderCount: Number(res?.count ?? 0),
}
}
} catch (e: any) {
ElMessage.error(e?.msg || e?.message || '加载业务订单失败')
orderDrawerLists.value = []
@@ -2331,6 +2473,8 @@ async function fetchOrderDrawerPage() {
}
function openOrderDrawerByDept(tb: YejiTable, row: YejiRow) {
orderDrawerListTab.value = 'channel'
orderDrawerSplitPerfCache.value = null
orderDrawerFilter.value = {
mode: 'dept',
deptId: row.dept_id,
@@ -2346,6 +2490,8 @@ function openOrderDrawerByDept(tb: YejiTable, row: YejiRow) {
}
function openOrderDrawerByAssistant(row: LeaderboardPack['leaderboards'][0]['rows'][0], start: string, end: string) {
orderDrawerListTab.value = 'channel'
orderDrawerSplitPerfCache.value = null
orderDrawerFilter.value = {
mode: 'assistant',
assistantId: row.admin_id,
@@ -2366,6 +2512,8 @@ function openOrderDrawerByAssistantErCenterRevisit(
end: string,
revisitSlot: number
) {
orderDrawerListTab.value = 'channel'
orderDrawerSplitPerfCache.value = null
orderDrawerFilter.value = {
mode: 'assistant',
assistantId: assistant.admin_id,
@@ -2414,6 +2562,11 @@ function onLeaderboardRevisitSlotClick(r: LeaderboardPack['leaderboards'][0]['ro
)
}
function onOrderDrawerListTabChange() {
orderDrawerPage.value = 1
void fetchOrderDrawerPage()
}
function onOrderDrawerPageChange(p: number) {
orderDrawerPage.value = p
void fetchOrderDrawerPage()
@@ -2600,7 +2753,7 @@ function onLeadLinesPageSizeChange(size: number) {
}
/**
* 部门业绩行:有子部门 → 仅筛选该节点(后端展开子行);末级 → 侧栏业务订单;「未归属中心」→ 按创建人拆解弹窗
* 部门业绩行:有子部门 → 仅筛选该节点(后端展开子行);末级 → 侧栏业务订单;「未归属中心」→ 按诊单医助拆解弹窗
*/
function onYejiDeptRowClick(tb: YejiTable, row: YejiRow) {
if (isUnassignedYejiRow(row)) {
@@ -2883,14 +3036,10 @@ function getDeptPerformancePieOption(tb: YejiTable) {
}
}
// 表头:「{渠道名}业绩」(未选渠道时该列被 v-if 隐藏,因为它和「合计业绩」同值
function buildCompletedColTitle(t: YejiTable): string {
return t.channel_name ? `${t.channel_name}业绩` : '合计业绩'
}
// 通用:「{渠道名}{后缀}」,仅选渠道时使用
function buildChannelColTitle(t: YejiTable, suffix: string): string {
return `${t.channel_name}${suffix}`
// 选渠道时表头缩略(卡片标题已含渠道名,避免「自媒体1成交单」过长挤压
function yejiChannelMetricShort(kind: 'perf' | 'deal' | 'aov'): string {
const m: Record<string, string> = { perf: '渠道业绩', deal: '渠道成交', aov: '渠道客单' }
return m[kind] ?? kind
}
// ── 格式化 ───────────────────────────────
@@ -3074,12 +3223,26 @@ onMounted(async () => {
}
.yeji-table-tabs-head {
padding: 14px 20px 8px;
font-size: 15px;
font-weight: 700;
color: var(--yj-ink);
padding: 14px 20px 10px;
background: var(--yj-surface-muted);
border-bottom: 1px solid var(--yj-line);
&__title {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--yj-ink);
line-height: 1.3;
}
&__hint {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 500;
color: var(--yj-muted);
line-height: 1.45;
}
}
.yeji-tab-pane-stack {
@@ -3470,8 +3633,8 @@ onMounted(async () => {
.tables-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
gap: 18px;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.leaderboards-wrap {
@@ -3686,6 +3849,13 @@ onMounted(async () => {
border: 1px dashed var(--yj-line-strong);
}
.yeji-th-label {
display: inline-block;
line-height: 1.25;
vertical-align: middle;
max-width: 6.5rem;
}
.yeji-table {
background: var(--yj-surface);
border-radius: var(--yj-radius);
@@ -3693,6 +3863,29 @@ onMounted(async () => {
box-shadow: var(--yj-shadow-sm);
border: 1px solid var(--yj-line);
&__scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
outline: none;
&::-webkit-scrollbar {
height: 10px;
}
&::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--yj-muted) 50%, transparent);
border-radius: 999px;
}
&::-webkit-scrollbar-track {
background: var(--yj-surface-muted);
}
&:focus-visible {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--yj-brand) 40%, transparent);
}
}
&__header {
background: var(--yj-surface-muted);
color: var(--yj-ink);
@@ -3826,6 +4019,76 @@ onMounted(async () => {
color: #b91c1c;
font-weight: 600;
}
&.yeji-table__body--data {
min-width: max(100%, 1180px);
width: max-content;
thead th.col-dept,
tbody td.col-dept {
position: sticky;
left: 0;
z-index: 3;
}
thead th.col-dept {
z-index: 6;
text-align: left;
padding-left: 12px;
padding-right: 10px;
box-shadow: 8px 0 20px -12px rgba(15, 23, 42, 0.35);
}
tbody td.col-dept {
box-shadow: 8px 0 20px -12px rgba(15, 23, 42, 0.28);
white-space: normal;
max-width: 300px;
line-height: 1.35;
text-align: left;
padding-left: 12px;
padding-right: 10px;
word-break: break-word;
}
.total-row td.col-dept {
box-shadow: 8px 0 20px -12px rgba(15, 23, 42, 0.28);
}
thead th:not(.col-dept) {
min-width: 88px;
}
thead th.col-narrow-head {
min-width: 76px;
max-width: 112px;
padding: 8px 6px;
vertical-align: middle;
line-height: 1.2;
}
}
&.yeji-table__body--leaderboard {
min-width: max(100%, 780px);
width: max-content;
thead th.col-rank,
tbody td.col-rank {
position: sticky;
left: 0;
z-index: 3;
}
thead th.col-rank {
z-index: 6;
background: linear-gradient(
180deg,
var(--yj-dept-col-head-start) 0%,
var(--yj-dept-col-head-end) 100%
) !important;
box-shadow: 8px 0 20px -12px rgba(15, 23, 42, 0.3);
}
tbody td.col-rank {
background: var(--yj-surface);
box-shadow: 8px 0 20px -12px rgba(15, 23, 42, 0.22);
}
tbody tr.yeji-row--action:hover td.col-rank {
background: var(--yj-brand-soft);
}
}
}
&__foot {
@@ -3904,6 +4167,27 @@ onMounted(async () => {
&--muted {
background: #f8fafc;
}
&--total {
border-color: rgba(217, 119, 6, 0.22);
background: linear-gradient(180deg, #fffbeb 0%, var(--el-fill-color-blank) 100%);
}
}
.yeji-order-drawer__list-tabs {
:deep(.el-tabs__header) {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--yj-line);
}
:deep(.el-tabs__content) {
display: none;
}
:deep(.el-tabs__nav-wrap::after) {
display: none;
}
}
.yeji-order-drawer__stat-label {
@@ -3947,6 +4231,41 @@ onMounted(async () => {
gap: 8px;
}
.yeji-order-appt-lines {
line-height: 1.45;
font-size: 12px;
color: var(--yj-ink, #0f172a);
}
.yeji-order-appt-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 6px;
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
.yeji-order-appt-k {
flex: 0 0 auto;
font-size: 11px;
font-weight: 600;
color: var(--yj-muted, #64748b);
}
.yeji-order-appt-sub {
font-size: 11px;
color: var(--yj-muted, #64748b);
}
.yeji-order-appt-empty {
font-size: 12px;
color: var(--yj-muted, #94a3b8);
}
.yeji-order-amt {
color: #b91c1c;
font-weight: 600;