用户管理查询条件样式调整

src/views/user_manage/index.vue

@@ -1,58 +1,66 @@
 <template>
   <div class="user-manage">
     <div class="user-manage-list">
-      <el-form inline id="query-form" label-width="90px">
-        <el-form-item prop="real_name" label="真实姓名">
-          <el-input v-model="form.real_name"></el-input>
-        </el-form-item>
-        <el-form-item prop="email" label="邮箱">
-          <el-input v-model="form.email"></el-input>
-        </el-form-item>
-        <el-form-item prop="org_id" label="所属机构">
-          <el-select v-model="form.org_id_list" filterable multiple collapse-tags>
-            <el-option v-for="item in institutionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="register_date" label="注册日期">
-          <el-date-picker v-model="form.register_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-          -
-          <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item prop="user_name" label="用户名">
-          <el-input v-model="form.user_name"></el-input>
-        </el-form-item>
-        <br />
-        <el-form-item prop="phone" label="电话">
-          <el-input v-model="form.phone"></el-input>
-        </el-form-item>
-        <el-form-item prop="org_manager_status" label="机构管理员">
-          <el-select v-model="form.org_manager_status">
-            <el-option
-              v-for="item in org_manager_list"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="stop_status" label="已停用">
-          <el-select v-model="form.stop_status">
-            <el-option v-for="item in stop_list" :key="item.value" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="stop_date" label="停用日期">
-          <el-date-picker v-model="form.stop_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-          -
-          <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="queryList">查询</el-button>
-        </el-form-item>
-      </el-form>
+      <div id="query-form">
+        <el-form inline label-width="90px">
+          <el-form-item prop="real_name" label="真实姓名">
+            <el-input v-model="form.real_name"></el-input>
+          </el-form-item>
+          <el-form-item prop="email" label="邮箱" class="email">
+            <el-input v-model="form.email"></el-input>
+          </el-form-item>
+          <el-form-item prop="org_id" label="所属机构" class="org_id">
+            <el-select v-model="form.org_id_list" filterable multiple collapse-tags>
+              <el-option v-for="item in institutionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="register_date" label="注册日期">
+            <el-date-picker v-model="form.register_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+            -
+            <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+          <br />
+          <el-form-item prop="user_name" label="用户名">
+            <el-input v-model="form.user_name"></el-input>
+          </el-form-item>
+          <el-form-item prop="phone" label="电话" class="email">
+            <el-input v-model="form.phone"></el-input>
+          </el-form-item>
+          <el-form-item prop="org_manager_status" label="机构管理员">
+            <el-select v-model="form.org_manager_status">
+              <el-option
+                v-for="item in org_manager_list"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="stop_status" label="已停用" class="stop_status">
+            <el-select v-model="form.stop_status">
+              <el-option
+                v-for="item in stop_list"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="stop_date" label="停用日期">
+            <el-date-picker v-model="form.stop_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+            -
+            <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <div class="search-box">
+          <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
+        </div>
+      </div>
+
       <el-table :data="list" :max-height="tableHeight + 'px'" v-if="tableHeight">
         <el-table-column
           type="index"
@@ -225,41 +233,67 @@ export default {
     }
   }
 
-  :deep .el-form-item--small.el-form-item {
-    margin-bottom: 5px;
-  }
+  #query-form {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
 
-  :deep .el-input--small .el-input__inner {
-    width: 100px;
-  }
+    :deep .el-form-item--small.el-form-item {
+      margin-bottom: 5px;
+    }
 
-  :deep .el-range-editor .el-range-input {
-    background: transparent;
-  }
+    :deep .el-input--small .el-input__inner {
+      width: 100px;
+    }
+
+    :deep .el-range-editor .el-range-input {
+      background: transparent;
+    }
 
-  :deep .el-select > .el-input {
-    width: 100px;
+    :deep .el-select > .el-input {
+      width: 115px;
 
-    .el-input__inner {
-      width: 100%;
+      .el-input__inner {
+        width: 100%;
+      }
     }
-  }
 
-  :deep .el-date-editor.el-input,
-  .el-date-editor.el-input__inner {
-    width: 130px;
-  }
+    :deep .el-date-editor.el-input,
+    .el-date-editor.el-input__inner {
+      width: 130px;
+    }
 
-  :deep .el-date-editor .el-input__inner {
-    width: 130px;
-    padding-right: 20px;
-  }
+    :deep .el-date-editor .el-input__inner {
+      width: 130px;
+      padding-right: 20px;
+    }
 
-  #query-form {
-    text-align: left;
+    .org_id {
+      :deep .el-select > .el-input {
+        width: 300px;
+      }
+    }
+
+    .email {
+      :deep .el-form-item__label {
+        width: 50px !important;
+      }
+    }
+
+    .stop_status {
+      :deep .el-form-item__label {
+        width: 60px !important;
+      }
+    }
+
+    .search-box {
+      flex: 1;
+      text-align: center;
 
-    :deep .el-button--small {
-      margin-left: 20px;
+      :deep .el-button--small {
+        height: 32px;
+      }
     }
   }
 }

