feat:优化设备列表搜索区效果增加折叠处理。

src/views/iot/device/instance/index.vue

@@ -2,113 +2,137 @@
   <div class="page">
     <el-card shadow="nover" v-loading="batchLoading">
       <div class="system-user-search mb15">
-        <el-form :model="tableData.param" ref="queryRef" inline>
-          <el-form-item label="关键字" prop="keyWord">
-            <el-input v-model="tableData.param.keyWord" placeholder="输入名称或标识" clearable style="width: 120px" @keyup.enter.native="typeList" />
-          </el-form-item>
-          <!--          <el-form-item label="标识" prop="key">-->
-          <!--            <el-input v-model="tableData.param.key" placeholder="请输入设备标识" clearable style="width: 150px" @keyup.enter.native="typeList" />-->
-          <!--          </el-form-item>-->
-          <el-form-item label="所属产品" prop="productKey">
-            <el-select v-model="tableData.param.productKey" style="width: 120px" filterable clearable placeholder="选择产品">
-              <el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key" value-key="id"> </el-option>
-            </el-select>
-          </el-form-item>
+        <el-form :model="tableData.param" ref="queryRef" inline class="search-form">
+          <div class="search-conditions">
+            <el-form-item label="关键字" prop="keyWord">
+              <el-input v-model="tableData.param.keyWord" placeholder="输入名称或标识" clearable style="width: 200px" @keyup.enter.native="typeList" />
+            </el-form-item>
+            <!--          <el-form-item label="标识" prop="key">-->
+            <!--            <el-input v-model="tableData.param.key" placeholder="请输入设备标识" clearable style="width: 150px" @keyup.enter.native="typeList" />-->
+            <!--          </el-form-item>-->
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="tableData.param.status" placeholder="状态" clearable style="width: 80px">
+                <el-option label="在线" :value="2" />
+                <el-option label="离线" :value="1" />
+                <el-option label="未启用" :value="0" />
+              </el-select>
+            </el-form-item>
 
-          <el-form-item label="状态" prop="status">
-            <el-select v-model="tableData.param.status" placeholder="状态" clearable style="width: 80px">
-              <el-option label="在线" :value="2" />
-              <el-option label="离线" :value="1" />
-              <el-option label="未启用" :value="0" />
-            </el-select>
-          </el-form-item>
+            <template v-if="showMoreFilter">
+              <el-form-item label="所属产品" prop="productKey">
+                <el-select v-model="tableData.param.productKey" style="width: 120px" filterable clearable placeholder="选择产品">
+                  <el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key" value-key="id"> </el-option>
+                </el-select>
+              </el-form-item>
 
-          <el-form-item label="标签" prop="tags">
-            <el-select
-              v-model="tableData.param.tags"
-              multiple
-              filterable
-              allow-create
-              default-first-option
-              placeholder="请输入标签"
-              style="width: 150px"
-              clearable
-            >
-            </el-select>
-          </el-form-item>
+              <el-form-item label="设备类型" prop="deviceTypes">
+                <el-select v-model="tableData.param.deviceTypes" multiple style="width: 260px" clearable placeholder="设备类型">
+                  <el-option label="设备" value="设备" />
+                  <el-option label="网关" value="网关" />
+                  <el-option label="子设备" value="子设备" />
+                </el-select>
+              </el-form-item>
 
-          <!--          <el-form-item label="创建时间" prop="dateRange">-->
-          <!--            <el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>-->
-          <!--          </el-form-item>-->
-          <el-form-item>
-            <el-button type="primary" class="ml10" @click="typeList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <!-- <el-button @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button> -->
-            <el-button type="primary" class="ml10" @click="onOpenAddDic" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增
-            </el-button>
-            <el-button type="info" class="ml10" @click="onRowDel()" v-auth="'del'">
-              <el-icon>
-                <ele-Delete />
-              </el-icon>
-              删除
-            </el-button>
+              <el-form-item label="标签" prop="tags">
+                <el-select
+                  v-model="tableData.param.tags"
+                  multiple
+                  filterable
+                  allow-create
+                  default-first-option
+                  placeholder="请输入标签"
+                  style="width: 225px"
+                  clearable
+                >
+                </el-select>
+              </el-form-item>
 
