diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
index ea435f1..20846fe 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
@@ -25,6 +25,36 @@ import {
   getBankStatementDetail
 } from "@/api/ccdiProjectBankStatement";
 
+const createDefaultQueryParams = (projectId) => ({
+  projectId,
+  pageNum: 1,
+  pageSize: 10,
+  tabType: "all",
+  transactionStartTime: "",
+  transactionEndTime: "",
+  counterpartyName: "",
+  counterpartyNameEmpty: false,
+  userMemo: "",
+  userMemoEmpty: false,
+  ourSubjects: [],
+  ourBanks: [],
+  ourAccounts: [],
+  amountMin: "",
+  amountMax: "",
+  counterpartyAccount: "",
+  counterpartyAccountEmpty: false,
+  transactionType: "",
+  transactionTypeEmpty: false,
+  orderBy: "trxDate",
+  orderDirection: "desc",
+});
+
+const createEmptyOptionData = () => ({
+  ourSubjectOptions: [],
+  ourBankOptions: [],
+  ourAccountOptions: [],
+});
+
 export default {
   name: "DetailQuery",
   props: {
@@ -41,9 +71,91 @@ export default {
       }),
     },
   },
+  data() {
+    return {
+      loading: false,
+      optionsLoading: false,
+      activeTab: "all",
+      dateRange: [],
+      list: [],
+      total: 0,
+      queryParams: createDefaultQueryParams(this.projectId),
+      optionData: createEmptyOptionData(),
+    };
+  },
+  created() {
+    this.getList();
+    this.getOptions();
+  },
+  watch: {
+    projectId() {
+      this.syncProjectId();
+      this.getOptions();
+      this.getList();
+    },
+  },
   methods: {
-    getList() {},
-    getOptions() {},
+    async getList() {
+      this.syncProjectId();
+      if (!this.queryParams.projectId) {
+        this.list = [];
+        this.total = 0;
+        return;
+      }
+
+      this.loading = true;
+      try {
+        const res = await listBankStatement(this.queryParams);
+        this.list = res.rows || [];
+        this.total = res.total || 0;
+      } catch (error) {
+        this.list = [];
+        this.total = 0;
+        console.error("加载流水明细失败", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async getOptions() {
+      this.syncProjectId();
+      if (!this.queryParams.projectId) {
+        this.optionData = createEmptyOptionData();
+        return;
+      }
+
+      this.optionsLoading = true;
+      try {
+        const res = await getBankStatementOptions(this.queryParams.projectId);
+        const data = res.data || {};
+        this.optionData = {
+          ourSubjectOptions: data.ourSubjectOptions || [],
+          ourBankOptions: data.ourBankOptions || [],
+          ourAccountOptions: data.ourAccountOptions || [],
+        };
+      } catch (error) {
+        this.optionData = createEmptyOptionData();
+        console.error("加载流水筛选项失败", error);
+      } finally {
+        this.optionsLoading = false;
+      }
+    },
+    syncProjectId() {
+      this.queryParams.projectId = this.projectId;
+      this.queryParams.tabType = this.activeTab;
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.queryParams.tabType = this.activeTab;
+      this.getList();
+    },
+    resetQuery() {
+      this.activeTab = "all";
+      this.dateRange = [];
+      this.queryParams = createDefaultQueryParams(this.projectId);
+      this.syncProjectId();
+      this.getOptions();
+      this.getList();
+    },
     handleExport() {
       void listBankStatement;
       void getBankStatementOptions;