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

<style>
    .theme-colorful .layui-form-item .layui-input-block {
        margin-left: 140px;
    }
    #formBasic .layui-form-item {
        margin-bottom: 25px;
    }

    #formBasic label .layui-icon {
        font-size: 14px;
        color: #666;
    }

    .layui-form-label {
        width: 100px;
        text-align: left;
    }

    #upShowImg {
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #ccc;
        width: 100%;
        height: 100px;
        cursor: zoom-in;
        margin: 8px 0;
        background: #ccc;
    }
</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 class="layui-tab-content">
                    <form id="dataForm" lay-filter="dataForm" class="layui-form" style="max-width: 700px;">
                        <div id="selConfig"></div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-filter="formSubmitConfig" lay-submit>&emsp;提交&emsp;
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--渲染form-->
<script type="text/html" id="seldataForm">
    {{# layui.each(d, function(index, item){ }}
    <div class="layui-form-item">
        <label class="layui-form-label">{{item.title}}</label>
        <div class="layui-input-block">
            {{# switch(item.type) {
            case "date": }}
            <input type="text" class="layui-input layui-date" name="set[{{item.name}}]" value="{{item.value}}"
                   autocomplete="off" placeholder="请填写{{item.title}}" id="laydate-{{item.id}}" laydate-type="date">
            {{# case "select": }}
            <select name="set[{{item.name}}]">
                {{# layui.each(item.options, function(si, st){ }}
                <option value="{{si}}" {{si== item.value ?
                'selected':''}}>{{st}}</option>
                {{# }) }}
            </select>
            {{# break; }}
            {{# case "editor": }}
            <textarea name="set[{{item.name}}]" id="{{item.name}}">{{item.value}}</textarea>
            {{# break; }}
            {{# case "image": }}
            <input id="upInput" type="text" name="set[{{item.name}}]" value="{{item.value}}"
                   class="layui-input layui-disabled" style="padding-right: 80px;" disabled>
            <button id="btnDialogFileChoose" type="button" style="position: absolute;top: 0;right: 0px;cursor: pointer;"
                    class="layui-btn icon-btn">
                <i class="layui-icon">&#xe61d;</i>上传图片
            </button>
            <img id="upShowImg" class="input-img-preview"
                 src="{{item.value || '../../assets/images/placeholder-refund.png'}}" style="display:inline-block;"
                 width="36" height="36">
            {{# break; }}
            {{# case "switch": }}
            <input lay-filter="cSwitch" type="checkbox" name="set[{{item.name}}]" value="{{item.value}}"
                   lay-skin="switch" lay-text="{{item.options[1]}}|{{item.options[0]}}" {{item.value==1?'checked':''}}>
            {{# break; }}
            {{# case "radio": }}
            {{# layui.each(item.options, function(si, st){ }}
            <input type="radio" name="set[{{item.name}}]" value="{{si}}" title="{{st}}" {{si== item.value ?
            'checked':''}}>
            {{# }) }}
            {{# break; }}
            {{# case "textarea":
            case "array": }}
            <!--多行文本-->
            <textarea rows="6" class="layui-textarea" name="set[{{item.name}}]" autocomplete="off"
                      placeholder="请填写{{item.title}}">{{item.value}}</textarea>
            {{# break;
            default: }}
            <input type="text" class="layui-input" name="set[{{item.name}}]" value="{{item.value}}" autocomplete="off"
                   placeholder="请填写{{item.title}}">
            {{# break;
            } }}
            <div style="font-size: 13px;display: block; padding: 9px 0!important; line-height: 20px; margin-right: 10px;" class="layui-word-aux">{{ item.tips }}</div>
        </div>
    </div>
    {{# }) }}
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'element', 'laydate', 'admin', 'setter', 'laytpl', 'notice', 'layedit', 'fileChoose', 'CKEDITOR'], 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 laytpl = layui.laytpl;
        var notice = layui.notice;
        var setter = layui.setter;
        var layedit = layui.layedit;
        var CKEDITOR = layui.CKEDITOR;

        var route = setter.getCache('route'),
            setGroup = 'system';

        if(route){
            setGroup = route.setting || 'system';
        }
        // 加载站点配置
        layer.load(2);
        admin.req('system/setting', function (r) {
            layer.closeAll('loading');
            if (r.code === 10000) {
                // 渲染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');

        var editorArr = [];

        // 监听选择
        element.on('tab(selTabs)', function (obj) {
            var group = this.getAttribute('lay-id');
            // 写入缓存
            setter.putCache('route',{setting: group});
            layer.load(2);
            // 加载配置
            admin.req('system/setting', {group}, function (r) {
                layer.closeAll('loading');
                if (r.code === 10000) {
                    //渲染表单 seldataForm
                    laytpl(seldataForm.innerHTML).render(r.data, function (html) {
                        $('#selConfig').html(html);
                        element.render('tab');
                    });
                    
                    form.render();
                    $.each(r.data,(i,v) => {
                        // 是编辑器
                        if(v.type == "editor"){
                            var editor = CKEDITOR.replace(v.name, {
                                height: 320,
                                language: 'zh-cn', //简体中文
                                toolbar : [
                                    //加粗     斜体，     下划线      穿过线      下标字        上标字
                                    ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
                                    // 数字列表          实体列表            减小缩进    增大缩进
                                    ['NumberedList','BulletedList','-','Outdent','Indent'],
                                    //左对 齐             居中对齐          右对齐          两端对齐
                                    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                                    //超链接  取消超链接 锚点
                                    ['Link','Unlink','Anchor'],
                                    '/',
                                    // 样式       格式      字体    字体大小
                                    ['Styles','Format','Font','FontSize'],
                                    //文本颜色     背景颜色
                                    ['TextColor','BGColor'],
                                ]
                            });
                            CKEDITOR.instances.pageCkEditor;
                            editorArr.push(editor);
                        }
                    })
                }
            });
        });

        // 监听提交
        form.on('submit(formSubmitConfig)', function (data) {
            layer.load(2);
            // 富文本内容
            if(editorArr.length > 0){
                $.each(editorArr,(i, e) => {
                  data.field['set[' + e.name + ']'] = e.getData()
                })
            }
            
            admin.req('system/setting/' + setGroup, data.field, function (res) {
                layer.closeAll('loading');
                if (res.code === 10000) {
                    notice.msg(res.message, {icon: 1});
                    form.render();
                } else {
                    notice.msg(res.message, {icon: 2});
                }
            }, 'PUT');
            return false;
        });

    });
</script>