We_Relese/Platform/Relese/Views/WePlayer/SceneFlow.cshtml

@using WePlatform.Configuration
@using WePlatform.Authorization
@using WePlatform.Views.Shared.Modals
@using WePlatform.Views.Shared.Query
@using WePlatform.Views.Shared.SearchForm
@using WePlatform.Views.Shared.Table

@{
    ViewBag.Title = "演练情景流策划";
    string activeMenu = PermissionNames.PagesWePlayerMgFlowMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string category = ViewBag.Category, sceneType = ViewBag.SceneType, guideType = ViewBag.GuideType,
        flowState = "<option value=\"\" selected>请选择情景流状态...</option><option value=\"" + SceneFlowStateDefinition.New + "\">新建</option><option value=\"" + SceneFlowStateDefinition.Solidified + "\">已固化</option>";
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
{
        new SearchItem("flowName","流名称"),
        //new SearchItem("sceneCategory","场景类别").SetSelectItem(category,isTree:true),
        new SearchItem("sceneFlowState","流状态",FieldType.I).SetSelectItem(flowState),
    });

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "SceneFlow/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("id", "编码"),
        new FieldItem("flowName", "情景流名称"),
        new FieldItem("sceneCategoryName", "类别名称",isSort:false),
        //new FieldItem("sceneFlowState", "情景流状态","FlowStateFormatter"),
                                                                                                                                    });
}
@section css{
    <link href="~/Content/Libs/jstree/themes/proton/style.min.css" rel="stylesheet" />
}
<div class="row">
    <div class="col-sm-3">
        <div class="iwb-tree-box">
            <div class="box-header">场景类别</div>
            <div class="scroll box-body">
                <div id="sc-tree"></div>
            </div>
        </div>
    </div>
        <div class="col-sm-9">
            @Html.Partial("Table/_Table", table)
        </div>
</div>




