From 93b8ceac34e2fbd5c57fe5ab4f5bac32c85408aa Mon Sep 17 00:00:00 2001
From: liyong <18434998025@163.com>
Date: 星期五, 22 五月 2026 15:37:09 +0800
Subject: [PATCH] fix(hr): 修正岗位字段映射

---
 src/views/financialManagement/receivable/reconciliation.vue |  620 ++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 550 insertions(+), 70 deletions(-)

diff --git a/src/views/financialManagement/receivable/reconciliation.vue b/src/views/financialManagement/receivable/reconciliation.vue
index fc6d7c1..b1bff0e 100644
--- a/src/views/financialManagement/receivable/reconciliation.vue
+++ b/src/views/financialManagement/receivable/reconciliation.vue
@@ -2,8 +2,8 @@
   <div class="app-container">
     <el-form :model="filters" :inline="true">
       <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="瀵硅处鏈熼棿:">
@@ -29,6 +29,7 @@
         rowKey="id"
         :column="columns"
         :tableData="dataList"
+        :tableLoading="tableLoading"
         :page="{
           current: pagination.currentPage,
           size: pagination.pageSize,
@@ -36,31 +37,32 @@
         }"
         @pagination="changePage"
       >
-        <template #beginBalance="{ row }">
-          <span :class="row.beginBalance >= 0 ? 'text-success' : 'text-danger'">楼{{ formatMoney(row.beginBalance) }}</span>
+        <template #openingBalance="{ row }">
+          <span :class="row.openingBalance >= 0 ? 'text-success' : 'text-danger'">楼{{ formatMoney(row.openingBalance) }}</span>
         </template>
-        <template #currentReceivable="{ row }">
-          <span class="text-primary">楼{{ formatMoney(row.currentReceivable) }}</span>
+        <template #currentPlan="{ row }">
+          <span class="text-primary">楼{{ formatMoney(row.currentPlan) }}</span>
         </template>
-        <template #currentReceipt="{ row }">
-          <span class="text-success">楼{{ formatMoney(row.currentReceipt) }}</span>
+        <template #currentActually="{ row }">
+          <span class="text-success">楼{{ formatMoney(row.currentActually) }}</span>
         </template>
-        <template #endBalance="{ row }">
-          <span :class="row.endBalance >= 0 ? 'text-success' : 'text-danger'">楼{{ formatMoney(row.endBalance) }}</span>
+        <template #closingBalance="{ row }">
+          <span :class="row.closingBalance >= 0 ? 'text-success' : 'text-danger'">楼{{ formatMoney(row.closingBalance) }}</span>
         </template>
         <template #operation="{ row }">
           <el-button type="primary" link @click="viewDetail(row)">鏌ョ湅鏄庣粏</el-button>
-          <el-button type="primary" link @click="printStatement(row)">鎵撳嵃</el-button>
+          <!-- <el-button type="primary" link @click="printStatement(row)">鎵撳嵃</el-button> -->
+          <el-button type="danger" link @click="handleDelete(row)">鍒犻櫎</el-button>
         </template>
       </PIMTable>
     </div>
 
-    <el-dialog title="瀵硅处鏄庣粏" v-model="detailDialogVisible" width="900px" append-to-body>
+    <FormDialog title="瀵硅处鏄庣粏" v-model="detailDialogVisible" width="900px" @confirm="printDetail" @cancel="detailDialogVisible = false" operationType="detail">
       <div class="statement-header">
         <h3>{{ currentCustomer }} 搴旀敹瀵硅处鍗�</h3>
         <p>瀵硅处鏈熼棿: {{ currentPeriod }}</p>
       </div>
-      <el-table :data="detailData" border style="width: 100%">
+      <el-table :data="detailData" border style="width: 100%" v-loading="detailLoading">
         <el-table-column prop="date" label="鏃ユ湡" width="120" />
         <el-table-column prop="type" label="绫诲瀷" width="100">
           <template #default="{ row }">
