ss-crm-manage-web/src/views/Home/CloseRate.vue

<template>
  <div>
    <ContentWrap>
      <el-form :model="searchForm" label-width="0" inline>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.year"
            type="year"
            format="YYYY"
            value-format="YYYY"
            placeholder="选择年"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.nickname" placeholder="销售姓名" clearable />
        </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>
        <el-table-column type="index" width="50" fixed="left" />
        <el-table-column prop="nickname" label="姓名" width="80" />
        <el-table-column
          v-for="(item, index) in new Date().getMonth() + 1"
          :key="index"
          :label="item + '月'"
          sortable
          min-width="150"
          :sort-method="(pre, cur) => monthSort(pre, cur, index)"
        >
          <template #default="{ row }">
            <span>{{ (row.monthClueSignRateReportList[index].rate * 100).toFixed(2) }}%</span>
            <span>({{ row.monthClueSignRateReportList[index].clueSignNum }}/</span>
            <span>{{ row.monthClueSignRateReportList[index].followClueNum }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总成交率"
          prop="totalRate"
          min-width="150"
          fixed="right"
          sortable
          :sort-method="totalSort"
        />
      </el-table>
    </ContentWrap>
  </div>
</template>

<script setup name="CloseRate">
import * as reportApi from '@/api/home/reportSignRate'
import { removeNullField } from '@/utils'

onMounted(() => {
  handleReset()
  handleSearch()
})

const searchForm = ref({})

function handleReset() {
  searchForm.value = {
    nickname: undefined,
    year: new Date().getFullYear() + ''
  }
}

const loading = ref(false)
const tableList = ref([])
async function handleSearch() {
  loading.value = true
  try {
    const data = await reportApi.getList(removeNullField(searchForm.value))
    tableList.value = data.map((item) => {
      const count = item.monthClueSignRateReportList.reduce(
        (pre, cur) => {
          return {
            signCount: pre.signCount + cur.clueSignNum,
            clueCount: pre.clueCount + cur.followClueNum
          }
        },
        { signCount: 0, clueCount: 0 }
      )
      const rate = count.clueCount > 0 ? ((count.signCount * 100) / count.clueCount).toFixed(2) : 0
      return {
        ...item,
        totalRate: `${rate}%(${count.signCount}/${count.clueCount})`,
        totalRateNum: rate
      }
    })
  } finally {
    loading.value = false
  }
}

function totalSort(pre, cur) {
  return Number(pre.totalRateNum) - Number(cur.totalRateNum)
}

function monthSort(pre, cur, idx) {
  console.log(idx)

  return (
    Number(pre.monthClueSignRateReportList[idx].rate) -
    Number(cur.monthClueSignRateReportList[idx].rate)
  )
}
</script>

<style lang="scss" scoped></style>