完成流水明细查询筛选栏布局

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

@@ -3,7 +3,145 @@
     <div class="query-page-shell">
       <div class="shell-sidebar">
         <div class="shell-panel-title">筛选条件</div>
-        <div class="shell-panel-body">筛选区域待接入</div>
+        <el-form label-position="top" class="filter-form">
+          <el-form-item label="交易时间">
+            <el-date-picker
+              v-model="dateRange"
+              class="filter-control"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              unlink-panels
+            />
+          </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"
+              class="filter-control"
+              multiple
+              filterable
+              collapse-tags
+              clearable
+              :loading="optionsLoading"
+              placeholder="请选择本方主体"
+            >
+              <el-option
+                v-for="item in optionData.ourSubjectOptions"
+                :key="`subject-${item.value}`"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="本方银行">
+            <el-select
+              v-model="queryParams.ourBanks"
+              class="filter-control"
+              multiple
+              filterable
+              collapse-tags
+              clearable
+              :loading="optionsLoading"
+              placeholder="请选择本方银行"
+            >
+              <el-option
+                v-for="item in optionData.ourBankOptions"
+                :key="`bank-${item.value}`"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="本方账号">
+            <el-select
+              v-model="queryParams.ourAccounts"
+              class="filter-control"
+              multiple
+              filterable
+              collapse-tags
+              clearable
+              :loading="optionsLoading"
+              placeholder="请选择本方账号"
+            >
+              <el-option
+                v-for="item in optionData.ourAccountOptions"
+                :key="`account-${item.value}`"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="金额区间">
+            <div class="amount-range">
+              <el-input
+                v-model="queryParams.amountMin"
+                placeholder="最小金额"
+                clearable
+              />
+              <span class="amount-separator">-</span>
+              <el-input
+                v-model="queryParams.amountMax"
+                placeholder="最大金额"
+                clearable
+              />
+            </div>
+          </el-form-item>
+
+          <el-form-item label="对方账号">
+            <el-input
+              v-model="queryParams.counterpartyAccount"
+              placeholder="请输入对方账号"
+              clearable
+            />
+            <el-checkbox v-model="queryParams.counterpartyAccountEmpty" class="empty-checkbox">
+              匹配空值
+            </el-checkbox>
+          </el-form-item>
+
+          <el-form-item label="交易类型">
+            <el-input
+              v-model="queryParams.transactionType"
+              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>
+          </div>
+        </el-form>
       </div>
       <div class="shell-main">
         <div class="shell-header">
@@ -88,6 +226,10 @@ export default {
     this.getOptions();
   },
   watch: {
+    dateRange(value) {
+      this.queryParams.transactionStartTime = value && value[0] ? value[0] : "";
+      this.queryParams.transactionEndTime = value && value[1] ? value[1] : "";
+    },
     projectId() {
       this.syncProjectId();
       this.getOptions();
@@ -190,6 +332,42 @@ export default {
   padding: 20px 16px;
 }
 
+.filter-form {
+  margin-top: 20px;
+
+  :deep(.el-form-item) {
+    margin-bottom: 18px;
+  }
+}
+
+.filter-control {
+  width: 100%;
+}
+
+.empty-checkbox {
+  margin-top: 8px;
+}
+
+.amount-range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.amount-separator {
+  color: #909399;
+  font-size: 13px;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 12px;
+
+  .el-button {
+    flex: 1;
+  }
+}
+
 .shell-main {
   padding: 20px;
 }
@@ -218,5 +396,9 @@ export default {
   .query-page-shell {
     grid-template-columns: 1fr;
   }
+
+  .filter-actions {
+    flex-direction: column;
+  }
 }
 </style>