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

<template>
  <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>
              <ele-FolderAdd />
            </el-icon>
            新增规则编排
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="types" label="类型" width="70" 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>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip></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">
          <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 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="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>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
      <EditForm :model="model" ref="editFormRef" @getList="getList(1)"></EditForm>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import api from "/@/api/rule";
import { ElMessageBox, ElMessage } from "element-plus";
import { useSearch } from "/@/hooks/useCommon";
import EditForm from "./edit.vue";
import axios from "axios";
import { getToken } from "/@/utils/auth";

const editFormRef = ref();

// 规则引擎模式 node-red、 sagoo-rule
const model: "node-red" | "sagoo-rule" = import.meta.env.VITE_RULE_MODEL;

const searchParams = reactive({
  keyWord: '',
  types: -1,
  status: -1
});

// 监听搜索参数变化，确保在API请求中正确传递搜索条件
watch(searchParams, (newVal: any) => {
  // 处理搜索参数的值
  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(),
};

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);
    return;
  } else {
    editFormRef.value.open();
  }
};

const setStatus = async (row: any, status: number) => {
  if (model === "sagoo-rule") {
    axios
      .get(`${import.meta.env.VITE_RULE_SERVER_URL}/api/v1/rule/${row.flowId}/${status ? "enable" : "stop"}`, { headers })
      .then(() => {
        api
          .setStatus(row.id, status)
          .then(() => {
            ElMessage.success("操作成功");
            getList();
          })
          .catch(() => {
            ElMessage.error("操作失败");
          });
      })
      .catch(() => {
        ElMessage.error("操作失败");
      });
  } else {
    // 找到所有规则
    const { data: flows } = await axios.get(flowsUrl, { headers });

    const flow = flows.find((item: any) => item.id === row.flowId);

    if (!flow) {
      ElMessage.error("规则不存在");
      return;
    }

    // 改变指定规则状态
    flow.disabled = status ? false : true;
    // 设置规则状态
    await axios.post(flowsUrl, flows, { headers });
    api
      .setStatus(row.id, status)
      .then(() => {
        ElMessage.success("操作成功");
        getList();
      })
      .catch(() => {
        ElMessage.error("操作失败");
      });
  }
};

const edit = async (row: any) => {
  if (model == "sagoo-rule") {
    localStorage.setItem("auth-tokens", `{"access_token":"${getToken()}"}`);
    const url = "/plugin/rule/index.html#" + row.flowId;
    window.open(url);
  } else if (model == "node-red") {
    localStorage.setItem("auth-tokens", `{"access_token":"${getToken()}"}`);
    const url = "/rule-engine/#flow/" + row.flowId;
    window.open(url);
  }
};

const onDel = (row: any) => {
  ElMessageBox.confirm(`此操作将删除：“${row.name}”，是否继续?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    if (model == "sagoo-rule") {
      await axios.delete(import.meta.env.VITE_RULE_SERVER_URL + "/api/v1/rules/" + row.flowId, { headers }).catch(() => {
        ElMessage.error("规则不存在");
      });
    } else if (model == "node-red") {
      // 找到所有规则
      const { data: flows } = await axios.get(flowsUrl, { headers });

      const flowIndex = flows.findIndex((item: any) => item.id === row.flowId);

      if (flowIndex >= 0) {
        // 删除指定规则
        flows.splice(flowIndex, 1);

        // 删除当前规则下的各个节点信息
        const newFlows = flows.filter((item: any) => {
          if (item.z === row.flowId) {
            return false;
          } else {
            return true;
          }
        });

        // 设置规则状态
        await axios.post(flowsUrl, newFlows, { headers });
      }
    }

    await api.del([row.id as string]);
    ElMessage.success("删除成功");
    getList();
  });
};
</script>