cz-web/src/views/finance/cpns/BillTable.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import type { TableInstance } from 'element-plus'
import type { Bill } from '@/types/business/finance'
import { formatMoney } from '@/utils/format'

interface Props {
  bills: Bill[]
  selectedIds: string[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  view: [id: string]
  pay: [id: string]
  'update:selection': [ids: string[]]
}>()

const tableRef = ref<TableInstance>()

function onSelectionChange(rows: Bill[]): void {
  emit('update:selection', rows.map((row) => row.id))
}

// 外部清空选中（如重置查询）时同步清空 el-table 选择态
watch(
  () => props.selectedIds,
  (ids) => {
    if (ids.length === 0 && tableRef.value) tableRef.value.clearSelection()
  },
)
</script>

<template>
  <el-table
    ref="tableRef"
    class="bill-table"
    :data="bills"
    row-key="id"
    @selection-change="onSelectionChange"
  >
    <el-table-column
      type="selection"
      width="51"
    />
    <el-table-column
      type="index"
      label="序号"
      width="235"
    />
    <el-table-column
      prop="planName"
      label="账单名称"
      width="310"
      show-overflow-tooltip
    />
    <el-table-column
      prop="billNo"
      label="账单号"
      width="148"
      show-overflow-tooltip
    />
    <el-table-column
      prop="tradeNo"
      label="交易流水号"
      width="394"
      show-overflow-tooltip
    />
    <el-table-column
      prop="projectName"
      label="项目名称"
      width="339"
      show-overflow-tooltip
    />
    <el-table-column
      label="订单金额"
      width="97"
    >
      <template #default="{ row }">
        {{ formatMoney((row as Bill).amount, 0) }}
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      width="95"
    >
      <template #default="{ row }">
        {{ (row as Bill).status }}
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="96"
      fixed="right"
    >
      <template #default="{ row }">
        <span class="bill-table__ops">
          <el-button
            v-if="(row as Bill).status === '待支付'"
            link
            type="primary"
            class="bill-table__link"
            @click="emit('pay', (row as Bill).id)"
          >
            去支付
          </el-button>
          <el-button
            link
            type="primary"
            class="bill-table__link"
            @click="emit('view', (row as Bill).id)"
          >
            详情
          </el-button>
        </span>
      </template>
    </el-table-column>

    <template #empty>
      <span class="bill-table__empty">暂无账单数据</span>
    </template>
  </el-table>
</template>

<style lang="less" scoped>
.bill-table {
  width: 1765px;
  margin: 6.5px 0 0 14.5px;
  font-size: 12px;
  color: @finance-entry-text;

  :deep(.el-table__header-wrapper th.el-table__cell) {
    height: 41.77px;
    padding: 0;
    background: @finance-table-head-bg;
    border-right: 1px solid @project-divider;
    border-bottom: 1px solid @project-divider;
    color: @finance-entry-text;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  :deep(.el-table__header-wrapper th.el-table__cell:first-child) {
    border-left: 1px solid @project-divider;
  }

  :deep(.el-table__body-wrapper td.el-table__cell) {
    height: 43.77px;
    padding: 0;
    border-bottom: 1px solid @project-divider;
    box-sizing: border-box;
  }

  :deep(.el-table__body tr:hover > td.el-table__cell) {
    background: @bg-color-light;
  }

  :deep(.el-table .cell) {
    padding-left: 10px;
    padding-right: 10px;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 首列（多选）左缩进对齐设计稿
  :deep(.el-table-column--selection .cell) {
    padding-left: 43.5px;
  }

  &__ops {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    white-space: nowrap;
  }

  &__link {
    font-size: 12px;
    font-weight: 400;
    padding: 0;
  }

  &__empty {
    color: @project-muted;
  }
}
</style>