调整流水明细筛选栏顺序并移除交易类型筛选

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

@@ -17,31 +17,6 @@
             />
           </el-form-item>
 
-          <el-form-item label="对方名称">
-            <el-input
-              v-model="queryParams.counterpartyName"
-              placeholder="请输入对方名称"
-              clearable
-            />
-            <el-checkbox
-              v-model="queryParams.counterpartyNameEmpty"
-              class="empty-checkbox"
-            >
-              匹配空值
-            </el-checkbox>
-          </el-form-item>
-
-          <el-form-item label="摘要">
-            <el-input
-              v-model="queryParams.userMemo"
-              placeholder="请输入摘要关键字"
-              clearable
-            />
-            <el-checkbox v-model="queryParams.userMemoEmpty" class="empty-checkbox">
-              匹配空值
-            </el-checkbox>
-          </el-form-item>
-
           <el-form-item label="本方主体">
             <el-select
               v-model="queryParams.ourSubjects"
@@ -118,37 +93,57 @@
             </div>
           </el-form-item>
 
-          <el-form-item label="对方账号">
+          <el-form-item>
+            <div class="filter-item-header">
+              <span class="filter-item-label">对方名称</span>
+              <el-checkbox
+                v-model="queryParams.counterpartyNameEmpty"
+                class="empty-checkbox"
+              >
+                匹配空值
+              </el-checkbox>
+            </div>
             <el-input
-              v-model="queryParams.counterpartyAccount"
-              placeholder="请输入对方账号"
+              v-model="queryParams.counterpartyName"
+              placeholder="请输入对方名称"
               clearable
             />
-            <el-checkbox
-              v-model="queryParams.counterpartyAccountEmpty"
-              class="empty-checkbox"
-            >
-              匹配空值
-            </el-checkbox>
           </el-form-item>
 
-          <el-form-item label="交易类型">
+          <el-form-item>
+            <div class="filter-item-header">
+              <span class="filter-item-label">对方账户</span>
+              <el-checkbox
+                v-model="queryParams.counterpartyAccountEmpty"
+                class="empty-checkbox"
+              >
+                匹配空值
+              </el-checkbox>
+            </div>
             <el-input
-              v-model="queryParams.transactionType"
-              placeholder="请输入交易类型"
+              v-model="queryParams.counterpartyAccount"
+              placeholder="请输入对方账户"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <div class="filter-item-header">
+              <span class="filter-item-label">摘要</span>
+              <el-checkbox v-model="queryParams.userMemoEmpty" class="empty-checkbox">
+                匹配空值
+              </el-checkbox>
+            </div>
+            <el-input
+              v-model="queryParams.userMemo"
+              placeholder="请输入摘要关键字"
               clearable
             />
-            <el-checkbox
-              v-model="queryParams.transactionTypeEmpty"
-              class="empty-checkbox"
-            >
-              匹配空值
-            </el-checkbox>
           </el-form-item>
 
           <div class="filter-actions">
-            <el-button type="primary" @click="handleQuery">查询</el-button>
-            <el-button plain @click="resetQuery">重置</el-button>
+            <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
+            <el-button size="small" plain @click="resetQuery">重置</el-button>
           </div>
         </el-form>
       </div>
@@ -407,8 +402,6 @@ const createDefaultQueryParams = (projectId) => ({
   amountMax: "",
   counterpartyAccount: "",
   counterpartyAccountEmpty: false,
-  transactionType: "",
-  transactionTypeEmpty: false,
   orderBy: "trxDate",
   orderDirection: "desc",
 });
