sc

src/views/Home/Comp/SignListCard.vue

@@ -0,0 +1,105 @@
+<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>
+      <el-table-column label="周期" prop="period" width="110px" />
+      <el-table-column prop="signNumber" label="成交数" />
+      <el-table-column prop="signPrice" label="成交额" />
+      <el-table-column prop="signPriceSequentialGrowth" label="成交额环比增长" />
+      <el-table-column prop="signPriceSamePeriodCompareGrowth" label="成交额同比增长" />
+      <el-table-column prop="profit" label="利润" />
+      <el-table-column prop="profitSequentialGrowth" label="利润环比增长" />
+      <el-table-column prop="profitSamePeriodCompareGrowth" label="利润同比增长" />
+      <el-table-column prop="notReceivedMoney" label="未到账金额" />
+      <el-table-column prop="receivedMoney" label="已到账金额" />
+      <el-table-column prop="waitSettleMoney" label="待结算金额" />
+      <el-table-column prop="settledMoney" label="已结算金额" />
+      <el-table-column prop="refundAmount" label="已退款金额" />
+      <el-table-column prop="remainMoney" label="结余" />
+    </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
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>