yoe-shop-web/src/views/reconciliation/invoiceManage/index.vue

<template>
  <div class="page-container">
    <PageTitle title="开票管理" />

    <SearchBar :form="searchForm" :filters="filters" placeholder="开票编号" />

    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="statementInvoiceNo" label="开票编号" min-width="130" align="center" />
      <el-table-column prop="invoiceTime" label="开票时间" min-width="110" align="center">
        <template #default="scope">
          <span>{{ parseTime(scope.row.invoiceTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="客户名称" min-width="110" align="center" />
      <el-table-column prop="amount" label="开票金额" min-width="110" align="center">
        <template #default="{ row }">¥{{ row.amount.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="开票状态" min-width="90" align="center">
        <template #default="{ row }">
          {{ getDictLabel(invoice_status, row.invoiceStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <TablePagination v-model:page="pagination.page" v-model:pageSize="pagination.pageSize" :total="pagination.total" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { PageTitle, SearchBar, TablePagination } from '@/components';
import { getStatementInvoiceList } from '@/api/pc/enterprise/statement';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { invoice_status } = toRefs<any>(proxy?.useDict('invoice_issuance_status', 'statement_status', 'invoice_status'));
const searchForm = reactive({
  keyword: '',
  dateRange: [],
  invoiceStatus: ''
});
const form = reactive({
  statementOrderIds: []
});

const invoiceStatusOptions = ref([{ label: '全部', value: '' }]);

const filters = ref([{ field: 'invoiceStatus', label: '开票状态', options: invoiceStatusOptions.value }]);

const pagination = reactive({ page: 1, pageSize: 5, total: 0 });
const tableData = ref<any[]>([]);
const loading = ref(false);
const router = useRouter();
// 加载对账单列表
const loadStatementInvoice = async () => {
  try {
    loading.value = true;
    const res = await getStatementInvoiceList({
      pageNum: pagination.page,
      pageSize: pagination.pageSize,
      statementInvoiceNo: searchForm.keyword,
      isInvoiceStatus: searchForm.invoiceStatus
    });

    if (res.code === 200 && res.rows) {
      tableData.value = res.rows.map((item: any) => ({
        id: item.id,
        statementInvoiceNo: item.statementInvoiceNo,
        invoiceTime: item.invoiceTime,
        customerName: item.customerName,
        amount: parseFloat(item.invoiceAmount as any) || 0,
        invoiceStatus: item.invoiceStatus,
        payStatus: item.isPaymentStatus
      }));
      pagination.total = res.total || 0;
    }
  } catch (error) {
    console.error('加载对账单列表失败:', error);
    ElMessage.error('加载对账单列表失败');
  } finally {
    loading.value = false;
  }
};

const getDictLabel = (dictOptions: any[], value: string) => {
  if (!dictOptions || !value) return value;
  const dict = dictOptions.find((item) => item.value === value);
  return dict ? dict.label : value;
};

// 监听分页变化
watch(
  () => [pagination.page, pagination.pageSize],
  () => {
    loadStatementInvoice();
  }
);

// 监听搜索条件变化
watch(
  () => [searchForm.keyword, searchForm.invoiceStatus],
  () => {
    pagination.page = 1;
    loadStatementInvoice();
  }
);

// 页面加载时获取数据
onMounted(() => {
  // loadDictData();
  loadStatementInvoice();
});

const handleView = (row: any) => {
  router.push(`/reconciliation/invoiceManage/detail?id=${row.id}`);
};
</script>

<style scoped>
.bottom-bar {
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
}

.summary {
  display: flex;
  align-items: center;
  gap: 20px;
}

.summary span {
  font-size: 14px;
  color: #666;
}

.summary em {
  color: #e60012;
  font-style: normal;
  font-weight: bold;
}

.summary .total em {
  font-size: 16px;
}

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