From e5137b4c0fd40d6e0ce8e9d0186efba74f626c65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Sat, 16 Aug 2025 14:14:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E8=B4=A2=E5=8A=A1=E5=8D=95?=
 =?UTF-8?q?=E6=8D=AE=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../KLPService/AmountSelect/index.vue         |   1 +
 klp-ui/src/store/modules/finance.js           |   3 +-
 .../components/FinanceVoucherTable.vue        | 124 +++++++++++++++++
 .../finance/document/components/Voucher.vue   | 126 +++++++++++-------
 klp-ui/src/views/finance/document/index.vue   |  42 ++----
 klp-ui/src/views/wms/print/index.vue          |   6 +-
 6 files changed, 219 insertions(+), 83 deletions(-)
 create mode 100644 klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue

diff --git a/klp-ui/src/components/KLPService/AmountSelect/index.vue b/klp-ui/src/components/KLPService/AmountSelect/index.vue
index 928522bf..0ae0c13f 100644
--- a/klp-ui/src/components/KLPService/AmountSelect/index.vue
+++ b/klp-ui/src/components/KLPService/AmountSelect/index.vue
@@ -38,6 +38,7 @@
     },
     methods: {
       getFinancialAccounts() {
+        console.log(this.financialAccounts, 'financialAccounts');
         this.options = this.financialAccounts.map(item => ({
           label: item.accountName,
           value: item.accountId
diff --git a/klp-ui/src/store/modules/finance.js b/klp-ui/src/store/modules/finance.js
index 2129f5dc..17431b4d 100644
--- a/klp-ui/src/store/modules/finance.js
+++ b/klp-ui/src/store/modules/finance.js
@@ -13,7 +13,8 @@ const mutations = {
 const actions = {
   getFinancialAccounts({ commit }) {
     listAccount({ pageSize: 1000 }).then(response => {
-      commit('SET_FINANCIAL_ACCOUNTS', response.rows);
+      console.log(response.data, 'finance.response.rows');
+      commit('SET_FINANCIAL_ACCOUNTS', response.data);
     });
   }
 }
diff --git a/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue b/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
new file mode 100644
index 00000000..2dd803ed
--- /dev/null
+++ b/klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="finance-voucher-component">
+    <div
+      v-for="(voucher, index) in voucherData"
+      :key="index"
+      class="voucher-item"
+    >
+      <!-- 主单据信息行 -->
+      <div class="voucher-header">
+        <div class="header-cell">
+          <el-checkbox v-model="voucher.checked"></el-checkbox>
+        </div>
+        <div class="header-cell">日期: {{ formatDate(voucher.docDate) }}</div>
+        <div class="header-cell">单据编号: {{ voucher.docNo }}</div>
+        <div class="header-cell">单据类型: {{ voucher.docType }}</div>
+        <div class="header-cell operation-group">
+          <el-button type="text" size="mini" @click.stop="handleView(voucher)">查看</el-button>
+          <el-button type="text" size="mini" @click.stop="handleDelete(voucher)">删除</el-button>
+        </div>
+      </div>
+
+      <!-- 凭证明细表格 -->
+      <el-table :data="voucher.detailList || []" border style="width: 100%;">
+        <el-table-column label="摘要" prop="voucherNo" />
+        <el-table-column label="科目" prop="accountId" />
+        <el-table-column label="借方金额" prop="debitAmount" align="right" />
+        <el-table-column label="贷方金额" prop="creditAmount" align="right" />
+      </el-table>
+
+      <!-- 总计行 -->
+      <div class="total-row">
+        <div class="total-cell" :colspan="3">总计</div>
+        <div class="total-cell" align="right">{{ calculateTotal(voucher.detailList, 'debitAmount') }}</div>
+        <div class="total-cell" align="right">{{ calculateTotal(voucher.detailList, 'creditAmount') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FinanceVoucherComponent",
+  props: {
+    voucherData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // 用于存储选中状态，若父组件需控制，可改为 prop 或 sync 修饰符
+      internalVoucherData: [],
+    };
+  },
+  watch: {
+    voucherData: {
+      handler(val) {
+        this.internalVoucherData = val.map((v) => ({
+          ...v,
+          checked: false,
+        }));
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleView(voucher) {
+      this.$emit("view-voucher", voucher);
+    },
+    handleDelete(voucher) {
+      this.$emit("delete-voucher", voucher);
+    },
+    formatDate(dateStr) {
+      if (!dateStr) return "";
+      return new Date(dateStr).toLocaleDateString();
+    },
+    calculateTotal(detailList, field) {
+      if (!detailList || detailList.length === 0) return "0.00";
+      return detailList.reduce(
+        (sum, item) => sum + parseFloat(item[field] || 0),
+        0
+      ).toFixed(2);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.finance-voucher-component {
+  padding: 16px;
+}
+.voucher-item {
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+.voucher-header {
+  display: flex;
+  align-items: center;
+  background-color: #f5f5f5;
+  padding: 8px 16px;
+}
+.header-cell {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.operation-group {
+  display: flex;
+  gap: 8px;
+}
+.total-row {
+  display: flex;
+  align-items: center;
+  background-color: #f0f9ff;
+  padding: 8px 16px;
+  font-weight: bold;
+}
+.total-cell {
+  flex: 1;
+  text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/finance/document/components/Voucher.vue b/klp-ui/src/views/finance/document/components/Voucher.vue
index 1e158b39..7bdb9fa8 100644
--- a/klp-ui/src/views/finance/document/components/Voucher.vue
+++ b/klp-ui/src/views/finance/document/components/Voucher.vue
@@ -13,6 +13,11 @@
         <el-form-item label="关联订单" prop="relatedOrderId">
           <el-input v-model="form.relatedOrderId" placeholder="请输入关联订单" />
         </el-form-item>
+        <el-form-item label="单据类型" prop="docType">
+          <el-select v-model="form.docType" placeholder="请选择单据类型">
+            <el-option v-for="item in dict.type.finance_voucher_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
       </el-form>
     </el-row>
 
@@ -94,18 +99,20 @@
 <script>
 import AmountSelect from '@/components/KLPService/AmountSelect/index.vue';
 import { addFinancialDocumentWithDetail, updateFinancialDocument } from "@/api/finance/financialDocument";
-import { updateJournalEntry } from "@/api/finance/jouneryEntry";
+import { updateJournalEntry, addJournalEntry } from "@/api/finance/jouneryEntry";
 
 export default {
   components: {
     AmountSelect
   },
+  dicts: ['finance_voucher_type'],
   data() {
     return {
       form: {
         docNo: undefined,
         docDate: undefined,
-        relatedOrderId: undefined
+        relatedOrderId: undefined,
+        docType: undefined
       },
       tableData: [{
         voucherNo: '',
@@ -167,24 +174,26 @@ export default {
     initData: {
       handler(newVal) {
         console.log(newVal, 'watchData');
-        if (newVal) {
-          if (newVal.detailList) {
-            this.tableData = newVal.detailList;
-          } else {
-            this.tableData = [{
-              voucherNo: '',
-              accountId: undefined,
-              debitAmount: 0,
-              creditAmount: 0,
-              remark: '',
-              voucherNo: ''
-            }]
-          }
+        if (newVal && newVal.detailList) {
+          this.tableData = newVal.detailList;
           this.form.docNo = newVal.docNo;
           this.form.docDate = newVal.docDate;
           this.form.relatedOrderId = newVal.relatedOrderId;
+          this.form.docType = newVal.docType;
           this.isCreate = false;
         } else {
+          this.form.docNo = undefined;
+          this.form.docDate = undefined;
+          this.form.relatedOrderId = undefined;
+          this.form.docType = undefined;
+          this.tableData = [{
+            voucherNo: '',
+            accountId: undefined,
+            debitAmount: 0,
+            creditAmount: 0,
+            remark: '',
+            voucherNo: ''
+          }]
           this.isCreate = true;
         }
       },
@@ -312,6 +321,38 @@ export default {
     },
 
     handleCreate() {
+      if (!this.validateTableData()) {
+        return;
+      }
+
+      // 6. 提交数据
+      addFinancialDocumentWithDetail({
+        docNo: form.docNo,
+        docDate: form.docDate,
+        // 保持变量名一致
+        relatedOrderId: form.relatedOrderId,
+        amount: this.debitAmount,
+        details: validData.map((row, idx) => ({
+          // voucherNo: row.voucherNo,
+          voucherNo: row.voucherNo,
+          // 保持变量名一致
+          accountId: row.accountId,
+          debitAmount: row.debitAmount,
+          creditAmount: row.creditAmount,
+          remark: row.remark,
+          lineNo: idx + 1,
+          entryDate: form.docDate
+        }))
+      }).then(response => {
+        this.$message.success('凭证创建成功');
+        this.$emit('success');
+      }).catch(error => {
+        this.$message.error('凭证创建失败：' + (error.message || '未知错误'));
+        this.$emit('error', error);
+      });
+    },
+
+    validateTableData() {
       // 收集所有错误信息
       const errors = [];
       const { form, tableData } = this;
@@ -321,6 +362,7 @@ export default {
       if (!form.docDate) errors.push('单据日期必填');
       // 注意：原模板中是relatedOrderId，保持变量名一致
       if (!form.relatedOrderId) errors.push('关联订单必填');
+      if (!form.docType) errors.push('单据类型必填');
 
       // 2. 过滤有效行并检查基本存在性
       const validData = tableData.filter(row => this.isRowNotEmpty(row));
@@ -365,47 +407,37 @@ export default {
           message: errors.map(error => `<p>${error}</p>`).join(''),
           type: 'error'
         })
-        return;
+        return false;
       }
-
-      // 6. 提交数据
-      addFinancialDocumentWithDetail({
-        docNo: form.docNo,
-        docDate: form.docDate,
-        // 保持变量名一致
-        relatedOrderId: form.relatedOrderId,
-        amount: this.debitAmount,
-        details: validData.map((row, idx) => ({
-          // voucherNo: row.voucherNo,
-          voucherNo: row.voucherNo,
-          // 保持变量名一致
-          accountId: row.accountId,
-          debitAmount: row.debitAmount,
-          creditAmount: row.creditAmount,
-          remark: row.remark,
-          lineNo: idx + 1,
-          entryDate: form.docDate
-        }))
-      }).then(response => {
-        this.$message.success('凭证创建成功');
-        this.$emit('success');
-      }).catch(error => {
-        this.$message.error('凭证创建失败：' + (error.message || '未知错误'));
-        this.$emit('error', error);
-      });
+      return true;
     },
 
     handleEdit(index) {
       // 找到对应的列变更
       const row = this.tableData[index];
-      updateJournalEntry(row).then(response => {
-        this.$message.success('明细变更成功');
-      }).catch(error => {
-        this.$message.error('明细变更失败：' + (error.message || '未知错误'));
-      });
+      if (row.entryId) {
+        updateJournalEntry(row).then(response => {
+          this.$message.success('明细变更成功');
+        }).catch(error => {
+          this.$message.error('明细变更失败：' + (error.message || '未知错误'));
+        });
+      } else {
+        addJournalEntry({
+          ...row,
+          documentId: this.initData.documentId,
+        }).then(response => {
+          this.$message.success('明细变更成功');
+        }).catch(error => {
+          this.$message.error('明细变更失败：' + (error.message || '未知错误'));
+        })
+      }
+      
     },
 
     handleChange() {
+      if (!this.validateTableData()) {
+        return;
+      }
       updateFinancialDocument({
         documentId: this.initData.documentId,
         docNo: this.form.docNo,
diff --git a/klp-ui/src/views/finance/document/index.vue b/klp-ui/src/views/finance/document/index.vue
index 973c5758..b8b12ecc 100644
--- a/klp-ui/src/views/finance/document/index.vue
+++ b/klp-ui/src/views/finance/document/index.vue
@@ -73,37 +73,11 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="financialDocumentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="单据ID" align="center" prop="documentId" v-if="true"/>
-      <el-table-column label="单据编号" align="center" prop="docNo" />
-      <el-table-column label="单据类型" align="center" prop="docType" />
-      <el-table-column label="单据日期" align="center" prop="docDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.docDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="单据金额" align="center" prop="amount" />
-      <el-table-column label="关联订单ID" align="center" prop="relatedOrderId" />
-      <el-table-column label="单据状态" align="center" prop="status" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <FinanceVoucherTable
+      :voucher-data="financialDocumentList"
+      @view-voucher="handleUpdate"
+      @delete-voucher="handleDelete"
+    />
 
     <pagination
       v-show="total > 0"
@@ -123,11 +97,13 @@
 <script>
 import { listFinancialDocumentWithDetail, getFinancialDocument, delFinancialDocument, addFinancialDocument, updateFinancialDocument } from "@/api/finance/financialDocument";
 import CreateDocument from "./components/Voucher.vue";
+import FinanceVoucherTable from "./components/FinanceVoucherTable.vue"; // 引入定制表格
 
 export default {
   name: "FinancialDocument",
   components: {
-    CreateDocument
+    CreateDocument,
+    FinanceVoucherTable
   },
   data() {
     return {
@@ -227,6 +203,8 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
+      this.currentRow = {}
+      // this.isCreate = true;
       this.title = "添加财务单据";
     },
     /** 修改按钮操作 */
diff --git a/klp-ui/src/views/wms/print/index.vue b/klp-ui/src/views/wms/print/index.vue
index bfe8bff6..515cbd4a 100644
--- a/klp-ui/src/views/wms/print/index.vue
+++ b/klp-ui/src/views/wms/print/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="position: relative; padding-top: 60px;">
+  <div style="position: relative;">
     <div style="position: absolute; top: 10px; left: 10px;">
       <!-- 策略切换单选框 -->
       <el-radio-group 
         v-model="currentStrategy" 
-        size="small"
+        size="mini"
       >
         <el-radio label="stockIo">盘点单</el-radio>
         <el-radio label="order">订单</el-radio>
@@ -16,6 +16,7 @@
         v-model="currentId" 
         :placeholder="`请选择${strategyLabels[currentStrategy]}`" 
         style="width: 200px;"
+        size="mini"
       >
         <el-option 
           v-for="item in currentList" 
@@ -26,7 +27,6 @@
       </el-select>
     </div>
     
-
     <div class="print-container" v-loading="loading">
       <BarCode :barcodes="drawerBarcodeData" />
     </div>