@@ -641,8 +634,8 @@ export default {
 
 .query-page-shell {
   display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
-  gap: 16px;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 12px;
 }
 
 .shell-sidebar,
@@ -653,7 +646,7 @@ export default {
 }
 
 .shell-sidebar {
-  padding: 20px 16px;
+  padding: 16px 14px;
 }
 
 .shell-main {
@@ -687,10 +680,16 @@ export default {
 }
 
 .filter-form {
-  margin-top: 20px;
+  margin-top: 12px;
 
   :deep(.el-form-item) {
-    margin-bottom: 18px;
+    margin-bottom: 14px;
+  }
+
+  :deep(.el-form-item__label) {
+    padding-bottom: 6px;
+    line-height: 20px;
+    font-size: 13px;
   }
 }
 
@@ -698,14 +697,35 @@ export default {
   width: 100%;
 }
 
+.filter-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.filter-item-label {
+  font-size: 13px;
+  line-height: 20px;
+  color: #606266;
+}
+
 .empty-checkbox {
-  margin-top: 8px;
+  margin-top: 0;
+  flex-shrink: 0;
+}
+
+:deep(.empty-checkbox .el-checkbox__label) {
+  padding-left: 4px;
+  font-size: 12px;
+  color: #909399;
 }
 
 .amount-range {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .amount-separator {
@@ -715,7 +735,7 @@ export default {
 
 .filter-actions {
   display: flex;
-  gap: 12px;
+  gap: 8px;
 
   .el-button {
     flex: 1;

ruoyi-ui/tests/unit/detail-query-filter-layout.test.js

@@ -0,0 +1,78 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/components/detail/DetailQuery.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+[
+  ["对方名称", "queryParams.counterpartyNameEmpty"],
+  ["摘要", "queryParams.userMemoEmpty"],
+  ["对方账户", "queryParams.counterpartyAccountEmpty"],
+].forEach(([label, model]) => {
+  const inlineTogglePattern = new RegExp(
+    `<el-form-item>[\\s\\S]*?<div class="filter-item-header">[\\s\\S]*?<span class="filter-item-label">${label}</span>[\\s\\S]*?<el-checkbox[\\s\\S]*?v-model="${model}"[\\s\\S]*?class="empty-checkbox"[\\s\\S]*?>[\\s\\S]*?匹配空值[\\s\\S]*?</el-checkbox>[\\s\\S]*?</div>`,
+    "m"
+  );
+
+  assert(
+    inlineTogglePattern.test(source),
+    `${label}筛选项应将匹配空值放到标题同一行`
+  );
+});
+
+const filterOrder = [
+  'label="交易时间"',
+  'label="本方主体"',
+  'label="本方银行"',
+  'label="本方账号"',
+  'label="金额区间"',
+  '<span class="filter-item-label">对方名称</span>',
+  '<span class="filter-item-label">对方账户</span>',
+  '<span class="filter-item-label">摘要</span>',
+];
+
+let lastIndex = -1;
+filterOrder.forEach((token) => {
+  const currentIndex = source.indexOf(token);
+  assert.notStrictEqual(currentIndex, -1, `未找到筛选项标识: ${token}`);
+  assert(
+    currentIndex > lastIndex,
+    `筛选项顺序不正确，${token} 应出现在前一项之后`
+  );
+  lastIndex = currentIndex;
+});
+
+assert(
+  !source.includes('placeholder="请输入交易类型"'),
+  "筛选栏不应再显示交易类型输入框"
+);
+
+assert(
+  !source.includes("queryParams.transactionType"),
+  "筛选逻辑不应再保留交易类型参数"
+);
+
+assert(
+  !source.includes("queryParams.transactionTypeEmpty"),
+  "筛选逻辑不应再保留交易类型空值匹配参数"
+);
+
+assert(
+  /\.filter-item-header\s*\{[\s\S]*display:\s*flex;[\s\S]*justify-content:\s*space-between;[\s\S]*margin-bottom:\s*6px;/m.test(
+    source
+  ),
+  "筛选项标题行应使用紧凑的横向布局"
+);
+
+assert(
+  /\.filter-form\s*\{[\s\S]*margin-top:\s*12px;[\s\S]*:deep\(.el-form-item\)\s*\{[\s\S]*margin-bottom:\s*14px;/m.test(
+    source
+  ),
+  "筛选表单应压缩顶部和表单项间距"
+);
+
+console.log("detail-query-filter-layout test passed");