249 lines
7.9 KiB
Vue
249 lines
7.9 KiB
Vue
<template>
|
|
<ContentWrap>
|
|
<el-form :model="searchForm" label-width="0" inline>
|
|
<el-form-item>
|
|
<el-date-picker
|
|
v-model="searchForm.consultTime"
|
|
type="daterange"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
start-placeholder="选择日期"
|
|
end-placeholder="选择日期"
|
|
:clearable="false"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="searchForm.nickname" placeholder="销售姓名" clearable />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-tree-select
|
|
v-model="searchForm.sourceId"
|
|
:data="sourceOptions"
|
|
:props="defaultProps"
|
|
check-strictly
|
|
clearable
|
|
filterable
|
|
node-key="sourceId"
|
|
placeholder="请选择渠道"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="appStore.getAppInfo?.instanceType == 1">
|
|
<el-select
|
|
v-model="searchForm.licenseTypeList"
|
|
placeholder="选择驾照类型"
|
|
clearable
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="item in licenseTypeOptions"
|
|
:key="item.label"
|
|
:label="item.label"
|
|
:value="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button @click="handleSearch">查询</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableList"
|
|
border
|
|
stripe
|
|
show-summary
|
|
:summary-method="getSummaries"
|
|
>
|
|
<el-table-column type="index" width="60" fixed="left" align="center" />
|
|
<el-table-column prop="nickname" label="姓名" width="80" fixed="left">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" style="padding: 0" text @click="handleDetail(row)">{{
|
|
row.nickname
|
|
}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="newClueNumber" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="咨询日期在所选周期内的线索总数" />
|
|
<span>新线索数</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="成交数" prop="signNumber" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="成交日期在所选周期内的成交数" />
|
|
<span>成交数</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="成交率"
|
|
prop="signRate"
|
|
sortable
|
|
min-width="100"
|
|
:formatter="(row) => row.signRate + '%'"
|
|
/>
|
|
<el-table-column label="跟进数/日" prop="dayFollowNumber" sortable min-width="100" />
|
|
<el-table-column label="成交数/日" prop="daySignNumber" sortable min-width="100" />
|
|
<el-table-column label="平均成交周期" prop="averageSignPeriod" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="平均每条成交的线索，从咨询开始到成交所需要的天数" />
|
|
<span>平均成交周期</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="grossProfitOfSingleSign" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip
|
|
message="平均每笔成交订单的公司利润【按照登记，不按审核到账】=总公司利润/总成交数"
|
|
/>
|
|
<span>毛利/单</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payPriceOfSingleSign" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip
|
|
message="平均每笔成交订单的额外支出（返费等）【按照登记，不按审核到账】=总支出/总成交数"
|
|
/>
|
|
<span>支出/单</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="costOfSingleClue" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="平均每条线索的成本=总线索成本/新线索条数" />
|
|
<span>线索成本/条</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="netProfitOfSingleSign" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="=（总公司利润-总支出-总线索成本）/总成交数" />
|
|
<span>净利润/单</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="总线索成本" prop="clueCostTotal" sortable min-width="100" />
|
|
<el-table-column label="总支出" prop="payPriceTotal" sortable min-width="100" />
|
|
<el-table-column label="总利润" prop="profitTotal" sortable min-width="100" />
|
|
<el-table-column prop="efficiency" sortable min-width="100">
|
|
<template #header>
|
|
<Tooltip message="=总利润/(总成本+总支出)" />
|
|
<span>能效</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="撞单数" prop="repeatClueNum" sortable min-width="100" />
|
|
<el-table-column label="撞单成交数" prop="repeatClueSignNum" sortable min-width="100" />
|
|
</el-table>
|
|
|
|
<DialogSalerReportDetail
|
|
:licenseTypeOptions="licenseTypeOptions"
|
|
:source-options="sourceOptions"
|
|
ref="SalerDetailDialog"
|
|
/>
|
|
</ContentWrap>
|
|
</template>
|
|
|
|
<script setup name="SalesReport">
|
|
import DialogSalerReportDetail from './Comp/DialogSalerReportDetail.vue'
|
|
|
|
import * as reportApi from '@/api/home/reportSaler'
|
|
import { getSimpleSourceList as getResourceOptions } from '@/api/clue/source'
|
|
|
|
import { removeNullField } from '@/utils'
|
|
import { formatDate } from '@/utils/formatTime'
|
|
import { handleTree } from '@/utils/tree'
|
|
import { getIntDictOptions } from '@/utils/dict'
|
|
import { useAppStore } from '@/store/modules/app'
|
|
|
|
const appStore = useAppStore()
|
|
onMounted(() => {
|
|
getOptions()
|
|
handleReset()
|
|
handleSearch()
|
|
})
|
|
|
|
const defaultProps = {
|
|
children: 'children',
|
|
label: 'sourceName',
|
|
value: 'sourceId',
|
|
isLeaf: 'leaf'
|
|
}
|
|
|
|
const sourceOptions = ref([])
|
|
const licenseTypeOptions = ref([])
|
|
|
|
const searchForm = ref({})
|
|
|
|
function handleReset() {
|
|
const year = new Date().getFullYear()
|
|
const month = new Date().getMonth() + 1
|
|
searchForm.value = {
|
|
nickname: undefined,
|
|
consultTime: [`${year}-${month}-01`, formatDate(new Date())],
|
|
licenseTypeList: [],
|
|
sourceId: undefined
|
|
}
|
|
}
|
|
|
|
const loading = ref(false)
|
|
const tableList = ref([])
|
|
const avgData = ref({})
|
|
async function handleSearch() {
|
|
loading.value = true
|
|
try {
|
|
const data = await reportApi.getList(removeNullField(searchForm.value))
|
|
tableList.value = data.personDataVOList
|
|
avgData.value = data.averageDataVO
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function getSummaries({ columns, data }) {
|
|
const sums = []
|
|
columns.forEach((column, index) => {
|
|
if (index == 0) {
|
|
sums[index] = '统计'
|
|
return
|
|
}
|
|
|
|
const doubleSumsColumns = [
|
|
'newClueNumber',
|
|
'signNumber',
|
|
'clueCostTotal',
|
|
'payPriceTotal',
|
|
'profitTotal'
|
|
]
|
|
if (column.property in avgData.value) {
|
|
sums[index] = `均值: ${avgData.value[column.property]}`
|
|
} else if (doubleSumsColumns.includes(column.property)) {
|
|
const values = data.map((item) => Number(item[column.property]))
|
|
let sum = values.reduce((prev, curr) => prev + curr, 0)
|
|
let avg = sum / values.length
|
|
if (['newClueNumber', 'signNumber'].includes(column.property)) {
|
|
avg = Math.floor(avg)
|
|
} else {
|
|
sum = sum.toFixed(2)
|
|
avg = avg.toFixed(2)
|
|
}
|
|
sums[index] = h('div', {}, [h('div', {}, `合计：${sum}`), h('div', {}, `均值：${avg}`)])
|
|
} else {
|
|
sums[index] = ''
|
|
}
|
|
})
|
|
return sums
|
|
}
|
|
|
|
const SalerDetailDialog = ref()
|
|
function handleDetail(info) {
|
|
SalerDetailDialog.value.open(info, searchForm.value)
|
|
}
|
|
|
|
function getOptions() {
|
|
getResourceOptions().then((data) => {
|
|
sourceOptions.value = handleTree(data, 'sourceId')
|
|
})
|
|
licenseTypeOptions.value = getIntDictOptions('license_type')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|