504 lines
17 KiB
Vue
504 lines
17 KiB
Vue
<template>
|
|
<div class="self-input-stats-page">
|
|
<el-card class="!border-none" shadow="never">
|
|
<el-form :inline="true" :model="queryParams" class="stats-filter-form">
|
|
<el-form-item label="时间范围">
|
|
<el-radio-group v-model="queryParams.time_type" @change="handleTimeTypeChange">
|
|
<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>
|
|
<el-radio-button label="month">最近30天</el-radio-button>
|
|
<el-radio-button label="custom">自定义</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="queryParams.time_type === 'custom'">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 260px"
|
|
@change="handleCustomDateChange"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="部门">
|
|
<el-tree-select
|
|
v-model="queryParams.dept_id"
|
|
:data="deptOptions"
|
|
node-key="id"
|
|
:props="deptTreeProps"
|
|
:default-expand-all="true"
|
|
check-strictly
|
|
placeholder="全部部门"
|
|
clearable
|
|
filterable
|
|
style="width: 220px"
|
|
@change="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="自媒体来源">
|
|
<media-source-select
|
|
v-model="queryParams.media_source"
|
|
:options="mediaSourceOptions"
|
|
:loading="mediaSourceLoading"
|
|
placeholder="全部来源"
|
|
:allow-create="false"
|
|
select-style="width: 220px"
|
|
@change="handleQuery"
|
|
@visible-change="onMediaSourceDropdownVisible"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" :loading="pager.loading" @click="handleQuery">查询</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<div class="stats-kpi-grid">
|
|
<div v-for="card in visibleSummaryCards" :key="card.key" class="stats-kpi-card">
|
|
<div class="stats-kpi-label">{{ card.label }}</div>
|
|
<div class="stats-kpi-value" :class="{ 'is-money': card.type === 'money' }">
|
|
{{ renderMetric(card.key, overview.summary, card.type) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-card class="!border-none mt-4 stats-detail-card" shadow="never">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div class="card-header-main">
|
|
<span class="card-title">业绩明细</span>
|
|
<span class="card-hint">{{ dateRangeText }}</span>
|
|
</div>
|
|
<div class="card-header-actions">
|
|
<el-button v-perms="['stats.personal_yeji/add']" type="primary" @click="handleAddYeji">
|
|
<template #icon>
|
|
<icon name="el-icon-Plus" />
|
|
</template>
|
|
新增业绩
|
|
</el-button>
|
|
<el-button
|
|
v-if="accountCostEntryPath"
|
|
v-perms="['stats.personal_account_cost/lists']"
|
|
@click="goAccountCostEntry"
|
|
>
|
|
账户消耗录入
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table
|
|
v-loading="pager.loading"
|
|
:data="pager.lists"
|
|
border
|
|
size="large"
|
|
max-height="640"
|
|
>
|
|
<el-table-column label="日期" prop="yeji_date" min-width="110" fixed="left" />
|
|
<el-table-column label="自媒体来源" prop="media_source" min-width="140" show-overflow-tooltip />
|
|
<el-table-column label="录入人" prop="creator_name" min-width="100" />
|
|
<el-table-column label="部门" prop="dept_name" min-width="140">
|
|
<template #default="{ row }">
|
|
<el-tooltip
|
|
v-if="row.dept_path"
|
|
:content="row.dept_path"
|
|
placement="top"
|
|
effect="dark"
|
|
>
|
|
<span class="dept-cell">{{ row.dept_name || '未分配' }}</span>
|
|
</el-tooltip>
|
|
<span v-else-if="row.dept_name">{{ row.dept_name }}</span>
|
|
<span v-else class="text-gray-400">未分配</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="col in visibleTableColumns"
|
|
:key="col.key"
|
|
:label="col.label"
|
|
:min-width="col.minWidth || 100"
|
|
align="right"
|
|
>
|
|
<template #default="{ row }">
|
|
{{ renderMetric(col.key, row, col.type) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
|
|
<el-table-column label="操作" width="140" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
v-perms="['stats.personal_yeji/edit']"
|
|
type="primary"
|
|
link
|
|
@click="handleEditYeji(row)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
v-perms="['stats.personal_yeji/delete']"
|
|
type="danger"
|
|
link
|
|
@click="handleDeleteYeji(row.id)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="flex justify-end mt-4">
|
|
<pagination v-model="pager" @change="fetchOverview" />
|
|
</div>
|
|
</el-card>
|
|
|
|
<yeji-edit-popup
|
|
v-if="showYejiEdit"
|
|
ref="yejiEditRef"
|
|
:media-source-options="mediaSourceOptions"
|
|
:media-source-loading="mediaSourceLoading"
|
|
@success="handleYejiSuccess"
|
|
@close="showYejiEdit = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="selfInputStats">
|
|
import {
|
|
getSelfInputOverview,
|
|
personalYejiDelete,
|
|
} from '@/api/self_input_stats'
|
|
import { deptAll } from '@/api/org/department'
|
|
import { usePaging } from '@/hooks/usePaging'
|
|
import { getRoutePath } from '@/router'
|
|
import feedback from '@/utils/feedback'
|
|
|
|
import MediaSourceSelect from './MediaSourceSelect.vue'
|
|
import YejiEditPopup from './yeji-edit.vue'
|
|
import { useMediaSourceOptions } from './useMediaSourceOptions'
|
|
|
|
type MetricType = 'count' | 'money' | 'percent' | 'ratio'
|
|
|
|
interface MetricCard {
|
|
key: string
|
|
label: string
|
|
type: MetricType
|
|
}
|
|
|
|
interface MetricColumn {
|
|
key: string
|
|
label: string
|
|
type: MetricType
|
|
minWidth?: number
|
|
}
|
|
|
|
const router = useRouter()
|
|
const yejiEditRef = shallowRef<InstanceType<typeof YejiEditPopup>>()
|
|
const showYejiEdit = ref(false)
|
|
const dateRange = ref<string[]>([])
|
|
const deptOptions = ref<any[]>([])
|
|
const {
|
|
mediaSourceOptions,
|
|
mediaSourceLoading,
|
|
loadMediaSourceOptions,
|
|
refreshMediaSourceOptions,
|
|
} = useMediaSourceOptions()
|
|
|
|
const deptTreeProps = {
|
|
value: 'id',
|
|
label: 'name',
|
|
children: 'children',
|
|
}
|
|
|
|
const overview = reactive<Record<string, any>>({
|
|
date_range: [],
|
|
summary: {},
|
|
can_view_finance: false,
|
|
})
|
|
|
|
const FINANCE_KEYS = new Set(['account_cost', 'cash_cost', 'roi'])
|
|
const canViewFinance = computed(() => Boolean(overview.can_view_finance))
|
|
|
|
const queryParams = reactive({
|
|
media_source: '',
|
|
dept_id: undefined as number | undefined,
|
|
time_type: 'today',
|
|
start_date: '',
|
|
end_date: '',
|
|
})
|
|
|
|
const accountCostEntryPath = computed(() => getRoutePath('stats.personal_account_cost/lists') || '')
|
|
|
|
const goAccountCostEntry = () => {
|
|
if (accountCostEntryPath.value) {
|
|
router.push(accountCostEntryPath.value)
|
|
}
|
|
}
|
|
|
|
const fetchOverviewList = async (params: Record<string, any>) => {
|
|
if (queryParams.time_type === 'custom') {
|
|
params.start_date = dateRange.value[0] || ''
|
|
params.end_date = dateRange.value[1] || ''
|
|
}
|
|
const res = await getSelfInputOverview(params)
|
|
Object.assign(overview, res?.extend || {})
|
|
return res
|
|
}
|
|
|
|
const loadDeptOptions = async () => {
|
|
try {
|
|
const res = await deptAll({ apply_data_scope: 1 })
|
|
if (Array.isArray(res)) {
|
|
deptOptions.value = res
|
|
}
|
|
} catch (e) {
|
|
deptOptions.value = []
|
|
}
|
|
}
|
|
|
|
const onMediaSourceDropdownVisible = (visible: boolean) => {
|
|
if (visible) {
|
|
refreshMediaSourceOptions()
|
|
}
|
|
}
|
|
|
|
const handleYejiSuccess = async () => {
|
|
await refreshMediaSourceOptions()
|
|
await fetchOverview()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadDeptOptions()
|
|
loadMediaSourceOptions()
|
|
})
|
|
|
|
const { pager, getLists } = usePaging({
|
|
fetchFun: fetchOverviewList,
|
|
params: queryParams,
|
|
firstLoading: true,
|
|
})
|
|
|
|
const summaryCards: MetricCard[] = [
|
|
{ key: 'add_fans_count', label: '加粉数', type: 'count' },
|
|
{ key: 'total_open_count', label: '总开口', type: 'count' },
|
|
{ key: 'unreplied_count', label: '未回复', type: 'count' },
|
|
{ key: 'paid_appointment_count', label: '付费挂号', type: 'count' },
|
|
{ key: 'free_appointment_count', label: '免费挂号', type: 'count' },
|
|
{ key: 'interview_count', label: '面诊', type: 'count' },
|
|
{ key: 'order_amount', label: '订单金额', type: 'money' },
|
|
{ key: 'account_cost', label: '账户消耗', type: 'money' },
|
|
{ key: 'total_open_rate', label: '总开口率', type: 'percent' },
|
|
{ key: 'paid_appointment_rate', label: '付费挂号率', type: 'percent' },
|
|
{ key: 'open_appointment_rate', label: '开口挂号率', type: 'percent' },
|
|
{ key: 'interview_rate', label: '面诊率', type: 'percent' },
|
|
{ key: 'receive_rate', label: '接诊率', type: 'percent' },
|
|
{ key: 'open_receive_rate', label: '开口接诊率', type: 'percent' },
|
|
{ key: 'interview_receive_rate', label: '面诊接诊率', type: 'percent' },
|
|
{ key: 'avg_unit_price', label: '平均单价', type: 'money' },
|
|
{ key: 'cash_cost', label: '现金成本', type: 'money' },
|
|
{ key: 'roi', label: 'ROI', type: 'ratio' },
|
|
]
|
|
|
|
const tableColumns: MetricColumn[] = [
|
|
{ key: 'add_fans_count', label: '加粉数', type: 'count' },
|
|
{ key: 'total_open_count', label: '总开口', type: 'count' },
|
|
{ key: 'unreplied_count', label: '未回复', type: 'count' },
|
|
{ key: 'paid_appointment_count', label: '付费挂号', type: 'count' },
|
|
{ key: 'free_appointment_count', label: '免费挂号', type: 'count' },
|
|
{ key: 'appointment_total_count', label: '挂号总数', type: 'count' },
|
|
{ key: 'interview_count', label: '面诊', type: 'count' },
|
|
{ key: 'completed_order_count', label: '接诊诊单', type: 'count' },
|
|
{ key: 'order_amount', label: '订单金额', type: 'money', minWidth: 110 },
|
|
{ key: 'account_cost', label: '账户消耗', type: 'money', minWidth: 110 },
|
|
{ key: 'total_open_rate', label: '总开口率', type: 'percent', minWidth: 100 },
|
|
{ key: 'paid_appointment_rate', label: '付费挂号率', type: 'percent', minWidth: 110 },
|
|
{ key: 'open_appointment_rate', label: '开口挂号率', type: 'percent', minWidth: 110 },
|
|
{ key: 'interview_rate', label: '面诊率', type: 'percent', minWidth: 100 },
|
|
{ key: 'receive_rate', label: '接诊率', type: 'percent', minWidth: 100 },
|
|
{ key: 'interview_receive_rate', label: '面诊接诊率', type: 'percent', minWidth: 120 },
|
|
{ key: 'open_receive_rate', label: '开口接诊率', type: 'percent', minWidth: 110 },
|
|
{ key: 'avg_unit_price', label: '平均单价', type: 'money', minWidth: 100 },
|
|
{ key: 'cash_cost', label: '现金成本', type: 'money', minWidth: 100 },
|
|
{ key: 'roi', label: 'ROI', type: 'ratio', minWidth: 80 },
|
|
]
|
|
|
|
const visibleSummaryCards = computed(() =>
|
|
canViewFinance.value
|
|
? summaryCards
|
|
: summaryCards.filter((card) => !FINANCE_KEYS.has(card.key))
|
|
)
|
|
|
|
const visibleTableColumns = computed(() =>
|
|
canViewFinance.value
|
|
? tableColumns
|
|
: tableColumns.filter((col) => !FINANCE_KEYS.has(col.key))
|
|
)
|
|
|
|
const dateRangeText = computed(() => {
|
|
if (!overview.date_range?.length) return '未选择'
|
|
return `${overview.date_range[0]} 至 ${overview.date_range[1]}`
|
|
})
|
|
|
|
const fetchOverview = async () => {
|
|
try {
|
|
await getLists()
|
|
} catch (error: any) {
|
|
console.error('获取自录转化统计失败:', error)
|
|
ElMessage.error(error?.msg || '获取统计数据失败')
|
|
}
|
|
}
|
|
|
|
const handleTimeTypeChange = () => {
|
|
if (queryParams.time_type !== 'custom') {
|
|
dateRange.value = []
|
|
pager.page = 1
|
|
fetchOverview()
|
|
}
|
|
}
|
|
|
|
const handleCustomDateChange = () => {
|
|
if (dateRange.value.length === 2) {
|
|
pager.page = 1
|
|
fetchOverview()
|
|
}
|
|
}
|
|
|
|
const handleQuery = () => {
|
|
pager.page = 1
|
|
fetchOverview()
|
|
}
|
|
|
|
const handleReset = () => {
|
|
queryParams.media_source = ''
|
|
queryParams.dept_id = undefined
|
|
queryParams.time_type = 'today'
|
|
dateRange.value = []
|
|
pager.page = 1
|
|
pager.size = 15
|
|
fetchOverview()
|
|
}
|
|
|
|
const renderMetric = (key: string, source: Record<string, any>, type = 'count') => {
|
|
const value = source?.[key] ?? 0
|
|
if (type === 'money') return `¥${Number(value || 0).toFixed(2)}`
|
|
if (type === 'percent') return `${Number(value || 0).toFixed(2)}%`
|
|
if (type === 'ratio') return Number(value || 0).toFixed(2)
|
|
return String(value ?? 0)
|
|
}
|
|
|
|
const handleAddYeji = async () => {
|
|
await refreshMediaSourceOptions()
|
|
showYejiEdit.value = true
|
|
await nextTick()
|
|
yejiEditRef.value?.open('add')
|
|
}
|
|
|
|
const handleEditYeji = async (row: Record<string, any>) => {
|
|
showYejiEdit.value = true
|
|
await nextTick()
|
|
yejiEditRef.value?.open('edit')
|
|
yejiEditRef.value?.setFormData(row)
|
|
}
|
|
|
|
const handleDeleteYeji = async (id: number) => {
|
|
await feedback.confirm('确定删除该业绩记录？')
|
|
await personalYejiDelete({ id })
|
|
fetchOverview()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchOverview()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.self-input-stats-page {
|
|
padding: 20px;
|
|
}
|
|
|
|
.stats-filter-form {
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.stats-kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.stats-kpi-card {
|
|
background: linear-gradient(145deg, #ffffff, #f5f8ff);
|
|
border: 1px solid #ebf1ff;
|
|
border-radius: 14px;
|
|
padding: 18px 16px;
|
|
box-shadow: 0 10px 24px rgba(74, 120, 255, 0.08);
|
|
}
|
|
|
|
.dept-cell {
|
|
cursor: help;
|
|
border-bottom: 1px dashed #c0c4cc;
|
|
}
|
|
|
|
.stats-kpi-label {
|
|
color: #6b7280;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.stats-kpi-value {
|
|
margin-top: 12px;
|
|
font-size: 28px;
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.stats-kpi-value.is-money {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card-header-main {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.card-hint {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stats-detail-card :deep(.el-card__body) {
|
|
padding-top: 0;
|
|
}
|
|
</style>
|