tms-erp-web/src/views/settlement/components/formal-settlement-table-panel.vue

<template>
  <div class="fs-table-panel">
    <div class="fs-table-panel__toolbar">
      <div>
        <el-button
          v-if="hasPermission('formal_settlement_add')"
          type="primary"
          @click="$emit('create')"
          >新增</el-button
        >
        <el-button
          v-if="hasPermission('formal_settlement_payment')"
          type="primary"
          plain
          disabled
          @click="$emit('payment')"
          >付款申请</el-button
        >
        <el-button
          v-if="hasPermission('formal_settlement_sync')"
          type="primary"
          plain
          disabled
          @click="$emit('sync')"
          >同步金蝶</el-button
        >
        <el-button
          v-if="hasPermission('formal_settlement_print')"
          type="primary"
          plain
          @click="emitSingle('print')"
          >打印结算单</el-button
        >
        <el-button
          v-if="hasPermission('formal_settlement_export')"
          type="primary"
          plain
          @click="$emit('export')"
          >导出</el-button
        >
      </div>
      <div class="fs-table-panel__toolbar-right">
        <el-tooltip content="刷新" placement="top">
          <el-button :icon="Refresh" text @click="$emit('refresh')" />
        </el-tooltip>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="rows"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="52" fixed="left" align="center" />
      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        v-bind="column"
        align="center"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-link v-if="column.link && row[column.prop]" type="primary" @click="emitAction('view', row)">{{
            row[column.prop]
          }}</el-link>
          <el-tag v-else-if="column.status" :type="statusType(row.approvalStatus)">{{
            displayValue(row[column.prop])
          }}</el-tag>
          <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
          <span v-else-if="column.prop === 'invoiceStatusName'">{{
            invoiceName(row.invoiceStatus)
          }}</span>
          <span v-else-if="column.prop === 'paymentStatusName'">{{
            paymentName(row.paymentStatus)
          }}</span>
          <span v-else>{{ displayValue(row[column.prop]) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right" align="center">
        <template #default="{ row }"
          ><div class="fs-table-panel__links">
            <el-link
              v-for="action in rowActions(row)"
              :key="action.type"
              :type="action.danger ? 'danger' : 'primary'"
              @click="emitAction(action.type, row)"
              >{{ action.label }}</el-link
            >
          </div></template
        >
      </el-table-column>
    </el-table>
    <div class="fs-table-panel__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="current => $emit('page-change', { current, size: page.size })"
        @size-change="size => $emit('page-change', { current: 1, size })"
      />
    </div>
  </div>
</template>

<script>
import { Refresh } from '@element-plus/icons-vue';
import {
  invoiceStatusOptions,
  paymentStatusOptions,
} from '@/option/settlement/formalSettlementSearch';

export default {
  name: 'FormalSettlementTablePanel',
  props: {
    rows: { type: Array, default: () => [] },
    columns: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false },
    page: { type: Object, required: true },
    hasPermission: { type: Function, required: true },
  },
  emits: ['create', 'payment', 'sync', 'print', 'export', 'refresh', 'page-change', 'action'],
  data() {
    return {
      Refresh,
      selection: [],
    };
  },
  methods: {
    handleSelectionChange(value) {
      this.selection = value;
      this.$emit('update:selection', value);
    },
    emitAction(type, row) {
      this.$emit('action', { type, row });
    },
    emitSingle(type) {
      if (this.selection.length !== 1) {
        this.$message.warning(`${type === 'print' ? '打印' : '操作'}需选择一条正式结算单`);
        return;
      }
      this.$emit('action', { type, row: this.selection[0] });
    },
    isEditable(row) {
      return ['draft', 'returned'].includes(row.approvalStatus);
    },
    rowActions(row) {
      const actions = [];
      if (this.hasPermission('formal_settlement_view'))
        actions.push({ type: 'view', label: '查看' });
      if (this.hasPermission('formal_settlement_edit') && this.isEditable(row))
        actions.push({ type: 'edit', label: '编辑' });
      if (this.hasPermission('formal_settlement_delete') && row.approvalStatus === 'draft')
        actions.push({ type: 'delete', label: '删除', danger: true });
      if (this.hasPermission('formal_settlement_submit') && this.isEditable(row))
        actions.push({ type: 'submit', label: '提交' });
      if (this.hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing') {
        actions.push({ type: 'approve', label: '通过' });
        actions.push({ type: 'return', label: '驳回', danger: true });
      }
      if (
        this.hasPermission('formal_settlement_void') &&
        row.approvalStatus === 'approved' &&
        row.kingdeeSyncStatus !== 'synced'
      )
        actions.push({ type: 'void', label: '作废', danger: true });
      return actions;
    },
    statusType(status) {
      return (
        { approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
        ''
      );
    },
    invoiceName(value) {
      return invoiceStatusOptions.find(item => item.value === value)?.label || value || '-';
    },
    paymentName(value) {
      return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
    },
    displayValue(value) {
      return value === null || value === undefined || value === '' ? '-' : value;
    },
    formatMoney(value, currency = 'RMB') {
      return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
    },
  },
};
</script>

<style scoped lang="scss">
.fs-table-panel__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.fs-table-panel__toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-table-panel__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.fs-table-panel__pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
</style>