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

{extend name="layout"}

<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>
    <button class="layui-btn layui-btn-sm" onclick="editRule()">+ 新增规则</button>
    <table class="layui-table" style="margin-top:10px;">
        <thead>
            <tr><th>名称</th><th>源主题过滤器</th><th>目标Broker</th><th>目标主题</th><th>QoS</th><th>状态</th><th>操作</th></tr>
        </thead>
        <tbody>
            {foreach $list as $r}
            <tr>
                <td>{$r.name}</td>
                <td>{$r.source_filter}</td>
                <td>{$r.target_broker}</td>
                <td>{if !empty($r.target_topic)}{$r.target_topic}{else/}${topic}{/if}</td>
                <td>{$r.target_qos}</td>
                <td>{if $r.enabled}<span class="layui-badge layui-bg-green">启用</span>{else}<span class="layui-badge">停用</span>{/if}</td>
                <td>
                    <a class="layui-btn layui-btn-xs" onclick='editRule({$r|json_encode})'>编辑</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" onclick="delRule({$r.id})">删除</a>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    {$list|raw}
</div>

<script>
layui.use(['layer', 'jquery'], function(){
    var $ = layui.jquery, layer = layui.layer;
    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]+'" '+(val==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="'+(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="'+(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="'+(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="'+(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="'+(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="'+(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="'+(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="'+(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; });
                $.post('/mqttbroker/backend/saveRule', data, function(res){
                    layer.msg(res.message||res.msg||'ok');
                    layer.close(idx); setTimeout(function(){location.reload();},600);
                });
            }
        });
    };
    window.delRule = function(id){
        layer.confirm('确认删除该规则？', function(idx){
            $.post('/mqttbroker/backend/deleteRule', {id:id}, function(res){ layer.msg(res.message||'已删除'); setTimeout(function(){location.reload();},600); });
            layer.close(idx);
        });
    };
});
</script>