tms-erp-web/src/views/settlement/components/invoice-receipt-candidates-dialog.vue

<template>
  <el-dialog
    v-model="visible"
    title="选择收票单"
    width="86%"
    append-to-body
    destroy-on-close
    @open="handleOpen"
  >
    <div class="invoice-candidates-dialog__search">
      <el-input
        v-model="keyword"
        clearable
        placeholder="发票号 / 销方（开票单位） / 购方（受票单位）"
        @keyup.enter="handleQuery"
      />
      <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
    </div>
    <el-table
      ref="candidatesTable"
      v-loading="loading"
      :data="rows"
      row-key="id"
      border
      height="460"
      @selection-change="selection = $event"
    >
      <el-table-column type="selection" width="52" fixed="left" align="center" reserve-selection />
      <el-table-column prop="invoiceNo" label="发票号码" min-width="180" />
      <el-table-column prop="invoiceDate" label="开票日期" min-width="110" align="center">
        <template #default="{ row }">{{ row.invoiceDate || '-' }}</template>
      </el-table-column>
      <el-table-column prop="invoiceType" label="发票类型" min-width="140" />
      <el-table-column prop="issuerName" label="开票单位（销方）" min-width="180" show-overflow-tooltip />
      <el-table-column prop="receiverName" label="受票单位（购方）" min-width="180" show-overflow-tooltip />
      <el-table-column label="发票金额（含税）" min-width="140" align="right">
        <template #default="{ row }">{{ formatMoney(row.invoiceAmount) }}</template>
      </el-table-column>
      <el-table-column label="推送状态" min-width="120" align="center">
        <template #default="{ row }">
          <el-tooltip
            :disabled="row.kingdeePushStatus !== 'failed'"
            :content="row.kingdeePushMsg || '推送金蝶失败，可在收票登记列表重推'"
            placement="top"
          >
            <el-tag :type="pushStatusType(row.kingdeePushStatus)" size="small">
              {{ pushStatusName(row.kingdeePushStatus) }}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="invoice-candidates-dialog__pagination">
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="load"
        @size-change="handleSizeChange"
      />
    </div>
    <div class="invoice-candidates-dialog__tip">
      仅列出审批通过且未被其他付款结算单认领的收票单
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">
        确定{{ selection.length ? `（${selection.length}）` : '' }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { claimCandidates } from '@/api/payment/invoiceReceipt';

export default {
  name: 'InvoiceReceiptCandidatesDialog',
  props: {
    modelValue: { type: Boolean, required: true },
  },
  emits: ['update:modelValue', 'confirm'],
  data() {
    return {
      loading: false,
      keyword: '',
      rows: [],
      selection: [],
      page: { current: 1, size: 10, total: 0 },
    };
  },
  computed: {
    visible: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },
  methods: {
    unwrap(response) {
      const body = response?.data || response || {};
      return body?.data || body;
    },
    handleOpen() {
      this.keyword = '';
      this.page = { current: 1, size: 10, total: 0 };
      this.selection = [];
      this.$refs.candidatesTable?.clearSelection?.();
      this.load();
    },
    handleQuery() {
      this.page.current = 1;
      this.load();
    },
    handleSizeChange() {
      this.page.current = 1;
      this.load();
    },
    async load() {
      this.loading = true;
      try {
        const data = this.unwrap(
          await claimCandidates({
            current: this.page.current,
            size: this.page.size,
            keyword: this.keyword,
          })
        );
        this.rows = data?.records || [];
        this.page.total = Number(data?.total || 0);
      } finally {
        this.loading = false;
      }
    },
    handleConfirm() {
      if (!this.selection.length) {
        this.$message.warning('请至少选择一条收票单');
        return;
      }
      this.$emit('confirm', this.selection.map(row => ({ ...row })));
      this.visible = false;
    },
    pushStatusName(value) {
      return (
        { pushed: '已保存收票单', assigned: '已指定应付', failed: '推送失败', unsynced: '未推送' }[
          value
        ] || '未推送'
      );
    },
    pushStatusType(value) {
      return { pushed: 'warning', assigned: 'success', failed: 'danger', unsynced: 'info' }[value] || 'info';
    },
    formatMoney(value) {
      const number = Number(value);
      return Number.isFinite(number) ? number.toFixed(2) : '-';
    },
  },
};
</script>

<style lang="scss" scoped>
.invoice-candidates-dialog__search {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;

  .el-input {
    width: 360px;
  }
}
.invoice-candidates-dialog__pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.invoice-candidates-dialog__tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}
</style>