NN2022081301/public/agent/pages/system/config.html

<style>
    .layui-table-cell .layui-input {
        height: 26px !important;
        border-radius: 2px;
    }

    /* 表单标题加虚线 */
    .form-item-title {
        text-align: center;
        position: relative;
    }

    .form-item-title:before {
        content: "";
        position: absolute;
        border-top: 1px dashed #ccc;
        left: 40px;
        right: 40px;
        top: 8px;
        z-index: -1;
    }

    .form-item-title > span {
        background-color: white;
        padding: 0 10px;
        font-size: 13px;
        color: #666;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="selTabs">
                <ul class="layui-tab-title" id="showTabs"></ul>
            </div>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!--状态-->
<script type="text/html" id="tableStateTpl">
    {{# if (d.system != 1) { }}
    <input type="checkbox" name="status" value="{{ d.status }}" switch-data="{'url':'/system/config/{{ d.id }}','action':'put'}" lay-skin="switch" lay-filter="ckDataTableState"
           lay-text="正常|关闭" {{ d.status== 1 ? 'checked' : '' }} {{ d.system == 1 ? 'disabled' : '' }}">
    {{# } else { }}
    <span class="layui-badge layui-bg-black">系统配置</span>
    {{# } }}
</script>

<!-- 排序 -->
<script type="text/html" id="sortTpl">
    <input type="text" name="sort" focus-data="{'url':'system/config/{{ d.id }}','action':'put','param':{'sort': {{ d.sort }} }}" class="layui-input layui-table-input table-focus-input" onkeyup="value=value.replace(/[^\d]/g,'')"
           value="{{ d.sort }}" data-value="{{ d.sort }}">
</script>

<!-- 操作栏 -->
<script type="text/html" id="tableBarTpl">
    {{# if (d.system != 1) { }}
    <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>
    {{# } else { }}
    <a lay-bg="#666666" lay-tips="系统配置，禁止编辑" class="layui-btn layui-btn-xs layui-btn-primary layui-disabled">修改</a>
    <a lay-bg="#666666" lay-tips="系统配置，禁止删除" class="layui-btn layui-btn-xs layui-btn-primary layui-disabled">删除</a>
    {{# } }}
<!--    <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 type="text/html" id="toolBarTpl">
    <div class="layui-btn-group fl">
        <a class="layui-btn layui-btn-sm layui-icon layui-icon-add-circle-fine config-add-btn">&nbsp;添加</a>
        <a table-data="{'url':'system/config/plectron','action':'put',param:{'status': 1}}" class="layui-btn layui-btn-sm layui-icon layui-icon-play table-toolbar-btn">&nbsp;启用</a>
        <a table-data="{'url':'system/config/plectron','action':'put',param:{'status': 0}}" confirm class="layui-btn layui-btn-sm layui-icon layui-icon-pause table-toolbar-btn">&nbsp;禁用</a>
        <a table-data="{'url':'system/config/plectron','action':'delete'}" confirm class="layui-btn layui-btn-sm layui-icon layui-icon-close table-toolbar-btn">&nbsp;删除</a>
    </div>
</script>

<!-- 编辑框 -->
<script type="text/html" id="EDConfigModel">
    <form id="EDConfigModelForm" lay-filter="EDConfigModelForm" class="layui-form layui-row model-form">
        <input name="id" type="hidden"/>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item form-item-title"><span>基础配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置分类</label>
                    <div class="layui-input-block">
                        <select name="group"></select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置名称</label>
                    <div class="layui-input-block">
                        <input name="name" placeholder="请输入配置名称" type="text" class="layui-input" maxlength="100"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置标题</label>
                    <div class="layui-input-block">
                        <input name="title" placeholder="请输入配置标题" type="text" class="layui-input" maxlength="100"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>数据配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置类型</label>
                    <div class="layui-input-block">
                        <select name="type"></select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序值</label>
                    <div class="layui-input-block">
                        <input name="sort" placeholder="请输入排序值" value="0" type="number" class="layui-input" lay-verType="tips"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">系统配置</label>
                    <div class="layui-input-block">
                        <select name="system">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">前台显示</label>
                    <div class="layui-input-block">
                        <select name="web">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item form-item-title"><span>配置信息</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置值</label>
                    <div class="layui-input-block">
                        <textarea name="value" placeholder="请输入配置值" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>拓展配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置项</label>
                    <div class="layui-input-block">
                        <textarea name="options" placeholder="请输入配置项" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">配置提示</label>
                    <div class="layui-input-block">
                        <textarea name="tips" placeholder="请输入配置提示" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="EDConfigModelSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'element', 'laydate', 'admin', 'setter', 'notice', 'table', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var fileChoose = layui.fileChoose;
        var admin = layui.admin;
        var notice = layui.notice;
        var table = layui.table;
        var setter = layui.setter;

        // 配置组
        var setGroupArr = [];
        var route = setter.getCache('route'),
            setGroup = 'system';

        if(route){
            setGroup = route.config || 'system';
        }
        // 表格实例
        var insTb;

        // 加载站点配置
        admin.req('system/config', function (r) {
            if (r.code === 10000) {
                setGroupArr = r.data;
                // 渲染tabs
                $.each(r.data, (i, tab) => {
                    element.tabAdd('selTabs', {
                        title: tab.name, content: false, id: tab.policy
                    });
                });
                // 选中
                element.tabChange('selTabs', setGroup || 'system');
            } else {
                notice.msg(r.message, {icon: 2});
            }
        }, 'GET');


        // 监听选择
        element.on('tab(selTabs)', function (obj) {
            setGroup = this.getAttribute('lay-id');
            setter.putCache('route',{config: setGroup});
            //layer.load(2);
            // 加载配置 -- 渲染表格
             insTb = table.render({
                elem: '#dataTable',
                url: setter.baseServer + "system/config",
                where: {group:setGroup},
                page: true,
                loading: true,
                cellMinWidth: 100
                , text: {
                    none: '暂无相关数据'
                }
                , toolbar: '#toolBarTpl',
                defaultToolbar: ['filter'],
                cols: [[
                    {type: 'checkbox'}
                    , {field: 'name', title: '标识', width: 130}
                    , {field: 'title', title: '标题', width: 200}
                    , {field: 'type', title: '类型', width: 100}
                    , {field: 'sort', title: '排序', width: 80, templet: '#sortTpl'}
                    , {field: 'tips', title: '提示'}
                    , {field: 'status', title: '状态', width: 100, templet: '#tableStateTpl'}
                    , {title: '操作', width: 120, templet: '#tableBarTpl'}
                ]]
            });
        });

        // 工具条点击事件
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEDModel(data);
            } else if (layEvent === 'del') { // 删除
                notice.msg('禁止操作！',{icon:2})
            }
        });

        // 添加
        $(document).on('click', '.config-add-btn', function () {
            showEDModel();
        });

        /**
         * 展示窗口
         * @param data
         */
        function showEDModel(data) {
            admin.open({
                id: 'LAY_EDConfigModel',
                type: 1,
                area: '745px', //宽高
                title: (data ? '修改' : '添加') + '配置',
                content: $('#EDConfigModel').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 回显数据
                    form.val('EDConfigModelForm', data);

                    //TODO 配置类型渲染 -- 本地缓存
                    $.each(setter.getCache('config').develop.config_group, (i, item) => {
                        let selected = (setGroup == i) ? 'selected' : '';
                        $('select[name="group"]').append('<option value="' + i + '" ' + selected + '>[' +  i + ']'  + item + '</option>');
                    });
                    $.each(setter.getCache('config').develop.config_type, (i, item) => {
                        let selected = data ? data.type == i ? 'selected' : '' : '';
                        $('select[name="type"]').append('<option value="' + i + '" ' + selected + '>[' +  i + ']'  + item + '</option>');
                    });

                        // 局部刷新
                    form.render('select');

                    // 监听提交
                    form.on('submit(EDConfigModelSubmit)', function (form) {
                        //layer.load(2);
                        admin.req('system/config' + (data ? '/' + form.field.id : '') , form.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code === 10000) {
                                layer.close(dIndex);
                                //TODO 更新本地配置
                                setter.updateConfig();
                                notice.msg(res.message, {icon: 1});
                                insTb.reload({}, 'data');
                            } else {
                                notice.msg(res.message, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');

                        return false;
                    });
                }
            });
        }

    });
</script>