From 1ffe9b9bf12e1670fbfae0b9acbec95d4aaebe16 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 20 五月 2026 16:23:23 +0800
Subject: [PATCH] fix: 完成财务模块接口对接
---
src/views/financialManagement/payable/payment.vue | 410 +++++++++++++++++++++------------------------------------
1 files changed, 152 insertions(+), 258 deletions(-)
diff --git a/src/views/financialManagement/payable/payment.vue b/src/views/financialManagement/payable/payment.vue
index d4774fe..d762ae9 100644
--- a/src/views/financialManagement/payable/payment.vue
+++ b/src/views/financialManagement/payable/payment.vue
@@ -2,47 +2,60 @@
<div class="app-container">
<el-form :model="filters" :inline="true">
<el-form-item label="浠樻鍗曞彿:">
- <el-input v-model="filters.paymentCode" placeholder="璇疯緭鍏ヤ粯娆惧崟鍙�" clearable style="width: 200px;" />
+ <el-input v-model="filters.paymentNumber" 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-select v-model="filters.paymentMethod" placeholder="璇烽�夋嫨浠樻鏂瑰紡" clearable style="width: 150px;">
- <el-option label="閾惰杞处" value="bank_transfer" />
- <el-option label="鐜伴噾" value="cash" />
- <el-option label="鏀エ" value="check" />
- <el-option label="姹囩エ" value="draft" />
+ <el-option
+ v-for="item in checkout_payment"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
</el-select>
</el-form-item>
- <el-form-item label="鐘舵��:">
- <el-select v-model="filters.status" placeholder="璇烽�夋嫨鐘舵��" clearable style="width: 150px;">
- <el-option label="寰呬粯娆�" value="pending" />
- <el-option label="宸插畬鎴�" value="completed" />
- <el-option label="宸插彇娑�" value="cancelled" />
- </el-select>
+ <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>
<div class="table_list">
<div class="actions">
<div>
- <el-statistic title="鏈湡浠樻鍚堣" :value="totalPaymentAmount" precision="2" prefix="楼" />
+ <el-statistic title="鏈〉浠樻鍚堣" :value="totalPaymentAmount" :precision="2" prefix="楼" />
</div>
<div>
- <el-button type="primary" @click="add" icon="Plus">鏂板浠樻</el-button>
- <el-button @click="handleOut" icon="Download">瀵煎嚭</el-button>
+ <el-button @click="handleExport" icon="Download">瀵煎嚭</el-button>
</div>
</div>
<PIMTable
rowKey="id"
:column="columns"
:tableData="dataList"
+ :tableLoading="tableLoading"
:page="{
current: pagination.currentPage,
size: pagination.pageSize,
@@ -56,105 +69,35 @@
<template #paymentMethod="{ row }">
<el-tag>{{ getPaymentMethodLabel(row.paymentMethod) }}</el-tag>
</template>
- <template #status="{ row }">
- <el-tag :type="row.status === 'completed' ? 'success' : row.status === 'pending' ? 'warning' : 'info'">
- {{ row.status === 'completed' ? '宸插畬鎴�' : row.status === 'pending' ? '寰呬粯娆�' : '宸插彇娑�' }}
- </el-tag>
- </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="handleComplete(row)" v-if="row.status === 'pending'">瀹屾垚</el-button>
- <el-button type="danger" link @click="handleCancel(row)" v-if="row.status === 'pending'">鍙栨秷</el-button>
+ <el-button type="danger" link @click="handleDelete(row)">鍒犻櫎</el-button>
</template>
</PIMTable>
</div>
-
- <FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false">
- <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="浠樻鍗曞彿" prop="paymentCode">
- <el-input v-model="form.paymentCode" placeholder="绯荤粺鑷姩鐢熸垚" disabled />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍏宠仈鐢宠鍗�" prop="applyCode">
- <el-select v-model="form.applyCode" placeholder="璇烽�夋嫨鍏宠仈鐢宠鍗�" style="width: 100%;" :disabled="isEdit">
- <el-option v-for="item in applyList" :key="item.applyCode" :label="item.applyCode" :value="item.applyCode" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <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>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="浠樻鏃ユ湡" prop="paymentDate">
- <el-date-picker v-model="form.paymentDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="YYYY-MM-DD" style="width: 100%;" />
- </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>
- </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>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="閾惰璐﹀彿" prop="bankAccount" v-if="form.paymentMethod === 'bank_transfer'">
- <el-input v-model="form.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鍙�" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="寮�鎴疯" prop="bankName" v-if="form.paymentMethod === 'bank_transfer'">
- <el-input v-model="form.bankName" placeholder="璇疯緭鍏ュ紑鎴疯" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.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>
- </template>
- </FormDialog>
</div>
</template>
<script setup>
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, reactive, computed, onMounted, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
-import FormDialog from "@/components/Dialog/FormDialog.vue";
+import { getOptions } from "@/api/procurementManagement/procurementLedger.js";
+import {
+ listPageAccountPurchasePayment,
+ deleteAccountPurchasePayment,
+} from "@/api/financialManagement/accountPurchasePayment.js";
defineOptions({
name: "浠樻鍗�",
});
+const { proxy } = getCurrentInstance();
+const { checkout_payment } = proxy.useDict("checkout_payment");
+
const filters = reactive({
- paymentCode: "",
+ paymentNumber: "",
supplierId: "",
paymentMethod: "",
- status: "",
+ dateRange: [],
});
const pagination = reactive({
@@ -164,200 +107,151 @@
});
const columns = [
- { label: "浠樻鍗曞彿", prop: "paymentCode", width: "150" },
- { label: "鍏宠仈鐢宠鍗�", prop: "applyCode", width: "150" },
+ { label: "浠樻鍗曞彿", prop: "paymentNumber", width: "150" },
+ { label: "鍏宠仈鐢宠鍗�", prop: "invoiceApplicationNo", width: "150" },
{ label: "渚涘簲鍟�", prop: "supplierName", width: "180" },
{ label: "浠樻鏃ユ湡", prop: "paymentDate", width: "120" },
- { label: "浠樻閲戦", prop: "amount", slot: "amount" },
- { label: "浠樻鏂瑰紡", prop: "paymentMethod", slot: "paymentMethod" },
- { label: "鐘舵��", prop: "status", slot: "status" },
+ { label: "浠樻閲戦", prop: "amount", dataType: "slot", slot: "amount" },
+ { label: "浠樻鏂瑰紡", prop: "paymentMethod", dataType: "slot", slot: "paymentMethod", width: "120" },
{ label: "澶囨敞", prop: "remark", showOverflowTooltip: true },
- { label: "鎿嶄綔", prop: "operation", slot: "operation", width: "220", fixed: "right" },
+ { label: "鎿嶄綔", prop: "operation", dataType: "slot", slot: "operation", width: "80", fixed: "right" },
];
const dataList = ref([]);
-const dialogVisible = ref(false);
-const dialogTitle = ref("");
-const formRef = ref(null);
-const isEdit = ref(false);
-const currentId = ref(null);
+const tableLoading = ref(false);
+const supplierList = ref([]);
-const supplierList = [
- { id: 1, name: "鍖椾含鍘熸潗鏂欎緵搴斿晢" },
- { id: 2, name: "涓婃捣鐢靛瓙鍏冨櫒浠跺叕鍙�" },
- { id: 3, name: "骞垮窞鍖呰鏉愭枡鍘�" },
- { id: 4, name: "娣卞湷浜旈噾閰嶄欢鍏徃" },
-];
-
-const applyList = [
- { applyCode: "FK2024001", supplierId: 1, amount: 5000 },
- { applyCode: "FK2024002", supplierId: 2, amount: 8000 },
- { applyCode: "FK2024003", supplierId: 3, amount: 3000 },
-];
-
-const form = reactive({
- paymentCode: "",
- applyCode: "",
- supplierId: "",
- paymentDate: "",
- amount: 0,
- paymentMethod: "bank_transfer",
- bankAccount: "",
- bankName: "",
- remark: "",
-});
-
-const rules = {
- applyCode: [{ required: true, message: "璇烽�夋嫨鍏宠仈鐢宠鍗�", trigger: "change" }],
- supplierId: [{ required: true, message: "璇烽�夋嫨渚涘簲鍟�", trigger: "change" }],
- paymentDate: [{ required: true, message: "璇烽�夋嫨浠樻鏃ユ湡", trigger: "change" }],
- amount: [{ required: true, message: "璇疯緭鍏ヤ粯娆鹃噾棰�", trigger: "blur" }],
- paymentMethod: [{ required: true, message: "璇烽�夋嫨浠樻鏂瑰紡", trigger: "change" }],
-};
-
-const mockData = [
- { id: 1, paymentCode: "FKD2024001", applyCode: "FK2024001", supplierId: 1, supplierName: "鍖椾含鍘熸潗鏂欎緵搴斿晢", paymentDate: "2024-01-15", amount: 5000, paymentMethod: "bank_transfer", status: "completed", bankAccount: "6222021234567890123", bankName: "宸ュ晢閾惰", remark: "" },
- { id: 2, paymentCode: "FKD2024002", applyCode: "FK2024002", supplierId: 2, supplierName: "涓婃捣鐢靛瓙鍏冨櫒浠跺叕鍙�", paymentDate: "2024-01-18", amount: 8000, paymentMethod: "bank_transfer", status: "pending", bankAccount: "6222029876543210987", bankName: "寤鸿閾惰", remark: "" },
- { id: 3, paymentCode: "FKD2024003", applyCode: "FK2024003", supplierId: 3, supplierName: "骞垮窞鍖呰鏉愭枡鍘�", paymentDate: "2024-01-20", amount: 3000, paymentMethod: "cash", status: "completed", remark: "" },
-];
-
-const totalPaymentAmount = computed(() => {
- return dataList.value.reduce((sum, item) => sum + Number(item.amount), 0);
-});
+const totalPaymentAmount = computed(() =>
+ dataList.value.reduce((sum, item) => sum + Number(item.amount ?? 0), 0)
+);
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: "姹囩エ",
- };
- return map[method] || method;
+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 normalizeTableRow = (row) => ({
+ ...row,
+ paymentNumber: row.paymentNumber ?? row.paymentCode,
+ invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
+ amount: row.paymentAmount ?? row.amount,
+ bankAccountNum: row.bankAccountNum ?? row.bankAccount ?? "",
+ bankAccountName: row.bankAccountName ?? row.bankName ?? "",
+});
+
+const getSupplierList = () => {
+ getOptions().then((res) => {
+ if (res.code === 200) {
+ supplierList.value = res.data ?? [];
+ }
+ });
+};
+
+const appendFilterParams = (params) => {
+ if (filters.paymentNumber) {
+ params.paymentNumber = filters.paymentNumber;
+ }
+ if (filters.supplierId) {
+ params.supplierId = filters.supplierId;
+ }
+ if (filters.paymentMethod) {
+ params.paymentMethod = filters.paymentMethod;
+ }
+ 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(
+ "/accountPurchasePayment/exportAccountPurchasePayment",
+ buildExportParams(),
+ `浠樻鍗昣${Date.now()}.xlsx`
+ );
};
const getTableData = () => {
- let result = [...mockData];
- if (filters.paymentCode) {
- result = result.filter(item => item.paymentCode.includes(filters.paymentCode));
- }
- if (filters.supplierId) {
- result = result.filter(item => item.supplierId === filters.supplierId);
- }
- if (filters.paymentMethod) {
- result = result.filter(item => item.paymentMethod === filters.paymentMethod);
- }
- 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;
+ listPageAccountPurchasePayment(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.paymentCode = "";
- filters.supplierId = "";
- filters.paymentMethod = "";
- filters.status = "";
+const onSearch = () => {
pagination.currentPage = 1;
getTableData();
};
-const changePage = ({ current, size }) => {
- pagination.currentPage = current;
- pagination.pageSize = size;
+const resetFilters = () => {
+ filters.paymentNumber = "";
+ filters.supplierId = "";
+ filters.paymentMethod = "";
+ filters.dateRange = [];
+ pagination.currentPage = 1;
getTableData();
};
-const add = () => {
- isEdit.value = false;
- dialogTitle.value = "鏂板浠樻";
- Object.assign(form, {
- paymentCode: "FKD" + Date.now().toString().slice(-8),
- applyCode: "",
- supplierId: "",
- paymentDate: new Date().toISOString().split('T')[0],
- amount: 0,
- paymentMethod: "bank_transfer",
- bankAccount: "",
- bankName: "",
- remark: "",
- });
- dialogVisible.value = true;
+const changePage = ({ page, limit }) => {
+ pagination.currentPage = page;
+ pagination.pageSize = limit;
+ getTableData();
};
-const edit = (row) => {
- isEdit.value = true;
- currentId.value = row.id;
- dialogTitle.value = "缂栬緫浠樻";
- Object.assign(form, row);
- dialogVisible.value = true;
-};
-
-const view = (row) => {
- ElMessage.info(`鏌ョ湅浠樻鍗�: ${row.paymentCode}`);
-};
-
-const handleComplete = (row) => {
- ElMessageBox.confirm("纭璇ヤ粯娆惧崟宸插畬鎴愬悧锛�", "鎻愮ず", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "info",
- }).then(() => {
- const index = mockData.findIndex(item => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "completed";
- }
- ElMessage.success("浠樻瀹屾垚");
- getTableData();
- });
-};
-
-const handleCancel = (row) => {
- ElMessageBox.confirm("纭鍙栨秷璇ヤ粯娆惧崟鍚楋紵", "鎻愮ず", {
- confirmButtonText: "纭",
+const handleDelete = (row) => {
+ ElMessageBox.confirm(`纭鍒犻櫎浠樻鍗曘��${row.paymentNumber}銆嶅悧锛焋, "鎻愮ず", {
+ confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
type: "warning",
}).then(() => {
- const index = mockData.findIndex(item => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "cancelled";
- }
- ElMessage.success("宸插彇娑�");
- getTableData();
- });
-};
-
-const handleOut = () => {
- ElMessage.success("瀵煎嚭鎴愬姛");
-};
-
-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 };
+ deleteAccountPurchasePayment([row.id])
+ .then((res) => {
+ if (res.code === 200) {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ 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("鍒犻櫎澶辫触");
+ });
});
};
onMounted(() => {
+ getSupplierList();
getTableData();
});
</script>
--
Gitblit v1.9.3