We_Relese/Platform/Relese/Views/ResourceLib/Plan.cshtml

@using WePlatform.Configuration
@using WePlatform.Authorization
@using WePlatform.Views.Shared.Modals

@{
    ViewBag.Title = "应急预案管理";
    string activeMenu = PermissionNames.PagesResourceMgGuideMgPlanMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
}
@section css{
    <link href="~/Content/Libs/jstree/themes/proton/style.min.css" rel="stylesheet" />
    <style>
        .vakata-context, .vakata-context ul {
            z-index: 1;
        }
      
        #plan-tree {
            min-height: calc(100vh - 110px);
            background: #000000;
            background: rgba(0,0,0,.02);
        }

        .search-icon .input-group-text {
            background: #007bff;
            color: #eee;
            cursor: pointer;
        }

        .search-icon .input-group-text:hover {
            color: #fff;
        }

        .tool-more {
            width: 100%;
            height: 150px;
            background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 1));
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .plan-no-content {
            margin-top: 50px;
            text-align: center;
        }

        .plan-no-content span {
            margin: 20px auto;
            font-size: 24px;
            font-weight: 600;
            display: inline-block;
        }


        .content-info {
            --mainColor: #007bff;
            border: 2px solid var(--mainColor);
            margin: 15px 0;
            border-radius: 5px;
            position: relative;
        }

            .content-info .title {
                border-bottom: 1px solid var(--mainColor);
                color: var(--mainColor);
                padding: 5px 10px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        .content-info .text {
            padding: 5px 10px;
            word-break: break-all;
            min-height: 60px;
            display: flex;
            /*align-items: center;*/
            flex-direction: column;
        }

        .content-info .tool {
            border-top: 1px solid var(--mainColor);
            padding: 5px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .content-info .tool:not(:last-child) {
            border-bottom: 1px solid var(--mainColor);
        }

        .content-info .tool .version-box {
            font-weight: 600;
            min-width: 100px;
        }

        .content-info .tool .word-box {
            font-weight: 600;
            min-width: 300px;
            text-align: center;
        }

        .content-info .tool .btn-box {
            min-width: 280px;
            text-align: right;
        }

        .content-info .tool .btn {
            margin: 0 8px;
        }
    </style>
}

<div class="row">
    <div class="col-sm-3" style="overflow-x: hidden; padding-right: 0;">
        <div class="scroll">
            <div id="plan-tree"></div>
        </div>
    </div>
    <div class="col-sm-9">
        <div class="tool-box">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group ">
                        <input type="text" id="keywords-search" class="form-control" value="" placeholder="根据关键字查询，多个关键字以空格分隔"/>
                        <div class="input-group-append search-icon" style="cursor: pointer;" onclick="RefreshContent()">
                            <span class="input-group-text" style=""><i class="fa fa-search"></i>&nbsp;查询</span>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="scroll" style="height: calc(100vh - 150px)">
            <div id="plan-content" style="position: relative;">

            </div>
           
        </div>
        
    </div>
</div>


@*@Html.Partial("Table/_Table", table)*@

@section modal{
    <!--Main Modal-->
    @{
        var modal = new ModalViewModel("预案", new ModalBodyViewModel(new List<Input>()
{
            new InputHide("id"),
            new InputHide("parentNo"),
            new InputHide("path"),
            new Input("parentName", "父预案").SetDisabled(),
            new Input("name", "名称"),
            new InputTextarea("description", "描述").SetNotRequired(),
        }));
        var modalContent = new ModalViewModel("预案内容", new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new InputHide("planNo"),
            new Input("planName", "预案名称").SetDisabled(),
            new Input("keyWord", "关键字").SetHelp("多个关键字以“,”分隔！"),
            //new Input("version", "预案版本"),
            new InputKindeditor("planContent", "内容"),
        }, "content-form"), "content-modal");
    }
    @Html.Partial("Modals/_Modal", modal)
    @Html.Partial("Modals/_Modal", modalContent)
}

