ss-crm-manage-web/src/views/Home/Comp/ChannelPeriod.vue

<template>
  <ContentWrap>
    <el-form ref="searchRef" :model="searchForm" :rules="searchRules" label-width="100px" inline>
      <el-form-item label="咨询日期" prop="consultDate">
        <el-date-picker
          v-model="searchForm.consultDate"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="选择日期"
          end-placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="成交周期" prop="period">
        <el-input-number
          v-model="searchForm.period"
          :min="1"
          :controls="false"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="渠道来源" prop="sourceId">
        <el-tree-select
          v-model="searchForm.sourceId"
          :data="props.sourceOptions"
          :props="defaultProps"
          check-strictly
          node-key="sourceId"
          placeholder="请选择渠道"
          style="width: 100%"
        />
      </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
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column prop="sourceName" label="渠道名称" />
      <el-table-column prop="newClueSignNum" label="新线索成交数" sortable>
        <template #header>
          <Tooltip message="咨询日期在查询范围内，且在所查成交周期内成交的线索数" />
          <span>新线索成交数</span>
        </template>
      </el-table-column>
      <el-table-column prop="newClueNum" label="新线索总数" sortable>
        <template #header>
          <Tooltip message="咨询日期在查询范围内，咨询的线索数" /> <span>新线索总数</span>
        </template>
      </el-table-column>
      <el-table-column prop="rate" label="新线索成交率" sortable :formatter="parseRate" />
    </el-table>
  </ContentWrap>
</template>

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

const props = defineProps({
  sourceOptions: {
    type: Array,
    default: () => []
  }
})

const defaultProps = {
  children: 'children',
  label: 'sourceName',
  value: 'sourceId',
  isLeaf: 'leaf'
}

const searchRef = ref()

const searchRules = {
  consultDate: { required: true, type: 'array', message: '请选择咨询日期', trigger: 'change,blur' },
  period: { required: true, message: '请输入成交周期', trigger: 'blur' }
}

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

const searchForm = ref({})

function handleReset() {
  searchForm.value = {
    sourceId: undefined,
    period: 30,
    consultDate: []
  }
}

function getOptions() {}

const loading = ref(false)
const tableList = ref([])
async function handleSearch() {
  try {
    const valid = await searchRef.value.validate()
    if (!valid) return
    loading.value = true
    const data = await reportApi.getList(removeNullField(searchForm.value))
    tableList.value = data
  } finally {
    loading.value = false
  }
}

function parseRate(row) {
  return Number(row.rate * 100).toFixed(2) + '%'
}

function getSummaries({ columns, data }) {
  let sums = []
  columns.forEach((column, index) => {
    if (index == 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      if (column.property == 'rate') {
        const sum = data.reduce(
          (pre, cur) => ({
            clueNum: pre.clueNum + cur.newClueNum,
            signNum: pre.signNum + cur.newClueSignNum
          }),
          { clueNum: 0, signNum: 0 }
        )
        sums[index] = sum.clueNum > 0 ? ((sum.signNum * 100) / sum.clueNum).toFixed(2) + '%' : 0
      } else {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
      }
    } else {
      sums[index] = ''
    }
  })
  return sums
}
</script>

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