完成流水明细查询结果区与详情展示

ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue

@@ -23,7 +23,10 @@
               placeholder="请输入对方名称"
               clearable
             />
-            <el-checkbox v-model="queryParams.counterpartyNameEmpty" class="empty-checkbox">
+            <el-checkbox
+              v-model="queryParams.counterpartyNameEmpty"
+              class="empty-checkbox"
+            >
               匹配空值
             </el-checkbox>
           </el-form-item>
@@ -121,7 +124,10 @@
               placeholder="请输入对方账号"
               clearable
             />
-            <el-checkbox v-model="queryParams.counterpartyAccountEmpty" class="empty-checkbox">
+            <el-checkbox
+              v-model="queryParams.counterpartyAccountEmpty"
+              class="empty-checkbox"
+            >
               匹配空值
             </el-checkbox>
           </el-form-item>
@@ -132,7 +138,10 @@
               placeholder="请输入交易类型"
               clearable
             />
-            <el-checkbox v-model="queryParams.transactionTypeEmpty" class="empty-checkbox">
+            <el-checkbox
+              v-model="queryParams.transactionTypeEmpty"
+              class="empty-checkbox"
+            >
               匹配空值
             </el-checkbox>
           </el-form-item>
@@ -143,26 +152,222 @@
           </div>
         </el-form>
       </div>
+
       <div class="shell-main">
         <div class="shell-header">
-          <span class="shell-title">流水明细查询</span>
+          <div class="shell-title-group">
+            <span class="shell-title">流水明细查询</span>
+            <span class="shell-subtitle">按项目范围查询交易明细并查看详情</span>
+          </div>
           <el-button size="small" type="primary" plain @click="handleExport">
             导出流水
           </el-button>
         </div>