@section modal{
    <!--Main Modal-->
    <section>
        <div class="modal fade show" id="modal" tabindex="-1" aria-modal="true">
            <div class="modal-dialog modal-lg" style="max-width: 1300px;">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("情景流"))
                    <div class="modal-body" style="padding: 0">
                        <form class="form-horizontal " id="form" style="padding-top: 10px">
                            <input type="hidden" id="id" name="id" value="" />
                            <div class="form-group row">
                                <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="flowName">情景流名称</label>
                                <div class="col-sm-5">
                                    <div class="input-group input-group-sm">
                                        <input class="form-control required" id="flowName" name="flowName" type="text" placeholder="请输入情景流名称..." style="" aria-required="true">
                                    </div>
                                </div>
                                <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="sceneCategory">场景类别</label>
                                <div class="col-sm-5">
                                    <div class="input-group input-group-sm">
                                        <select class="form-control required" id="sceneCategory" name="sceneCategory" placeholder="请输入场景类别..." style="width: 100%" aria-required="true">
                                            @(Html.Raw(category))
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="main-box main-flow-box">

                            </div>

                        </form>
                    </div>
                    @Html.Partial("Modals/_ModalFooter", "0")

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

    @Html.Partial("_FlowNode","flow")

    @Html.Partial("Query/_SceneInfo", new QueryWithSelect("sceneNos,sceneNames,variables", new Dictionary<string, string>
    {
        ["sceneCategory"] = category,
        ["sceneType"] = sceneType,
    }))
    @Html.Partial("Query/_GuideInfo", new QueryWithSelect("guideNos,guideNames", new Dictionary<string, string>() { ["guideType"] = guideType }))

    @{
        var solidifyModal = new ModalViewModel("固化情景流", "", new ModalBodyViewModel(new List<Input>
        {
            new InputHide("id"),
            new Input("newName","固化名称"),
        }, "form-solidify"), "modal-solidify");
    }
    @Html.Partial("Modals/_Modal",solidifyModal)

}
@section scripts
{

    <script src="~/Content/Libs/jstree/jstree.min.js"></script>
    <script type="text/javascript">
        var $table, _IsDetail = false, cuScNo='';
        $(function() {
            OverlayScrollbar($('.scroll'));
            InitScTree();
            $('#modal #flowName').on('change',function() {
                var data = $.extend({}, window._FlowTreeData, { name: $('#modal #flowName').val() ? $('#modal #flowName').val():'根节点'});
                window.InitFlowTree(data);
            });
                $table = LoadTable({
                    searchFun: TableSearchFun
                });
            var funs = window.iwbfuns || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function () {
                BtnCreate({
                    data: { id: "" },
                    dataFun: GetSaveData,
                    select2tree: "sceneCategory",
                    shownAfter: function () {
                        window._CompData = [];
                        var initData = window.GetInitData();
                        var data = $.extend({}, initData, { name: $('#modal #flowName').val() ? $('#modal #flowName').val():'根节点'});
                        window.InitFlowTree(data);
                    }
                });
            }
            funs["btnUpdate"] = function () {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    if (row.sceneFlowState==@(SceneFlowStateDefinition.Solidified)) {
                        abp.message.warn("方案包已固化不能修改！");
                        return;
                    }
                    BtnUpdate({
                        select2tree: "sceneCategory",
                        dataFun: GetSaveData,
                        disabled: "",
                        shownAfter: function () {
                            var data;
                            try {
                                data = row.contentInfo ? JSON.parse(row.contentInfo) : undefined;
                                window._CompData = row.componentInfo ? JSON.parse(row.componentInfo) : [];
                                console.log("U-JSON:", data, window._CompData);
                            } catch (e) {
                                console.log(e);
                            }
                            if (!data) {
                                var initData = window.GetInitData();
                                data = $.extend({}, initData);
                            }
                            window.InitFlowTree(data);

                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            };
            funs["btnDelete"] = function(url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    if (row.sceneFlowState==@(SceneFlowStateDefinition.Solidified)) {
                        abp.message.warn("方案包已固化不能删除！");
                        return;
                    }

                    BtnDelete({ url: url }, row);
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            }
            funs["btnCopy"] = function (url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    MsgConfirm("确定拷贝【" + row.flowName + "-" + row.id + "】情景流吗？",
                        "拷贝情景流", function () {
                            $.iwbAjax1({
                                url: url,
                                table: "table",
                                data: { id: row.id }
                            });
                        });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }

            };
            funs["btnSolidify"] = function (url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    OpenModal({
                        url: url,
                        table: "table",
                        modal: 'modal-solidify',
                        data: { id: row.id, newName: row.flowName },
                        dataFun: function () {
                            return {
                                id: $('#modal-solidify #id').val(),
                                newName: $('#modal-solidify #newName').val()
                            };
                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }

            };
        });

        function GetSaveData() {
            var data = $.formSerialize($('#form'));
            data.contentInfo = JSON.stringify(window._FlowTreeData);
            data.componentInfo = JSON.stringify(_CompData);
            return data;
        }

        function InitScTree() {
            $('#sc-tree')
                .jstree({
                    'core': {
                        'data': GetNode,
                        'strings': {
                            'Loading ...': '请稍后...'
                        },
                        'force_text': true,
                        'check_callback': true,
                        'themes': {
                            'name': 'proton',
                            'responsive': true,
                            'variant': 'large'
                        }
                    },
                   
                    'plugins': ['wholerow'] // 'state',
                }).on('ready.jstree',function(e, data) {
                        //console.log('000', e, data);
                        var inst = data.instance,
                            obj = inst.get_node('@(IwbConsts.SceneCategoryRootNo)');
                        inst.open_node(obj);
                        inst.select_node(obj);
                        cuScNo = '';
                        RefreshTable();
                }).on('activate_node.jstree',function(e, data) {
                    //console.log('111',data);
                    cuScNo = data.node.id == '@(IwbConsts.SceneCategoryRootNo)' ? "" : data.node.id;
                    RefreshTable();
                });
        }

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

        function TableSearchFun(sl) {
            sl.push({
                KeyWords: cuScNo,
                KeyField: 'sceneCategory',
                FieldType: '0',
                ExpType: '0'
            });
        }
    </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>';
            }
        }
        function FlowStateFormatter(v) {
            var name = $('#hid-flowState option[value="' + v + '"]').text();
            switch (v) {
            case @SceneFlowStateDefinition.New:
                return '<span class="label label-danger">' + name + '</span>';
            case @SceneFlowStateDefinition.Solidified:
                return '<span class="label label-success">' + name +'</span>';
            default:
                return '';
            }
        }
        function GuideTypeFormatter(v) {
            var name = $('#hid-guideType 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>
    <select id="hid-flowState">
        @(Html.Raw(flowState))
    </select>
    <select id="hid-guideType">
        @(Html.Raw(guideType))
    </select>

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

@*

    <div class="main-box">
                                    <div class="floor-box">
                                        <div class="floor-node" style="width: 100%">
                                            <div class="node-box"></div>

                                            <div class="line-box">
                                                <div class="line-group">
                                                    <div class="line" style="width: 100%"><div class="line-d"></div></div>
                                                </div>
                                                <div class="line-group">
                                                    <div class="line-m" style="width: 25%;visibility: hidden; "></div>
                                                    <div class="line-m" style="width: 50%;"></div>
                                                    <div class="line-m" style="width: 25%;visibility: hidden;"></div>
                                                </div>
                                                <div class="line-group">
                                                    <div class="line" style="width: 50%"><div class="line-d line-d-l"></div></div>
                                                    <div class="line" style="width: 50%"><div class="line-d line-d-r"></div></div>
                                                </div>
                                            </div>

                                            <div class="floor-box ">
                                                <div class="floor-node" style="width: 50%">
                                                    <div class="node-box"></div>
                                                    <div class="line-box">
                                                        <div class="line-group ">
                                                            <div class="line" style="width: 100%"><div class="line-d"></div></div>
                                                        </div>
                                                        <div class="line-group">
                                                            <div class="line-m" style="width: 25%;visibility: hidden; "></div>
                                                            <div class="line-m" style="width: 50%;"></div>
                                                            <div class="line-m" style="width: 25%;visibility: hidden;"></div>
                                                        </div>
                                                        <div class="line-group">
                                                            <div class="line" style="width: 50%"><div class="line-d line-d-l"></div></div>
                                                            <div class="line" style="width: 50%"><div class="line-d line-d-r"></div></div>
                                                        </div>
                                                    </div>
                                                    <div class="floor-box ">
                                                        <div class="floor-node" style="width: 50%">
                                                            <div class="node-box"></div>
                                                        </div>
                                                        <div class="floor-node" style="width: 50%">
                                                            <div class="node-box"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="floor-node" style="width: 50%">
                                                    <div class="node-box"></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

*@