@section scripts
{
    <script src="~/Content/Libs/jstree/jstree.min.js"></script>
    <script type="text/javascript">
        var curPlanNo = '', curPlanName = '';

        $(function() {
            OverlayScrollbar($('.scroll'));
            $('#plan-tree')
                .jstree({
                    'core': {
                        'data': GetNode,
                        'strings': {
                            'Loading ...': '请稍后...'
                        },
                        'force_text': true,
                        'check_callback': true,
                        'themes': {
                            'name': 'proton',
                            'responsive': true,
                            'variant': 'large'
                        }
                    },
                    contextmenu: {
                        items: Actions
                    },
                    'plugins': ['contextmenu', 'wholerow'] // 'state',
                })
                .on('ready.jstree',
                    function(e, data) {
                        //console.log('000', e, data);
                        var inst = data.instance,
                            obj = inst.get_node('@(IwbConsts.EmergencyPlanRootNo)');
                        inst.open_node(obj);
                        inst.select_node(obj);
                        curPlanNo = '';
                        curPlanName = '';
                        RefreshContent(true);
                    })
                //.on('create_node.jstree', function (e, data) {console.log(1);}).on('rename_node.jstree', function (e, data) {console.log(2);}).on('delete_node.jstree', function (e, data){console.log(3);}).on('changed.jstree', function (e, data) {console.log('222');})
                .on('activate_node.jstree',
                    function(e, data) {
                        //console.log('111',data);
                        curPlanNo = data.node.id == '@(IwbConsts.EmergencyPlanRootNo)' ? "" : data.node.id;
                        curPlanName = data.node.text;
                        RefreshContent(true);
                    });

        });

        function GetNode(node, callback) {
            $.iwbAjax4({
                url: abp.appUrl + 'EmergencyPlan/GetChildPlan',
                data: { id: node.id },
                success: function(res) {
                    if (callback) {
                        callback.call(this, res);
                    } else {
                        $("#plan-tree").html("暂无数据！");
                    }
                }
            });
        }

        function Actions(o, cb) {
            console.log(o.id);
            if (cb) {
                //    cb.call(this, o);
            }
            var actions = {};
            actions.create = {
                "separator_before": false,
                "separator_after": true,
                "_disabled": @(IsGranted(PermissionNames.PagesResourceMgGuideMgPlanMgCreate) ? "false" : "true"), //(this.check("create_node", data.reference, {}, "last")),
                "label": "添加子预案",
                // "title": "添加子预案",
                "icon": "far fa-plus-square",
                "action": function(data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                    console.log('CREATE');
                    OpenModal({
                        modal: 'modal',
                        url: abp.appUrl + 'EmergencyPlan/create',
                        data: { id: "", parentNo: obj.id, parentName: obj.text },
                        success: function() {
                            inst.refresh_node(obj);
                            inst.open_node(obj);
                        }
                    });

                }
            };
            actions.rename = {
                "separator_before": false,
                "separator_after": false,
                "_disabled": @(IsGranted(PermissionNames.PagesResourceMgGuideMgPlanMgUpdate) ? "false" : "true"), //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                "label": "修改预案",
                //"title": "修改预案",
                /*!
                "shortcut"			: 113,
                "shortcut_label"	: 'F2',
                "icon"				: "far fa-plus-square",
                */
                "icon": "far fa-edit",
                "action": function(data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                    console.log('UPDATE');
                    $.iwbAjax4({
                        url: abp.appUrl + 'EmergencyPlan/getDtoById?id=' + obj.id,
                        success: function(res) {
                            if (res) {
                                var parent = inst.get_node(obj.parent);
                                OpenModal({
                                    modal: 'modal',
                                    url: abp.appUrl + 'EmergencyPlan/update',
                                    data: {
                                        id: res.id,
                                        path: res.path,
                                        parentNo: res.parentNo,
                                        parentName: parent.text,
                                        name: res.name,
                                        description: res.description
                                    },
                                    success: function() {
                                        inst.refresh_node(parent);
                                    }
                                });
                            }
                        }
                    });

                }
            };
            actions.remove = {
                "separator_before": false,
                "separator_after": false,
                "_disabled": @(IsGranted(PermissionNames.PagesResourceMgGuideMgPlanMgDelete) ? "false" : "true"), //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                "label": "删除预案",
                "title": "删除预案",
                "icon": "far fa-minus-square",
                "action": function(data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                    var parent = inst.get_node(obj.parent);
                    console.log('DELETER');
                    MsgConfirm("您确认删除此预案吗？",
                        "确认删除",
                        function() {
                            $.iwbAjax1({
                                url: abp.appUrl + 'EmergencyPlan/delete',
                                data: { id: obj.id },
                                success: function() {
                                    inst.refresh_node(parent);
                                    RefreshContent();
                                }
                            });
                        });

                    //if (inst.is_selected(obj)) {
                    //    inst.delete_node(inst.get_selected());
                    //} else {
                    //    inst.delete_node(obj);
                    //}
                }
            };

            actions.planContent = {
                "separator_before": false,
                "separator_after": false,
                "_disabled": @(IsGranted(PermissionNames.PagesResourceMgGuideMgPlanMgUpdate) ? "false" : "true"), //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                "label": "增加内容",
                //"title": "增加内容",
                "icon": "far fa-plus-square",
                "action": function(data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                    curPlanNo = obj.id;
                    curPlanName = obj.text;
                    AddPlanContent();
                }
            };

            return actions;
        }

        function AddPlanContent(data) {
            console.log('CONTENT');
            data = data || { id: '', planContent: '', keyWord: '', planNo: curPlanNo, planName: curPlanName };
            if (!data.planNo) {
                abp.message.warn('请在在左边选择（激活）一个预案，再添加内容！', "添加失败");
                return;
            }
            OpenModal({
                modal: 'content-modal',
                modaltitle: data.id ? '修订' : '增加',
                url: abp.appUrl + 'EmergencyPlan/UpdatePlanContent',
                data:data,
                success: function() {
                    RefreshContent();
                }
            });
        }

        function UpdatePlanContent(that) {
            var $that = $(that).closest('.content-info');
            var data = { id: $that.data('id'), planContent: $that.find('.text').html(), keyWord: $that.find('.keyword').text(), planNo: $that.data('plan-no'), planName : $that.data('plan-name')}
            AddPlanContent(data);
        }
        function DeleteContent(that) {
            var $that = $(that).closest('.content-info');
            $.iwbAjax1({
                url: abp.appUrl + 'EmergencyPlan/DeletePlanContent',
                data: {
                    id: $that.data('id')
                },
                success: function () {
                    RefreshContent();
                }
            });
        }
        function SetUse(that) {
            var $that = $(that).closest('.content-info');
            $.iwbAjax1({
                url: abp.appUrl + 'EmergencyPlan/SetUse',
                data: {
                    id: $that.data('id')
                },
                success: function () {
                    RefreshContent();
                }
            });
        }
    </script>
    <script>
        var take = @(IwbConsts.TakeCount) ;

        function RefreshContent() {
            $('#plan-content').empty();
            GetPlanContent(true);
        }

        function GetPlanContent(isNew) {
            console.log('curPlanNo', curPlanNo);
            var skip = $('#plan-content .content-info').length, keyWords = [], isGlobal = false;
            if (!isNew) {
                isGlobal = $('#global-search').is(':checked');
            }
            var keyStr = $('#keywords-search').val();
            if (keyStr) {
                keyWords = keyStr.split(' ');
            }
            $.iwbAjax4({
                url: abp.appUrl + 'EmergencyPlan/GetPlanContent',
                data: {
                    planNo: curPlanNo,
                    keyWords: keyWords,
                    skip: skip,
                    take: take,
                    isGlobal: isGlobal
                },
                success: function (res) {
                    PlanContentsFormatter(res, isNew);
                }
            });
        }

        function PlanContentsFormatter(data, isNew) {
            var str = '', more = ' <div class="tool-more"><button class="btn btn-danger" style="width: 120px;" onclick="GetPlanContent()">查看更多...</button></div>';
            $('.plan-no-content').remove();
            if (data && data.length) {
                data.forEach(function (v) {
                    str += PlanContentFormatter(v);
                });
                $('#plan-content').append(str);
                if (data.length < take) {
                    $('.tool-more').remove();
                } else {
                    $('#plan-content').append(more);
                }
            } else if (isNew) {
                $('#plan-content')
                    .html(
                        '<div class="plan-no-content"><span>预案暂无内容</span><br/> <button class="btn btn-success" style="width: 120px;" onclick=" AddPlanContent()">新增内容</button></div>');
                $('.tool-more').remove();
            } else {
                $('.tool-more').remove();
            }
        }

        function PlanContentFormatter(data) {
            var str = '';
            if (data) {
                var isUse = data.isUse ? "use" : "";
                str += '<div class="content-info {0}" data-id="{1}" data-plan-no="{2}" data-plan-name="{3}">'.format(isUse, data.id, data.planNo, data.planName);
                str += '<div class="title">{0}</div>'.format(data.planName);
                str += '<div class="text">{0}</div>'.format(data.planContent);
                str += '<div class="tool">';
                str += '<div class="version-box">版本：V<span class="version">{0}</span></div>'.format(data.version);
                str += '<div class="">关键字：<span class="keyword">{0}</span></div>'.format(data.keyWord);
                str += '<div class="btn-box">';

                str += data.isUse ? '<button class="btn btn-sm btn-success" disabled type="button">正在使用</button>' : '<button class="btn btn-sm btn-danger" onclick="DeleteContent(this)" type="button">删除版本</button><button class="btn btn-sm btn-warning" onclick="SetUse(this)" type="button">使用版本</button>';
                str += '<button class="btn btn-sm btn-primary" onclick="UpdatePlanContent(this)" type="button">修订版本</button>';
                str += '</div>';
                str += '</div>';
                str += '</div>';
            }
            return str;
        }
    </script>

    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
            case 0:
                return '<span class="label label-danger">' + name + '</span>';
            default:
                return '<span class="label label-info">' + name + '</span>';
            }
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>

    @*@Html.DropDownList("hid-type", type)*@
</section>