sunProduct/src/views/system/Sdb/statistics/electricity.vue

<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 :inline="true" class="demo-form-inline">
            <el-form-item label="查询日期">
              <el-date-picker
                v-model="SearchTime"
                clearable
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                range-separator="到"
                start-placeholder="开始日期"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="
                  (val) => {
                    if (!val) {
                      queryParams.startDate = '';
                      queryParams.endDate = '';
                      return;
                    }
                    SearchTime = val;
                    const [star, end] = val.map((item) => item.split(' ')[0]);
                    queryParams.startDate = star + ' 00:00:00';
                    queryParams.endDate = end + ' 23:59:59';
                  }
                "
              />
            </el-form-item>
            <el-form-item v-has-permi="['electricity:topupRecord:list']" label="">
              <el-button type="primary" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button v-has-permi="['electricity:topupRecord:export']" type="warning" @click="handleExport">导出统计</el-button>
        </div>
      </template>
      <el-table v-loading="loading" :data="topupRecordList" :span-method="handleSpanMethod" border>
        <el-table-column align="center" label="充值时间" 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 align="center" label="小区名称" 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 align="center" label="户主" 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 align="center" label="房号" 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 align="center" label="单价" 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 align="center" label="设备编号" prop="deviceCode" />
        <el-table-column align="center" label="订单号" prop="orderId" />
        <el-table-column align="center" label="充值金额" prop="rechargeAmount" />
        <el-table-column align="center" label="缴费方式" prop="topUpType" />
      </el-table>
      <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import pageHeader from '@/components/Pageheader/index.vue';
import pagination from '@/components/Pagination/index.vue';
import { getElectricityTopupRecordByDate, type TopupRecordList } from '@/api/system/SdbTopupRecord';
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(['electricity:topupRecord:list'])) return;
  loading.value = true;
  const res = await getElectricityTopupRecordByDate(queryParams.value);
  topupRecordList.value = res.rows;
  topupRecordList.value[topupRecordList.value.length - 1].rechargeTime = '合计';
  total.value = res.total;
  loading.value = false;
};

onMounted(() => {
  getList();
});
function handleSpanMethod({ rowIndex, columnIndex }) {
  if (rowIndex === topupRecordList.value.length - 1) {
    const rowspan = 7;
    if (columnIndex === 0) {
      return [1, rowspan];
    }
    if (columnIndex < rowspan) {
      return [0, 0];
    }
    if (columnIndex === 8) {
      return [0, 0];
    }
    if (columnIndex === 7) {
      return [1, 2];
    }
  }
  return [1, 1];
}
/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    '/topupRecord/electricity/export',
    {
      ...queryParams.value
    },
    `花开物业电费统计表.xlsx`
  );
};
</script>

<style lang="scss" scoped>
.el-table {
  height: calc(100% - 80px);
}

.el-form-item {
  margin-bottom: 0;
}
</style>