员工亲属实体关联

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

@@ -1,44 +1,54 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="项目名称" prop="projectName">
-        <el-input
-          v-model="queryParams.projectName"
-          placeholder="请输入项目名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="标的物名称" prop="subjectName">
-        <el-input
-          v-model="queryParams.subjectName"
-          placeholder="请输入标的物名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="申请人" prop="applicantName">
-        <el-input
-          v-model="queryParams.applicantName"
-          placeholder="请输入申请人"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="申请日期">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="100px" class="query-form">
+      <el-row :gutter="16">
+        <el-col :span="6">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input
+              v-model="queryParams.projectName"
+              placeholder="请输入项目名称"
+              clearable
+              style="width: 100%"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="标的物名称" prop="subjectName">
+            <el-input
+              v-model="queryParams.subjectName"
+              placeholder="请输入标的物名称"
+              clearable
+              style="width: 100%"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="申请人" prop="applicantName">
+            <el-input
+              v-model="queryParams.applicantName"
+              placeholder="请输入申请人"
+              clearable
+              style="width: 100%"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="申请日期">
+            <el-date-picker
+              v-model="dateRange"
+              style="width: 100%"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -1360,6 +1370,19 @@ export default {
 </script>
 
 <style 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;
+}
+
 .detail-container {
   padding: 0 20px;
 }