From 261f2ed00235d47df3754291a4fdca9ba5cb8e7a Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 21 五月 2026 17:16:09 +0800
Subject: [PATCH] fix: 合并财务数据
---
src/views/financialManagement/receivable/receipt.vue | 1063 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 781 insertions(+), 282 deletions(-)
diff --git a/src/views/financialManagement/receivable/receipt.vue b/src/views/financialManagement/receivable/receipt.vue
index 2bbbb96..6ddb3fe 100644
--- a/src/views/financialManagement/receivable/receipt.vue
+++ b/src/views/financialManagement/receivable/receipt.vue
@@ -1,356 +1,855 @@
<template>
<div class="app-container">
- <el-form :model="filters" :inline="true">
+ <el-form :model="filters"
+ :inline="true">
<el-form-item label="鏀舵鍗曞彿:">
- <el-input v-model="filters.receiptCode" placeholder="璇疯緭鍏ユ敹娆惧崟鍙�" clearable style="width: 200px;" />
+ <el-input v-model="filters.collectionNumber"
+ placeholder="璇疯緭鍏ユ敹娆惧崟鍙�"
+ clearable
+ style="width: 200px;" />
</el-form-item>
<el-form-item label="瀹㈡埛:">
- <el-select v-model="filters.customerId" placeholder="璇烽�夋嫨瀹㈡埛" clearable style="width: 200px;">
- <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
+ <el-select v-model="filters.customerId"
+ placeholder="璇烽�夋嫨瀹㈡埛"
+ clearable
+ filterable
+ style="width: 200px;">
+ <el-option v-for="item in customerList"
+ :key="item.id"
+ :label="item.customerName"
+ :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="鏀舵鏂瑰紡:">
- <el-select v-model="filters.receiptMethod" 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 label="鏀粯瀹�" value="alipay" />
- <el-option label="寰俊" value="wechat" />
+ <el-select v-model="filters.collectionMethod"
+ placeholder="璇烽�夋嫨鏀舵鏂瑰紡"
+ clearable
+ style="width: 150px;">
+ <el-option v-for="item in payment_methods"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
</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>
<div class="table_list">
<div class="actions">
<div>
- <el-statistic title="鏈湡鏀舵鍚堣" :value="totalReceiptAmount" precision="2" prefix="楼" />
+ <el-statistic title="鏈〉鏀舵鍚堣"
+ :value="totalReceiptAmount"
+ :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 type="primary"
+ @click="add"
+ icon="Plus">鏂板鏀舵</el-button>
+ <el-button type="success"
+ @click="handleExport"
+ icon="Download">瀵煎嚭</el-button>
</div>
</div>
- <PIMTable
- rowKey="id"
- :column="columns"
- :tableData="dataList"
- :page="{
+ <PIMTable rowKey="id"
+ v-loading="tableLoading"
+ :column="columns"
+ :tableData="dataList"
+ :page="{
current: pagination.currentPage,
size: pagination.pageSize,
total: pagination.total,
}"
- @pagination="changePage"
- >
+ @pagination="changePage">
<template #amount="{ row }">
<span class="text-success">楼{{ formatMoney(row.amount) }}</span>
</template>
<template #receiptMethod="{ row }">
- <el-tag>{{ getReceiptMethodLabel(row.receiptMethod) }}</el-tag>
- </template>
- <template #status="{ row }">
- <el-tag :type="row.status === 'confirmed' ? 'success' : 'warning'">{{ row.status === 'confirmed' ? '宸茬‘璁�' : '寰呯‘璁�' }}</el-tag>
+ <span>{{ getReceiptMethodLabel(row.receiptMethod) }}</span>
</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="handleConfirm(row)" v-if="row.status === 'pending'">纭</el-button>
- <el-button type="danger" link @click="handleDelete(row)" v-if="row.status === 'pending'">鍒犻櫎</el-button>
+ <el-button type="primary"
+ link
+ @click="view(row)">鏌ョ湅</el-button>
+ <el-button :disabled="row.accountStatemen"
+ type="primary"
+ link
+ @click="edit(row)">缂栬緫</el-button>
+ <el-button :disabled="row.accountStatemen"
+ 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">
+ <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 :gutter="20">
- <el-col :span="12">
- <el-form-item label="鏀舵鍗曞彿" prop="receiptCode">
- <el-input v-model="form.receiptCode" placeholder="绯荤粺鑷姩鐢熸垚" disabled />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="瀹㈡埛" prop="customerId">
- <el-select v-model="form.customerId" placeholder="璇烽�夋嫨瀹㈡埛" style="width: 100%;" :disabled="isEdit">
- <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
- </el-select>
+ <el-col :span="24">
+ <el-form-item label="鏀舵鍗曞彿"
+ prop="receiptCode">
+ <el-input v-model="form.receiptCode"
+ placeholder="绯荤粺鑷姩鐢熸垚"
+ disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="鏀舵鏃ユ湡" prop="receiptDate">
- <el-date-picker v-model="form.receiptDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="YYYY-MM-DD" style="width: 100%;" />
- </el-form-item>
- </el-col>
- <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-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="鏀舵鏂瑰紡" prop="receiptMethod">
- <el-select v-model="form.receiptMethod" 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-option label="鏀粯瀹�" value="alipay" />
- <el-option label="寰俊" value="wechat" />
+ <el-form-item label="瀹㈡埛"
+ prop="customerId">
+ <el-select v-model="form.customerId"
+ placeholder="璇烽�夋嫨瀹㈡埛"
+ style="width: 100%;"
+ :disabled="isEdit || isView"
+ filterable
+ @change="handleCustomerChange">
+ <el-option v-for="item in customerList"
+ :key="item.id"
+ :label="item.customerName"
+ :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="閾惰璐﹀彿" prop="bankAccount" v-if="form.receiptMethod === 'bank_transfer'">
- <el-input v-model="form.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鍙�" />
+ <el-form-item label="鍏宠仈鍗曟嵁"
+ prop="stockOutRecordIds">
+ <el-input :model-value="outboundBatchDisplayText"
+ placeholder="璇峰厛閫夋嫨瀹㈡埛"
+ readonly
+ :disabled="!form.customerId || isEdit || isView"
+ class="outbound-batch-input"
+ @click="handleOutboundInputClick">
+ <template v-if="!isEdit && !isView"
+ #append>
+ <el-button :disabled="!form.customerId"
+ :loading="outboundBatchLoading"
+ @click.stop="openOutboundSelectDialog">
+ 閫夋嫨
+ </el-button>
+ </template>
+ </el-input>
</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 outList" :key="item.outCode" :label="item.outCode" :value="item.outCode" />
- </el-select>
- </el-form-item>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="璇疯緭鍏ュ娉�" />
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鏀舵鏃ユ湡"
+ prop="receiptDate">
+ <el-date-picker v-model="form.receiptDate"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ style="width: 100%;"
+ :disabled="isView" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鏀舵閲戦"
+ prop="amount">
+ <el-input-number v-model="form.amount"
+ :min="0"
+ :precision="2"
+ style="width: 100%;"
+ :disabled="isView"
+ placeholder="鏍规嵁鍏宠仈鍗曟嵁鑷姩姹囨�伙紝鍙慨鏀�" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鏀舵鏂瑰紡"
+ prop="receiptMethod">
+ <el-select v-model="form.receiptMethod"
+ placeholder="璇烽�夋嫨鏀舵鏂瑰紡"
+ style="width: 100%;"
+ :disabled="isView">
+ <el-option v-for="item in payment_methods"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-form-item label="澶囨敞"
+ prop="remark">
+ <el-input v-model="form.remark"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯緭鍏ュ娉�"
+ :disabled="isView" />
</el-form-item>
</el-form>
- <template #footer>
- <el-button type="primary" @click="submitForm">纭畾</el-button>
- <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <template v-if="!isView"
+ #footer>
+ <el-button type="primary"
+ :loading="submitLoading"
+ @click="submitForm">纭畾</el-button>
+ <el-button @click="closeDialog">鍙栨秷</el-button>
</template>
</FormDialog>
+ <el-dialog v-model="outboundSelectVisible"
+ title="閫夋嫨鍏宠仈鍗曟嵁"
+ width="1200px"
+ append-to-body
+ destroy-on-close
+ :close-on-click-modal="false"
+ @closed="handleOutboundDialogClosed">
+ <el-table ref="outboundTableRef"
+ v-loading="outboundBatchLoading"
+ :data="outboundBatchList"
+ row-key="id"
+ border
+ stripe
+ max-height="480"
+ @selection-change="handleOutboundDialogSelectionChange">
+ <el-table-column type="selection"
+ width="55"
+ align="center" />
+ <el-table-column prop="outboundBatches"
+ label="鍑哄簱鍗曞彿"
+ min-width="140"
+ show-overflow-tooltip />
+ <el-table-column prop="customerName"
+ 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="salesContractNo"
+ label="閿�鍞悎鍚屽彿"
+ min-width="140"
+ show-overflow-tooltip />
+ <el-table-column prop="shippingNo"
+ label="鍙戣揣鍗曞彿"
+ min-width="130"
+ show-overflow-tooltip />
+ <el-table-column prop="shippingDate"
+ label="鍙戣揣鏃ユ湡"
+ width="110"
+ align="center" />
+ <el-table-column prop="outboundAmount"
+ label="鍑哄簱閲戦"
+ width="110"
+ align="right">
+ <template #default="{ row }">楼{{ formatMoney(row.outboundAmount) }}</template>
+ </el-table-column>
+ <el-table-column prop="taxRate"
+ label="绋庣巼"
+ width="80"
+ align="center">
+ <template #default="{ row }">{{ row.taxRate }}%</template>
+ </el-table-column>
+ </el-table>
+ <template #footer>
+ <el-button type="primary"
+ @click="confirmOutboundSelection">纭畾</el-button>
+ <el-button @click="outboundSelectVisible = false">鍙栨秷</el-button>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
-import { ref, reactive, onMounted, computed } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import FormDialog from "@/components/Dialog/FormDialog.vue";
+ import {
+ ref,
+ reactive,
+ computed,
+ onMounted,
+ nextTick,
+ getCurrentInstance,
+ } from "vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ import FormDialog from "@/components/Dialog/FormDialog.vue";
+ import { listCustomer } from "@/api/basicData/customer.js";
+ import {
+ getOutboundBatchesByCustomer,
+ addAccountSalesCollection,
+ listPageAccountSalesCollection,
+ updateAccountSalesCollection,
+ deleteAccountSalesCollection,
+ } from "@/api/financialManagement/accountSalesCollection.js";
-defineOptions({
- name: "鏀舵鍗�",
-});
+ defineOptions({
+ name: "鏀舵鍗�",
+ });
-const filters = reactive({
- receiptCode: "",
- customerId: "",
- receiptMethod: "",
-});
+ const { proxy } = getCurrentInstance();
+ const { payment_methods } = proxy.useDict("payment_methods");
-const pagination = reactive({
- currentPage: 1,
- pageSize: 10,
- total: 0,
-});
-
-const columns = [
- { label: "鏀舵鍗曞彿", prop: "receiptCode", width: "150" },
- { label: "瀹㈡埛鍚嶇О", prop: "customerName", width: "180" },
- { label: "鏀舵鏃ユ湡", prop: "receiptDate", width: "120" },
- { label: "鏀舵閲戦", prop: "amount", slot: "amount" },
- { label: "鏀舵鏂瑰紡", prop: "receiptMethod", slot: "receiptMethod" },
- { label: "鐘舵��", prop: "status", slot: "status" },
- { label: "澶囨敞", prop: "remark", showOverflowTooltip: true },
- { label: "鎿嶄綔", prop: "operation", slot: "operation", width: "220", 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 customerList = [
- { id: 1, name: "鍖椾含绉戞妧鏈夐檺鍏徃" },
- { id: 2, name: "涓婃捣璐告槗鍏徃" },
- { id: 3, name: "骞垮窞瀹炰笟鏈夐檺鍏徃" },
- { id: 4, name: "娣卞湷鐢靛瓙鍏徃" },
-];
-
-const outList = [
- { outCode: "CK2024001", customerId: 1 },
- { outCode: "CK2024002", customerId: 2 },
- { outCode: "CK2024003", customerId: 3 },
-];
-
-const form = reactive({
- receiptCode: "",
- customerId: "",
- receiptDate: "",
- amount: 0,
- receiptMethod: "bank_transfer",
- bankAccount: "",
- relatedDocs: [],
- remark: "",
-});
-
-const rules = {
- customerId: [{ required: true, message: "璇烽�夋嫨瀹㈡埛", trigger: "change" }],
- receiptDate: [{ required: true, message: "璇烽�夋嫨鏀舵鏃ユ湡", trigger: "change" }],
- amount: [{ required: true, message: "璇疯緭鍏ユ敹娆鹃噾棰�", trigger: "blur" }],
- receiptMethod: [{ required: true, message: "璇烽�夋嫨鏀舵鏂瑰紡", trigger: "change" }],
-};
-
-const mockData = [
- { id: 1, receiptCode: "SK2024001", customerId: 1, customerName: "鍖椾含绉戞妧鏈夐檺鍏徃", receiptDate: "2024-01-16", amount: 3000, receiptMethod: "bank_transfer", status: "confirmed", relatedDocs: ["CK2024001"], remark: "" },
- { id: 2, receiptCode: "SK2024002", customerId: 2, customerName: "涓婃捣璐告槗鍏徃", receiptDate: "2024-01-18", amount: 5000, receiptMethod: "cash", status: "pending", relatedDocs: ["CK2024002"], remark: "" },
- { id: 3, receiptCode: "SK2024003", customerId: 3, customerName: "骞垮窞瀹炰笟鏈夐檺鍏徃", receiptDate: "2024-01-20", amount: 8000, receiptMethod: "alipay", status: "confirmed", relatedDocs: ["CK2024003"], remark: "" },
-];
-
-const totalReceiptAmount = computed(() => {
- return dataList.value.reduce((sum, item) => sum + Number(item.amount), 0);
-});
-
-const formatMoney = (value) => {
- if (value === undefined || value === null) return "0.00";
- return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-};
-
-const getReceiptMethodLabel = (method) => {
- const map = {
- bank_transfer: "閾惰杞处",
- cash: "鐜伴噾",
- check: "鏀エ",
- draft: "姹囩エ",
- alipay: "鏀粯瀹�",
- wechat: "寰俊",
- };
- return map[method] || method;
-};
-
-const getTableData = () => {
- let result = [...mockData];
- if (filters.receiptCode) {
- result = result.filter(item => item.receiptCode.includes(filters.receiptCode));
- }
- if (filters.customerId) {
- result = result.filter(item => item.customerId === filters.customerId);
- }
- if (filters.receiptMethod) {
- result = result.filter(item => item.receiptMethod === filters.receiptMethod);
- }
- pagination.total = result.length;
- dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
-};
-
-const resetFilters = () => {
- filters.receiptCode = "";
- filters.customerId = "";
- filters.receiptMethod = "";
- pagination.currentPage = 1;
- getTableData();
-};
-
-const changePage = ({ current, size }) => {
- pagination.currentPage = current;
- pagination.pageSize = size;
- getTableData();
-};
-
-const add = () => {
- isEdit.value = false;
- dialogTitle.value = "鏂板鏀舵";
- Object.assign(form, {
- receiptCode: "SK" + Date.now().toString().slice(-8),
+ const filters = reactive({
+ collectionNumber: "",
customerId: "",
- receiptDate: new Date().toISOString().split('T')[0],
+ collectionMethod: "",
+ dateRange: [],
+ });
+
+ const pagination = reactive({
+ currentPage: 1,
+ pageSize: 10,
+ total: 0,
+ });
+
+ const columns = [
+ { label: "鏀舵鍗曞彿", prop: "receiptCode", width: "150" },
+ { label: "瀹㈡埛鍚嶇О", prop: "customerName", width: "180" },
+ { label: "鏀舵鏃ユ湡", prop: "receiptDate", width: "120" },
+ { label: "鏀舵閲戦", prop: "amount", dataType: "slot", slot: "amount" },
+ {
+ label: "鏀舵鏂瑰紡",
+ prop: "receiptMethod",
+ dataType: "slot",
+ slot: "receiptMethod",
+ width: "120",
+ },
+ { label: "澶囨敞", prop: "remark", showOverflowTooltip: true },
+ {
+ label: "鎿嶄綔",
+ prop: "operation",
+ dataType: "slot",
+ slot: "operation",
+ width: "200",
+ fixed: "right",
+ },
+ ];
+
+ const dataList = 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 currentId = ref(null);
+ const submitLoading = ref(false);
+
+ const customerList = ref([]);
+ const outboundBatchList = ref([]);
+ const outboundBatchOptions = ref([]);
+ const outboundBatchLoading = ref(false);
+ const outboundSelectVisible = ref(false);
+ const outboundTableRef = ref(null);
+ const dialogOutboundSelection = ref([]);
+
+ const getReceiptMethodLabel = value => {
+ if (value === undefined || value === null || value === "") return "-";
+ const item = payment_methods.value?.find(
+ m => String(m.value) === String(value)
+ );
+ return item?.label ?? value;
+ };
+
+ const getDefaultReceiptMethod = () => payment_methods.value?.[0]?.value ?? "";
+
+ const form = reactive({
+ receiptCode: "",
+ customerId: "",
+ receiptDate: "",
amount: 0,
- receiptMethod: "bank_transfer",
- bankAccount: "",
- relatedDocs: [],
+ receiptMethod: "",
+ stockOutRecordIds: [],
+ outboundBatches: "",
remark: "",
});
- dialogVisible.value = true;
-};
-const edit = (row) => {
- isEdit.value = true;
- currentId.value = row.id;
- dialogTitle.value = "缂栬緫鏀舵";
- Object.assign(form, row);
- dialogVisible.value = true;
-};
+ const rules = {
+ customerId: [{ required: true, message: "璇烽�夋嫨瀹㈡埛", trigger: "change" }],
+ stockOutRecordIds: [
+ {
+ required: true,
+ type: "array",
+ min: 1,
+ message: "璇烽�夋嫨鍏宠仈鍗曟嵁",
+ trigger: "change",
+ },
+ ],
+ receiptDate: [
+ { required: true, message: "璇烽�夋嫨鏀舵鏃ユ湡", trigger: "change" },
+ ],
+ amount: [{ required: true, message: "璇疯緭鍏ユ敹娆鹃噾棰�", trigger: "blur" }],
+ receiptMethod: [
+ { required: true, message: "璇烽�夋嫨鏀舵鏂瑰紡", trigger: "change" },
+ ],
+ };
-const view = (row) => {
- ElMessage.info(`鏌ョ湅鏀舵鍗�: ${row.receiptCode}`);
-};
+ const totalReceiptAmount = computed(() =>
+ dataList.value.reduce((sum, item) => sum + Number(item.amount || 0), 0)
+ );
-const handleConfirm = (row) => {
- ElMessageBox.confirm("纭璇ユ敹娆惧崟鍚楋紵", "鎻愮ず", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "info",
- }).then(() => {
- const index = mockData.findIndex(item => item.id === row.id);
- if (index !== -1) {
- mockData[index].status = "confirmed";
- }
- ElMessage.success("纭鎴愬姛");
- getTableData();
+ const formatMoney = value => {
+ if (value === undefined || value === null) return "0.00";
+ return Number(value)
+ .toFixed(2)
+ .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+ };
+
+ const parseStockOutRecordIds = 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 formatOutboundBatches = 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 normalizeTableRow = row => ({
+ ...row,
+ receiptCode: row.collectionNumber ?? row.receiptCode,
+ receiptDate: row.collectionDate ?? row.receiptDate,
+ amount: row.collectionAmount ?? row.amount,
+ receiptMethod: row.collectionMethod ?? row.receiptMethod ?? "",
+ stockOutRecordIds: row.stockOutRecordIds ?? row.stockOutRecordId ?? "",
+ outboundBatches: formatOutboundBatches(row.outboundBatches),
});
-};
-const handleDelete = (row) => {
- ElMessageBox.confirm("纭鍒犻櫎璇ユ敹娆惧崟鍚楋紵", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- }).then(() => {
- const index = mockData.findIndex(item => item.id === row.id);
- if (index !== -1) {
- mockData.splice(index, 1);
- }
- ElMessage.success("鍒犻櫎鎴愬姛");
- getTableData();
- });
-};
-
-const handleOut = () => {
- ElMessage.success("瀵煎嚭鎴愬姛");
-};
-
-const submitForm = () => {
- formRef.value.validate((valid) => {
- if (valid) {
- const customer = customerList.find(item => item.id === form.customerId);
- if (isEdit.value) {
- const index = mockData.findIndex(item => item.id === currentId.value);
- if (index !== -1) {
- mockData[index] = { ...mockData[index], ...form, customerName: customer?.name };
- }
- ElMessage.success("缂栬緫鎴愬姛");
- } else {
- const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
- mockData.push({ id: newId, ...form, customerName: customer?.name, status: "pending" });
- ElMessage.success("鏂板鎴愬姛");
+ const getCustomerList = () => {
+ listCustomer({ current: -1, size: -1, type: 0 }).then(res => {
+ if (res.code === 200) {
+ customerList.value = res.data?.records || [];
}
- dialogVisible.value = false;
- getTableData();
- }
- });
-};
+ });
+ };
-onMounted(() => {
- getTableData();
-});
+ const normalizeOutboundBatchOptions = data => {
+ const list = Array.isArray(data) ? data : [];
+ return list.map((item, index) => {
+ if (typeof item === "string" || typeof item === "number") {
+ const text = String(item);
+ return { label: text, value: text, outboundAmount: 0 };
+ }
+ const label =
+ item.outboundBatches ??
+ item.batchNo ??
+ item.shippingNo ??
+ item.outboundNo ??
+ item.label ??
+ `鍑哄簱鍗�${index + 1}`;
+ const value = item.id ?? item.stockOutRecordId ?? label;
+ return {
+ label: String(label),
+ value,
+ outboundAmount: Number(item.outboundAmount) || 0,
+ };
+ });
+ };
+
+ const isSameOutboundId = (a, b) => String(a) === String(b);
+
+ const getOutboundRowId = row => row?.id ?? row?.stockOutRecordId;
+
+ const outboundBatchDisplayText = computed(() => {
+ if (isEdit.value || isView.value) {
+ return form.outboundBatches || "";
+ }
+ if (form.outboundBatches) return form.outboundBatches;
+ const ids = form.stockOutRecordIds || [];
+ if (!ids.length) return "";
+ const labels = outboundBatchOptions.value
+ .filter(opt => ids.some(id => isSameOutboundId(id, opt.value)))
+ .map(opt => opt.label);
+ if (labels.length) return labels.join("銆�");
+ return ids.join("銆�");
+ });
+
+ const handleOutboundInputClick = () => {
+ if (isEdit.value || isView.value) return;
+ openOutboundSelectDialog();
+ };
+
+ /** 涓哄凡閫� ID 琛ュ叏閫夐」锛堢紪杈�/鏌ョ湅鍥炴樉锛� */
+ const ensureOutboundOptionsForSelected = () => {
+ const ids = form.stockOutRecordIds || [];
+ ids.forEach(id => {
+ const exists = outboundBatchOptions.value.some(opt =>
+ isSameOutboundId(opt.value, id)
+ );
+ if (exists) return;
+ const fromList = outboundBatchList.value.find(row =>
+ isSameOutboundId(getOutboundRowId(row), id)
+ );
+ if (fromList) {
+ const [option] = normalizeOutboundBatchOptions([fromList]);
+ if (option) outboundBatchOptions.value.push(option);
+ return;
+ }
+ outboundBatchOptions.value.push({
+ label: String(id),
+ value: id,
+ outboundAmount: 0,
+ });
+ });
+ };
+
+ const syncCollectionAmount = () => {
+ const selected = form.stockOutRecordIds || [];
+ const sum = outboundBatchOptions.value
+ .filter(opt => selected.some(id => isSameOutboundId(id, opt.value)))
+ .reduce((acc, opt) => acc + (Number(opt.outboundAmount) || 0), 0);
+ form.amount = sum > 0 ? Number(sum.toFixed(2)) : 0;
+ };
+
+ const restoreOutboundTableSelection = () => {
+ nextTick(() => {
+ const table = outboundTableRef.value;
+ if (!table) return;
+ table.clearSelection();
+ const selectedIds = new Set(
+ (form.stockOutRecordIds || []).map(id => String(id))
+ );
+ outboundBatchList.value.forEach(row => {
+ const rowId = getOutboundRowId(row);
+ if (
+ rowId !== undefined &&
+ rowId !== null &&
+ selectedIds.has(String(rowId))
+ ) {
+ table.toggleRowSelection(row, true);
+ }
+ });
+ });
+ };
+
+ const loadOutboundBatches = (customerId, keepSelected = false) => {
+ if (!customerId) {
+ outboundBatchList.value = [];
+ outboundBatchOptions.value = [];
+ if (!keepSelected) {
+ form.stockOutRecordIds = [];
+ form.amount = 0;
+ }
+ return Promise.resolve();
+ }
+ outboundBatchLoading.value = true;
+ return getOutboundBatchesByCustomer({ customerId })
+ .then(res => {
+ if (res.code === 200) {
+ const list = res.data?.records ?? res.data ?? [];
+ outboundBatchList.value = Array.isArray(list) ? list : [];
+ outboundBatchOptions.value = normalizeOutboundBatchOptions(list);
+ } else {
+ outboundBatchList.value = [];
+ outboundBatchOptions.value = [];
+ }
+ })
+ .catch(() => {
+ outboundBatchList.value = [];
+ outboundBatchOptions.value = [];
+ })
+ .finally(() => {
+ outboundBatchLoading.value = false;
+ if (keepSelected) {
+ ensureOutboundOptionsForSelected();
+ restoreOutboundTableSelection();
+ }
+ });
+ };
+
+ const handleCustomerChange = customerId => {
+ form.stockOutRecordIds = [];
+ form.outboundBatches = "";
+ form.amount = 0;
+ loadOutboundBatches(customerId);
+ };
+
+ const openOutboundSelectDialog = () => {
+ if (!form.customerId || isEdit.value || isView.value) return;
+ outboundSelectVisible.value = true;
+ loadOutboundBatches(form.customerId, true).then(() => {
+ restoreOutboundTableSelection();
+ });
+ };
+
+ const handleOutboundDialogSelectionChange = selection => {
+ dialogOutboundSelection.value = selection;
+ };
+
+ const confirmOutboundSelection = () => {
+ if (dialogOutboundSelection.value.length === 0) {
+ ElMessage.warning("璇疯嚦灏戦�夋嫨涓�鏉″叧鑱斿崟鎹�");
+ return;
+ }
+ form.stockOutRecordIds = dialogOutboundSelection.value
+ .map(row => getOutboundRowId(row))
+ .filter(id => id !== undefined && id !== null);
+ form.outboundBatches = dialogOutboundSelection.value
+ .map(row => row.outboundBatches ?? row.batchNo ?? row.shippingNo ?? "")
+ .filter(Boolean)
+ .join("銆�");
+ outboundSelectVisible.value = false;
+ syncCollectionAmount();
+ formRef.value?.validateField("stockOutRecordIds");
+ };
+
+ const handleOutboundDialogClosed = () => {
+ dialogOutboundSelection.value = [];
+ };
+
+ const appendFilterParams = params => {
+ if (filters.collectionNumber) {
+ params.collectionNumber = filters.collectionNumber;
+ }
+ if (filters.customerId) {
+ params.customerId = filters.customerId;
+ }
+ if (filters.collectionMethod) {
+ params.collectionMethod = filters.collectionMethod;
+ }
+ 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 buildSubmitPayload = (forUpdate = false) => {
+ const payload = {
+ customerId: form.customerId,
+ collectionDate: form.receiptDate,
+ collectionAmount: form.amount,
+ collectionMethod: form.receiptMethod,
+ collectionNumber: form.receiptCode || "",
+ remark: form.remark || "",
+ stockOutRecordIds: (form.stockOutRecordIds || []).join(","),
+ };
+ if (forUpdate) {
+ payload.id = currentId.value;
+ }
+ return payload;
+ };
+
+ const fillFormFromRow = row => {
+ const stockOutRecordIds = parseStockOutRecordIds(
+ row.stockOutRecordIds ?? row.stockOutRecordId
+ );
+ Object.assign(form, {
+ receiptCode: row.receiptCode ?? row.collectionNumber ?? "",
+ customerId: row.customerId,
+ receiptDate: row.receiptDate ?? row.collectionDate ?? "",
+ amount: Number(row.amount ?? row.collectionAmount ?? 0),
+ receiptMethod: row.receiptMethod ?? row.collectionMethod ?? "",
+ stockOutRecordIds,
+ outboundBatches: formatOutboundBatches(row.outboundBatches),
+ remark: row.remark ?? "",
+ });
+ };
+
+ const closeDialog = () => {
+ dialogVisible.value = false;
+ outboundSelectVisible.value = false;
+ isView.value = false;
+ isEdit.value = false;
+ };
+
+ const handleExport = () => {
+ const params = buildExportParams();
+ proxy.download(
+ "/accountSalesCollection/exportAccountSalesCollection",
+ params,
+ `鏀舵鍗昣${Date.now()}.xlsx`
+ );
+ };
+
+ const getTableData = () => {
+ tableLoading.value = true;
+ listPageAccountSalesCollection(buildListParams())
+ .then(res => {
+ const ok = res.code === 200 || res.code === 0;
+ if (ok && res.data) {
+ pagination.total = res.data.total ?? 0;
+ dataList.value = (res.data.records ?? []).map(normalizeTableRow);
+ } else {
+ ElMessage.error(res.msg || "鏌ヨ澶辫触");
+ dataList.value = [];
+ pagination.total = 0;
+ }
+ })
+ .catch(() => {
+ dataList.value = [];
+ pagination.total = 0;
+ ElMessage.error("鏌ヨ澶辫触");
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ };
+
+ const onSearch = () => {
+ pagination.currentPage = 1;
+ getTableData();
+ };
+
+ const resetFilters = () => {
+ filters.collectionNumber = "";
+ filters.customerId = "";
+ filters.collectionMethod = "";
+ filters.dateRange = [];
+ pagination.currentPage = 1;
+ getTableData();
+ };
+
+ const changePage = ({ current, size }) => {
+ pagination.currentPage = current;
+ pagination.pageSize = size;
+ getTableData();
+ };
+
+ const add = () => {
+ isEdit.value = false;
+ isView.value = false;
+ dialogTitle.value = "鏂板鏀舵";
+ Object.assign(form, {
+ receiptCode: "SK" + Date.now().toString().slice(-8),
+ customerId: "",
+ receiptDate: new Date().toISOString().split("T")[0],
+ amount: 0,
+ receiptMethod: getDefaultReceiptMethod(),
+ stockOutRecordIds: [],
+ outboundBatches: "",
+ remark: "",
+ });
+ outboundBatchList.value = [];
+ outboundBatchOptions.value = [];
+ dialogVisible.value = true;
+ };
+
+ const edit = row => {
+ isEdit.value = true;
+ isView.value = false;
+ currentId.value = row.id;
+ dialogTitle.value = "缂栬緫鏀舵";
+ fillFormFromRow(row);
+ dialogVisible.value = true;
+ };
+
+ const view = row => {
+ isView.value = true;
+ isEdit.value = false;
+ dialogTitle.value = "鏌ョ湅鏀舵";
+ fillFormFromRow(row);
+ dialogVisible.value = true;
+ };
+
+ const handleDelete = row => {
+ ElMessageBox.confirm(
+ `纭鍒犻櫎鏀舵鍗曘��${row.receiptCode ?? row.collectionNumber}銆嶅悧锛焋,
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ ).then(() => {
+ deleteAccountSalesCollection([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) return;
+ submitLoading.value = true;
+ const request = isEdit.value
+ ? updateAccountSalesCollection(buildSubmitPayload(true))
+ : addAccountSalesCollection(buildSubmitPayload());
+ request
+ .then(res => {
+ if (res.code === 200) {
+ ElMessage.success(isEdit.value ? "淇敼鎴愬姛" : "鏂板鎴愬姛");
+ closeDialog();
+ getTableData();
+ } else {
+ ElMessage.error(res.msg || (isEdit.value ? "淇敼澶辫触" : "鏂板澶辫触"));
+ }
+ })
+ .catch(() => {
+ ElMessage.error(isEdit.value ? "淇敼澶辫触" : "鏂板澶辫触");
+ })
+ .finally(() => {
+ submitLoading.value = false;
+ });
+ });
+ };
+
+ onMounted(() => {
+ getCustomerList();
+ getTableData();
+ });
</script>
<style lang="scss" scoped>
-.actions {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 15px;
-}
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ }
-.text-success {
- color: #67c23a;
- font-weight: bold;
-}
+ .text-success {
+ color: #67c23a;
+ font-weight: bold;
+ }
+
+ .outbound-batch-input:not(.is-disabled) {
+ :deep(.el-input__wrapper) {
+ cursor: pointer;
+ }
+ }
</style>
--
Gitblit v1.9.3