mtb_dcatadmin_plus/resources/views/admin/pages-custom/ace.blade.php

<style>

    .content-header {
        display: none;
    }
    .left-panel {
        background-color: #fff; /* 左侧面板的背景色 */
        height: 100vh; /* 高度占满 */

    }
    .main-panel {
        background-color: #e9ecef; /* 右侧面板的背景色 */
        height: 95.8vh; /* 高度占满 */
    }
    .main-panel-header {
        background-color: #1e1e1e;
        padding: 5px;
    }
    .main-card-body {
        max-height: 75vh; /* 设置最大高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
        overflow-x: hidden; /* 隐藏水平滚动条 */
        border-radius: 1px; /* 圆角 */
    }
    .main-card-body ul li {
        white-space: nowrap;
        padding: 0px;
    }
    #editor {

        background-color: #1e1e1e;
    }
    .modal-body {
        background-color: #e9ecef;
    }
    .submenu {
        list-style: none;
        padding-left: 3px;
    }
    .list-group-flush .float-right {
        padding-right: 5px;
    }
    .list-group-flush .icon-x {
        color:#cdcdcd;font-size: 10px
    }
    .submenu .list-group-item {
        padding: 10px 0px 10px 20px;
    }
    .submenu .list-group-item:hover {
        background-color: rgba(221, 251, 239, 0.56);
    }
    .submenu .list-group-item.active {
        background-color: rgba(221, 251, 239, 0.56);
        border-color:#fff;
        color: #414750;
    }
    .custom-blue-bold {
        color: #1e1e1e; /* Bootstrap 的 primary 颜色 */
        font-weight: bold;
    }
    .modal-xxl {
        max-width: 75%; /* 或其他所需的宽度 */
    }

    .field_dist_id {
        max-height: 30px;
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
    }

    .field_dist_id .form-control {
        height: 17px; /* 设置高度为 17px */
        overflow: hidden; /* 隐藏超出部分 */
        display: flex; /* 使用 flexbox 布局 */
        align-items: center; /* 垂直居中对齐 */
    }

    .field_dist_id .option {
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        display: flex; /* 使用 flexbox 布局 */
        align-items: center; /* 垂直居中对齐 */
    }

    .field_dist_id .pull-right {
        margin-left: auto; /* 将删除按钮推到右侧 */
    }


    #addFileModal .modal-body {
        display: flex;
        align-items: center;
        height: 100px; /* 可根据需要调整高度 */
        background-color: #ffffff;
    }
    #addFileModal .modal-body div {
        display: flex;
        align-items: center;
    }
    #addFileModal .modal-body .text-right {
        padding-left: 5px;
        padding-right: 5px;
    }
    #addFileModal .modal-sm {
        max-width:320px;
    }

    #addFileModal .modal-dialog {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-40%, -50%);
    }
    #addFileButton {
        margin-right: 5px;
    }
    .btn-warning.disabled, .btn-warning:disabled {
        color: #ffffff;
    }
    .modal-body {
        background-color: #ffffff;
    }
    .selected-row {
        background-color: rgba(221, 251, 239, 0.56);
    }
    #templateLogTable {
        max-height: 550px; /* 最大高度 */
        overflow-y: auto; /* 垂直方向滚动 */
        display: block; /* 表格需要设置为块级元素以支持滚动 */
    }
    #templateLogTableBody {
        display: block; /* 表格需要设置为块级元素以支持滚动 */
        width: 100%;
    }
    #templateLogTableBody tr {
        display: block; /* 表格需要设置为块级元素以支持滚动 */
        width: 100%;
    }
    #templateLogTableBody tr td{
        display: block; /* 表格需要设置为块级元素以支持滚动 */
        width: 90%;
    }

</style>
</style>