src/views/user_manage_org/index.vue

@@ -8,53 +8,61 @@
         >
         <el-button class="add-btn" type="primary" size="small" @click="updateOrg">批量导入用户</el-button>
       </div>
-      <el-form inline id="query-form" label-width="90px">
-        <el-form-item prop="real_name" label="真实姓名">
-          <el-input v-model="form.real_name"></el-input>
-        </el-form-item>
-        <el-form-item prop="email" label="邮箱">
-          <el-input v-model="form.email"></el-input>
-        </el-form-item>
-        <el-form-item prop="org_manager_status" label="机构管理员">
-          <el-select v-model="form.org_manager_status">
-            <el-option
-              v-for="item in org_manager_list"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="register_date" label="注册日期">
-          <el-date-picker v-model="form.register_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-          -
-          <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-        </el-form-item>
-        <br />
-        <el-form-item prop="user_name" label="用户名">
-          <el-input v-model="form.user_name"></el-input>
-        </el-form-item>
-        <el-form-item prop="phone" label="电话">
-          <el-input v-model="form.phone"></el-input>
-        </el-form-item>
-        <el-form-item prop="stop_status" label="已停用">
-          <el-select v-model="form.stop_status">
-            <el-option v-for="item in stop_list" :key="item.value" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="stop_date" label="停用日期">
-          <el-date-picker v-model="form.stop_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-          -
-          <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
+      <div id="query-form">
+        <el-form inline label-width="90px">
+          <el-form-item prop="real_name" label="真实姓名">
+            <el-input v-model="form.real_name"></el-input>
+          </el-form-item>
+          <el-form-item prop="email" label="邮箱" class="email">
+            <el-input v-model="form.email"></el-input>
+          </el-form-item>
+          <el-form-item prop="org_manager_status" label="机构管理员">
+            <el-select v-model="form.org_manager_status">
+              <el-option
+                v-for="item in org_manager_list"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="register_date" label="注册日期">
+            <el-date-picker v-model="form.register_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+            -
+            <el-date-picker v-model="form.register_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+          <br />
+          <el-form-item prop="user_name" label="用户名">
+            <el-input v-model="form.user_name"></el-input>
+          </el-form-item>
+          <el-form-item prop="phone" label="电话" class="email">
+            <el-input v-model="form.phone"></el-input>
+          </el-form-item>
+          <el-form-item prop="stop_status" label="已停用">
+            <el-select v-model="form.stop_status">
+              <el-option
+                v-for="item in stop_list"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="stop_date" label="停用日期">
+            <el-date-picker v-model="form.stop_date_begin" placeholder="开始日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+            -
+            <el-date-picker v-model="form.stop_date_end" placeholder="截止日期" value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+
+        <div class="search-box">
           <el-button type="primary" @click="queryList">查询</el-button>
-        </el-form-item>
-      </el-form>
+        </div>
+      </div>
       <el-table :data="list" :max-height="tableHeight + 'px'" v-if="tableHeight">
         <el-table-column
           type="index"
@@ -249,41 +257,67 @@ export default {
     }
   }
 
-  :deep .el-input--small .el-input__inner {
-    width: 100px;
-  }
+  #query-form {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
 
-  :deep .el-select > .el-input {
-    width: 100px;
+    :deep .el-form-item--small.el-form-item {
+      margin-bottom: 5px;
+    }
 
-    .el-input__inner {
-      width: 100%;
+    :deep .el-input--small .el-input__inner {
+      width: 100px;
     }
-  }
 
-  :deep .el-date-editor.el-input,
-  .el-date-editor.el-input__inner {
-    width: 130px;
-  }
+    :deep .el-range-editor .el-range-input {
+      background: transparent;
+    }
 
-  :deep .el-date-editor .el-input__inner {
-    width: 130px;
-    padding-right: 20px;
-  }
+    :deep .el-select > .el-input {
+      width: 115px;
 
-  :deep .el-form-item--small.el-form-item {
-    margin-bottom: 5px;
-  }
+      .el-input__inner {
+        width: 100%;
+      }
+    }
 
-  :deep .el-range-editor .el-range-input {
-    background: transparent;
-  }
+    :deep .el-date-editor.el-input,
+    .el-date-editor.el-input__inner {
+      width: 130px;
+    }
 
-  #query-form {
-    text-align: left;
+    :deep .el-date-editor .el-input__inner {
+      width: 130px;
+      padding-right: 20px;
+    }
+
+    .org_id {
+      :deep .el-select > .el-input {
+        width: 300px;
+      }
+    }
+
+    .email {
+      :deep .el-form-item__label {
+        width: 50px !important;
+      }
+    }
+
+    .stop_status {
+      :deep .el-form-item__label {
+        width: 60px !important;
+      }
+    }
+
+    .search-box {
+      flex: 1;
+      text-align: center;
 
-    :deep .el-button--small {
-      margin-left: 20px;
+      :deep .el-button--small {
+        height: 32px;
+      }
     }
   }
 }