lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crm：code review 员工业绩的前端

Browse Source
This commit is contained in:
YunaiV 2024-04-05 13:53:14 +08:00
parent f17dfb9a31
commit dcfad7a427
5 changed files with 165 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DictSelect/src/DictSelect.vue
View File

@ -1,3 +1,4 @@
<!-- 数据字典 Select 选择器 -->
<template> <template>
<el-select class="w-1/1" v-bind="attrs"> <el-select class="w-1/1" v-bind="attrs">
<template v-if="valueType === 'int'"> <template v-if="valueType === 'int'">

54
src/views/crm/statistics/performance/components/ContractCountPerformance.vue
View File

@ -7,12 +7,18 @@
</el-skeleton> </el-skeleton>
</el-card> </el-card>
<!-- 统计列表 --> <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
<el-card shadow="never" class="mt-16px"> <el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData"> <el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center"> <el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope"> <template #default="scope">
{{scope.row[item.prop]}} {{ scope.row[item.prop] }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import { import {
StatisticsPerformanceApi, StatisticsPerformanceApi,
StatisticsPerformanceRespVO StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance" } from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractCountPerformance' }) defineOptions({ name: 'ContractCountPerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数 const props = defineProps<{ queryParams: any }>() // 搜索参数
@ -86,7 +92,8 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow' type: 'shadow'
} }
}, },
yAxis: [{ yAxis: [
{
type: 'value', type: 'value',
name: '数量（个）', name: '数量（个）',
axisTick: { axisTick: {
@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6' color: '#e6e6e6'
} }
} }
}], }
],
xAxis: { xAxis: {
type: 'category', type: 'category',
name: '日期', name: '日期',
@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据 // 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) { if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map( echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
(s: StatisticsPerformanceRespVO) => s.time
)
} }
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) { if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map( echartsOption.series[0]['data'] = performanceList.map(
@ -165,43 +171,49 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map( echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount (s: StatisticsPerformanceRespVO) => s.lastMonthCount
) )
echartsOption.series[3]['data'] = performanceList.map( echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL' s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
) )
} }
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) { if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = performanceList.map( echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount (s: StatisticsPerformanceRespVO) => s.lastYearCount
) )
echartsOption.series[4]['data'] = performanceList.map( echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL' s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
) )
} }
// 2.2 更新列表数据 // 2.2 更新列表数据
list.value = performanceList list.value = performanceList
loading.value = false loading.value = false
} }
// 初始化数据 // 初始化数据
const columnsData = reactive([]); const columnsData = reactive([])
const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'}, const tableData = reactive([
{title: '去年当月合同数量统计（个）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}]) { title: '当月合同数量统计（个）' },
{ title: '上月合同数量统计（个）' },
{ title: '去年当月合同数量统计（个）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
])
// 定义 init 方法 // 定义 init 方法
const init = () => { const init = () => {
const columnObj = {label: '日期', prop: 'title'} const columnObj = { label: '日期', prop: 'title' }
columnsData.push(columnObj) columnsData.push(columnObj)
list.value.forEach((item, index) => { list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index} const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj) columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL' tableData[3]['prop' + index] =
tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL' item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
tableData[4]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
}) })
} }

54
src/views/crm/statistics/performance/components/ContractPricePerformance.vue
View File

@ -7,12 +7,18 @@
</el-skeleton> </el-skeleton>
</el-card> </el-card>
<!-- 统计列表 --> <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
<el-card shadow="never" class="mt-16px"> <el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData"> <el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center"> <el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope"> <template #default="scope">
{{scope.row[item.prop]}} {{ scope.row[item.prop] }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import { import {
StatisticsPerformanceApi, StatisticsPerformanceApi,
StatisticsPerformanceRespVO StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance" } from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractPricePerformance' }) defineOptions({ name: 'ContractPricePerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数 const props = defineProps<{ queryParams: any }>() // 搜索参数
@ -86,7 +92,8 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow' type: 'shadow'
} }
}, },
yAxis: [{ yAxis: [
{
type: 'value', type: 'value',
name: '金额（元）', name: '金额（元）',
axisTick: { axisTick: {
@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6' color: '#e6e6e6'
} }
} }
}], }
],
xAxis: { xAxis: {
type: 'category', type: 'category',
name: '日期', name: '日期',
@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据 // 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) { if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map( echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
(s: StatisticsPerformanceRespVO) => s.time
)
} }
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) { if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map( echartsOption.series[0]['data'] = performanceList.map(
@ -165,43 +171,49 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map( echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount (s: StatisticsPerformanceRespVO) => s.lastMonthCount
) )
echartsOption.series[3]['data'] = performanceList.map( echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL' s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
) )
} }
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) { if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = performanceList.map( echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount (s: StatisticsPerformanceRespVO) => s.lastYearCount
) )
echartsOption.series[4]['data'] = performanceList.map( echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL' s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
) )
} }
// 2.2 更新列表数据 // 2.2 更新列表数据
list.value = performanceList list.value = performanceList
loading.value = false loading.value = false
} }
// 初始化数据 // 初始化数据
const columnsData = reactive([]); const columnsData = reactive([])
const tableData = reactive([{title: '当月合同金额统计（元）'}, {title: '上月合同金额统计（元）'}, {title: '去年当月合同金额统计（元）'}, const tableData = reactive([
{title: '同比增长率（%）'}, {title: '环比增长率（%）'}]) { title: '当月合同金额统计（元）' },
{ title: '上月合同金额统计（元）' },
{ title: '去年当月合同金额统计（元）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
])
// 定义 init 方法 // 定义 init 方法
const init = () => { const init = () => {
const columnObj = {label: '日期', prop: 'title'} const columnObj = { label: '日期', prop: 'title' }
columnsData.push(columnObj) columnsData.push(columnObj)
list.value.forEach((item, index) => { list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index} const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj) columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL' tableData[3]['prop' + index] =
tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL' item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
tableData[4]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
}) })
} }

