任务查看 query 区调整排版

src/views/pms/iotprojecttask/index.vue

@@ -272,7 +272,7 @@ onMounted(async () => {
             placeholder="请选择公司"
             clearable
             filterable
-            class="query-control"
+            class="w-full"
           >
             <el-option
               v-for="item in companyDeptList"
@@ -287,7 +287,7 @@ onMounted(async () => {
             v-model="queryParams.manufactureName"
             placeholder="请输入客户名称"
             clearable
-            class="query-control"
+            class="w-full"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
@@ -296,7 +296,7 @@ onMounted(async () => {
             v-model="queryParams.contractName"
             placeholder="请输入合同名称"
             clearable
-            class="query-control"
+            class="w-full"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
@@ -305,7 +305,7 @@ onMounted(async () => {
             v-model="queryParams.contractCode"
             placeholder="请输入合同编号"
             clearable
-            class="query-control"
+            class="w-full"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
@@ -314,7 +314,7 @@ onMounted(async () => {
             v-model="queryParams.deptName"
             placeholder="请输入施工队伍"
             clearable
-            class="query-control"
+            class="w-full"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
@@ -323,7 +323,7 @@ onMounted(async () => {
             v-model="queryParams.wellName"
             placeholder="请输入井号"
             clearable
-            class="query-control query-control--small"
+            class="w-full"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
@@ -332,7 +332,7 @@ onMounted(async () => {
             v-model="queryParams.platformFlag"
             placeholder="请选择平台井"
             clearable
-            class="query-control query-control--small"
+            class="w-full"
             @change="handleQuery"
           >
             <el-option label="全部" value="A" />
@@ -348,20 +348,20 @@ onMounted(async () => {
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="query-control query-control--date"
+            class="w-full"
           />
         </el-form-item>
-      </div>
 
-      <el-form-item class="query-actions">
-        <el-button type="primary" @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" />搜索
-        </el-button>
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
-        <el-button type="success" plain :loading="exportLoading" @click="handleExport">
-          <Icon icon="ep:download" class="mr-5px" />导出
-        </el-button>
-      </el-form-item>
+        <el-form-item class="query-actions">
+          <el-button type="primary" @click="handleQuery">
+            <Icon icon="ep:search" class="mr-5px" />搜索
+          </el-button>
+          <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
+          <el-button type="success" plain :loading="exportLoading" @click="handleExport">
+            <Icon icon="ep:download" class="mr-5px" />导出
+          </el-button>
+        </el-form-item>
+      </div>
     </el-form>
 
     <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0">
@@ -523,16 +523,14 @@ onMounted(async () => {
 
 <style scoped>
 .iot-project-task-query {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
+  display: block;
 }
 
 .query-row {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(270px, 1fr));
   align-items: center;
-  gap: 12px 22px;
+  gap: 14px 28px;
   min-width: 0;
 }
 
@@ -551,37 +549,42 @@ onMounted(async () => {
   margin-left: 0;
 }
 
-.query-control {
-  width: 190px;
+:deep(.el-form-item) {
+  margin-bottom: 0;
 }
 
-.query-control--small {
-  width: 130px;
+@media (width >= 2200px) {
+  .query-actions {
+    grid-column: 4;
+  }
 }
 
-.query-control--date {
-  width: 220px;
-}
+@media (width <= 1800px) {
+  .query-row {
+    grid-template-columns: repeat(3, minmax(270px, 1fr));
+  }
 
-:deep(.el-form-item) {
-  margin-bottom: 0;
+  .query-actions {
+    justify-self: start;
+  }
 }
 
 @media (width <= 1500px) {
   .query-row {
+    grid-template-columns: repeat(2, minmax(260px, 1fr));
     gap: 12px 18px;
   }
 
   .query-control {
-    width: 176px;
+    width: 210px;
   }
 
   .query-control--small {
-    width: 124px;
+    width: 160px;
   }
 
   .query-control--date {
-    width: 210px;
+    width: 280px;
   }
 }
 
@@ -596,7 +599,7 @@ onMounted(async () => {
 
   .query-actions {
     width: 100%;
-    justify-self: stretch;
+    justify-self: start;
   }
 
   .query-actions :deep(.el-form-item__content) {
@@ -615,6 +618,10 @@ onMounted(async () => {
     width: 100%;
   }
 
+  .query-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .query-control,
   .query-control--small,
   .query-control--date {