feat:优化远规则引擎列表页面。

src/views/iot/rule-engine/index.vue

@@ -2,6 +2,34 @@
   <div class="page">
     <el-card shadow="nover">
       <el-form inline>
+        <el-form-item label="名称">
+          <el-input v-model="searchParams.keyWord" placeholder="请输入关键字" clearable @keyup.enter="handleSearch" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="searchParams.types" placeholder="请选择类型" clearable @clear="() => searchParams.types = -1" @change="handleSearch">
+            <el-option label="主链" :value="1" />
+            <el-option label="子链" :value="2" />
+            <el-option label="全部" :value="-1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchParams.status" placeholder="请选择状态" clearable @clear="() => searchParams.status = -1" @change="handleSearch">
+            <el-option label="已启动" :value="1" />
+            <el-option label="已停止" :value="0" />
+            <el-option label="全部" :value="-1" />
+
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <el-icon><ele-Search /></el-icon>
+            搜索
+          </el-button>
+          <!-- <el-button @click="handleReset">
+            <el-icon><ele-Refresh /></el-icon>
+            重置
+          </el-button> -->
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" v-auth="'add'" @click="addOrEdit()">
             <el-icon>
@@ -14,24 +42,24 @@
       <el-table :data="tableData" style="width: 100%" v-loading="loading">
         <el-table-column type="index" label="序号" width="80" align="center" />
         <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="types" label="规则链类型" width="110" align="center">
+        <el-table-column prop="types" label="类型" width="110" align="center">
           <template #default="scope">
-            <el-tag type="primary" size="small" v-if="scope.row.types == 1">根规则链</el-tag>
-            <el-tag type="success" size="small" v-else>子规则链</el-tag>
+            <el-tag type="primary" size="small" v-if="scope.row.types == 1">主链</el-tag>
+            <el-tag type="success" size="small" v-else>子链</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="expound" label="说明" show-overflow-tooltip></el-table-column>
         <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
-        <!-- <el-table-column prop="status" label="状态" width="100" align="center">
+        <el-table-column prop="status" label="状态" width="100" align="center">
           <template #default="scope">
             <el-tag type="success" size="small" v-if="scope.row.status == 1">已启动</el-tag>
             <el-tag type="info" size="small" v-else>已停止</el-tag>
           </template>
-        </el-table-column> -->
+        </el-table-column>
         <el-table-column label="操作" width="200" align="center">
           <template #default="scope">
-            <!-- <el-button size="small" text type="info" v-auth="'startOrStop'" v-if="scope.row.status" @click="setStatus(scope.row, 0)">停止</el-button>
-            <el-button size="small" text type="primary" v-auth="'startOrStop'" v-else @click="setStatus(scope.row, 1)">启动</el-button> -->
+            <el-button size="small" text type="info" v-auth="'startOrStop'" v-if="scope.row.status" @click="setStatus(scope.row, 0)">停止</el-button>
+            <el-button size="small" text type="primary" v-auth="'startOrStop'" v-else @click="setStatus(scope.row, 1)">启动</el-button>
             <el-button size="small" text type="primary" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
             <el-button size="small" text type="warning" @click="edit(scope.row)">规则编辑</el-button>
             <el-button size="small" text type="info" v-auth="'del'" @click="onDel(scope.row)">删除</el-button>
@@ -45,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue";
 import api from "/@/api/rule";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { useSearch } from "/@/hooks/useCommon";
@@ -58,7 +86,31 @@ const editFormRef = ref();
 // 规则引擎模式 node-red、 sagoo-rule
 const model: "node-red" | "sagoo-rule" = import.meta.env.VITE_RULE_MODEL;
 
-const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, "Data", { types: null, status: null });
+const searchParams = reactive({
+  keyWord: '',
+  types: -1,
+  status: -1
+});
+
+// 监听搜索参数变化，确保在API请求中正确传递搜索条件
+watch(searchParams, (newVal) => {
+  // 处理搜索参数的值
+  for (const key in newVal) {
+    if (newVal[key] === '' || newVal[key] === null) {
+      // 如果是类型或状态字段，在清除时设置为-1（全部）
+      if (key === 'types' || key === 'status') {
+        params[key] = -1;
+        searchParams[key] = -1; // 同步更新searchParams
+      } else {
+        delete params[key];
+      }
+    } else {
+      params[key] = newVal[key];
+    }
+  }
+}, { deep: true });
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, "Data", searchParams);
 
 const headers = {
   Authorization: "Bearer " + getToken(),
@@ -68,6 +120,22 @@ const flowsUrl = window.location.origin + "/rule-engine/flows";
 
 getList();
 
+// 搜索
+const handleSearch = () => {
+  getList(1);
+};
+
+// 重置功能已在模板中被注释掉
+// 如果需要重新启用重置功能，请取消注释并使用以下代码：
+/*
+const handleReset = () => {
+  searchParams.keyWord = '';
+  searchParams.types = -1;
+  searchParams.status = -1;
+  getList(1);
+};
+*/
+
 const addOrEdit = async (row?: any) => {
   if (row) {
     editFormRef.value.open(row);