8/11，应收物业，实收物业

src/views/system/report/businessDailyReport.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <el-form-item label="营业日期" prop="dateScope">
+              <el-select v-model="queryParams.dateScope" placeholder="请选择">
+                <el-option v-for="item in [...com_business_date]" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区" prop="villageId">
+              <el-select v-model="queryParams.villageId" placeholder="请选择">
+                <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区" prop="villageId">
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="4">
+            <el-tabs @tab-change="handleTabClick" v-model="activeName" class="demo-tabs">
+              <el-tab-pane label="按小区统计" name="first"> </el-tab-pane>
+              <el-tab-pane label="按收费项目统计" name="fourth"></el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="19"></el-col>
+          <el-col :span="1">
+            <el-button type="primary" @click="exportData">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="AgingList">
+        <el-table-column v-if="activeName === 'first'" label="小区名称" align="center" prop="villageName" />
+        <el-table-column v-else label="收费项目" align="center" prop="chargeItemName" />
+        <el-table-column v-for="(item, index) in rows" :key="index" :label="item.payTypeName" align="center">
+          <template #default="scope">
+            {{ scope.row.payAmounts[item.payType] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" prop="totalAmount" />
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Arrears" lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getCommunitylistAPI } from '@/api/system/community';
+import type { TabPaneName } from 'element-plus';
+import { getBusinessDailyReport, getBusinessDailyReportChargeItem } from '@/api/system/report/businessDailyReport';
+import { RowsType } from '@/api/system/report/businessDailyReport/type';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_business_date } = toRefs<any>(proxy?.useDict('com_business_date'));
+const AgingList = ref<RowsType[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const activeName = ref<TabPaneName>('first');
+const queryFormRef = ref<ElFormInstance>();
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dateScope: 'day',
+    villageId: '-1'
+  }
+});
+
+const { queryParams } = toRefs(data);
+
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部小区'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const rows = ref([]);
+
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+
+  if (activeName.value === 'first') {
+    getBusinessDailyReport(search)
+      .then((res) => {
+        rows.value = res.payTypes;
+        if (res.rows.length > 0) {
+          AgingList.value = [...res.rows, res.summary];
+        }
+        total.value = res.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  } else {
+    getBusinessDailyReportChargeItem(search)
+      .then((res) => {
+        rows.value = res.payTypes;
+        if (res.rows.length > 0) {
+          AgingList.value = [...res.rows, res.summary];
+        }
+        total.value = res.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+};
+
+function handleTabClick(name: TabPaneName) {
+  activeName.value = name;
+  getList();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 h*/
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+const exportData = () => {
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  if (activeName.value === 'first') {
+    proxy?.download(
+      '/businessDailyReport/village/export',
+      {
+        ...search
+      },
+      `营业日报_按小区统计.xlsx`
+    );
+  } else {
+    proxy?.download(
+      '/businessDailyReport/chargeItem/export',
+      {
+        ...search
+      },
+      `营业日报_按收费项目统计.xlsx`
+    );
+  }
+};
+
+onMounted(() => {
+  getList();
+  getAllVillage();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+.demo-tabs {
+  width: 230px;
+}
+</style>