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

<template>
  <basic-container class="bill-payment-page">
    <bill-payment-search
      v-if="searchVisible"
      :query="query"
      :loading="loading"
      @search="handleSearch"
      @reset="resetSearch"
    />
    <bill-payment-table
      :rows="rows"
      :loading="loading"
      :page="page"
      :mk-enabled="mkEnabled"
      v-model:search-visible="searchVisible"
      @add="openCreate"
      @view="openView"
      @edit="openEdit"
      @delete="handleDelete"
      @submit="handleSubmit"
      @mk-audit="handleMkAudit"
      @approve="handleApprove"
      @return="handleReturn"
      @void="handleVoid"
      @refresh="loadTable"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </basic-container>
</template>

<script>
import * as api from '@/api/payment/billPayment';
import { getMKApprovalUrl } from '@/api/system/business-process';
import { loadMkEnabled, submitMkApprovalFlow } from '@/utils/mk-approval';
import BillPaymentSearch from './components/bill-payment-search.vue';
import BillPaymentTable from './components/bill-payment-table.vue';

const emptyQuery = () => ({
  paymentNo: '',
  deptName: '',
  deptPath: [],
  paymentDateRange: [],
  approvalStatus: '',
});

export default {
  name: 'BillPayment',
  components: { BillPaymentSearch, BillPaymentTable },
  data() {
    return {
      query: emptyQuery(),
      searchVisible: true,
      rows: [],
      loading: false,
      page: { current: 1, size: 10, total: 0 },
      mkEnabled: false,
    };
  },
  mounted() {
    this.loadTable();
    loadMkEnabled()
      .then(enabled => {
        this.mkEnabled = !!enabled;
      })
      .catch(() => {
        this.mkEnabled = false;
      });
  },
  methods: {
    unwrapData(response) {
      const body = response?.data || response || {};
      return body?.data || body;
    },
    buildParams() {
      const params = { ...this.query };
      const range = params.paymentDateRange || [];
      delete params.paymentDateRange;
      if (range.length === 2) {
        params.paymentStartDate = range[0];
        params.paymentEndDate = range[1];
      }
      return params;
    },
    async loadTable() {
      this.loading = true;
      try {
        const data = this.unwrapData(
          await api.getList(this.page.current, this.page.size, this.buildParams())
        );
        this.rows = data.records || [];
        this.page.total = Number(data.total || 0);
      } finally {
        this.loading = false;
      }
    },
    handleSearch() {
      this.page.current = 1;
      this.loadTable();
    },
    resetSearch() {
      this.query = emptyQuery();
      this.handleSearch();
    },
    openCreate() {
      this.$router.push({ path: '/payment/bill-payment/form', query: { mode: 'add' } });
    },
    openView(row) {
      this.$router.push({
        path: '/payment/bill-payment/form',
        query: { mode: 'view', id: row.id },
      });
    },
    openEdit(row) {
      this.$router.push({
        path: '/payment/bill-payment/form',
        query: { mode: 'edit', id: row.id },
      });
    },
    async handleDelete(row) {
      await this.$confirm('确认删除该汇票付款？', '提示', { type: 'warning' });
      await api.remove(row.id);
      this.$message.success('删除成功');
      if (this.rows.length === 1 && this.page.current > 1) this.page.current -= 1;
      this.loadTable();
    },
    async handleSubmit(row) {
      const previousApprovalStatus = row.approvalStatus || '';
      await api.submit({ id: row.id });
      await submitMkApprovalFlow({
        bizType: 'bill-payment',
        bizId: row.id,
        subjectName: row.paymentNo || row.billNo || '',
        approvalStatus: previousApprovalStatus,
        mkEnabled: this.mkEnabled,
      });
      this.$message.success('提交成功');
      this.loadTable();
    },
    handleMkAudit(row) {
      if (!row?.id) {
        this.$message.warning('汇票付款ID为空，无法打开审核页');
        return;
      }
      getMKApprovalUrl({ bizId: String(row.id) })
        .then(res => {
          const url = res?.data?.data;
          if (!url) {
            this.$message.error('获取审核跳转地址失败');
            return;
          }
          window.open(url, '_blank');
        })
        .catch(() => {
          this.$message.error('获取审核跳转地址失败');
        });
    },
    async handleApprove(row) {
      await this.$confirm('确认审批通过该汇票付款？', '提示', { type: 'warning' });
      // 防止重复点击：请求期间表格遮罩，后续点击直接忽略
      if (this.loading) return;
      this.loading = true;
      try {
        await api.approve({ id: row.id });
        this.$message.success('审批通过');
        await this.loadTable();
      } finally {
        this.loading = false;
      }
    },
    async handleReturn(row) {
      const { value } = await this.$prompt('请输入驳回原因', '审批驳回');
      await api.returnBill({ id: row.id, reason: value });
      this.$message.success('已驳回');
      this.loadTable();
    },
    async handleVoid(row) {
      const { value } = await this.$prompt('请输入作废原因', '作废汇票付款');
      await api.voidBill({ id: row.id, reason: value });
      this.$message.success('作废成功');
      this.loadTable();
    },
    handlePageChange(current) {
      this.page.current = current;
      this.loadTable();
    },
    handleSizeChange(size) {
      this.page.current = 1;
      this.page.size = size;
      this.loadTable();
    },
  },
};
</script>