@@ -88,16 +90,99 @@
         <el-table-column prop="remark" label="澶囨敞" show-overflow-tooltip />
       </el-table>
       <template #footer>
-        <el-button @click="detailDialogVisible = false">鍏抽棴</el-button>
         <el-button type="primary" @click="printDetail">鎵撳嵃</el-button>
+        <el-button @click="detailDialogVisible = false">鍏抽棴</el-button>
       </template>
-    </el-dialog>
+    </FormDialog>
+
+    <FormDialog title="鐢熸垚瀵硅处鍗�" v-model="generateDialogVisible" width="1000px" @confirm="confirmGenerate" @cancel="generateDialogVisible = false">
+      <el-form :model="generateForm" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="閫夋嫨瀹㈡埛" prop="customerId">
+              <el-select
+                v-model="generateForm.customerId"
+                placeholder="璇烽�夋嫨瀹㈡埛"
+                style="width: 100%;"
+                filterable
+                @change="onCustomerChange"
+              >
+                <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="statementMonth">
+              <el-date-picker v-model="generateForm.statementMonth" type="month" placeholder="閫夋嫨鏈堜唤" value-format="YYYY-MM" style="width: 100%;" @change="onStatementMonthChange" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div v-if="statementDetailLoaded" class="sales-section">
+        <div v-if="salesData.length > 0" class="section-title">鏈湀閿�鍞暟鎹�</div>
+        <el-table
+          v-if="salesData.length > 0"
+          ref="salesTableRef"
+          :data="salesData"
+          border
+          row-key="id"
+          style="width: 100%; margin-bottom: 15px;"
+          v-loading="salesLoading"
+          @selection-change="handleSalesSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column prop="occurrenceDate" label="鏃ユ湡" width="120" />
+          <el-table-column prop="receiptNumber" label="鍗曟嵁缂栧彿" width="150" />
+          <el-table-column prop="type" label="绫诲瀷" width="100">
+            <template #default="{ row }">
+              <el-tag :type="getDetailTypeTagType(row.type)">{{ row.typeLabel }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="amount" label="閲戦" width="120">
+            <template #default="{ row }">
+              <span :class="getDetailAmountClass(row.type)">楼{{ formatMoney(row.amount) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="澶囨敞" />
+        </el-table>
+        <el-empty v-else description="璇ュ鎴锋湰鏈堟殏鏃犳槑缁嗘暟鎹�" :image-size="80" />
+
+        <div class="summary-row">
+          <span>鏈熷垵浣欓: <strong class="text-primary">楼{{ formatMoney(generateForm.openingBalance) }}</strong></span>
+          <span>鏈湡搴旀敹: <strong class="text-primary">楼{{ formatMoney(generateForm.currentPlan) }}</strong></span>
+          <span>鏈湡鏀舵: <strong class="text-success">楼{{ formatMoney(generateForm.currentActually) }}</strong></span>
+          <span>鏈熸湯浣欓: <strong :class="displayClosingBalance >= 0 ? 'text-success' : 'text-danger'">楼{{ formatMoney(displayClosingBalance) }}</strong></span>
+        </div>
+      </div>
+
+      <div v-else-if="generateForm.customerId && generateForm.statementMonth && !salesLoading" class="empty-tip">
+        <el-empty description="璇ュ鎴锋湰鏈堟殏鏃犻攢鍞暟鎹�" />
+      </div>
+
+      <template #footer>
+        <el-button type="primary" @click="confirmGenerate" :disabled="!canGenerate" :loading="submitLoading">纭鐢熸垚</el-button>
+        <el-button @click="generateDialogVisible = false">鍙栨秷</el-button>
+      </template>
+    </FormDialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
-import { ElMessage } from "element-plus";
+import { ref, reactive, onMounted, computed, 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 {
+  getAccountStatementDetailsByMonth,
+  addAccountStatement,
+  listPageAccountStatement,
+  deleteAccountStatement,
+} from "@/api/financialManagement/accountStatement.js";
+
+const ACCOUNT_TYPE_RECEIVABLE = 1;
+
+const { proxy } = getCurrentInstance();
 
 defineOptions({
   name: "搴旀敹瀵硅处",
@@ -116,34 +201,192 @@
 });
 
 const columns = [
-  { label: "瀵硅处鍗曞彿", prop: "statementCode", width: "150" },
+  { label: "瀵硅处鍗曞彿", prop: "statementNumber", width: "150" },
   { label: "瀹㈡埛鍚嶇О", prop: "customerName", width: "180" },
-  { label: "瀵硅处鏈熼棿", prop: "period", width: "150" },
-  { label: "鏈熷垵浣欓", prop: "beginBalance", slot: "beginBalance" },
-  { label: "鏈湡搴旀敹", prop: "currentReceivable", slot: "currentReceivable" },
-  { label: "鏈湡鏀舵", prop: "currentReceipt", slot: "currentReceipt" },
-  { label: "鏈熸湯浣欓", prop: "endBalance", slot: "endBalance" },
-  { label: "鎿嶄綔", prop: "operation", slot: "operation", width: "150", fixed: "right" },
+  { label: "瀵硅处鏈熼棿", prop: "statementMonth", width: "150" },
+  { label: "鏈熷垵浣欓", prop: "openingBalance", dataType: "slot", slot: "openingBalance" },
+  { label: "鏈湡搴旀敹", prop: "currentPlan", dataType: "slot", slot: "currentPlan" },
+  { label: "鏈湡鏀舵", prop: "currentActually", dataType: "slot", slot: "currentActually" },
+  { label: "鏈熸湯浣欓", prop: "closingBalance", dataType: "slot", slot: "closingBalance" },
+  { label: "鎿嶄綔", prop: "operation", dataType: "slot", slot: "operation", width: "200", fixed: "right" },
 ];
 
 const dataList = ref([]);
+const tableLoading = ref(false);
+const submitLoading = ref(false);
 const detailDialogVisible = ref(false);
 const currentCustomer = ref("");
 const currentPeriod = ref("");
 const detailData = ref([]);
+const detailLoading = ref(false);
 
-const customerList = [
-  { id: 1, name: "鍖椾含绉戞妧鏈夐檺鍏徃" },
-  { id: 2, name: "涓婃捣璐告槗鍏徃" },
-  { id: 3, name: "骞垮窞瀹炰笟鏈夐檺鍏徃" },
-  { id: 4, name: "娣卞湷鐢靛瓙鍏徃" },
-];
+const generateDialogVisible = ref(false);
+const salesLoading = ref(false);
+const statementDetailLoaded = ref(false);
+const salesData = ref([]);
+const selectedSales = ref([]);
+const salesTableRef = ref(null);
+const customerList = ref([]);
 
-const mockData = [
-  { id: 1, statementCode: "DZ202401001", customerId: 1, customerName: "鍖椾含绉戞妧鏈夐檺鍏徃", period: "2024-01", beginBalance: 10000, currentReceivable: 15000, currentReceipt: 8000, endBalance: 17000 },
-  { id: 2, statementCode: "DZ202401002", customerId: 2, customerName: "涓婃捣璐告槗鍏徃", period: "2024-01", beginBalance: 5000, currentReceivable: 12000, currentReceipt: 10000, endBalance: 7000 },
-  { id: 3, statementCode: "DZ202402001", customerId: 1, customerName: "鍖椾含绉戞妧鏈夐檺鍏徃", period: "2024-02", beginBalance: 17000, currentReceivable: 20000, currentReceipt: 15000, endBalance: 22000 },
-];
+/** 鏄庣粏 type锛�1鍑哄簱 2鍏ュ簱 3鏀舵 4浠樻 5閫�璐� */
+const STATEMENT_DETAIL_TYPE_MAP = {
+  1: "鍑哄簱",
+  2: "鍏ュ簱",
+  3: "鏀舵",
+  4: "浠樻",
+  5: "閫�璐�",
+};
+
+const calculateEndBalance = (openingBalance, currentPlan, currentActually) => {
+  return openingBalance + currentPlan - currentActually;
+};
+
+const getDetailTypeLabel = (type) => STATEMENT_DETAIL_TYPE_MAP[Number(type)] ?? "";
+
+const getDetailTypeTagType = (type) => {
+  const t = Number(type);
+  if (t === 1) return "success";
+  if (t === 3) return "primary";
+  if (t === 5) return "danger";
+  return "info";
+};
+
+const getDetailAmountClass = (type) => {
+  const t = Number(type);
+  if (t === 1) return "text-primary";
+  if (t === 3) return "text-success";
+  return "text-danger";
+};
+
+const generateForm = reactive({
+  customerId: "",
+  customerName: "",
+  statementMonth: "",
+  openingBalance: 0,
+  currentPlan: 0,
+  currentActually: 0,
+  closingBalance: 0,
+});
+
+const displayClosingBalance = computed(() => {
+  return calculateEndBalance(
+    generateForm.openingBalance,
+    generateForm.currentPlan,
+    generateForm.currentActually
+  );
+});
+
+const canGenerate = computed(() => {
+  return generateForm.customerId && generateForm.statementMonth && selectedSales.value.length > 0;
+});
+
+const applyStatementSummary = (data) => {
+  generateForm.openingBalance = Number(data.openingBalance ?? 0);
+  generateForm.currentPlan = Number(data.currentPlan ?? 0);
+  generateForm.currentActually = Number(data.currentActually ?? 0);
+  generateForm.closingBalance = Number(
+    data.closingBalance ??
+      calculateEndBalance(
+        generateForm.openingBalance,
+        generateForm.currentPlan,
+        generateForm.currentActually
+      )
+  );
+};
+
+const getCustomerList = () => {
+  listCustomer({ current: -1, size: -1, type: 0 }).then((res) => {
+    if (res.code === 200) {
+      customerList.value = res.data?.records || [];
+    }
+  });
+};
+
+const normalizeSalesRows = (list) => {
+  const rows = Array.isArray(list) ? list : [];
+  return rows.map((item, index) => {
+    const type = Number(item.type);
+    return {
+      id: item.id ?? `detail-${index}`,
+      accountStatementId: item.accountStatementId,
+      occurrenceDate: item.occurrenceDate ?? "",
+      receiptNumber: item.receiptNumber ?? "",
+      type,
+      typeLabel: getDetailTypeLabel(type),
+      amount: Math.abs(Number(item.amount ?? 0)),
+      remark: item.remark ?? "",
+    };
+  });
+};
+
+const selectAllSalesRows = (keepApiSummary = false) => {
+  nextTick(() => {
+    const table = salesTableRef.value;
+    if (!table) return;
+    table.clearSelection();
+    salesData.value.forEach((row) => table.toggleRowSelection(row, true));
+    selectedSales.value = [...salesData.value];
+    if (!keepApiSummary) {
+      calculateSummary();
+    }
+  });
+};
+
+const isNumericId = (id) => id !== undefined && id !== null && id !== "" && /^\d+$/.test(String(id));
+
+const buildFilterParams = (params = {}) => {
+  const result = { ...params, accountType: ACCOUNT_TYPE_RECEIVABLE };
+  if (filters.customerId) {
+    result.customerId = filters.customerId;
+  }
+  if (filters.startMonth && filters.endMonth && filters.startMonth === filters.endMonth) {
+    result.statementMonth = filters.startMonth;
+  } else if (filters.startMonth) {
+    result.startMonth = filters.startMonth;
+  }
+  if (filters.endMonth && filters.startMonth !== filters.endMonth) {
+    result.endMonth = filters.endMonth;
+  }
+  return result;
+};
+
+const buildListParams = () =>
+  buildFilterParams({
+    current: pagination.currentPage,
+    size: pagination.pageSize,
+  });
+
+const buildExportParams = () => buildFilterParams({});
+
+const buildDetailSubmitItem = (row) => {
+  const item = {
+    occurrenceDate: row.occurrenceDate,
+    receiptNumber: row.receiptNumber,
+    type: row.type,
+    amount: row.amount,
+    remark: row.remark ?? "",
+  };
+  if (isNumericId(row.id)) {
+    item.id = Number(row.id);
+  }
+  if (row.accountStatementId) {
+    item.accountStatementId = row.accountStatementId;
+  }
+  return item;
+};
+
+const buildAddPayload = () => ({
+  customerId: generateForm.customerId,
+  customerName: generateForm.customerName,
+  statementMonth: generateForm.statementMonth,
+  accountType: ACCOUNT_TYPE_RECEIVABLE,
+  statementNumber: "",
+  openingBalance: generateForm.openingBalance,
+  currentPlan: generateForm.currentPlan,
+  currentActually: generateForm.currentActually,
+  closingBalance: generateForm.closingBalance,
+  accountStatementDetails: selectedSales.value.map(buildDetailSubmitItem),
+});
 
 const formatMoney = (value) => {
   if (value === undefined || value === null) return "0.00";
@@ -151,15 +394,27 @@
 };
 
 const getTableData = () => {
-  let result = [...mockData];
-  if (filters.customerId) {
-    result = result.filter(item => item.customerId === filters.customerId);
-  }
-  if (filters.startMonth && filters.endMonth) {
-    result = result.filter(item => item.period >= filters.startMonth && item.period <= filters.endMonth);
-  }
-  pagination.total = result.length;
-  dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
+  tableLoading.value = true;
+  listPageAccountStatement(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 ?? [];
+      } else {
+        ElMessage.error(res.msg || "鏌ヨ澶辫触");
+        dataList.value = [];
+        pagination.total = 0;
+      }
+    })
+    .catch(() => {
+      dataList.value = [];
+      pagination.total = 0;
+      ElMessage.error("鏌ヨ澶辫触");
+    })
+    .finally(() => {
+      tableLoading.value = false;
+    });
 };
 
 const resetFilters = () => {
@@ -177,39 +432,228 @@
 };
 
 const generateStatement = () => {
-  ElMessage.success("瀵硅处鍗曠敓鎴愭垚鍔�");
-  const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
-  const customer = customerList[Math.floor(Math.random() * customerList.length)];
-  mockData.unshift({
-    id: newId,
-    statementCode: "DZ" + Date.now(),
-    customerId: customer.id,
-    customerName: customer.name,
-    period: "2024-03",
-    beginBalance: Math.floor(Math.random() * 10000),
-    currentReceivable: Math.floor(Math.random() * 20000),
-    currentReceipt: Math.floor(Math.random() * 15000),
-    endBalance: Math.floor(Math.random() * 20000),
+  generateForm.customerId = "";
+  generateForm.customerName = "";
+  generateForm.statementMonth = "";
+  generateForm.openingBalance = 0;
+  generateForm.currentPlan = 0;
+  generateForm.currentActually = 0;
+  generateForm.closingBalance = 0;
+  statementDetailLoaded.value = false;
+  salesData.value = [];
+  selectedSales.value = [];
+  generateDialogVisible.value = true;
+};
+
+const onCustomerChange = (customerId) => {
+  const customer = customerList.value.find((item) => item.id === customerId);
+  generateForm.customerName = customer?.customerName ?? "";
+  loadSalesData();
+};
+
+const onStatementMonthChange = () => {
+  loadSalesData();
+};
+
+const loadSalesData = () => {
+  if (!generateForm.customerId || !generateForm.statementMonth) {
+    salesData.value = [];
+    selectedSales.value = [];
+    statementDetailLoaded.value = false;
+    generateForm.openingBalance = 0;
+    generateForm.currentPlan = 0;
+    generateForm.currentActually = 0;
+    generateForm.closingBalance = 0;
+    return;
+  }
+
+  salesLoading.value = true;
+  selectedSales.value = [];
+  statementDetailLoaded.value = false;
+
+  getAccountStatementDetailsByMonth({
+    accountType: ACCOUNT_TYPE_RECEIVABLE,
+    customerId: generateForm.customerId,
+    statementMonth: generateForm.statementMonth,
+  })
+    .then((res) => {
+      if (res.code === 200) {
+        const data = res.data ?? {};
+        const details = data.accountStatementDetails;
+        const list = Array.isArray(details) ? details : [];
+        salesData.value = normalizeSalesRows(list);
+        applyStatementSummary(data);
+        statementDetailLoaded.value = true;
+
+        if (salesData.value.length > 0) {
+          selectAllSalesRows(true);
+        }
+      } else {
+        salesData.value = [];
+        statementDetailLoaded.value = false;
+        ElMessage.error(res.msg || "鏌ヨ瀵硅处鏄庣粏澶辫触");
+      }
+    })
+    .catch(() => {
+      salesData.value = [];
+      statementDetailLoaded.value = false;
+      ElMessage.error("鏌ヨ瀵硅处鏄庣粏澶辫触");
+    })
+    .finally(() => {
+      salesLoading.value = false;
+    });
+};
+
+const calculateSummary = () => {
+  let receivable = 0;
+  let receipt = 0;
+
+  selectedSales.value.forEach((item) => {
+    if (item.type === 1) {
+      receivable += item.amount;
+    } else if (item.type === 5) {
+      receivable -= item.amount;
+    } else if (item.type === 3) {
+      receipt += item.amount;
+    }
   });
-  getTableData();
+
+  generateForm.currentPlan = receivable;
+  generateForm.currentActually = receipt;
+  generateForm.closingBalance = calculateEndBalance(
+    generateForm.openingBalance,
+    generateForm.currentPlan,
+    generateForm.currentActually
+  );
+};
+
+const handleSalesSelectionChange = (selection) => {
+  selectedSales.value = selection;
+  calculateSummary();
+};
+
+const confirmGenerate = () => {
+  if (!canGenerate.value) return;
+  submitLoading.value = true;
+  addAccountStatement(buildAddPayload())
+    .then((res) => {
+      if (res.code === 200) {
+        generateDialogVisible.value = false;
+        ElMessage.success("瀵硅处鍗曠敓鎴愭垚鍔�");
+        pagination.currentPage = 1;
+        getTableData();
+      } else {
+        ElMessage.error(res.msg || "鐢熸垚澶辫触");
+      }
+    })
+    .catch(() => {
+      ElMessage.error("鐢熸垚澶辫触");
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+};
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`纭鍒犻櫎瀵硅处鍗曘��${row.statementNumber || row.id}銆嶅悧锛焋, "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  }).then(() => {
+    deleteAccountStatement([row.id])
+      .then((res) => {
+        if (res.code === 200) {
+          ElMessage.success("鍒犻櫎鎴愬姛");
+          getTableData();
+        } else {
+          ElMessage.error(res.msg || "鍒犻櫎澶辫触");
+        }
+      })
+      .catch(() => {
+        ElMessage.error("鍒犻櫎澶辫触");
+      });
+  });
+};
+
+const buildDetailTableFromApi = (data, statementMonth) => {
+  const details = Array.isArray(data.accountStatementDetails) ? data.accountStatementDetails : [];
+  let runningBalance = Number(data.openingBalance ?? 0);
+  const rows = [
+    {
+      date: statementMonth ?? "",
+      type: "鏈熷垵",
+      code: "-",
+      debit: 0,
+      credit: 0,
+      balance: runningBalance,
+      remark: "鏈熷垵浣欓",
+    },
+  ];
+
+  details.forEach((item) => {
+    const amount = Math.abs(Number(item.amount ?? 0));
+    const type = Number(item.type);
+    let debit = 0;
+    let credit = 0;
+
+    if (type === 1) {
+      debit = amount;
+      runningBalance += amount;
+    } else if (type === 3 || type === 5) {
+      credit = amount;
+      runningBalance -= amount;
+    }
+
+    rows.push({
+      date: item.occurrenceDate ?? "",
+      type: getDetailTypeLabel(type),
+      code: item.receiptNumber ?? "",
+      debit,
+      credit,
+      balance: runningBalance,
+      remark: item.remark ?? "",
+    });
+  });
+
+  return rows;
 };
 
 const viewDetail = (row) => {
-  currentCustomer.value = row.customerName;
-  currentPeriod.value = row.period;
-  detailData.value = [
-    { date: row.period + "-01", type: "鏈熷垵", code: "-", debit: 0, credit: 0, balance: row.beginBalance, remark: "鏈熷垵浣欓" },
-    { date: row.period + "-05", type: "鍑哄簱", code: "CK2024001", debit: 5000, credit: 0, balance: row.beginBalance + 5000, remark: "" },
-    { date: row.period + "-10", type: "鏀舵", code: "SK2024001", debit: 0, credit: 3000, balance: row.beginBalance + 2000, remark: "" },
-    { date: row.period + "-15", type: "鍑哄簱", code: "CK2024002", debit: 8000, credit: 0, balance: row.beginBalance + 10000, remark: "" },
-    { date: row.period + "-20", type: "閫�璐�", code: "TH2024001", debit: 0, credit: 2000, balance: row.beginBalance + 8000, remark: "" },
-    { date: row.period + "-25", type: "鏀舵", code: "SK2024002", credit: row.currentReceipt - 3000, balance: row.endBalance, remark: "" },
-  ];
+  if (!row.customerId || !row.statementMonth) {
+    ElMessage.warning("缂哄皯瀹㈡埛鎴栧璐︽湀浠斤紝鏃犳硶鏌ヨ鏄庣粏");
+    return;
+  }
+
+  currentCustomer.value = row.customerName ?? "";
+  currentPeriod.value = row.statementMonth ?? "";
+  detailData.value = [];
   detailDialogVisible.value = true;
+  detailLoading.value = true;
+
+  getAccountStatementDetailsByMonth({
+    accountType: ACCOUNT_TYPE_RECEIVABLE,
+    customerId: row.customerId,
+    statementMonth: row.statementMonth,
+  })
+    .then((res) => {
+      if (res.code === 200) {
+        detailData.value = buildDetailTableFromApi(res.data ?? {}, row.statementMonth);
+      } else {
+        ElMessage.error(res.msg || "鏌ヨ鏄庣粏澶辫触");
+        detailDialogVisible.value = false;
+      }
+    })
+    .catch(() => {
+      ElMessage.error("鏌ヨ鏄庣粏澶辫触");
+      detailDialogVisible.value = false;
+    })
+    .finally(() => {
+      detailLoading.value = false;
+    });
 };
 
 const printStatement = (row) => {
-  ElMessage.info(`鎵撳嵃瀵硅处鍗�: ${row.statementCode}`);
+  ElMessage.info(`鎵撳嵃瀵硅处鍗�: ${row.statementNumber}`);
 };
 
 const printDetail = () => {
@@ -217,10 +661,12 @@
 };
 
 const handleOut = () => {
-  ElMessage.success("瀵煎嚭鎴愬姛");
+  const params = buildExportParams();
+  proxy.download("/accountStatement/exportAccountStatement", params, `搴旀敹瀵硅处鍗昣${Date.now()}.xlsx`);
 };
 
 onMounted(() => {
+  getCustomerList();
   getTableData();
 });
 </script>
@@ -255,4 +701,38 @@
     margin: 0;
   }
 }
+
+.sales-section {
+  margin-top: 20px;
+
+  .section-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    padding-left: 10px;
+    border-left: 4px solid #409eff;
+  }
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-around;
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-top: 15px;
+
+  span {
+    font-size: 14px;
+
+    strong {
+      font-size: 16px;
+      margin-left: 5px;
+    }
+  }
+}
+
+.empty-tip {
+  margin-top: 30px;
+}
 </style>

--
Gitblit v1.9.3