员工亲属实体关联

ruoyi-ui/src/views/ccdiAccountInfo/index.vue

@@ -6,62 +6,81 @@
         ref="queryForm"
         :model="queryParams"
         size="small"
-        :inline="true"
         class="query-form"
         label-width="96px"
       >
-        <el-form-item label="所属人类型">
-          <el-select v-model="queryParams.ownerType" placeholder="请选择所属人类型" clearable style="width: 180px">
-            <el-option label="员工" value="EMPLOYEE" />
-            <el-option label="员工关系人" value="RELATION" />
-            <el-option label="中介" value="INTERMEDIARY" />
-            <el-option label="外部人员" value="EXTERNAL" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="员工姓名">
-          <el-input v-model="queryParams.staffName" placeholder="请输入员工姓名" clearable style="width: 220px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="账户范围">
-          <el-select v-model="queryParams.bankScope" placeholder="请选择账户范围" clearable style="width: 160px">
-            <el-option label="行内" value="INTERNAL" />
-            <el-option label="行外" value="EXTERNAL" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="关系类型">
-          <el-select v-model="queryParams.relationType" placeholder="请选择关系类型" clearable style="width: 180px">
-            <el-option v-for="item in relationTypeOptions" :key="item" :label="item" :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="账户姓名">
-          <el-input v-model="queryParams.accountName" placeholder="请输入账户姓名" clearable style="width: 220px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="账户类型">
-          <el-select v-model="queryParams.accountType" placeholder="请选择账户类型" clearable style="width: 180px">
-            <el-option label="银行账户" value="BANK" />
-            <el-option label="证券账户" value="SECURITIES" />
-            <el-option label="支付账户" value="PAYMENT" />
-            <el-option label="其他" value="OTHER" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否实控">
-          <el-select v-model="queryParams.isActualControl" placeholder="请选择是否实控" clearable style="width: 180px">
-            <el-option label="是" :value="1" />
-            <el-option label="否" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="风险等级">
-          <el-select v-model="queryParams.riskLevel" placeholder="请选择风险等级" clearable style="width: 180px">
-            <el-option label="LOW" value="LOW" />
-            <el-option label="MEDIUM" value="MEDIUM" />
-            <el-option label="HIGH" value="HIGH" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 160px">
-            <el-option label="正常" :value="1" />
-            <el-option label="已销户" :value="2" />
-          </el-select>
-        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <el-form-item label="所属人类型">
+              <el-select v-model="queryParams.ownerType" placeholder="请选择所属人类型" clearable style="width: 100%">
+                <el-option label="员工" value="EMPLOYEE" />
+                <el-option label="员工关系人" value="RELATION" />
+                <el-option label="中介" value="INTERMEDIARY" />
+                <el-option label="外部人员" value="EXTERNAL" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="员工姓名">
+              <el-input v-model="queryParams.staffName" placeholder="请输入员工姓名" clearable style="width: 100%" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="账户范围">
+              <el-select v-model="queryParams.bankScope" placeholder="请选择账户范围" clearable style="width: 100%">
+                <el-option label="行内" value="INTERNAL" />
+                <el-option label="行外" value="EXTERNAL" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="关系类型">
+              <el-select v-model="queryParams.relationType" placeholder="请选择关系类型" clearable style="width: 100%">
+                <el-option v-for="item in relationTypeOptions" :key="item" :label="item" :value="item" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="账户姓名">
+              <el-input v-model="queryParams.accountName" placeholder="请输入账户姓名" clearable style="width: 100%" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="账户类型">
+              <el-select v-model="queryParams.accountType" placeholder="请选择账户类型" clearable style="width: 100%">
+                <el-option label="银行账户" value="BANK" />
+                <el-option label="证券账户" value="SECURITIES" />
+                <el-option label="支付账户" value="PAYMENT" />
+                <el-option label="其他" value="OTHER" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="是否实控">
+              <el-select v-model="queryParams.isActualControl" placeholder="请选择是否实控" clearable style="width: 100%">
+                <el-option label="是" :value="1" />
+                <el-option label="否" :value="0" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="风险等级">
+              <el-select v-model="queryParams.riskLevel" placeholder="请选择风险等级" clearable style="width: 100%">
+                <el-option label="LOW" value="LOW" />
+                <el-option label="MEDIUM" value="MEDIUM" />
+                <el-option label="HIGH" value="HIGH" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="状态">
+              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 100%">
+                <el-option label="正常" :value="1" />
+                <el-option label="已销户" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <el-row :gutter="10" class="mb8">
@@ -838,6 +857,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.query-form ::v-deep .el-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.query-form ::v-deep .el-col {
+  float: none;
+}
+
+.query-form ::v-deep .el-form-item {
+  margin-right: 0;
+}
+
 .account-page {
   min-height: calc(100vh - 84px);
   background: #f5f7fa;
@@ -881,10 +913,4 @@ export default {
   font-weight: 700;
 }
 
-@media (max-width: 768px) {
-  .query-form ::v-deep .el-form-item {
-    display: block;
-    margin-right: 0;
-  }
-}
 </style>