搭建流水明细查询前端页面骨架

ruoyi-ui/src/api/ccdiProjectBankStatement.js

@@ -0,0 +1,26 @@
+import request from "@/utils/request";
+
+export function listBankStatement(query) {
+  return request({
+    url: "/ccdi/project/bank-statement/list",
+    method: "get",
+    params: query,
+  });
+}
+
+export function getBankStatementOptions(projectId) {
+  return request({
+    url: "/ccdi/project/bank-statement/options",
+    method: "get",
+    params: {
+      projectId,
+    },
+  });
+}
+
+export function getBankStatementDetail(bankStatementId) {
+  return request({
+    url: `/ccdi/project/bank-statement/detail/${bankStatementId}`,
+    method: "get",
+  });
+}

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

@@ -1,13 +1,30 @@
 <template>
   <div class="detail-query-container">
-    <div class="placeholder-content">
-      <i class="el-icon-document"></i>
-      <p>流水明细查询功能开发中...</p>
+    <div class="query-page-shell">
+      <div class="shell-sidebar">
+        <div class="shell-panel-title">筛选条件</div>
+        <div class="shell-panel-body">筛选区域待接入</div>
+      </div>
+      <div class="shell-main">
+        <div class="shell-header">
+          <span class="shell-title">流水明细查询</span>
+          <el-button size="small" type="primary" plain @click="handleExport">
+            导出流水
+          </el-button>
+        </div>
+        <div class="shell-panel-body">结果区域待接入</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import {
+  listBankStatement,
+  getBankStatementOptions,
+  getBankStatementDetail
+} from "@/api/ccdiProjectBankStatement";
+
 export default {
   name: "DetailQuery",
   props: {
@@ -24,28 +41,70 @@ export default {
       }),
     },
   },
+  methods: {
+    getList() {},
+    getOptions() {},
+    handleExport() {
+      void listBankStatement;
+      void getBankStatementOptions;
+      void getBankStatementDetail;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .detail-query-container {
-  padding: 40px 20px;
+  padding: 16px;
   background: #fff;
-  min-height: 400px;
+  min-height: 480px;
 }
 
-.placeholder-content {
-  text-align: center;
+.query-page-shell {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 16px;
+}
+
+.shell-sidebar,
+.shell-main {
+  min-height: 448px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.shell-sidebar {
+  padding: 20px 16px;
+}
+
+.shell-main {
+  padding: 20px;
+}
+
+.shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.shell-title,
+.shell-panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.shell-panel-body {
   color: #909399;
+  font-size: 14px;
+  line-height: 22px;
+}
 
-  i {
-    font-size: 48px;
-    margin-bottom: 16px;
-  }
-
-  p {
-    font-size: 14px;
-    margin: 0;
+@media (max-width: 992px) {
+  .query-page-shell {
+    grid-template-columns: 1fr;
   }
 }
 </style>