<div class="container-fluid" style="padding: 0px;">
    <div class="row">
        <div class="col-2 left-panel"> <!-- 左侧20% -->
            {!!$leftForm!!}
            <!-- 代码树 start-->
            <div class="main-card-body"></div>
            <!-- 代码树 end-->
        </div>
        <div class="col-10 main-panel" style="padding-right: 0px;"> <!-- 右侧80% -->
            <div class="main-panel-header">
                <button type="button" class="btn btn-info btn-sm" id="save-btn" disabled>Save</button>
                <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" id="variable-btn" data-target="#iframeModal" disabled>Variable</button>
                <button type="button" class="btn btn-success btn-sm" id="publish-btn" disabled>Publish</button>

                <button type="button" class="btn btn-info btn-sm float-right" id="history-btn"  disabled>History</button>
            </div>
            <div class="main-panel-content" id="editor" style="width: 100%; height: 100%;"></div>
            <input type="hidden" name="template_id"  id="template_id" />
        </div>
    </div>
</div>

<!-- 变量管理弹窗 -->
<div class="modal fade" id="iframeModal" tabindex="-1" aria-labelledby="iframeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iframeModalLabel">Variable Management</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe src="/prime-control/dist-template-var" width="100%" height="750px" frameborder="0" style="max-width: 100%;overflow: hidden"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->


<!-- Modal -->
<div class="modal fade" id="addFileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-2 text-right">
                        File Name:
                    </div>
                    <div class="col-xs-8">
                        <input type="hidden" class="form-control" id="file_path_name" name="file_path_name">
                        <input type="text" class="form-control" id="file_name_input" name="file_name_input">
                    </div>
                    <div class="col-xs-2">
                        <button type="button" class="btn btn-success" id="addFileButton">OK</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap Modal -->
<div class="modal fade" id="templateLogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Template Logs</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="height: 600px;">
                <div class="row" style="height: 100%;">
                    <!-- 左侧显示 Previous Content -->
                    <div class="col-md-8">
                        <h5>Content</h5>
                        <textarea id="contentDetails" style="height: 550px; overflow-y: auto; border: 1px solid #ededed; padding: 10px;width: 100%;"></textarea>
                    </div>
                    <!-- 右侧显示 Version 和 Created At 列表 -->
                    <div class="col-md-4">
                        <h5>Version</h5>
                        <table class="table table-condensed table-hover" id="templateLogTable">
                            <tbody id="templateLogTableBody">
                            <!-- 动态生成的列表 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="templateLogId" name="templateLogId"/>
                <input type="hidden" id="templateVersion" name="templateVersion"/>
                <button type="button" class="btn btn-success" id="restoreTemplateLog">Restore Version</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<script src="/vendor/ace/ace.js" type="text/javascript"></script>
