sc

src/views/Home/CloseRate.vue

@@ -1,7 +1,114 @@
 <template>
-  <div> 成交率 </div>
+  <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 :data="tableList" border stripe :default-sort="{ prop: 'totalRate' }">
+        <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"></script>
+<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>