spring
2 天以前 261f2ed00235d47df3754291a4fdca9ba5cb8e7a
src/views/financialManagement/payable/paymentApply.vue
@@ -2,23 +2,40 @@
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="申请单号:">
        <el-input v-model="filters.applyCode" placeholder="请输入申请单号" clearable style="width: 200px;" />
        <el-input v-model="filters.invoiceApplicationNo" placeholder="请输入申请单号" clearable style="width: 200px;" />
      </el-form-item>
      <el-form-item label="供应商:">
        <el-select v-model="filters.supplierId" placeholder="请选择供应商" clearable style="width: 200px;">
          <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
        <el-select v-model="filters.supplierId" placeholder="请选择供应商" clearable filterable style="width: 200px;">
          <el-option
            v-for="item in supplierList"
            :key="item.id"
            :label="item.supplierName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:">
      <el-form-item label="审核状态:">
        <el-select v-model="filters.status" placeholder="请选择状态" clearable style="width: 150px;">
          <el-option label="待审批" value="pending" />
          <el-option label="已审批" value="approved" />
          <el-option label="已驳回" value="rejected" />
          <el-option label="已付款" value="paid" />
          <el-option label="待审核" :value="0" />
          <el-option label="审核通过" :value="1" />
          <el-option label="审核不通过" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请日期:">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          style="width: 240px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
@@ -27,20 +44,19 @@
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus">新增申请</el-button>
          <el-button @click="handleBatchApply" icon="Document" :disabled="selectedRows.length === 0">批量申请</el-button>
          <el-button @click="handleExport" icon="Download">导出</el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :tableLoading="tableLoading"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #amount="{ row }">
