tms-erp-web/src/views/payment/components/bill-payment-table.vue

<template>
  <section class="bill-payment-table">
    <div class="bill-payment-table__toolbar">
      <el-button v-if="hasPermission('bill_payment_add')" type="primary" @click="$emit('add')">
        新增
      </el-button>
      <table-header-tools
        :columns="columns"
        v-model:visible-column-keys="visibleColumnKeys"
        v-model:table-size="tableSize"
        :search-visible="searchVisible"
        @update:search-visible="$emit('update:searchVisible', $event)"
        @refresh="$emit('refresh')"
      />
    </div>
    <el-table v-loading="loading" :data="rows" :size="tableSize" border>
      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
      <el-table-column
        v-for="column in visibleColumns"
        :key="column.prop"
        v-bind="column"
        align="center"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag v-if="column.status" :type="statusType(row.approvalStatus)" class="status-text">
            {{ row[column.prop] || '-' }}
          </el-tag>
          <span v-else-if="column.money">{{ formatMoney(row[column.prop]) }}</span>
          <span v-else>{{ displayValue(row[column.prop]) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320" fixed="right" align="center">
        <template #default="{ row }">
          <div class="bill-payment-table__links">
            <el-link
              v-if="
                ['reviewing', 'approved', 'voided'].includes(row.approvalStatus) &&
                hasPermission('bill_payment_view')
              "
              type="primary"
              @click="$emit('view', row)"
              >查看</el-link
            >
            <el-link
              v-if="row.approvalStatus === 'draft' && hasPermission('bill_payment_delete')"
              type="danger"
              @click="$emit('delete', row)"
              >删除</el-link
            >
            <el-link
              v-if="
                ['draft', 'returned'].includes(row.approvalStatus) &&
                hasPermission('bill_payment_edit')
              "
              type="primary"
              @click="$emit('edit', row)"
              >编辑</el-link
            >
            <el-link
              v-if="
                ['draft', 'returned'].includes(row.approvalStatus) &&
                hasPermission('bill_payment_submit')
              "
              type="primary"
              @click="$emit('submit', row)"
              >提交</el-link
            >
            <el-link
              v-if="
                mkEnabled &&
                ['reviewing', 'approved'].includes(row.approvalStatus) &&
                hasPermission('bill_payment_approve')
              "
              type="primary"
              @click="$emit('mk-audit', row)"
              >流程</el-link
            >
            <el-link
              v-if="
                !mkEnabled &&
                row.approvalStatus === 'reviewing' &&
                hasPermission('bill_payment_approve')
              "
              type="primary"
              @click="$emit('approve', row)"
              >通过</el-link
            >
            <el-link
              v-if="
                !mkEnabled &&
                row.approvalStatus === 'reviewing' &&
                hasPermission('bill_payment_approve')
              "
              type="danger"
              @click="$emit('return', row)"
              >驳回</el-link
            >
            <el-link
              v-if="row.approvalStatus === 'approved' && hasPermission('bill_payment_void')"
              type="danger"
              @click="$emit('void', row)"
              >作废</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="bill-payment-table__pagination">
      <el-pagination
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="$emit('page-change', $event)"
        @size-change="$emit('size-change', $event)"
      />
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex';
import { billPaymentTableColumns } from '@/option/payment/billPayment';
import TableHeaderTools from '@/components/table-header-tools/main.vue';
import { isAdministrator } from '@/utils/auth';

export default {
  name: 'BillPaymentTable',
  components: { TableHeaderTools },
  props: {
    rows: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false },
    page: { type: Object, required: true },
    mkEnabled: { type: Boolean, default: false },
    searchVisible: { type: Boolean, default: true },
  },
  emits: [
    'add',
    'view',
    'edit',
    'delete',
    'submit',
    'mk-audit',
    'approve',
    'return',
    'void',
    'page-change',
    'size-change',
    'refresh',
    'update:searchVisible',
  ],
  data() {
    return {
      columns: billPaymentTableColumns,
      visibleColumnKeys: billPaymentTableColumns.map(column => column.prop),
      tableSize: 'default',
    };
  },
  computed: {
    ...mapGetters(['permission', 'userInfo']),
    visibleColumns() {
      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
    },
    isAdmin() {
      return isAdministrator(this.userInfo);
    },
  },
  methods: {
    hasPermission(code) {
      return this.isAdmin || this.permission?.[code] === true;
    },
    statusType(status) {
      return (
        { reviewing: 'warning', returned: 'danger', approved: 'success', voided: 'info' }[status] ||
        ''
      );
    },
    displayValue(value) {
      return value === null || value === undefined || value === '' ? '-' : value;
    },
    formatMoney(value) {
      return Number(value || 0).toFixed(2);
    },
  },
};
</script>

<style scoped lang="scss">
.bill-payment-table {
  margin-top: 8px;
}
.bill-payment-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.bill-payment-table__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bill-payment-table__pagination {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}
.bill-payment-table :deep(.el-table) {
  --el-table-border-color: #eff1f7;
}
.bill-payment-table :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
  background: #fafafa;
}
</style>