54
src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
View File

@ -7,12 +7,18 @@
</el-skeleton> </el-skeleton>
</el-card> </el-card>
<!-- 统计列表 --> <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
<el-card shadow="never" class="mt-16px"> <el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData"> <el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center"> <el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope"> <template #default="scope">
{{scope.row[item.prop]}} {{ scope.row[item.prop] }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import { import {
StatisticsPerformanceApi, StatisticsPerformanceApi,
StatisticsPerformanceRespVO StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance" } from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractPricePerformance' }) defineOptions({ name: 'ContractPricePerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数 const props = defineProps<{ queryParams: any }>() // 搜索参数
@ -86,7 +92,8 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow' type: 'shadow'
} }
}, },
yAxis: [{ yAxis: [
{
type: 'value', type: 'value',
name: '金额（元）', name: '金额（元）',
axisTick: { axisTick: {
@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6' color: '#e6e6e6'
} }
} }
}], }
],
xAxis: { xAxis: {
type: 'category', type: 'category',
name: '日期', name: '日期',
@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据 // 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) { if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map( echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
(s: StatisticsPerformanceRespVO) => s.time
)
} }
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) { if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map( echartsOption.series[0]['data'] = performanceList.map(
@ -165,43 +171,49 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map( echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount (s: StatisticsPerformanceRespVO) => s.lastMonthCount
) )
echartsOption.series[3]['data'] = performanceList.map( echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL' s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
) )
} }
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) { if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
echartsOption.series[2]['data'] = performanceList.map( echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount (s: StatisticsPerformanceRespVO) => s.lastYearCount
) )
echartsOption.series[4]['data'] = performanceList.map( echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL' s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
) )
} }
// 2.2 更新列表数据 // 2.2 更新列表数据
list.value = performanceList list.value = performanceList
loading.value = false loading.value = false
} }
// 初始化数据 // 初始化数据
const columnsData = reactive([]); const columnsData = reactive([])
const tableData = reactive([{title: '当月回款金额统计（元）'}, {title: '上月回款金额统计（元）'}, const tableData = reactive([
{title: '去年当月回款金额统计（元）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}]); { title: '当月回款金额统计（元）' },
{ title: '上月回款金额统计（元）' },
{ title: '去年当月回款金额统计（元）' },
{ title: '同比增长率（%）' },
{ title: '环比增长率（%）' }
])
// 定义 init 方法 // 定义 init 方法
const init = () => { const init = () => {
const columnObj = {label: '日期', prop: 'title'} const columnObj = { label: '日期', prop: 'title' }
columnsData.push(columnObj) columnsData.push(columnObj)
list.value.forEach((item, index) => { list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index} const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj) columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL' tableData[3]['prop' + index] =
tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL' item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
tableData[4]['prop' + index] =
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
}) })
} }

11
src/views/crm/statistics/performance/index.vue
View File

@ -63,7 +63,10 @@
</el-tab-pane> </el-tab-pane>
<!-- 员工回款金额统计 --> <!-- 员工回款金额统计 -->
<el-tab-pane label="员工回款金额统计" name="followupType" lazy> <el-tab-pane label="员工回款金额统计" name="followupType" lazy>
<ReceivablePricePerformance :query-params="queryParams" ref="ReceivablePricePerformanceRef" /> <ReceivablePricePerformance
:query-params="queryParams"
ref="ReceivablePricePerformanceRef"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
@ -78,11 +81,8 @@ import { defaultProps, handleTree } from '@/utils/tree'
import ContractCountPerformance from './components/ContractCountPerformance.vue' import ContractCountPerformance from './components/ContractCountPerformance.vue'
import ContractPricePerformance from './components/ContractPricePerformance.vue' import ContractPricePerformance from './components/ContractPricePerformance.vue'
import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue' import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
import CustomerFollowupType from './components/CustomerFollowupType.vue'
import CustomerConversionStat from './components/CustomerConversionStat.vue'
import CustomerDealCycle from './components/CustomerDealCycle.vue'
defineOptions({ name: 'CrmStatisticsCustomer' }) defineOptions({ name: 'CrmStatisticsPerformance' })
const queryParams = reactive({ const queryParams = reactive({
deptId: useUserStore().getUser.deptId, deptId: useUserStore().getUser.deptId,
@ -113,7 +113,6 @@ const ContractPricePerformanceRef = ref()
// 3.员工回款金额统计 // 3.员工回款金额统计
const ReceivablePricePerformanceRef = ref() const ReceivablePricePerformanceRef = ref()
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
switch (activeTab.value) { switch (activeTab.value) {