@@ -54,90 +70,291 @@
        </template>
        <template #operation="{ row }">
          <el-button type="primary" link @click="view(row)">查看</el-button>
          <el-button type="primary" link @click="edit(row)" v-if="row.status === 'pending'">编辑</el-button>
          <el-button type="success" link @click="handleAudit(row)" v-if="row.status === 'pending'">审批</el-button>
          <el-button type="primary" link @click="edit(row)" v-if="isPendingStatus(row.status)">编辑</el-button>
          <el-button type="success" link @click="handleAudit(row)" v-if="isPendingStatus(row.status)">审核</el-button>
          <el-button type="warning" link @click="openPaymentDialog(row)" v-if="isApprovedStatus(row.status)">付款</el-button>
          <el-button type="danger" link @click="handleDelete(row)" v-if="isPendingStatus(row.status)">删除</el-button>
        </template>
      </PIMTable>
    </div>
    <FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false">
    <FormDialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :operation-type="isView ? 'detail' : ''"
      @confirm="submitForm"
      @cancel="closeDialog"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row v-if="isView" :gutter="20">
          <el-col :span="12">
            <el-form-item label="审核状态">
              <el-tag :type="getStatusType(form.status)">{{ getStatusLabel(form.status) }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请单号" prop="applyCode">
              <el-input v-model="form.applyCode" placeholder="系统自动生成" disabled />
            <el-form-item label="申请单号" prop="invoiceApplicationNo">
              <el-input v-model="form.invoiceApplicationNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="form.supplierId" placeholder="请选择供应商" style="width: 100%;" :disabled="isEdit">
                <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
              <el-select
                v-model="form.supplierId"
                placeholder="请选择供应商"
                style="width: 100%;"
                filterable
                :disabled="isEdit || isView"
                @change="handleSupplierChange"
              >
                <el-option
                  v-for="item in supplierList"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款金额" prop="amount">
              <el-input-number v-model="form.amount" :min="0" :precision="2" style="width: 100%;" />
            <el-form-item label="关联入库单" prop="stockInRecordIds">
              <el-input
                :model-value="inboundBatchDisplayText"
                placeholder="请先选择供应商"
                readonly
                :disabled="!form.supplierId || isEdit || isView"
                class="inbound-batch-input"
                @click="handleInboundInputClick"
              >
                <template v-if="!isEdit && !isView" #append>
                  <el-button
                    :disabled="!form.supplierId"
                    :loading="inboundBatchLoading"
                    @click.stop="openInboundSelectDialog"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="applyDate">
              <el-date-picker
                v-model="form.applyDate"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款金额" prop="paymentAmount">
              <el-input-number
                v-model="form.paymentAmount"
                :min="0"
                :precision="2"
                style="width: 100%;"
                :disabled="isView"
                placeholder="根据入库单自动汇总,可修改"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%;">
                <el-option label="银行转账" value="bank_transfer" />
                <el-option label="现金" value="cash" />
                <el-option label="支票" value="check" />
                <el-option label="汇票" value="draft" />
              <el-select
                v-model="form.paymentMethod"
                placeholder="请选择付款方式"
                style="width: 100%;"
                :disabled="isView"
              >
                <el-option
                  v-for="item in checkout_payment"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="付款事由" prop="paymentContent">
          <el-input
            v-model="form.paymentContent"
            type="textarea"
            :rows="3"
            placeholder="请输入付款事由"
            :disabled="isView"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" :disabled="isView" />
        </el-form-item>
      </el-form>
      <template v-if="!isView" #footer>
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </FormDialog>
    <FormDialog
      title="付款"
      v-model="paymentDialogVisible"
      width="800px"
      @confirm="submitPayment"
      @cancel="paymentDialogVisible = false"
    >
      <el-form :model="paymentForm" :rules="paymentRules" ref="paymentFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款单号" prop="paymentNumber">
              <el-input v-model="paymentForm.paymentNumber" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联申请单" prop="invoiceApplicationNo">
              <el-input v-model="paymentForm.invoiceApplicationNo" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请日期" prop="applyDate">
              <el-date-picker v-model="form.applyDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
            <el-form-item label="供应商">
              <el-input v-model="paymentForm.supplierName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望付款日期" prop="expectedDate">
              <el-date-picker v-model="form.expectedDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
            <el-form-item label="付款日期" prop="paymentDate">
              <el-date-picker
                v-model="paymentForm.paymentDate"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="关联入库单" prop="relatedDocs">
          <el-select v-model="form.relatedDocs" multiple placeholder="请选择关联入库单" style="width: 100%;">
            <el-option v-for="item in inList" :key="item.inCode" :label="item.inCode" :value="item.inCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="付款事由" prop="reason">
          <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请输入付款事由" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款金额" prop="paymentAmount">
              <el-input-number
                v-model="paymentForm.paymentAmount"
                :min="0"
                :precision="2"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="paymentForm.paymentMethod" placeholder="请选择付款方式" style="width: 100%;">
                <el-option
                  v-for="item in checkout_payment"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isBankTransferPayment(paymentForm.paymentMethod)" :gutter="20">
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input v-model="paymentForm.bankAccount" placeholder="银行账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="bankName">
              <el-input v-model="paymentForm.bankName" placeholder="开户行" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
          <el-input v-model="paymentForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="paymentSubmitLoading" @click="submitPayment">确定</el-button>
        <el-button @click="paymentDialogVisible = false">取消</el-button>
      </template>
    </FormDialog>
    <el-dialog
      v-model="inboundSelectVisible"
      title="选择入库单号"
      width="1100px"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      @closed="handleInboundDialogClosed"
    >
      <el-table
        ref="inboundTableRef"
        v-loading="inboundBatchLoading"
        :data="inboundBatchList"
        row-key="id"
        border
        stripe
        max-height="480"
        @selection-change="handleInboundDialogSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="inboundBatches" label="入库单号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="supplierName" label="供应商" min-width="120" show-overflow-tooltip />
        <el-table-column prop="productName" label="产品名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="specificationModel" label="规格型号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="purchaseContractNumber" label="采购订单号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="inboundDate" label="入库日期" width="110" align="center" />
        <el-table-column prop="inboundAmount" label="入库金额(含税)" width="120" align="right">
          <template #default="{ row }">¥{{ formatMoney(getInboundRowTaxInclusiveAmount(row)) }}</template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button type="primary" @click="confirmInboundSelection">确定</el-button>
        <el-button @click="inboundSelectVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { getOptions } from "@/api/procurementManagement/procurementLedger.js";
import {
  getInboundBatchesBySupplier,
  addAccountPaymentApplication,
  listPageAccountPaymentApplication,
  updateAccountPaymentApplication,
  auditAccountPaymentApplication,
  deleteAccountPaymentApplication,
} from "@/api/financialManagement/accountPaymentApplication.js";
import { addAccountPurchasePayment } from "@/api/financialManagement/accountPurchasePayment.js";
defineOptions({
  name: "付款申请",
});
const { proxy } = getCurrentInstance();
const { checkout_payment } = proxy.useDict("checkout_payment");
const filters = reactive({
  applyCode: "",
  invoiceApplicationNo: "",
  supplierId: "",
  status: "",
  dateRange: [],
});
const pagination = reactive({
@@ -149,199 +366,634 @@
const columns = [
  { label: "申请单号", prop: "applyCode", width: "150" },
  { label: "供应商", prop: "supplierName", width: "180" },
  { label: "付款金额", prop: "amount", slot: "amount" },
  { label: "付款方式", prop: "paymentMethod", slot: "paymentMethod" },
  { label: "付款金额", prop: "amount", dataType: "slot", slot: "amount" },
  { label: "付款方式", prop: "paymentMethod", dataType: "slot", slot: "paymentMethod", width: "120" },
  { label: "申请日期", prop: "applyDate", width: "120" },
  { label: "期望付款日", prop: "expectedDate", width: "120" },
  { label: "状态", prop: "status", slot: "status" },
  { label: "操作", prop: "operation", slot: "operation", width: "200", fixed: "right" },
  { label: "状态", prop: "status", dataType: "slot", slot: "status", width: "100" },
  { label: "操作", prop: "operation", dataType: "slot", slot: "operation", width: "260", fixed: "right" },
];
const dataList = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const formRef = ref(null);
const isEdit = ref(false);
const isView = ref(false);
const submitLoading = ref(false);
const currentId = ref(null);
const supplierList = ref([]);
const supplierList = [
  { id: 1, name: "北京原材料供应商" },
  { id: 2, name: "上海电子元器件公司" },
  { id: 3, name: "广州包装材料厂" },
  { id: 4, name: "深圳五金配件公司" },
];
const inboundBatchList = ref([]);
const inboundBatchOptions = ref([]);
const inboundBatchLoading = ref(false);
const inboundSelectVisible = ref(false);
const inboundTableRef = ref(null);
const dialogInboundSelection = ref([]);
const inList = [
  { inCode: "RK2024001", supplierId: 1 },
  { inCode: "RK2024002", supplierId: 2 },
  { inCode: "RK2024003", supplierId: 3 },
];
const paymentDialogVisible = ref(false);
const paymentFormRef = ref(null);
const paymentSubmitLoading = ref(false);
const paymentForm = reactive({
  paymentNumber: "",
  invoiceApplicationNo: "",
  supplierName: "",
  supplierId: "",
  accountPaymentApplicationId: null,
  paymentDate: "",
  paymentAmount: 0,
  paymentMethod: "",
  bankAccount: "",
  bankName: "",
  remark: "",
});
const paymentRules = {
  paymentDate: [{ required: true, message: "请选择付款日期", trigger: "change" }],
  paymentAmount: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
  paymentMethod: [{ required: true, message: "请选择付款方式", trigger: "change" }],
};
const STATUS_LABEL_MAP = { 0: "待审核", 1: "审核通过", 2: "审核不通过" };
const STATUS_TYPE_MAP = { 0: "warning", 1: "success", 2: "danger" };
const form = reactive({
  applyCode: "",
  invoiceApplicationNo: "",
  supplierId: "",
  amount: 0,
  paymentMethod: "bank_transfer",
  paymentAmount: 0,
  paymentMethod: "",
  applyDate: "",
  expectedDate: "",
  relatedDocs: [],
  reason: "",
  paymentContent: "",
  remark: "",
  stockInRecordIds: [],
  inboundBatches: "",
  status: 0,
});
const rules = {
  supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }],
  amount: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
  stockInRecordIds: [{ required: true, type: "array", min: 1, message: "请选择关联入库单", trigger: "change" }],
  paymentAmount: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
  paymentMethod: [{ required: true, message: "请选择付款方式", trigger: "change" }],
  applyDate: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  expectedDate: [{ required: true, message: "请选择期望付款日期", trigger: "change" }],
};
const mockData = [
  { id: 1, applyCode: "FK2024001", supplierId: 1, supplierName: "北京原材料供应商", amount: 5000, paymentMethod: "bank_transfer", applyDate: "2024-01-12", expectedDate: "2024-01-15", status: "pending", relatedDocs: ["RK2024001"], reason: "支付原材料货款", remark: "" },
  { id: 2, applyCode: "FK2024002", supplierId: 2, supplierName: "上海电子元器件公司", amount: 8000, paymentMethod: "bank_transfer", applyDate: "2024-01-14", expectedDate: "2024-01-18", status: "approved", relatedDocs: ["RK2024002"], reason: "支付电子元器件货款", remark: "" },
  { id: 3, applyCode: "FK2024003", supplierId: 3, supplierName: "广州包装材料厂", amount: 3000, paymentMethod: "cash", applyDate: "2024-01-16", expectedDate: "2024-01-20", status: "paid", relatedDocs: ["RK2024003"], reason: "支付包装材料货款", remark: "" },
];
const formatMoney = (value) => {
  if (value === undefined || value === null) return "0.00";
  return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
const getPaymentMethodLabel = (method) => {
  const map = {
    bank_transfer: "银行转账",
    cash: "现金",
    check: "支票",
    draft: "汇票",
const normalizeStatus = (status) => {
  if (status === undefined || status === null || status === "") return 0;
  const num = Number(status);
  return Number.isNaN(num) ? 0 : num;
};
const isPendingStatus = (status) => normalizeStatus(status) === 0;
const isApprovedStatus = (status) => normalizeStatus(status) === 1;
const isBankTransferPayment = (method) => {
  if (method === undefined || method === null || method === "") return false;
  const item = checkout_payment.value?.find((m) => String(m.value) === String(method));
  if (item?.label?.includes("银行")) return true;
  return String(method) === "bank_transfer" || String(method).toLowerCase().includes("bank");
};
const getStatusLabel = (status) => STATUS_LABEL_MAP[normalizeStatus(status)] ?? "待审核";
const getStatusType = (status) => STATUS_TYPE_MAP[normalizeStatus(status)] ?? "warning";
const getPaymentMethodLabel = (value) => {
  if (value === undefined || value === null || value === "") return "-";
  const item = checkout_payment.value?.find((m) => String(m.value) === String(value));
  return item?.label ?? value;
};
const getDefaultPaymentMethod = () => checkout_payment.value?.[0]?.value ?? "";
const parseStockInRecordIds = (value) => {
  if (!value) return [];
  if (Array.isArray(value)) return value;
  return String(value)
    .split(/[,,]/)
    .map((s) => s.trim())
    .filter(Boolean)
    .map((s) => (/^\d+$/.test(s) ? Number(s) : s));
};
const formatInboundBatches = (value) => {
  if (value === undefined || value === null || value === "") return "";
  if (Array.isArray(value)) return value.filter(Boolean).join("、");
  return String(value)
    .split(/[,,]/)
    .map((s) => s.trim())
    .filter(Boolean)
    .join("、");
};
const isSameInboundId = (a, b) => String(a) === String(b);
const getInboundRowId = (row) => row?.id ?? row?.stockInRecordId;
const getInboundRowTaxInclusiveAmount = (row) =>
  Number(row?.inboundAmount ?? row?.taxInclusivePrice ?? row?.totalAmount ?? row?.amount ?? 0);
const normalizeInboundBatchOptions = (data) => {
  const list = Array.isArray(data) ? data : [];
  return list.map((item, index) => {
    const label =
      item.inboundBatches ?? item.batchNo ?? item.inboundNo ?? `入库单${index + 1}`;
    const value = item.id ?? item.stockInRecordId ?? label;
    return {
      label: String(label),
      value,
      inboundAmount: getInboundRowTaxInclusiveAmount(item),
    };
  });
};
const syncPaymentAmount = () => {
  const selected = form.stockInRecordIds || [];
  let sum = inboundBatchOptions.value
    .filter((opt) => selected.some((id) => isSameInboundId(id, opt.value)))
    .reduce((acc, opt) => acc + (Number(opt.inboundAmount) || 0), 0);
  if (sum <= 0 && selected.length) {
    sum = inboundBatchList.value
      .filter((row) => selected.some((id) => isSameInboundId(id, getInboundRowId(row))))
      .reduce((acc, row) => acc + getInboundRowTaxInclusiveAmount(row), 0);
  }
  form.paymentAmount = sum > 0 ? Number(sum.toFixed(2)) : 0;
};
const inboundBatchDisplayText = computed(() => {
  if (form.inboundBatches) return form.inboundBatches;
  const ids = form.stockInRecordIds || [];
  if (!ids.length) return "";
  const labels = inboundBatchOptions.value
    .filter((opt) => ids.some((id) => isSameInboundId(id, opt.value)))
    .map((opt) => opt.label);
  if (labels.length) return labels.join("、");
  return ids.join("、");
});
const normalizeTableRow = (row) => ({
  ...row,
  applyCode: row.invoiceApplicationNo ?? row.applyCode,
  amount: row.paymentAmount ?? row.amount,
  reason: row.paymentContent ?? row.reason,
  status: normalizeStatus(row.status),
  stockInRecordIds: row.stockInRecordIds ?? "",
  inboundBatches: formatInboundBatches(row.inboundBatches),
});
const fillFormFromRow = (row) => {
  const stockInRecordIds = parseStockInRecordIds(row.stockInRecordIds);
  Object.assign(form, {
    invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
    supplierId: row.supplierId,
    paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
    paymentMethod: row.paymentMethod ?? getDefaultPaymentMethod(),
    applyDate: row.applyDate ?? "",
    paymentContent: row.paymentContent ?? row.reason ?? "",
    remark: row.remark ?? "",
    stockInRecordIds,
    inboundBatches: formatInboundBatches(row.inboundBatches),
    status: normalizeStatus(row.status),
  });
};
const buildPayloadFromRow = (row, statusOverride) => ({
  id: row.id,
  supplierId: row.supplierId,
  stockInRecordIds:
    typeof row.stockInRecordIds === "string"
      ? row.stockInRecordIds
      : (row.stockInRecordIds || []).join(","),
  invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
  paymentMethod: row.paymentMethod,
  paymentContent: row.paymentContent ?? row.reason ?? "",
  applyDate: row.applyDate,
  remark: row.remark ?? "",
  status: statusOverride !== undefined ? statusOverride : normalizeStatus(row.status),
  paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
});
const buildSubmitPayload = (forUpdate = false) => {
  const payload = {
    supplierId: form.supplierId,
    stockInRecordIds: (form.stockInRecordIds || []).join(","),
    invoiceApplicationNo: form.invoiceApplicationNo || "",
    paymentMethod: form.paymentMethod,
    paymentContent: form.paymentContent || "",
    applyDate: form.applyDate,
    remark: form.remark || "",
    status: 0,
    paymentAmount: form.paymentAmount,
  };
  return map[method] || method;
  if (forUpdate) {
    payload.id = currentId.value;
  }
  return payload;
};
const getStatusLabel = (status) => {
  const map = { pending: "待审批", approved: "已审批", rejected: "已驳回", paid: "已付款" };
  return map[status] || status;
const getSupplierList = () => {
  getOptions().then((res) => {
    if (res.code === 200) {
      supplierList.value = res.data ?? [];
    }
  });
};
const getStatusType = (status) => {
  const map = { pending: "warning", approved: "success", rejected: "danger", paid: "primary" };
  return map[status] || "";
const appendFilterParams = (params) => {
  if (filters.invoiceApplicationNo) {
    params.invoiceApplicationNo = filters.invoiceApplicationNo;
  }
  if (filters.supplierId) {
    params.supplierId = filters.supplierId;
  }
  if (filters.status !== "" && filters.status != null) {
    params.status = filters.status;
  }
  if (filters.dateRange?.length === 2) {
    params.startDate = filters.dateRange[0];
    params.endDate = filters.dateRange[1];
  }
  return params;
};
const buildListParams = () =>
  appendFilterParams({
    current: pagination.currentPage,
    size: pagination.pageSize,
  });
const buildExportParams = () => appendFilterParams({});
const handleExport = () => {
  proxy.download(
    "/accountPaymentApplication/exportAccountPaymentApplication",
    buildExportParams(),
    `付款申请_${Date.now()}.xlsx`
  );
};
const getTableData = () => {
  let result = [...mockData];
  if (filters.applyCode) {
    result = result.filter(item => item.applyCode.includes(filters.applyCode));
  }
  if (filters.supplierId) {
    result = result.filter(item => item.supplierId === filters.supplierId);
  }
  if (filters.status) {
    result = result.filter(item => item.status === filters.status);
  }
  pagination.total = result.length;
  dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
  tableLoading.value = true;
  listPageAccountPaymentApplication(buildListParams())
    .then((res) => {
      if (res.code === 200) {
        dataList.value = (res.data?.records ?? []).map(normalizeTableRow);
        pagination.total = res.data?.total ?? 0;
      } else {
        dataList.value = [];
        pagination.total = 0;
        ElMessage.error(res.msg || "查询失败");
      }
    })
    .catch(() => {
      dataList.value = [];
      pagination.total = 0;
      ElMessage.error("查询失败");
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const resetFilters = () => {
  filters.applyCode = "";
  filters.supplierId = "";
  filters.status = "";
const onSearch = () => {
  pagination.currentPage = 1;
  getTableData();
};
const changePage = ({ current, size }) => {
  pagination.currentPage = current;
  pagination.pageSize = size;
const resetFilters = () => {
  filters.invoiceApplicationNo = "";
  filters.supplierId = "";
  filters.status = "";
  filters.dateRange = [];
  pagination.currentPage = 1;
  getTableData();
};
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  getTableData();
};
const closeDialog = () => {
  dialogVisible.value = false;
  isView.value = false;
  isEdit.value = false;
  inboundSelectVisible.value = false;
};
const resetForm = () => {
  Object.assign(form, {
    invoiceApplicationNo: "",
    supplierId: "",
    paymentAmount: 0,
    paymentMethod: getDefaultPaymentMethod(),
    applyDate: new Date().toISOString().split("T")[0],
    paymentContent: "",
    remark: "",
    stockInRecordIds: [],
    inboundBatches: "",
    status: 0,
  });
  inboundBatchList.value = [];
  inboundBatchOptions.value = [];
};
const add = () => {
  isEdit.value = false;
  isView.value = false;
  dialogTitle.value = "新增付款申请";
  Object.assign(form, {
    applyCode: "FK" + Date.now().toString().slice(-8),
    supplierId: "",
    amount: 0,
    paymentMethod: "bank_transfer",
    applyDate: new Date().toISOString().split('T')[0],
    expectedDate: "",
    relatedDocs: [],
    reason: "",
    remark: "",
  });
  resetForm();
  dialogVisible.value = true;
};
const edit = (row) => {
  isEdit.value = true;
  isView.value = false;
  currentId.value = row.id;
  dialogTitle.value = "编辑付款申请";
  Object.assign(form, row);
  fillFormFromRow(row);
  dialogVisible.value = true;
};
const view = (row) => {
  ElMessage.info(`查看申请单: ${row.applyCode}`);
  isView.value = true;
  isEdit.value = false;
  dialogTitle.value = "查看付款申请";
  fillFormFromRow(row);
  if (row.supplierId) {
    loadInboundBatches(row.supplierId, true, false);
  }
  dialogVisible.value = true;
};
const submitAudit = (row, status) => {
  auditAccountPaymentApplication(buildPayloadFromRow(row, status))
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(status === 1 ? "审核通过" : "审核不通过");
        getTableData();
      } else {
        ElMessage.error(res.msg || "审核失败");
      }
    })
    .catch(() => {
      ElMessage.error("审核失败");
    });
};
const handleAudit = (row) => {
  ElMessageBox.confirm("确认审批通过该付款申请吗?", "提示", {
    confirmButtonText: "通过",
    cancelButtonText: "驳回",
  ElMessageBox.confirm("请选择审核结果", "付款申请审核", {
    confirmButtonText: "审核通过",
    cancelButtonText: "审核不通过",
    distinguishCancelAndClose: true,
    type: "warning",
  }).then(() => {
    const index = mockData.findIndex(item => item.id === row.id);
    if (index !== -1) {
      mockData[index].status = "approved";
    }
    ElMessage.success("审批通过");
    getTableData();
  }).catch((action) => {
    if (action === "cancel") {
      const index = mockData.findIndex(item => item.id === row.id);
      if (index !== -1) {
        mockData[index].status = "rejected";
  })
    .then(() => {
      submitAudit(row, 1);
    })
    .catch((action) => {
      if (action === "cancel") {
        submitAudit(row, 2);
      }
      ElMessage.warning("已驳回");
      getTableData();
    }
    });
};
const openPaymentDialog = (row) => {
  Object.assign(paymentForm, {
    paymentNumber: "",
    invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
    supplierName: row.supplierName ?? "",
    supplierId: row.supplierId,
    accountPaymentApplicationId: row.id,
    paymentDate: new Date().toISOString().split("T")[0],
    paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
    paymentMethod: row.paymentMethod ?? getDefaultPaymentMethod(),
    bankAccount: row.bankAccountNum ?? row.bankAccount ?? "",
    bankName: row.bankAccountName ?? row.bankName ?? "",
    remark: "",
  });
  paymentDialogVisible.value = true;
  nextTick(() => {
    paymentFormRef.value?.clearValidate();
  });
};
const handleBatchApply = () => {
  ElMessage.success(`批量申请 ${selectedRows.value.length} 条记录`);
const submitPayment = () => {
  paymentFormRef.value?.validate((valid) => {
    if (!valid) return;
    paymentSubmitLoading.value = true;
    addAccountPurchasePayment({
      accountPaymentApplicationId: paymentForm.accountPaymentApplicationId,
      supplierId: paymentForm.supplierId,
      paymentDate: paymentForm.paymentDate,
      paymentMethod: paymentForm.paymentMethod,
      paymentAmount: paymentForm.paymentAmount,
      paymentNumber: paymentForm.paymentNumber || "",
      remark: paymentForm.remark || "",
    })
      .then((res) => {
        if (res.code === 200) {
          ElMessage.success("付款成功");
          paymentDialogVisible.value = false;
          getTableData();
        } else {
          ElMessage.error(res.msg || "付款失败");
        }
      })
      .catch(() => {
        ElMessage.error("付款失败");
      })
      .finally(() => {
        paymentSubmitLoading.value = false;
      });
  });
};
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除申请单「${row.applyCode ?? row.invoiceApplicationNo}」吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteAccountPaymentApplication([row.id])
      .then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          getTableData();
        } else {
          ElMessage.error(res.msg || "删除失败");
        }
      })
      .catch(() => {
        ElMessage.error("删除失败");
      });
  });
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const supplier = supplierList.find(item => item.id === form.supplierId);
      if (isEdit.value) {
        const index = mockData.findIndex(item => item.id === currentId.value);
        if (index !== -1) {
          mockData[index] = { ...mockData[index], ...form, supplierName: supplier?.name };
  formRef.value?.validate((valid) => {
    if (!valid) return;
    submitLoading.value = true;
    const request = isEdit.value
      ? updateAccountPaymentApplication(buildSubmitPayload(true))
      : addAccountPaymentApplication(buildSubmitPayload(false));
    request
      .then((res) => {
        if (res.code === 200) {
          ElMessage.success(isEdit.value ? "编辑成功" : "新增成功");
          closeDialog();
          pagination.currentPage = 1;
          getTableData();
        } else {
          ElMessage.error(res.msg || "保存失败");
        }
        ElMessage.success("编辑成功");
      } else {
        const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
        mockData.push({ id: newId, ...form, supplierName: supplier?.name, status: "pending" });
        ElMessage.success("新增成功");
      }
      dialogVisible.value = false;
      getTableData();
    }
      })
      .catch(() => {
        ElMessage.error("保存失败");
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};
const ensureInboundOptionsForSelected = () => {
  const ids = form.stockInRecordIds || [];
  ids.forEach((id) => {
    const exists = inboundBatchOptions.value.some((opt) => isSameInboundId(opt.value, id));
    if (exists) return;
    const fromList = inboundBatchList.value.find((row) => isSameInboundId(getInboundRowId(row), id));
    if (fromList) {
      const [option] = normalizeInboundBatchOptions([fromList]);
      if (option) inboundBatchOptions.value.push(option);
      return;
    }
    inboundBatchOptions.value.push({
      label: String(id),
      value: id,
      inboundAmount: 0,
    });
  });
};
const restoreInboundTableSelection = () => {
  nextTick(() => {
    const table = inboundTableRef.value;
    if (!table) return;
    table.clearSelection();
    const selectedIds = new Set((form.stockInRecordIds || []).map((id) => String(id)));
    inboundBatchList.value.forEach((row) => {
      const rowId = getInboundRowId(row);
      if (rowId !== undefined && rowId !== null && selectedIds.has(String(rowId))) {
        table.toggleRowSelection(row, true);
      }
    });
  });
};
const loadInboundBatches = (supplierId, keepSelected = false, syncAmount = true) => {
  if (!supplierId) {
    inboundBatchList.value = [];
    inboundBatchOptions.value = [];
    if (!keepSelected) {
      form.stockInRecordIds = [];
      form.inboundBatches = "";
      form.paymentAmount = 0;
    }
    return Promise.resolve();
  }
  inboundBatchLoading.value = true;
  return getInboundBatchesBySupplier({ supplierId })
    .then((res) => {
      if (res.code === 200) {
        const list = res.data?.records ?? res.data ?? [];
        inboundBatchList.value = Array.isArray(list) ? list : [];
        inboundBatchOptions.value = normalizeInboundBatchOptions(list);
      } else {
        inboundBatchList.value = [];
        inboundBatchOptions.value = [];
      }
    })
    .catch(() => {
      inboundBatchList.value = [];
      inboundBatchOptions.value = [];
    })
    .finally(() => {
      inboundBatchLoading.value = false;
      if (keepSelected) {
        ensureInboundOptionsForSelected();
        restoreInboundTableSelection();
        if (syncAmount && !isView.value) {
          syncPaymentAmount();
        }
      }
    });
};
const handleSupplierChange = (supplierId) => {
  form.stockInRecordIds = [];
  form.inboundBatches = "";
  form.paymentAmount = 0;
  loadInboundBatches(supplierId);
};
const handleInboundInputClick = () => {
  if (isEdit.value || isView.value) return;
  openInboundSelectDialog();
};
const openInboundSelectDialog = () => {
  if (!form.supplierId || isEdit.value || isView.value) return;
  inboundSelectVisible.value = true;
  loadInboundBatches(form.supplierId, true, false).then(() => {
    restoreInboundTableSelection();
  });
};
const handleInboundDialogSelectionChange = (selection) => {
  dialogInboundSelection.value = selection;
};
const confirmInboundSelection = () => {
  if (dialogInboundSelection.value.length === 0) {
    ElMessage.warning("请至少选择一条入库单");
    return;
  }
  form.stockInRecordIds = dialogInboundSelection.value
    .map((row) => getInboundRowId(row))
    .filter((id) => id !== undefined && id !== null);
  form.inboundBatches = dialogInboundSelection.value
    .map((row) => row.inboundBatches ?? row.batchNo ?? "")
    .filter(Boolean)
    .join("、");
  dialogInboundSelection.value.forEach((row) => {
    const [option] = normalizeInboundBatchOptions([row]);
    if (option && !inboundBatchOptions.value.some((opt) => isSameInboundId(opt.value, option.value))) {
      inboundBatchOptions.value.push(option);
    }
  });
  inboundSelectVisible.value = false;
  syncPaymentAmount();
  formRef.value?.validateField("stockInRecordIds");
};
const handleInboundDialogClosed = () => {
  dialogInboundSelection.value = [];
};
onMounted(() => {
  getSupplierList();
  getTableData();
});
</script>
@@ -357,4 +1009,8 @@
  color: #f56c6c;
  font-weight: bold;
}
.inbound-batch-input :deep(.el-input__wrapper) {
  cursor: pointer;
}
</style>