Переглянути джерело

feat:优化页面中的搜索

microrain 5 місяців тому
батько
коміт
362391c93a

+ 1 - 1
src/views/iot/configuration/list/index.vue

@@ -3,7 +3,7 @@
     <el-card shadow="nover">
       <div class="search">
         <el-form inline>
-          <el-form-item>
+          <el-form-item label="关键字">
             <el-input v-model="params.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入搜索关键字" @keyup.enter.native="getList(1)" clearable>
             </el-input>
             <el-button type="primary" class="ml10" @click="getList(1)">

+ 32 - 2
src/views/iot/configuration/screen/index.vue

@@ -3,6 +3,15 @@
     <el-card shadow="nover">
       <div class="search">
         <el-form inline>
+          <el-form-item label="关键字">
+            <el-input v-model="searchParams.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入关键字" clearable @keyup.enter="handleSearch" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">
+              <el-icon><ele-Search /></el-icon>
+              搜索
+            </el-button>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" v-auth="'add'" @click="addOrEdit()">
               <el-icon>
@@ -36,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import api from '/@/api/screen';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
@@ -44,10 +53,31 @@ import EditForm from './edit.vue';
 
 const editFormRef = ref();
 
-const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { name: '', address: '' });
+const searchParams = reactive({
+  keyWord: ''
+});
+
+// 监听搜索参数变化,确保在API请求中正确传递搜索条件
+watch(searchParams, (newVal) => {
+  // 处理搜索参数的值
+  for (const key in newVal) {
+    if (newVal[key] === '' || newVal[key] === null) {
+      delete params[key];
+    } else {
+      params[key] = newVal[key];
+    }
+  }
+}, { deep: true });
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', searchParams);
 
 getList();
 
+// 搜索
+const handleSearch = () => {
+  getList(1);
+};
+
 const addOrEdit = async (row?: any) => {
   if (row) {
     editFormRef.value.open(row);

+ 1 - 1
src/views/iot/device/instance/index.vue

@@ -3,7 +3,7 @@
     <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="name">
+          <el-form-item label="关键字" prop="name">
             <el-input v-model="tableData.param.name" placeholder="输入名称或标识" clearable style="width: 150px" @keyup.enter.native="typeList" />
           </el-form-item>
           <!--          <el-form-item label="标识" prop="key">-->

+ 1 - 1
src/views/iot/device/product/index.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <el-card shadow="nover">
       <el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
-        <el-form-item label="名称" prop="name">
+        <el-form-item label="关键字" prop="name">
           <el-input v-model="tableData.param.name" placeholder="输入名称或标识" clearable style="width: 150px" @keyup.enter.native="typeList" />
         </el-form-item>
         <el-form-item label="类型" prop="deviceType" style="width: 180px">