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

<template>
  <ContentWrap>
    <el-form :model="searchForm" label-width="0" inline>
      <el-form-item>
        <el-select v-model="searchForm.detailType" :clearable="false" filterable>
          <el-option
            v-for="item in detailTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="searchForm.detailType == 1">
        <el-date-picker
          v-model="searchForm.month"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM"
          placeholder="选择年月"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item v-if="[2, 3].includes(searchForm.detailType)">
        <el-date-picker
          v-model="searchForm.year"
          type="year"
          format="YYYY"
          value-format="YYYY"
          placeholder="选择年"
          :clearable="false"
        />
      </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 :data="tableList" border stripe show-summary :summary-method="getSummaries">
      <el-table-column label="周期" prop="period" width="110px" />
      <el-table-column label="成交" align="center">
        <el-table-column prop="signNumber" label="成交数" />
        <el-table-column prop="signPrice" label="成交额" />
        <el-table-column prop="signPriceSequentialGrowth" label="环比" :formatter="parseRate" />
        <el-table-column
          prop="signPriceSamePeriodCompareGrowth"
          label="同比"
          :formatter="parseRate"
        />
      </el-table-column>
      <el-table-column label="利润" align="center">
        <el-table-column prop="profit">
          <template #header> <Tooltip message="公司利润" /> <span>利润</span> </template>
        </el-table-column>
        <el-table-column prop="profitSequentialGrowth" label="环比" :formatter="parseRate" />
        <el-table-column prop="profitSamePeriodCompareGrowth" label="同比" :formatter="parseRate" />
      </el-table-column>

      <el-table-column prop="notReceivedMoney">
        <template #header>
          <Tooltip message="回款列表中未审核的公司利润" /> <span>未到账</span>
        </template>
      </el-table-column>
      <el-table-column prop="receivedMoney">
        <template #header>
          <Tooltip message="回款列表中已审核的公司利润" /> <span>已到账</span>
        </template>
      </el-table-column>
      <el-table-column prop="waitSettleMoney" label="待结算金额" />
      <el-table-column prop="settledMoney" label="已结算金额" />
      <el-table-column prop="refundAmount" label="已退款金额" />
      <el-table-column prop="remainMoney">
        <template #header>
          <Tooltip message="已到账金额-已结算金额-已退款金额" /> <span>结余</span>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script setup name="SignListCard">
import { getList } from '@/api/home/reportSignDetail'
import { formatDate } from '@/utils/formatTime'
import { removeNullField } from '@/utils'

const detailTypeOptions = [
  { label: '日明细', value: 1 },
  { label: '月明细', value: 2 },
  { label: '季明细', value: 3 },
  { label: '年明细', value: 4 }
]

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

const searchForm = ref({})

function handleReset() {
  searchForm.value = {
    detailType: 2,
    month: formatDate(new Date(), 'YYYY-MM'),
    year: new Date().getFullYear() + ''
  }
}
const loading = ref(false)
const tableList = ref([])
async function handleSearch() {
  loading.value = true
  try {
    let params = { detailType: searchForm.value.detailType }
    if (params.detailType == 1) {
      const d = new Date(searchForm.value.month)
      params.month = d.getMonth() + 1
      params.year = d.getFullYear()
    } else if ([2, 3].includes(params.detailType)) {
      params.year = searchForm.value.year
    }
    const data = await getList(removeNullField(params))
    tableList.value = data
  } finally {
    loading.value = false
  }
}

function parseRate(row, column) {
  return Number(row[column.property] * 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.includes('Growth')) {
        sums[index] = ''
      } else {
        sums[index] = values
          .reduce((prev, curr) => {
            const value = Number(curr)
            if (!Number.isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          .toFixed(2)
      }
    } else {
      sums[index] = ''
    }
  })
  return sums
}
</script>

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