yoe-shop-web/src/views/analysis/settlementStatus/index.vue

<template>
  <div class="page-container">
    <PageTitle title="对账结算状况" />

    <SearchBar :form="searchForm" :filters="filters">
      <template #buttons>
        <el-button type="danger">导出</el-button>
      </template>
    </SearchBar>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderNo" label="订单编号" min-width="110" align="center" />
      <el-table-column prop="orderType" label="订单类型" min-width="90" align="center">
        <template #default="{ row }">{{ row.orderType || '-' }}</template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" min-width="100" align="center">
        <template #default="{ row }">¥{{ row.amount.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="orderDate" label="下单日期" min-width="100" align="center" />
      <el-table-column prop="orderStatus" label="订单状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :class="['status-tag', getOrderStatusClass(row.orderStatus)]">{{ row.orderStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="billStatus" label="对账状态" min-width="90" align="center">
        <template #default="{ row }">{{ row.billStatus || '-' }}</template>
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="开票状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :class="['status-tag', getInvoiceStatusClass(row.invoiceStatus)]">{{ row.invoiceStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="settleStatus" label="结算状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :style="{ color: row.settleStatus === '已结算' ? '#67c23a' : '' }">{{ row.settleStatus }}</span>
        </template>
      </el-table-column>
    </el-table>

    <TablePagination v-model:page="pagination.page" v-model:pageSize="pagination.pageSize" :total="pagination.total" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { PageTitle, SearchBar, TablePagination } from '@/components';
import { BILL_STATUS_OPTIONS, INVOICE_STATUS_OPTIONS, SETTLE_STATUS_OPTIONS } from '@/constants/status';
import { getOrderStatusClass, getInvoiceStatusClass } from '@/utils/status';

const searchForm = reactive({
  keyword: '',
  dateRange: [],
  billStatus: '',
  invoiceStatus: '',
  settleStatus: ''
});

const filters = [
  { field: 'billStatus', label: '对账状态', options: BILL_STATUS_OPTIONS },
  { field: 'invoiceStatus', label: '开票状态', options: INVOICE_STATUS_OPTIONS },
  { field: 'settleStatus', label: '结算状态', options: SETTLE_STATUS_OPTIONS }
];

const pagination = reactive({ page: 1, pageSize: 10, total: 100 });

const tableData = ref([
  {
    orderNo: '232323232',
    orderType: '普通订单',
    amount: 2115.97,
    orderDate: '2025-11-22',
    orderStatus: '运输中',
    billStatus: '已对账',
    invoiceStatus: '已付款',
    settleStatus: '已结算'
  },
  {
    orderNo: '2323412123',
    orderType: '普通订单',
    amount: 4476.12,
    orderDate: '2025-12-09',
    orderStatus: '待发货',
    billStatus: '未对账',
    invoiceStatus: '待开票',
    settleStatus: '未结算'
  },
  {
    orderNo: '4566784543',
    orderType: '协议订单',
    amount: 7751.34,
    orderDate: '2025-11-21',
    orderStatus: '已收货',
    billStatus: '已对账',
    invoiceStatus: '已开票',
    settleStatus: '已结算'
  },
  {
    orderNo: '2356565654',
    orderType: '普通订单',
    amount: 7936.37,
    orderDate: '2025-11-27',
    orderStatus: '运输中',
    billStatus: '未对账',
    invoiceStatus: '已付款',
    settleStatus: '未结算'
  },
  {
    orderNo: '2323412123',
    orderType: '协议订单',
    amount: 3931.45,
    orderDate: '2025-12-11',
    orderStatus: '待发货',
    billStatus: '未对账',
    invoiceStatus: '待开票',
    settleStatus: '未结算'
  },
  {
    orderNo: '2323232323',
    orderType: '普通订单',
    amount: 6132.75,
    orderDate: '2025-11-27',
    orderStatus: '已收货',
    billStatus: '已对账',
    invoiceStatus: '已开票',
    settleStatus: '已结算'
  },
  {
    orderNo: '2356565654',
    orderType: '普通订单',
    amount: 3189.56,
    orderDate: '2025-11-25',
    orderStatus: '已收货',
    billStatus: '已对账',
    invoiceStatus: '已开票',
    settleStatus: '已结算'
  },
  {
    orderNo: '2323232323',
    orderType: '协议订单',
    amount: 993.66,
    orderDate: '2025-11-20',
    orderStatus: '运输中',
    billStatus: '未对账',
    invoiceStatus: '已付款',
    settleStatus: '未结算'
  },
  {
    orderNo: '2323412123',
    orderType: '普通订单',
    amount: 2763.35,
    orderDate: '2025-11-17',
    orderStatus: '待发货',
    billStatus: '未对账',
    invoiceStatus: '待开票',
    settleStatus: '未结算'
  },
  {
    orderNo: '2323232323',
    orderType: '协议订单',
    amount: 9286.45,
    orderDate: '2025-12-05',
    orderStatus: '已收货',
    billStatus: '已对账',
    invoiceStatus: '已开票',
    settleStatus: '已结算'
  }
]);
</script>