同步6/16

src/views/system/Sdb/statistics/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-col h-full p-2">
+    <pageheader></pageheader>
+    <el-card class="flex-1 mt-10px" shadow="never">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <el-form class="demo-form-inline" :inline="true">
+            <el-form-item label="查询日期">
+              <el-date-picker
+                clearable
+                v-model="SearchTime"
+                @change="
+                  (val) => {
+                    if (!val) {
+                      queryParams.startDate = '';
+                      queryParams.endDate = '';
+                      return;
+                    }
+                    SearchTime = val;
+                    const days = val;
+                    const [star, end] = days.map((item) => item.split(' ')[0]);
+                    queryParams.startDate = star + ' 00:00:00';
+                    queryParams.endDate = end + ' 23:59:59';
+                  }
+                "
+                type="daterange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD"
+                range-separator="到"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              />
+            </el-form-item>
+            <el-form-item label="" v-hasPermi="['water:topupRecord:list']">
+              <el-button type="primary" @click="getList">查询</el-button>
+            </el-form-item>
+          </el-form>
+          <el-button @click="handleExport" v-hasPermi="['water:topupRecord:export']" type="warning">导出统计</el-button>
+        </div>
+      </template>
+      <el-table v-loading="loading" border :data="topupRecordList">
+        <el-table-column label="充值时间" align="center" prop="rechargeTime">
+          <template #default="scope">
+            <span v-if="scope.row.rechargeTime">{{ scope.row.rechargeTime }}</span>
+            <span v-else>---</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="小区名称" align="center" prop="villageName">
+          <template #default="scope">
+            <span v-if="scope.row.villageName">{{ scope.row.villageName }}</span>
+            <span v-else>---</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="户主" align="center" prop="residentName">
+          <template #default="scope">
+            <span v-if="scope.row.residentName">{{ scope.row.residentName }}</span>
+            <span v-else>---</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="房号" align="center" prop="houseName">
+          <template #default="scope">
+            <span v-if="scope.row.houseName">{{ scope.row.houseName }}</span>
+            <span v-else>---</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单价" align="center" prop="fixedPrice">
+          <template #default="scope">
+            <div v-if="scope.row.fixedPrice && scope.row.unit">
+              <span>{{ scope.row.fixedPrice }}</span>
+              <span>/</span>
+              <span>{{ scope.row.unit }}</span>
+            </div>
+            <div v-else>
+              <span>---</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="设备编号" align="center" prop="deviceCode" />
+        <el-table-column label="订单号" align="center" prop="orderId" />
+        <el-table-column label="充值金额" align="center" prop="rechargeAmount" />
+        <el-table-column label="缴费方式" align="center" prop="topUpType" />
+      </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 lang="ts">
+import { getTopupRecordByDate, type TopupRecordList } from '@/api/system/SdbTopupRecord/index';
+import { checkPermi } from '@/utils/permission';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const topupRecordList = ref<TopupRecordList[]>([]);
+const loading = ref(false);
+const total = ref(0);
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    startDate: '',
+    endDate: ''
+  }
+});
+const SearchTime = ref([]);
+
+const { queryParams } = toRefs(data);
+/** 查询充值记录列表 */
+const getList = async () => {
+  if (!checkPermi(['water:topupRecord:list'])) return;
+  loading.value = true;
+  const res = await getTopupRecordByDate(queryParams.value);
+  topupRecordList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+onMounted(() => {
+  getList();
+});
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  // exportTopupRecordByDate();
+  proxy?.download(
+    '/topupRecord/water/export',
+    {
+      ...queryParams.value
+    },
+    `花开物业水费统计表.xlsx`
+  );
+};
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+</style>