This commit is contained in:
2026-06-04 11:46:32 +08:00
parent ff61e815d8
commit cdf8b1f76d
4 changed files with 192 additions and 293 deletions
@@ -2,6 +2,7 @@
<template v-if="variant === 'split'">
<el-form-item :label="label" :class="{ 'is-compact': compact }">
<el-radio-group v-model="timeType" :size="compact ? 'small' : 'default'" @change="emit('time-type-change')">
<el-radio-button v-if="showAll" label="all">全部</el-radio-button>
<el-radio-button label="today">今天</el-radio-button>
<el-radio-button label="yesterday">昨天</el-radio-button>
<el-radio-button label="week">最近7天</el-radio-button>
@@ -26,6 +27,7 @@
<el-form-item v-else :label="label" :class="{ 'is-compact': compact }">
<div class="list-time-filter-inline">
<el-radio-group v-model="timeType" :size="compact ? 'small' : 'default'" @change="emit('time-type-change')">
<el-radio-button v-if="showAll" label="all">全部</el-radio-button>
<el-radio-button label="today">今天</el-radio-button>
<el-radio-button label="yesterday">昨天</el-radio-button>
<el-radio-button label="week">最近7天</el-radio-button>
@@ -59,12 +61,15 @@ withDefaults(
pickerWidth?: string
/** 紧凑模式:small 尺寸 radio / 日期 */
compact?: boolean
/** 是否显示「全部」(不限时间)选项 */
showAll?: boolean
}>(),
{
label: '时间范围',
variant: 'split',
pickerWidth: '260px',
compact: false,
showAll: false,
}
)
+3 -1
View File
@@ -1,4 +1,4 @@
export type ListTimeType = 'today' | 'yesterday' | 'week' | 'month' | 'custom'
export type ListTimeType = 'all' | 'today' | 'yesterday' | 'week' | 'month' | 'custom'
export function formatYmd(d: Date): string {
const y = d.getFullYear()
@@ -12,6 +12,8 @@ export function resolveListTimeRange(timeType: ListTimeType, dateRange: string[]
const today = formatYmd(new Date())
switch (timeType) {
case 'all':
return ['', '']
case 'yesterday': {
const d = new Date()
d.setDate(d.getDate() - 1)
@@ -8,76 +8,86 @@
</div>
</header> -->
<el-card class="!border-none shadow-sm mb-4 po-status-card" shadow="never">
<div class="po-status-grid">
<div v-if="showPrescriptionAuditFilter" class="po-seg-group">
<span class="po-seg-label">处方审核</span>
<div class="po-seg">
<button
<el-card class="!border-none shadow-sm mb-4" shadow="never">
<div class="flex flex-col gap-3">
<div v-if="showPrescriptionAuditFilter" class="flex items-center gap-2 flex-wrap">
<span class="text-gray-500 text-sm font-medium w-20 shrink-0">处方审核</span>
<div
v-for="tab in rxAuditTabs"
:key="tab.value"
type="button"
:class="['po-seg-item', { 'is-active': queryParams.prescription_audit_status === tab.value }]"
:class="[
'px-4 py-1.5 rounded-lg cursor-pointer transition-all duration-200 select-none text-sm',
queryParams.prescription_audit_status === tab.value
? 'bg-primary text-white shadow-md'
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
]"
@click="handleRxAuditTabClick(tab.value)"
>
{{ tab.label }}
</button>
<span class="font-medium">{{ tab.label }}</span>
</div>
</div>
<div class="po-seg-group">
<span class="po-seg-label">支付单审核</span>
<div class="po-seg">
<button
<div class="flex items-center gap-2 flex-wrap">
<span class="text-gray-500 text-sm font-medium w-20 shrink-0">支付单审核</span>
<div
v-for="tab in payAuditTabs"
:key="tab.value"
type="button"
:class="['po-seg-item', { 'is-active': queryParams.payment_slip_audit_status === tab.value }]"
:class="[
'px-4 py-1.5 rounded-lg cursor-pointer transition-all duration-200 select-none text-sm',
queryParams.payment_slip_audit_status === tab.value
? 'bg-primary text-white shadow-md'
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
]"
@click="handlePayAuditTabClick(tab.value)"
>
{{ tab.label }}
</button>
<span class="font-medium">{{ tab.label }}</span>
</div>
</div>
<div class="po-seg-group">
<span class="po-seg-label">发货状态</span>
<div class="po-seg">
<button
<div class="flex items-center gap-2 flex-wrap">
<span class="text-gray-500 text-sm font-medium w-20 shrink-0">发货状态</span>
<div
v-for="tab in fulfillmentStatusTabs"
:key="'fs-' + String(tab.value)"
type="button"
:class="['po-seg-item', { 'is-active': queryParams.fulfillment_status === tab.value }]"
:class="[
'px-4 py-1.5 rounded-lg cursor-pointer transition-all duration-200 select-none text-sm',
queryParams.fulfillment_status === tab.value
? 'bg-primary text-white shadow-md'
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
]"
@click="handleFulfillmentStatusTabClick(tab.value)"
>
{{ tab.label }}
</button>
<span class="font-medium">{{ tab.label }}</span>
</div>
</div>
<div class="po-seg-group">
<span class="po-seg-label">供货方式</span>
<div class="po-seg">
<button
<div class="flex items-center gap-2 flex-wrap">
<span class="text-gray-500 text-sm font-medium w-20 shrink-0">供货方式</span>
<div
v-for="tab in supplyModeTabs"
:key="'sm-' + String(tab.value)"
type="button"
:class="['po-seg-item', { 'is-active': queryParams.supply_mode === tab.value }]"
:class="[
'px-4 py-1.5 rounded-lg cursor-pointer transition-all duration-200 select-none text-sm',
queryParams.supply_mode === tab.value
? 'bg-primary text-white shadow-md'
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
]"
@click="handleSupplyModeTabClick(tab.value)"
>
{{ tab.label }}
</button>
<span class="font-medium">{{ tab.label }}</span>
</div>
</div>
<div class="po-seg-group">
<span class="po-seg-label">快递方式</span>
<div class="po-seg">
<button
<div class="flex items-center gap-2 flex-wrap">
<span class="text-gray-500 text-sm font-medium w-20 shrink-0">快递方式</span>
<div
v-for="tab in expressCompanyTabs"
:key="'ec-' + String(tab.value)"
type="button"
:class="['po-seg-item', { 'is-active': queryParams.express_company === tab.value }]"
:class="[
'px-4 py-1.5 rounded-lg cursor-pointer transition-all duration-200 select-none text-sm',
queryParams.express_company === tab.value
? 'bg-primary text-white shadow-md'
: 'bg-gray-50 text-gray-600 hover:bg-gray-100'
]"
@click="handleExpressCompanyTabClick(tab.value)"
>
{{ tab.label }}
</button>
<span class="font-medium">{{ tab.label }}</span>
</div>
</div>
</div>
@@ -162,18 +172,18 @@
</p> -->
</div>
</div>
<el-form class="po-filter-form" :model="queryParams" size="small" inline>
<el-form class="ls-form" :model="queryParams" inline>
<list-time-filter
v-model:time-type="time_type"
v-model:date-range="dateRange"
label="创建时间"
variant="inline"
compact
show-all
picker-width="230px"
@time-type-change="onTimeTypeChange"
@custom-change="onCustomDateChange"
/>
<el-form-item class="po-fi w-[210px]" label="订单号">
<el-form-item class="w-[260px]" label="订单号">
<el-input
v-model="queryParams.order_no"
placeholder="业务订单号"
@@ -181,7 +191,7 @@
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item class="po-fi w-[150px]" label="处方ID">
<el-form-item class="w-[140px]" label="处方ID">
<el-input
v-model="queryParams.prescription_id"
placeholder="处方ID"
@@ -189,7 +199,7 @@
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item class="po-fi w-[200px]" label="患者">
<el-form-item class="w-[220px]" label="患者">
<el-input
v-model="queryParams.patient_keyword"
placeholder="姓名 / 手机号"
@@ -197,7 +207,7 @@
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item class="po-fi w-[200px]" label="快递">
<el-form-item class="w-[220px]" label="快递">
<el-input
v-model="queryParams.express_keyword"
placeholder="快递单号 / 公司"
@@ -205,13 +215,13 @@
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item v-if="showAuditAdminFilter" class="po-fi w-[190px]" label="下单人">
<el-form-item v-if="showAuditAdminFilter" class="w-[200px]" label="下单人">
<el-select
v-model="queryParams.audit_admin_id"
clearable
filterable
placeholder="全部下单人"
class="po-filter-control"
class="!w-full"
>
<el-option
v-for="a in auditAdminOptions"
@@ -221,13 +231,13 @@
/>
</el-select>
</el-form-item>
<el-form-item class="po-fi w-[180px]" label="医生">
<el-form-item class="w-[200px]" label="医生">
<el-select
v-model="queryParams.doctor_id"
clearable
filterable
placeholder="开方医生"
class="po-filter-control"
class="!w-full"
>
<el-option
v-for="d in doctorOptions"
@@ -237,28 +247,28 @@
/>
</el-select>
</el-form-item>
<el-form-item class="po-fi w-[220px]" label="医助部门">
<el-form-item class="w-[220px] min-w-[200px]" label="医助部门">
<el-tree-select
v-model="queryParams.assistant_dept_id"
:data="departmentTreeRaw"
class="po-filter-control"
class="!w-full"
clearable
filterable
check-strictly
:default-expand-all="true"
node-key="id"
:props="assistantDeptTreeProps"
placeholder="医助部门(含子级)"
placeholder="医助部门(选父级含子级)"
@change="onAssistantDeptChange"
/>
</el-form-item>
<el-form-item class="po-fi w-[180px]" label="医助">
<el-form-item class="w-[200px]" label="医助">
<el-select
v-model="queryParams.assistant_id"
clearable
filterable
placeholder="订单创建人"
class="po-filter-control"
class="!w-full"
>
<el-option
v-for="a in filteredAssistantOptions"
@@ -268,21 +278,17 @@
/>
</el-select>
</el-form-item>
<el-form-item class="po-fi w-[150px]" label="服务渠道">
<el-select
v-model="queryParams.service_channel"
clearable
placeholder="全部"
class="po-filter-control"
>
<el-form-item class="w-[160px]" label="服务渠道">
<el-select v-model="queryParams.service_channel" clearable placeholder="全部" class="!w-full">
<el-option label="未指派" value="0" />
</el-select>
</el-form-item>
<el-form-item class="po-fi-actions">
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="handleReset">重置</el-button>
<export-data
v-perms="['tcm.prescriptionOrder/export']"
class="ml-2.5"
:fetch-fun="prescriptionOrderExport"
:params="prescriptionOrderExportParams"
:page-size="pager.size"
@@ -790,8 +796,7 @@
</div>
<!-- 顶部数据概览卡片 -->
<el-row :gutter="16" class="mb-5">
<el-col :xs="12" :sm="6">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-5">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="flex items-center justify-between mb-1">
<div class="stat-title text-gray-500 text-xs">总金额</div>
@@ -808,14 +813,19 @@
</div>
<div class="stat-value text-red-500 font-bold text-xl">¥{{ detailData.amount }}</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">已付总额</div>
<div class="stat-value text-green-600 font-bold text-xl">¥{{ detailData.linked_pay_paid_total || 0 }}</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">退款金额</div>
<div
class="stat-value font-bold text-xl"
:class="Number(detailData.refund_amount) > 0 ? 'text-rose-500' : 'text-gray-400'"
>
¥{{ formatMoney(detailData.refund_amount || 0) }}
</div>
</el-card>
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">需代收</div>
<div
@@ -825,14 +835,11 @@
¥{{ formatMoney(detailAgencyToCollect) }}
</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">已付笔数</div>
<div class="stat-value text-primary font-bold text-xl">{{ detailLinkedPayOrders.length }} </div>
</el-card>
</el-col>
</el-row>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<!-- 左侧处方单 -->
@@ -3251,7 +3258,7 @@ const {
handleCustomDateChange,
resetTimeFilter,
applyCustomRange,
} = useListTimeFilter('today')
} = useListTimeFilter('all')
const handleQuery = () => {
pager.page = 1
@@ -3476,8 +3483,7 @@ const listStats = computed(() => {
scopeHint =
'统计口径:本人创建的订单 + 关联处方开方人为本人的订单(含医助代建);与下方筛选项(不含「创建时间」)一致'
}
const hasCustomTime = time_type.value !== 'today'
const headPrefix = hasCustomTime ? '区间' : '今日'
const headPrefix = time_type.value === 'all' ? '全部' : time_type.value === 'today' ? '今日' : '区间'
return {
order: n(o),
pay: n(pay),
@@ -6504,121 +6510,6 @@ async function downloadPrescriptionSlipPdf() {
</script>
<style scoped lang="scss">
.stats-filter-form {
:deep(.el-form-item) {
margin-bottom: 0;
}
}
/* ── 状态分段筛选(iOS 风格 segmented control)── */
.po-status-card :deep(.el-card__body) {
padding: 14px 18px;
}
.po-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 32px;
@media (max-width: 1180px) {
grid-template-columns: 1fr;
}
}
.po-seg-group {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.po-seg-label {
flex-shrink: 0;
width: 72px;
font-size: 13px;
font-weight: 500;
color: var(--el-text-color-secondary);
text-align: right;
}
.po-seg {
display: inline-flex;
flex-wrap: wrap;
gap: 2px;
padding: 3px;
background: var(--el-fill-color-light);
border-radius: 9px;
}
.po-seg-item {
appearance: none;
border: none;
margin: 0;
background: transparent;
padding: 5px 16px;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--el-text-color-regular);
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.po-seg-item:hover {
color: var(--el-color-primary);
}
.po-seg-item.is-active {
background: #fff;
color: var(--el-color-primary);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* ── 查询条件表单(流式 inline,自动换行)── */
.po-filter-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
:deep(.el-form-item) {
margin: 0;
}
:deep(.el-form-item__label) {
padding-right: 8px;
color: var(--el-text-color-secondary);
font-size: 13px;
}
:deep(.el-form-item__content) {
flex: 1;
min-width: 0;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-tree-select) {
width: 100%;
}
}
.po-filter-control {
width: 100%;
}
/* 查询/重置/导出:流到末尾并靠右 */
.po-fi-actions {
margin-left: auto;
:deep(.el-form-item__content) {
display: flex;
align-items: center;
gap: 8px;
}
}
.prescription-order-page {
margin: 0 auto;
@@ -6644,7 +6535,7 @@ async function downloadPrescriptionSlipPdf() {
}
.po-filter-card :deep(.el-card__body) {
padding: 12px 16px 14px;
padding-bottom: 12px;
}
.po-list-stats {
@@ -196,6 +196,7 @@
v-model:date-range="dateRange"
label="创建时间"
variant="inline"
show-all
picker-width="260px"
@time-type-change="onTimeTypeChange"
@custom-change="onCustomDateChange"
@@ -701,8 +702,7 @@
</div>
<!-- 顶部数据概览卡片 -->
<el-row :gutter="16" class="mb-5">
<el-col :xs="12" :sm="6">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-5">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="flex items-center justify-between mb-1">
<div class="stat-title text-gray-500 text-xs">总金额</div>
@@ -719,14 +719,19 @@
</div>
<div class="stat-value text-red-500 font-bold text-xl">¥{{ detailData.amount }}</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">已付总额</div>
<div class="stat-value text-green-600 font-bold text-xl">¥{{ detailData.linked_pay_paid_total || 0 }}</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">退款金额</div>
<div
class="stat-value font-bold text-xl"
:class="Number(detailData.refund_amount) > 0 ? 'text-rose-500' : 'text-gray-400'"
>
¥{{ formatMoney(detailData.refund_amount || 0) }}
</div>
</el-card>
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">需代收</div>
<div
@@ -736,14 +741,11 @@
¥{{ formatMoney(detailAgencyToCollect) }}
</div>
</el-card>
</el-col>
<el-col :xs="12" :sm="6">
<el-card shadow="never" class="stat-card border border-gray-100 bg-gray-50/50">
<div class="stat-title text-gray-500 text-xs mb-1">已付笔数</div>
<div class="stat-value text-primary font-bold text-xl">{{ detailLinkedPayOrders.length }} </div>
</el-card>
</el-col>
</el-row>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<!-- 左侧处方单 -->
@@ -2889,7 +2891,7 @@ const {
handleTimeTypeChange,
handleCustomDateChange,
resetTimeFilter,
} = useListTimeFilter('today')
} = useListTimeFilter('all')
const handleQuery = () => {
pager.page = 1
@@ -3055,8 +3057,7 @@ const listStats = computed(() => {
scopeHint =
'统计口径:本人创建的订单 + 关联处方开方人为本人的订单(含医助代建);与下方筛选项(不含「创建时间」)一致'
}
const hasCustomTime = time_type.value !== 'today'
const headPrefix = hasCustomTime ? '区间' : '今日'
const headPrefix = time_type.value === 'all' ? '全部' : time_type.value === 'today' ? '今日' : '区间'
return {
order: n(o),
pay: n(pay),
@@ -3397,7 +3398,7 @@ const h5ActiveFilterCount = computed(() => {
'patient_keyword', 'express_keyword', 'doctor_id',
'assistant_dept_id', 'assistant_id'
]
let n = time_type.value !== 'today' ? 1 : 0
let n = time_type.value !== 'all' ? 1 : 0
for (const k of keys) {
const v = q[k]
if (v === null || v === undefined) continue