<script>
    //https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js
    // 创建 Ace 编辑器实例
    var editor = ace.edit("editor");
    // 设置语言
    editor.getSession().setMode("ace/mode/html");
    // 设置主题
    editor.setTheme("ace/theme/monokai");
    editor.setAutoScrollEditorIntoView(true);
    // 其他配置
    editor.setOptions({
        showPrintMargin: true // 不显示打印边距
    });

    $(document).ready(function() {
        var loadingIndex = '';
        var fileId = '';
        var changeButtonDisabled = function (status) {
            $('#save-btn').prop('disabled', status);
            $('#variable-btn').prop('disabled', status);
            $('#publish-btn').prop('disabled', status);
            $('#history-btn').prop('disabled', status);
        }

        var changeIframeUrl = function() {
            appearance_id = $('select[name="appearance_id"]').val();
            dist_id = $('input[name="dist_id"]').val();
            var iframeUrl = '/prime-control/dist-template-var?templateCode=' + fileId + '&appearanceId=' + appearance_id+'&distId=' + dist_id;
            $('#iframeModal iframe').attr('src', iframeUrl);
        }
        //点击代码树后中间的Ace编辑器,内容展示
        var actionclick = function() {
            $('.file-action').click(function() {
                //去掉上一个文件的加粗
                $('.active').removeClass('active');
                //加粗
                var $li = $(this).closest('li');
                $li.addClass('active');

                //去掉保存与变量管理按钮的disabled
                changeButtonDisabled(false);
                //加载编辑代码
                loadingIndex = layer.load(1, {
                    shade: [0.5, '#000'] // 设置遮罩层
                });
                var appearance_id = $('select[name="appearance_id"]').val();
                var dist_id = $('input[name="dist_id"]').val();
                fileId = $(this).attr('file_id');
                //得到文件名
                fileName = $(this).html();
                if (fileName.endsWith('.css')) {
                    editor.getSession().setMode("ace/mode/css");
                } else if (fileName.endsWith('.js')) {
                    editor.getSession().setMode("ace/mode/javascript");
                }else {
                    editor.getSession().setMode("ace/mode/html");
                }
                //改变iframe的url
                changeIframeUrl();
                //编辑代码
                $.ajax({
                    url: '/prime-control/dist-template/ace',
                    type: 'POST',
                    data: {
                        act:'content',
                        appearance_id: appearance_id,
                        dist_id: dist_id,
                        id: fileId
                    },
                    success: function(response) {
                        $("#template_id").val(fileId);
                        editor.setValue(response);
                        layer.close(loadingIndex);
                    }
                });

            });
        }
        // 加载代码树
        var postData = function () {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();
            //改变iframe的url
            changeIframeUrl();
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'tree',
                    appearance_id: appearance_id,
                    dist_id: dist_id
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    $('.main-card-body').html(response);
                    actionclick();
                    delFileButtonClick();
                }
            });
        }
        //左边外观选择与分销商选择联动
        $('select[name="appearance_id"]').change(function() {
            //console.log('-------2-----')
            if ($(this).val() == '') {
                changeButtonDisabled(true);
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            //请空编辑器内容
            editor.setValue('');
            //请空代码树
            $('.main-card-body').html('');
            //显示代码树
            postData();
        });
        //分销商选择
        $('input[name="dist_id"]').change(function() {
            //console.log('-------0-----')
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            //请空编辑器内容
            editor.setValue('');
            //请空代码树
            $('.main-card-body').html('');
            dist_id = $(this).val();

            //在分销商名字前加上分销商id
            setTimeout(function() {
                $("div[name='dist_id'] .option").prepend(dist_id+" - ");
            }, 100); // 延迟2000毫秒（即2秒）


            //改变appearance_id
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'get_appearance_id',
                    dist_id: dist_id,
                },
                success: function(response) {
                    //console.log('-------1-----')
                    // 更改选中的值
                    var $select = $('select[name="appearance_id"]');
                    $select.select2('val', response);

                    //显示代码树
                   // postData();
                }
            });

        });
        // 模版编辑保存
        $("#save-btn").click(function() {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();
            var template_id = $("#template_id").val();
            var content = editor.getValue();
            if (template_id == '') {
                Dcat.error('操作失败:请先选择模板');
                return false;
            }
            if (appearance_id == '') {
                Dcat.error('操作失败:请先选择主题');
                return false;
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'content_save',
                    template_code: template_id,
                    appearance_id: appearance_id,
                    dist_id: dist_id,
                    content: content
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    if (response == '1') {
                        Dcat.success('保存成功');
                    }else{
                        Dcat.error('保存失败');
                    }
                }
            });
        })


        // 模版发布
        $("#publish-btn").click(function() {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();

            if (appearance_id == '') {
                Dcat.error('操作失败:请先选择主题');
                return false;
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'publish',
                    appearance_id: appearance_id,
                    dist_id: dist_id
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    Dcat.success('保存成功');
                }
            });
        })

        //文件新增
        $('#addFileModal').on('show.bs.modal', function (event) {
            // 获取触发模态框的元素
            var button = $(event.relatedTarget);
            // 获取 file_path_name 的值
            var filePathName = button.attr('file_path_name');
            $('#file_path_name').val(filePathName);
        });

        var ajaxAddDelFile = function (appearance_id,dist_id,fileId,filePathName,fileInputName,type) {
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'add_del_tree',
                    type: type,
                    appearance_id: appearance_id,
                    dist_id: dist_id,
                    file_path_name: filePathName,
                    file_name_input: fileInputName,
                    file_id: fileId
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    $("#file_name_input").val('')
                    if (response.status == '1') {
                        Dcat.success('保存成功');
                        //刷新代码树
                        postData();
                    }else{
                        Dcat.error(response.msg);
                    }
                }
            });
        }
        //代码树新增
        $("#addFileButton").click(function () {
            var filePathName = $('#file_path_name').val();
            var fileInputName = $('#file_name_input').val();
            var appearanceId = $('select[name="appearance_id"]').val();
            var distId = $('input[name="dist_id"]').val();
            if (fileInputName == '') {
                Dcat.error('文件名不能为空');
                return false;
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            $('#addFileModal').modal('hide');
            ajaxAddDelFile(appearanceId,distId,0,filePathName,fileInputName,'add');
        });
        //代码树删除
        function delFileButtonClick() {
                $(".delFileButton").click(function () {
                    var filePathName = "";
                    var fileInputName = "";
                    var appearanceId = $('select[name="appearance_id"]').val();
                    var distId = $('input[name="dist_id"]').val();
                    var fileId = $(this).attr('file_id');
                    var fileName = $(this).attr('file_name');
                    msg = '确定要删除'+fileName+'吗？';
                    Dcat.confirm('确认删除',msg , function () {
                        loadingIndex = layer.load(1, {
                            shade: [0.5, '#000'] // 设置遮罩层
                        });
                        ajaxAddDelFile(appearanceId,distId,fileId,filePathName,fileInputName,'del');
                    });
                });
        }
        //历史记录弹窗
        $("#history-btn").click(function () {
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            var appearanceId = $('select[name="appearance_id"]').val();
            var distId = $('input[name="dist_id"]').val();
            if (fileId == '') {
                Dcat.error('操作失败:请先选择模板');
                return false;
            }
            //移除历史记录内容
            $('#contentDetails').html('');
            $.ajax({
                url: '/prime-control/dist-template/ace',
                method: 'POST',
                data: {
                    act: 'fetch_template_logs',
                    file_id: fileId,
                    dist_id: distId,
                    appearance_id: appearanceId,
                },
                success: function(data) {
                    const tableBody = $('#templateLogTableBody');
                    tableBody.empty();

                    data.forEach(log => {
                        const row = `<tr log_id="${log.id}">
                                <td>Version：${log.version} <br /> ${log.created_at}</td>
                             </tr>`;
                        tableBody.append(row);
                    });

                    layer.close(loadingIndex);
                    // Show modal
                    $('#templateLogModal').modal('show');

                },
                error: function(error) {
                    layer.close(loadingIndex);
                    alert('Error fetching data!');
                }
            });
        });
        //显示历史记录内容
        $(document).on('click', '#templateLogTableBody tr', function() {
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            // 移除其他行的选中样式
            $('#templateLogTableBody tr').removeClass('selected-row');
            // 当前点击行添加选中样式
            $(this).addClass('selected-row');
            //
            var logId = $(this).attr('log_id');
            var appearanceId = $('select[name="appearance_id"]').val();
            var distId = $('input[name="dist_id"]').val();
            $.ajax({
                url: '/prime-control/dist-template/ace',
                method: 'POST',
                data: {
                    act: 'fetch_template_log_content',
                    log_id: logId,
                    dist_id: distId,
                    appearance_id: appearanceId,
                },
                success: function(data) {
                    layer.close(loadingIndex);
                    $('#contentDetails').html(data.previous_content);
                    $("#templateLogId").val(data.id);
                    $("#templateVersion").val(data.version);
                },
                error: function(error) {
                    layer.close(loadingIndex);
                    alert('Error fetching data!');
                }
            });
        });
        $("#restoreTemplateLog").click(function () {
            var logId = $("#templateLogId").val();
            var templateVersion = $("#templateVersion").val();
            //确认框
            msg = 'Are you sure to restore to version: '+templateVersion+'?';
            Dcat.confirm('Confirm Recovery',msg , function () {
                loadingIndex = layer.load(1, {
                    shade: [0.5, '#000'] // 设置遮罩层
                });
                //ajax
                $.ajax({
                    url: '/prime-control/dist-template/ace',
                    method: 'POST',
                    data: {
                        act:'restore_template_log',
                        log_id: logId,
                    },
                    success: function(data) {
                        layer.close(loadingIndex);
                        if (data.status == '1') {
                            Dcat.success('Recovery Successful');
                            //关闭弹窗
                            $('#templateLogModal').modal('hide');
                            //请空编辑器内容
                            editor.setValue('');
                            //刷新代码树
                            postData();
                        }else{
                            Dcat.error(data.msg);
                        }
                    },
                    error: function(error) {
                        layer.close(loadingIndex);
                        alert('Error fetching data!');
                    }
                });
            });
        });
    });
</script>