car-wash-java/admin-web-new/src/views/admin/finance/settlement.vue

<script setup lang="ts">
import { reactive, onMounted, ref, nextTick } from "vue";
import { getSettlementList, triggerSettlement } from "@/api/finance";
import { getStationList } from "@/api/station";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage } from "element-plus";
import { getDictOptions, formatDict, getDictColor } from "@/utils/dict";

defineOptions({
  name: "AdminFinanceSettlement"
});

const queryRef = ref();
const tableRef = ref();

const state = reactive({
  formQuery: {
    stationId: "",
    settlementPeriod: "",
    status: ""
  },
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false,
    columns: [
      { label: "站点", prop: "stationId", width: 180 },
      { label: "结算周期", prop: "settlementPeriod", width: 120 },
      { label: "期初余额（元）", prop: "openingPendingBalance", width: 150 },
      { label: "总充值（元）", prop: "totalRecharge", width: 140 },
      { label: "总退款（元）", prop: "totalRefund", width: 140 },
      { label: "跨店收入（元）", prop: "totalCrossIncome", width: 140 },
      { label: "跨店支出（元）", prop: "totalCrossExpend", width: 140 },
      { label: "平台费基数（元）", prop: "platformFeeBase", width: 150 },
      { label: "平台费（元）", prop: "platformFee", width: 130 },
      { label: "提现手续费（元）", prop: "withdrawalFee", width: 150 },
      { label: "结算金额（元）", prop: "settlementAmount", width: 150 },
      { label: "期末余额（元）", prop: "closingPendingBalance", width: 150 },
      { label: "状态", prop: "status", width: 100 },
      { label: "备注", prop: "remark", width: 180 },
      { label: "创建时间", prop: "createTime", width: 180 }
    ]
  },
  stationOptions: [] as Array<{ stationId: string; stationName: string }>,
  get statusOptions() { return getDictOptions("Settlement.status"); }
});

onMounted(() => {
  loadStationOptions();
  loadData();
  nextTick(() => {
    const bodyHeight = document.body.clientHeight;
    const queryHeight = queryRef.value?.$el?.clientHeight || 0;
    state.tableData.height = bodyHeight - queryHeight - 230;
  });
});

const loadStationOptions = () => {
  getStationList({ pageSize: 1000 }).then((res: any) => {
    const { list } = res || {};
    state.stationOptions = list || [];
  });
};

const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageNum = 1;
  }
  state.tableData.loading = true;
  getSettlementList({ ...state.formQuery, ...state.pageQuery })
    .then((res: any) => {
      const { list, total } = res || {};
      state.tableData.data = list || [];
      state.pageQuery.total = total || 0;
    })
    .catch(() => {
      state.tableData.data = [];
      ElMessage.error("加载结算记录失败");
    })
    .finally(() => {
      state.tableData.loading = false;
    });
};

const settlementLoading = ref(false);

const handleTriggerSettlement = () => {
  settlementLoading.value = true;
  triggerSettlement()
    .then(() => {
      ElMessage.success("结算已完成");
      loadData(true);
    })
    .catch(() => {
      ElMessage.error("结算执行失败，请稍后重试");
    })
    .finally(() => {
      settlementLoading.value = false;
    });
};

const handleSizeChange = (size: number) => {
  state.pageQuery.pageSize = size;
  loadData(true);
};

const handleCurrentChange = (page: number) => {
  state.pageQuery.pageNum = page;
  loadData();
};

const handleSearch = () => {
  loadData(true);
};

const handleReset = () => {
  state.formQuery = { stationId: "", settlementPeriod: "", status: "" };
  loadData(true);
};

const formatMoney = (value: number) => {
  if (value === null || value === undefined) return "¥0.00";
  return `¥${(value / 100).toFixed(2)}`;
};

</script>

<template>
  <div class="page-container">
    <el-card shadow="hover">
      <template #header>
        <span class="card-header">结算记录</span>
      </template>
      <el-form ref="queryRef" :model="state.formQuery" inline class="search-form">
        <el-form-item label="站点">
          <el-select v-model="state.formQuery.stationId" placeholder="请选择站点" clearable filterable @change="handleSearch">
            <el-option v-for="item in state.stationOptions" :key="item.stationId" :label="item.stationName" :value="item.stationId" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算周期">
          <el-input v-model="state.formQuery.settlementPeriod" placeholder="如 2026-05" clearable @change="handleSearch" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state.formQuery.status" placeholder="请选择状态" clearable @change="handleSearch">
            <el-option v-for="item in getDictOptions('Settlement.status')" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="useRenderIcon('ri/search-line')" @click="handleSearch">查询</el-button>
          <el-button :icon="useRenderIcon('ri/refresh-line')" @click="handleReset">重置</el-button>
          <el-button type="warning" :loading="settlementLoading" :icon="useRenderIcon('ri/money-cny-circle-line')" @click="handleTriggerSettlement">手动触发结算</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="tableRef" v-loading="state.tableData.loading" :data="state.tableData.data" :height="state.tableData.height" border stripe>
        <template #empty>
          <el-empty description="暂无结算记录" />
        </template>
        <el-table-column v-for="col in state.tableData.columns" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" show-overflow-tooltip>
          <template #default="{ row }">
            <template v-if="col.prop === 'stationId'">
              <div class="station-name-cell">
                <span class="station-id">{{ row.stationId }}</span>
                <span class="station-divider"></span>
                <span class="station-name">{{ row.stationName }}</span>
              </div>
            </template>
            <template v-else-if="col.prop === 'status'">
              <el-tag :type="getDictColor('Settlement.status', row.status)" size="small">
                {{ formatDict('Settlement.status', row.status) }}
              </el-tag>
            </template>
            <template v-else-if="['openingPendingBalance', 'totalRecharge', 'totalRefund', 'totalCrossIncome', 'totalCrossExpend', 'platformFeeBase', 'platformFee', 'withdrawalFee', 'settlementAmount', 'closingPendingBalance'].includes(col.prop)">
              {{ formatMoney(row[col.prop]) }}
            </template>
            <template v-else>
              {{ row[col.prop] }}
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="state.pageQuery.pageNum"
          v-model:page-size="state.pageQuery.pageSize"
          :total="state.pageQuery.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 600;
}

.search-form {
  margin-bottom: 16px;
}

.station-name-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .station-name {
    font-weight: 500;
  }

  .station-divider {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--el-border-color-light);
  }

  .station-id {
    color: var(--el-text-color-secondary);
    font-size: 12px;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>