-            <el-dropdown>
-              <el-button type="danger" class="ml10">
-                更多
-                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              <!--          <el-form-item label="创建时间" prop="dateRange">-->
+              <!--            <el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>-->
+              <!--          </el-form-item>-->
+            </template>
+          </div>
+
+          <div class="search-actions">
+            <el-form-item>
+              <el-button link type="primary" @click="showMoreFilter = !showMoreFilter">
+                {{ showMoreFilter ? '收起' : '更多筛选' }}
+                <el-icon class="el-icon--right">
+                  <component :is="showMoreFilter ? 'ArrowUp' : 'ArrowDown'" />
+                </el-icon>
+              </el-button>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" class="ml10" @click="typeList">
+                <el-icon>
+                  <ele-Search />
+                </el-icon>
+                查询
+              </el-button>
+              <!-- <el-button @click="resetQuery(queryRef)">
+                <el-icon>
+                  <ele-Refresh />
+                </el-icon>
+                重置
+              </el-button> -->
+              <el-button type="primary" class="ml10" @click="onOpenAddDic" v-auth="'add'">
+                <el-icon>
+                  <ele-FolderAdd />
+                </el-icon>
+                新增
+              </el-button>
+              <el-button type="info" class="ml10" @click="onRowDel()" v-auth="'del'">
+                <el-icon>
+                  <ele-Delete />
+                </el-icon>
+                删除
               </el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item>
-                    <el-button type="success" @click="setDeviceStatus1()">
-                      <el-icon>
-                        <ele-Open />
-                      </el-icon>
-                      批量启用
-                    </el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button type="warning" @click="setDeviceStatus0()">
-                      <el-icon>
-                        <ele-TurnOff />
-                      </el-icon>
-                      批量禁用
-                    </el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button @click="onOpenexcelDic('upload')">
-                      <el-icon>
-                        <ele-Upload />
-                      </el-icon>
-                      导入设备
-                    </el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button @click="onOpenexcelDic('down')">
-                      <el-icon>
-                        <ele-Download />
-                      </el-icon>
-                      导出设备
-                    </el-button>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-form-item>
+
+              <el-dropdown>
+                <el-button type="danger" class="ml10">
+                  更多
+                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button type="success" @click="setDeviceStatus1()">
+                        <el-icon>
+                          <ele-Open />
+                        </el-icon>
+                        批量启用
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button type="warning" @click="setDeviceStatus0()">
+                        <el-icon>
+                          <ele-TurnOff />
+                        </el-icon>
+                        批量禁用
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button @click="onOpenexcelDic('upload')">
+                        <el-icon>
+                          <ele-Upload />
+                        </el-icon>
+                        导入设备
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button @click="onOpenexcelDic('down')">
+                        <el-icon>
+                          <ele-Download />
+                        </el-icon>
+                        导出设备
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-form-item>
+          </div>
         </el-form>
       </div>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
@@ -157,7 +181,7 @@ import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
 import ExcelDic from './component/excel.vue';
 import api from '/@/api/device';
-import { ArrowDown } from '@element-plus/icons-vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -182,6 +206,7 @@ interface TableDataState {
       key: string;
       productKey: string;
       status: string;
+      deviceTypes: string[];
       tags: string[];
       dateRange: string[];
     };
@@ -190,7 +215,7 @@ interface TableDataState {
 
 export default defineComponent({
   name: 'deviceInstance',
-  components: { EditDic, ExcelDic, ArrowDown },
+  components: { EditDic, ExcelDic, ArrowDown, ArrowUp },
   setup() {
     const addDicRef = ref();
     const editDicRef = ref();
@@ -198,6 +223,7 @@ export default defineComponent({
     const detailRef = ref();
     const queryRef = ref();
     const batchLoading = ref(false);
+    const showMoreFilter = ref(false); // 控制是否显示更多筛选条件
     const route = useRoute();
     const state = reactive<TableDataState>({
       keys: [],
@@ -213,6 +239,7 @@ export default defineComponent({
           key: '',
           productKey: <string>route.query?.productKey || '',
           status: '',
+          deviceTypes: [],
           tags: [],
           dateRange: [],
         },
@@ -343,6 +370,7 @@ export default defineComponent({
       if (!formEl) return;
       formEl.resetFields();
       state.tableData.param.tags = []; // 确保标签也被重置
+      state.tableData.param.deviceTypes = []; // 确保设备类型也被重置
       typeList();
     };
     // 多选框选中数据
@@ -373,6 +401,7 @@ export default defineComponent({
       queryRef,
       onActionStatus,
       batchLoading,
+      showMoreFilter,
       setDeviceStatus1,
       setDeviceStatus0,
       onOpenDetail,
@@ -387,3 +416,24 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.search-form {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+
+  .search-conditions {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+
+  .search-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+}
+</style>