From 7518c68068720e3d4eac37baefc61b6675d5b270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 13 Aug 2025 18:01:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/views/finance/jounery/index.vue | 133 ++++++---------------
 klp-ui/src/views/finance/order/index.vue   |  12 +-
 klp-ui/src/views/finance/pay/index.vue     |   2 +
 klp-ui/src/views/finance/receive/index.vue |   2 +
 4 files changed, 49 insertions(+), 100 deletions(-)

diff --git a/klp-ui/src/views/finance/jounery/index.vue b/klp-ui/src/views/finance/jounery/index.vue
index 7234f6e0..ec9e6520 100644
--- a/klp-ui/src/views/finance/jounery/index.vue
+++ b/klp-ui/src/views/finance/jounery/index.vue
@@ -2,60 +2,29 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="日期" prop="journalDate">
-        <el-date-picker clearable
-          v-model="queryParams.journalDate"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.journalDate" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="摘要" prop="summary">
-        <el-input
-          v-model="queryParams.summary"
-          placeholder="请输入摘要"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.summary" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="收支类型" prop="transType">
-        <el-input
-          v-model="queryParams.transType"
-          placeholder="请输入收支类型"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.transType" placeholder="请输入收支类型" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="对方户名" prop="counterpart">
-        <el-input
-          v-model="queryParams.counterpart"
-          placeholder="请输入对方户名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.counterpart" placeholder="请输入对方户名" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="收入金额" prop="incomeAmount">
-        <el-input
-          v-model="queryParams.incomeAmount"
-          placeholder="请输入收入金额"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.incomeAmount" placeholder="请输入收入金额" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="支出金额" prop="expenseAmount">
-        <el-input
-          v-model="queryParams.expenseAmount"
-          placeholder="请输入支出金额"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.expenseAmount" placeholder="请输入支出金额" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="余额" prop="balanceAmount">
-        <el-input
-          v-model="queryParams.balanceAmount"
-          placeholder="请输入余额"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.balanceAmount" placeholder="请输入余额" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -65,42 +34,18 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
+          @click="handleUpdate">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -116,44 +61,40 @@
       <el-table-column label="摘要" align="center" prop="summary" />
       <el-table-column label="收支类型" align="center" prop="transType" />
       <el-table-column label="对方户名" align="center" prop="counterpart" />
-      <el-table-column label="收入金额" align="center" prop="incomeAmount" />
-      <el-table-column label="支出金额" align="center" prop="expenseAmount" />
+      <el-table-column label="收入金额" align="center" prop="incomeAmount">
+        <!-- 如果不是0用绿字展示，否则用正常颜色 -->
+        <template slot-scope="scope">
+          <span :style="Number(scope.row.incomeAmount) !== 0 ? { color: '#28a745' } : {}">
+            {{ scope.row.incomeAmount }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="支出金额" align="center" prop="expenseAmount">
+        <!-- 如果不是0用红字展示，否则用正常颜色 -->
+        <template slot-scope="scope">
+          <span :style="Number(scope.row.expenseAmount) !== 0 ? { color: '#dc3545' } : {}">
+            {{ scope.row.expenseAmount }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column label="余额" align="center" prop="balanceAmount" />
       <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>
+          <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>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改资金日记账对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="日期" prop="journalDate">
-          <el-date-picker clearable
-            v-model="form.journalDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
+          <el-date-picker clearable v-model="form.journalDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择日期">
           </el-date-picker>
         </el-form-item>
@@ -281,7 +222,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.journalId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
diff --git a/klp-ui/src/views/finance/order/index.vue b/klp-ui/src/views/finance/order/index.vue
index 6b0044e8..50ff073b 100644
--- a/klp-ui/src/views/finance/order/index.vue
+++ b/klp-ui/src/views/finance/order/index.vue
@@ -53,6 +53,8 @@
               <el-table-column label="到期日" align="center" prop="dueDate" width="180">
                 <template slot-scope="scope">
                   <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+                  <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
                 </template>
               </el-table-column>
               <el-table-column label="应收金额" align="center" prop="amount" />
@@ -70,6 +72,8 @@
               <el-table-column label="到期日" align="center" prop="dueDate" width="180">
                 <template slot-scope="scope">
                   <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
                 </template>
               </el-table-column>
               <el-table-column label="应付金额" align="center" prop="amount" />
@@ -81,10 +85,10 @@
           </el-tab-pane>
           <el-tab-pane label="凭证管理" name="document">
             <el-table :data="currentOrder.documents" style="width: 100%" empty-text="暂无数据">
-              <el-table-column prop="documentCode" label="凭证编号" />
-              <el-table-column prop="documentDate" label="凭证日期" />
-              <el-table-column prop="documentAmount" label="凭证金额" />
-              <el-table-column prop="documentStatus" label="凭证状态" />
+              <el-table-column prop="docNo" label="凭证编号" />
+              <el-table-column prop="docDate" label="凭证日期" />
+              <el-table-column prop="amount" label="凭证金额" />
+              <el-table-column prop="status" label="凭证状态" />
             </el-table>
           </el-tab-pane>
         </el-tabs>
diff --git a/klp-ui/src/views/finance/pay/index.vue b/klp-ui/src/views/finance/pay/index.vue
index ea3da267..6aea7a8e 100644
--- a/klp-ui/src/views/finance/pay/index.vue
+++ b/klp-ui/src/views/finance/pay/index.vue
@@ -76,6 +76,8 @@
       <el-table-column label="到期日" align="center" prop="dueDate" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="应付金额" align="center" prop="amount" />
diff --git a/klp-ui/src/views/finance/receive/index.vue b/klp-ui/src/views/finance/receive/index.vue
index 65c03d75..0ea3fc4e 100644
--- a/klp-ui/src/views/finance/receive/index.vue
+++ b/klp-ui/src/views/finance/receive/index.vue
@@ -76,6 +76,8 @@
       <el-table-column label="到期日" align="center" prop="dueDate" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="应收金额" align="center" prop="amount" />