YwxAppThink/addon/iot/view/backend/admin/rule.html

<div class="layui-container">
    <div class="admin-title">转发规则（规则引擎 / 桥接到 EMQX）</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        匹配"源主题过滤器"的消息，将被转发到外部 MQTT Broker（如 EMQX）。目标主题支持
        <code>${topic}</code> 变量（沿用原主题）。规则最多 30s 后在 Broker 生效。
        转发依赖 <code>workerman/mqtt</code> 客户端，未安装时自动跳过。
    </div>
    <div style="margin-bottom:10px;">
        <button class="layui-btn layui-btn-sm" onclick="editRule()">+ 新增规则</button>
    </div>
    <table id="ruleTable" lay-filter="ruleTable"></table>
</div>

<!-- 行操作按钮模板 -->
<script type="text/html" id="barRule">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script>
layui.use(['layer', 'jquery', 'form', 'table', 'http', 'ywxapp'], function(){
    var http = layui.http;
    var $ = layui.jquery, layer = layui.layer, table = layui.table;
    function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
    function reload(){ table.reload('ruleTable'); }
    function ok(res, then){ if(res.code===0){ then(); } else { layer.msg(res.message||'操作失败'); } }

    // ================= 表格 =================
    table.render({
        elem: '#ruleTable',
        url: '/iot/backend/ruleTable',
        page: true,
        limit: 20,
        limits: [10, 20, 50, 100],
        parseData: function (res) {
            return {
                code: res.code,
                msg: res.message || res.msg || '',
                count: (res.data && res.data.count) || 0,
                data: (res.data && res.data.list) || []
            };
        },
        cols: [[
            { field: 'name', title: '名称', minWidth: 130 },
            { field: 'source_filter', title: '源主题过滤器', minWidth: 150 },
            { field: 'target_broker', title: '目标Broker', minWidth: 170 },
            { field: 'target_topic', title: '目标主题', minWidth: 140, templet: function (d) {
                    return d.target_topic ? esc(d.target_topic) : '${topic}';
                } },
            { field: 'target_qos', title: 'QoS', width: 60, align: 'center' },
            { field: 'enabled', title: '状态', width: 90, align: 'center', templet: function (d) {
                    return d.enabled ? '<span class="layui-badge layui-bg-green">启用</span>' : '<span class="layui-badge">停用</span>';
                } },
            { title: '操作', width: 150, align: 'center', toolbar: '#barRule' }
        ]]
    });

    table.on('tool(ruleTable)', function (obj) {
        if (obj.event === 'edit') { editRule(obj.data); }
        else if (obj.event === 'del') { delRule(obj.data.id); }
    });

    // ================= 新增 / 编辑 =================
    window.editRule = function(row){
        row = row || {};
        var sel = function(name, val, opts){
            var s = '<select name="'+name+'">';
            opts.forEach(function(o){ s += '<option value="'+o[0]+'" '+(String(val)==String(o[0])?'selected':'')+'>'+o[1]+'</option>'; });
            return s + '</select>';
        };
        var html = '<form class="layui-form" style="padding:20px;" lay-filter="ruleForm">'
          + '<input type="hidden" name="id" value="'+(row.id||'')+'">'
          + '<div class="layui-form-item"><label class="layui-form-label">规则名称</label><div class="layui-input-inline"><input name="name" class="layui-input" value="'+esc(row.name)+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">源主题过滤器</label><div class="layui-input-inline"><input name="source_filter" class="layui-input" value="'+esc(row.source_filter)+'" placeholder="如 sensor/+/temp"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标类型</label><div class="layui-input-inline">'+sel('target_type', row.target_type||'mqtt', [['mqtt','MQTT Broker']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标Broker</label><div class="layui-input-inline"><input name="target_broker" class="layui-input" value="'+esc(row.target_broker)+'" placeholder="host:port，如 192.168.1.10:1883"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标主题</label><div class="layui-input-inline"><input name="target_topic" class="layui-input" value="'+esc(row.target_topic)+'" placeholder="${topic} 表示沿用原主题"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标QoS</label><div class="layui-input-inline">'+sel('target_qos', (row.target_qos===undefined?0:row.target_qos), [[0,'0'],[1,'1'],[2,'2']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">ClientID</label><div class="layui-input-inline"><input name="target_clientid" class="layui-input" value="'+esc(row.target_clientid)+'" placeholder="可选"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input name="target_username" class="layui-input" value="'+esc(row.target_username)+'" placeholder="可选"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input name="target_password" type="password" class="layui-input" value="'+esc(row.target_password)+'" placeholder="可选"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-inline">'+sel('enabled', (row.enabled===undefined?1:row.enabled), [[1,'启用'],[0,'停用']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-inline"><input name="remark" class="layui-input" value="'+esc(row.remark)+'"></div></div>'
          + '</form>';
        layer.open({type:1, title:(row.id?'编辑':'新增')+'转发规则', area:['560px','auto'], content:html, btn:['保存','取消'],
            success:function(){ layui.form.render(); },
            yes:function(idx){
                var data = {};
                $('[lay-filter=ruleForm]').serializeArray().forEach(function(i){ data[i.name]=i.value; });
                http.post('/iot/backend/saveRule', data).then(function(res){
                    layer.msg(res.message||res.msg||'ok');
                    ok(res, function(){ layer.close(idx); setTimeout(reload, 600); });
                });
            }
        });
    };

    // ================= 删除 =================
    window.delRule = function(id){
        layer.confirm('确认删除该规则？', function(idx){
            http.post('/iot/backend/deleteRule', {id:id}).then(function(res){
                layer.msg(res.message||'已删除');
                setTimeout(reload, 600);
            });
            layer.close(idx);
        });
    };
});
</script>