-        <div class="shell-panel-body">结果区域待接入</div>
+
+        <el-tabs v-model="activeTab" class="result-tabs" @tab-click="handleTabChange">
+          <el-tab-pane label="全部" name="all" />
+          <el-tab-pane label="流入" name="in" />
+          <el-tab-pane label="流出" name="out" />
+        </el-tabs>
+
+        <div class="result-card">
+          <el-table
+            v-loading="loading"
+            :data="list"
+            border
+            stripe
+            class="result-table"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              label="交易时间"
+              prop="trxDate"
+              min-width="180"
+              sortable="custom"
+            />
+            <el-table-column label="本方账户" min-width="220">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">{{ formatField(scope.row.leAccountNo) }}</div>
+                  <div class="secondary-text">{{ formatField(scope.row.leAccountName) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="对方账户" min-width="220">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">
+                    {{ formatField(scope.row.customerAccountName) }}
+                  </div>
+                  <div class="secondary-text">
+                    {{ formatField(scope.row.customerAccountNo) }}
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="摘要 / 交易类型" min-width="240">
+              <template slot-scope="scope">
+                <div class="multi-line-cell">
+                  <div class="primary-text">{{ formatField(scope.row.userMemo) }}</div>
+                  <div class="secondary-text">{{ formatField(scope.row.cashType) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="交易金额"
+              prop="displayAmount"
+              min-width="140"
+              align="right"
+              sortable="custom"
+            >
+              <template slot-scope="scope">
+                <span
+                  class="amount-text"
+                  :class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
+                >
+                  {{ formatAmount(scope.row.displayAmount) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="详情" width="100" fixed="right" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleViewDetail(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="handlePageChange"
+          />
+        </div>
       </div>
     </div>
+
+    <el-drawer
+      :visible.sync="detailVisible"
+      append-to-body
+      custom-class="detail-drawer"
+      size="520px"
+      title="流水详情"
+      @close="closeDetailDialog"
+    >
+      <div v-loading="detailLoading" class="detail-drawer-body">
+        <div class="detail-section">
+          <div class="detail-section-title">基础信息</div>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <span class="detail-label">流水ID</span>
+              <span class="detail-value">{{ formatField(detailData.bankStatementId) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">交易时间</span>
+              <span class="detail-value">{{ formatField(detailData.trxDate) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">币种</span>
+              <span class="detail-value">{{ formatField(detailData.currency) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">交易类型</span>
+              <span class="detail-value">{{ formatField(detailData.cashType) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">显示金额</span>
+              <span class="detail-value">{{ formatAmount(detailData.displayAmount) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">余额</span>
+              <span class="detail-value">{{ formatAmount(detailData.amountBalance) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="detail-section-title">账户信息</div>
+          <div class="detail-grid">
+            <div class="detail-item detail-item-full">
+              <span class="detail-label">本方账户</span>
+              <span class="detail-value">
+                {{ formatField(detailData.leAccountName) }} / {{ formatField(detailData.leAccountNo) }}
+              </span>
+            </div>
+            <div class="detail-item detail-item-full">
+              <span class="detail-label">对方账户</span>
+              <span class="detail-value">
+                {{ formatField(detailData.customerAccountName) }} /
+                {{ formatField(detailData.customerAccountNo) }}
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">本方银行</span>
+              <span class="detail-value">{{ formatField(detailData.bank) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">对方银行</span>
+              <span class="detail-value">{{ formatField(detailData.customerBank) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="detail-section-title">补充信息</div>
+          <div class="detail-grid">
+            <div class="detail-item detail-item-full">
+              <span class="detail-label">摘要</span>
+              <span class="detail-value">{{ formatField(detailData.userMemo) }}</span>
+            </div>
+            <div class="detail-item detail-item-full">
+              <span class="detail-label">银行摘要</span>
+              <span class="detail-value">{{ formatField(detailData.bankComments) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">银行交易号</span>
+              <span class="detail-value">{{ formatField(detailData.bankTrxNumber) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">交易方式</span>
+              <span class="detail-value">{{ formatField(detailData.paymentMethod) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">异常类型</span>
+              <span class="detail-value">{{ formatField(detailData.exceptionType) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">创建时间</span>
+              <span class="detail-value">{{ formatDate(detailData.createDate) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
+import { parseTime } from "@/utils/ruoyi";
 import {
   listBankStatement,
   getBankStatementOptions,
-  getBankStatementDetail
+  getBankStatementDetail,
 } from "@/api/ccdiProjectBankStatement";
 
+const TAB_MAP = {
+  all: "all",
+  in: "in",
+  out: "out",
+};
+
+const SORT_MAP = {
+  trxDate: "trxDate",
+  displayAmount: "amount",
+};
+
 const createDefaultQueryParams = (projectId) => ({
   projectId,
   pageNum: 1,
@@ -193,6 +398,27 @@ const createEmptyOptionData = () => ({
   ourAccountOptions: [],
 });
 
+const createEmptyDetailData = () => ({
+  bankStatementId: "",
+  trxDate: "",
+  currency: "",
+  leAccountNo: "",
+  leAccountName: "",
+  customerAccountName: "",
+  customerAccountNo: "",
+  customerBank: "",
+  userMemo: "",
+  bankComments: "",
+  bankTrxNumber: "",
+  bank: "",
+  cashType: "",
+  amountBalance: "",
+  displayAmount: "",
+  paymentMethod: "",
+  exceptionType: "",
+  createDate: "",
+});
+
 export default {
   name: "DetailQuery",
   props: {
@@ -213,10 +439,13 @@ export default {
     return {
       loading: false,
       optionsLoading: false,
+      detailLoading: false,
+      detailVisible: false,
       activeTab: "all",
       dateRange: [],
       list: [],
       total: 0,
+      detailData: createEmptyDetailData(),
       queryParams: createDefaultQueryParams(this.projectId),
       optionData: createEmptyOptionData(),
     };
@@ -283,11 +512,11 @@ export default {
     },
     syncProjectId() {
       this.queryParams.projectId = this.projectId;
-      this.queryParams.tabType = this.activeTab;
+      this.queryParams.tabType = TAB_MAP[this.activeTab] || "all";
     },
     handleQuery() {
       this.queryParams.pageNum = 1;
-      this.queryParams.tabType = this.activeTab;
+      this.syncProjectId();
       this.getList();
     },
     resetQuery() {
@@ -298,10 +527,71 @@ export default {
       this.getOptions();
       this.getList();
     },
-    handleExport() {
-      void listBankStatement;
-      void getBankStatementOptions;
-      void getBankStatementDetail;
+    handleTabChange(tab) {
+      const tabName = tab && tab.name ? tab.name : this.activeTab;
+      this.activeTab = tabName;
+      this.queryParams.pageNum = 1;
+      this.queryParams.tabType = TAB_MAP[tabName] || "all";
+      this.getList();
+    },
+    handleSortChange({ prop, order }) {
+      this.queryParams.orderBy = SORT_MAP[prop] || "trxDate";
+      this.queryParams.orderDirection = order === "ascending" ? "asc" : "desc";
+      if (!order) {
+        this.queryParams.orderBy = "trxDate";
+        this.queryParams.orderDirection = "desc";
+      }
+      this.getList();
+    },
+    handlePageChange(pageInfo) {
+      if (typeof pageInfo === "number") {
+        this.queryParams.pageNum = pageInfo;
+      } else {
+        this.queryParams.pageNum = pageInfo.page;
+        this.queryParams.pageSize = pageInfo.limit;
+      }
+      this.getList();
+    },
+    async handleViewDetail(row) {
+      if (!row || !row.bankStatementId) {
+        return;
+      }
+
+      this.detailVisible = true;
+      this.detailLoading = true;
+      try {
+        const res = await getBankStatementDetail(row.bankStatementId);
+        this.detailData = {
+          ...createEmptyDetailData(),
+          ...(res.data || {}),
+        };
+      } catch (error) {
+        this.detailData = createEmptyDetailData();
+        this.$message.error("加载流水详情失败");
+        console.error("加载流水详情失败", error);
+      } finally {
+        this.detailLoading = false;
+      }
+    },
+    closeDetailDialog() {
+      this.detailVisible = false;
+      this.detailData = createEmptyDetailData();
+    },
+    handleExport() {},
+    formatField(value) {
+      return value || "-";
+    },
+    formatDate(value) {
+      return value ? parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
+    },
+    formatAmount(value) {
+      if (value === null || value === undefined || value === "") {
+        return "-";
+      }
+      return Number(value).toLocaleString("zh-CN", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
     },
   },
 };
@@ -322,7 +612,6 @@ export default {
 
 .shell-sidebar,
 .shell-main {
-  min-height: 448px;
   border: 1px solid #ebeef5;
   border-radius: 4px;
   background: #fff;
@@ -332,6 +621,36 @@ export default {
   padding: 20px 16px;
 }
 
+.shell-main {
+  padding: 20px;
+}
+
+.shell-panel-title,
+.shell-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.shell-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.shell-subtitle {
+  font-size: 13px;
+  color: #909399;
+}
+
+.shell-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
 .filter-form {
   margin-top: 20px;
 
@@ -368,28 +687,92 @@ export default {
   }
 }
 
-.shell-main {
-  padding: 20px;
+.result-tabs {
+  margin-bottom: 16px;
 }
 
-.shell-header {
+.result-card {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.result-table {
+  width: 100%;
+}
+
+.multi-line-cell {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.shell-title,
-.shell-panel-title {
-  font-size: 16px;
+.primary-text {
+  color: #303133;
+  line-height: 20px;
+}
+
+.secondary-text {
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.amount-text {
+  font-weight: 600;
+}
+
+.amount-in {
+  color: #67c23a;
+}
+
+.amount-out {
+  color: #f56c6c;
+}
+
+.detail-drawer-body {
+  padding: 0 4px 24px;
+}
+
+.detail-section {
+  margin-bottom: 20px;
+  padding: 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.detail-section-title {
+  margin-bottom: 14px;
+  font-size: 15px;
   font-weight: 600;
   color: #303133;
 }
 
-.shell-panel-body {
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.detail-item-full {
+  grid-column: 1 / -1;
+}
+
+.detail-label {
+  font-size: 12px;
   color: #909399;
-  font-size: 14px;
-  line-height: 22px;
+}
+
+.detail-value {
+  color: #303133;
+  line-height: 20px;
+  word-break: break-all;
 }
 
 @media (max-width: 992px) {
@@ -401,4 +784,23 @@ export default {
     flex-direction: column;
   }
 }
+
+@media (max-width: 768px) {
+  .detail-query-container {
+    padding: 8px;
+  }
+
+  .shell-sidebar,
+  .shell-main {
+    padding: 16px;
+  }
+
+  .shell-header {
+    flex-direction: column;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>