diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue index 0bb327e..4b061b1 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue @@ -17,31 +17,6 @@ /> - - - - 匹配空值 - - - - - - - 匹配空值 - - - - + +
+ 对方名称 + + 匹配空值 + +
- - 匹配空值 - - + +
+ 对方账户 + + 匹配空值 + +
+ + + +
+ 摘要 + + 匹配空值 + +
+ - - 匹配空值 -
- 查询 - 重置 + 查询 + 重置
@@ -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; diff --git a/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js b/ruoyi-ui/tests/unit/detail-query-filter-layout.test.js new file mode 100644 index 0000000..1e7761c --- /dev/null +++ b/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( + `[\\s\\S]*?
[\\s\\S]*?${label}[\\s\\S]*?[\\s\\S]*?匹配空值[\\s\\S]*?[\\s\\S]*?
`, + "m" + ); + + assert( + inlineTogglePattern.test(source), + `${label}筛选项应将匹配空值放到标题同一行` + ); +}); + +const filterOrder = [ + 'label="交易时间"', + 'label="本方主体"', + 'label="本方银行"', + 'label="本方账号"', + 'label="金额区间"', + '对方名称', + '对方账户', + '摘要', +]; + +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");