更新依赖

src/views/project/admin/list.vue

@@ -1,35 +1,51 @@
 <template>
     <hc-card class="hc-project-collect-admin-list">
         <template #header>
-            <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
-            <div class="relative ml-3 w-[300px]">
-                <hc-search-input v-model="searchForm.queryValue" text="搜索" color="#151921" @search="searchClick">
-                    <template #prepend>
-                        <el-select v-model="searchForm.year" placeholder="年份" clearable style="width: 80px">
-                            <el-option label="2023" value="2023" />
-                            <el-option label="2024" value="2024" />
-                        </el-select>
-                    </template>
-                </hc-search-input>
+            <div v-if="isWidths >= 1660" class="hc-flex">
+                <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
+                <div class="relative ml-3 w-[300px]">
+                    <hc-search-input v-model="searchForm.queryValue" text="搜索" color="#151921" @search="searchClick">
+                        <template #prepend>
+                            <el-select v-model="searchForm.year" placeholder="年份" clearable style="width: 80px">
+                                <el-option label="2023" value="2023" />
+                                <el-option label="2024" value="2024" />
+                            </el-select>
+                        </template>
+                    </hc-search-input>
+                </div>
+            </div>
+            <div v-else class="hc-flex">
+                <div class="w-[120px]">
+                    <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
+                        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
+                <div class="ml-2 w-[100px]">
+                    <el-select v-model="searchForm.key2" filterable clearable block placeholder="项目类型" @change="searchClick">
+                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </div>
         </template>
         <template #extra>
-            <div class="w-[120px]">
-                <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
-                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-            </div>
-            <div class="ml-2 w-[100px]">
-                <el-select v-model="searchForm.key2" filterable clearable block placeholder="项目类型" @change="searchClick">
-                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
+            <div v-if="isWidths >= 1660" class="hc-flex">
+                <div class="w-[120px]">
+                    <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
+                        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
+                <div class="ml-2 w-[100px]">
+                    <el-select v-model="searchForm.key2" filterable clearable block placeholder="项目类型" @change="searchClick">
+                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </div>
             <el-button type="success" class="ml-6" @click="reportsClick">生成报告</el-button>
             <el-button v-del-com:[delTableItem] type="danger" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量删除</el-button>
             <el-button type="warning" class="ml-2" @click="importClick">导入</el-button>
             <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量导出</el-button>
         </template>
-        <template #search>
+        <template v-if="isWidths < 1660" #search>
             <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
             <div class="relative ml-4 w-[500px]">
                 <hc-search-input v-model="searchForm.queryValue" text="搜索" color="#151921" @search="searchClick">
@@ -42,7 +58,6 @@
                 </hc-search-input>
             </div>
         </template>
-
         <HcTableList ref="tableRef" is-admin @tap="rowNameClick" @check="tableCheck" />
         <template #action>
             <div>建设规模：共计 xx 公里</div>
@@ -201,8 +216,9 @@ const modalImportClose = () => {
 }
 
 //窗口大小改变
-const onWindowResize = ({ h, w }) => {
-    console.log(h, w)
+const isWidths = ref()
+const onWindowResize = ({ w }) => {
+    isWidths.value = w
 }
 </script>