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

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

@{
    ViewBag.Title = "行为规则库管理";
    string activeMenu = PermissionNames.PagesResourceMgBehaviorMg; //The menu item will be active for this page.
    string category = ViewBag.Category, role = ViewBag.Role, knowledge = ViewBag.Knowledge, environment = ViewBag.Environment;
    ViewBag.ActiveMenu = activeMenu;
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
{
        new SearchItem("behaviorName","行为名称"),
        //new SearchItem("sceneCategory","场景类别").SetSelectItem(category,isTree:true)
    });

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Behavior/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("id", "编码"),
        new FieldItem("behaviorName", "行为名称"),
        new FieldItem("sceneCategoryName", "类别名称",isSort:false),
        new FieldItem("behaviorTag", "行为标签"),
        new FieldItem("behaviorRoleNames", "角色名称",isSort:false),
        new FieldItem("ruleKeyword", "行为关键字"),
    });
}
@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{
    @{
        var baseInput = new ModalBodyViewModel(new List<Input>()
{
          new InputHide("id"),
          new Input("behaviorName", "行为名称"), 
          new Input("sceneCategory", "场景类别").SetSelectOptions(category),
          //new Input("sceneCategory", "场景类别").SetSelectOptions(category,isAddBlank:false),
          new Input("behaviorTag", "行为标签").SetNotRequired(),
          new InputTextarea("description", "行为规则"),
          //new Input("ruleKeyword", "行为关键字").SetNotRequired(),
      });
    }
    <!--Main Modal-->
    <section>
        <div class="modal fade show" id="modal" tabindex="-1" aria-modal="true">
            <div class="modal-dialog modal-lg" style="margin-top: 190.5px;">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("行为"))
                    <div class="modal-body" style="padding: 0">

                        <form class="form-horizontal " id="form" novalidate="novalidate" style="padding: 0">
                            <div class="card card-primary card-outline card-outline-tabs" style="margin-bottom: 0; border-top: 0; ">
                                <div class="card-header p-0 border-bottom-0">
                                    <ul class="nav nav-tabs" id="behavior-tab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="tab-base" data-toggle="pill" href="#tab-content-base" role="tab">基础信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-content-keyword" role="tab">行为关键字</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-content-role" role="tab">行为角色</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-content-knowledge" role="tab">行为知识</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-content-environment" role="tab">行为资源</a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <div class="tab-content" id="custom-tabs-four-tabContent">

                                        <div class="tab-pane fade show active" id="tab-content-base" role="tabpanel">
                                            @Html.Partial("Modals/_ModalInput", baseInput)
                                        </div>

                                        <div class="tab-pane fade" id="tab-content-role" role="tabpanel">
                                            <div class="form-group row">
                                                <label class=" iwb-label iwb-label-sm iwb-label-required" for="sceneCategoryEx">场景类别</label>
                                                <div class="">
                                                    <div class="input-group input-group-sm">
                                                        <select class="form-control required" id="sceneCategoryEx" name="sceneCategoryEx" placeholder="请选择场景类别..." style="width: 100%">@(Html.Raw(category))</select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dynamic-box" style="margin: 0 10px;">
                                                <div class="row iwb-dynamic-box">
                                                    <div class="dynamic-label col-sm-10">
                                                        <label class="iwb-label">角色名称</label>
                                                    </div>
                                                    <div class="dynamic-control col-sm-2">
                                                        <label class="iwb-label">增加/删除</label>
                                                    </div>
                                                </div>

                                                <div class="row iwb-dynamic-box">
                                                    <div class="col-sm-10">
                                                        <div class="input-group input-group-sm">
                                                            <select class="form-control" name="behaviorRoleNo" style="width: 100%">
                                                                @(Html.Raw(role))
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>

                                        <div class="tab-pane fade" id="tab-content-keyword" role="tabpanel">
                                            <div class="dynamic-box">
                                                <div class="row iwb-dynamic-box">
                                                    <div class="dynamic-label col-sm-7">
                                                        <label class="iwb-label">关键字<small>(多个以,分隔)</small></label>
                                                    </div>
                                                    <div class="dynamic-label col-sm-3">
                                                        <label class="iwb-label">权重</label>
                                                    </div>
                                                    <div class="dynamic-control col-sm-2">
                                                        <label class="iwb-label">增加/删除</label>
                                                    </div>
                                                </div>

                                                <div class="row iwb-dynamic-box keywords">
                                                    <div class="col-sm-7">
                                                        <div class="input-group input-group-sm">
                                                            <input class="form-control required" name="keyword" onchange="KeyWordChange(this)" placeholder="请输入关键字" style="width: 100%" />
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <div class="input-group input-group-sm">
                                                            <input class="form-control number required" type="number" min="0" max="100" name="weight" placeholder="请输入关键字的权重" style="width: 100%" />
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade" id="tab-content-knowledge" role="tabpanel">
                                            <div class="dynamic-box" style="margin: 0 10px;">
                                                <div class="row iwb-dynamic-box">
                                                    <div class="dynamic-label col-sm-10">
                                                        <label class="iwb-label">知识信息</label>
                                                    </div>
                                                    <div class="dynamic-control col-sm-2">
                                                        <label class="iwb-label">增加/删除</label>
                                                    </div>
                                                </div>
                                                <div class="row iwb-dynamic-box">
                                                    <div class="col-sm-10">
                                                        <div class="input-group input-group-sm">
                                                            <select class="form-control" name="knowledgeNo" style="width: 100%">
                                                                @(Html.Raw(knowledge))
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane fade" id="tab-content-environment" role="tabpanel">
                                            <div class="dynamic-box">
                                                <div class="row iwb-dynamic-box">
                                                    <div class="dynamic-label col-sm-10">
                                                        <label class="iwb-label">环境资源</label>
                                                    </div>

                                                    <div class="dynamic-control col-sm-2">
                                                        <label class="iwb-label">增加/删除</label>
                                                    </div>
                                                </div>

                                                <div class="row iwb-dynamic-box ">
                                                    <div class="col-sm-10">
                                                        <div class="input-group input-group-sm">
                                                            <select class="form-control" name="environment" style="width: 100%">
                                                                @(Html.Raw(environment))
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

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


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

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

}
<div class="col-12 col-sm-6">

</div>
@section scripts
{
    <script src="~/Content/Libs/select2/js/select2.js"></script>
    <script src="~/Content/Libs/jstree/jstree.min.js"></script>
    <script type="text/javascript">
        var $table, cuScNo = '';
        $(function () {
            OverlayScrollbar($('.scroll'));
            InitScTree();
            //根据场景类别拉去场景角色
            $('#modal #sceneCategory').on('change.reBehavior', function () {
                $('#modal #sceneCategoryEx').val($(this).val()).select2tree();
                $('#modal #sceneCategoryEx').trigger("change");
            });
            $('#modal #sceneCategoryEx').on('change.reRole', function () {
                $('#modal #tab-content-role .iwb-dynamic-box-delete').remove();
                var no = $(this).val(), $role = $('#modal #tab-content-role .iwb-dynamic-box').eq(1).find('.form-control[name="behaviorRoleNo"]');
                $('#modal #sceneCategory').val(no).select2tree();
                if (no) {
                    $.iwbAjax4({
                        url: abp.appUrl + "query/GetBehaviorRoleSelectStrByCategory?no=" + no,
                        async: false,
                        success: function (res) {
                            $role.html(res).select2();
                        }
                    });
                } else {
                    $role.html('<option value="" selected>请选择行为角色...</option>').select2();
                }
            });

            $table = LoadTable({
                searchFun: TableSearchFun
            });
            var funs = window.iwbfuns || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function (url) {
                Reset();
                BtnCreate({
                    url: url,
                    dataFun: GetBehaviorData,
                    data: { id: "", sceneCategory: "" },
                    select2tree: "sceneCategory,sceneCategoryEx"
                });
            }
            funs["btnUpdate"] = function (url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    Reset();
                    row.sceneCategoryEx = row.sceneCategory;
                    BtnUpdate({
                        url: url,
                        dataFun: GetBehaviorData,
                        disabled: "",
                        select2tree: "sceneCategory,sceneCategoryEx",
                        shownAfter: function () {
                            $('#modal #sceneCategoryEx').trigger("change");
                            ParseRoles(row.behaviorRoleNos);
                            ParseKnowledges(row.knowledgeNos);
                            ParseKeywords(row.keywords);
                        }
                    }, row);

                }

            };


        });

        function KeyWordChange(that) {
            var word = $(that).val();
            var reg = /[`~!@@#$%^&*()_\-+=<>?:"{}|.\/;'\\\[\]·~！@@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
            if (reg.test(word)) {
                abp.message.warn("关键字不能有特殊字符！");
                $(that).val('');
            }
        }

          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>
        //自定义获取提交数据
        function GetBehaviorData() {
            var data = $.formSerialize($('#modal form'));
            data.ruleKeyword = FormatterKeyword();
            var roles = [], knowledges = [], environments = [];
            $('#modal #tab-content-role .iwb-dynamic-box').find('.form-control[name="behaviorRoleNo"]').each(
                function () {
                    var v = $(this).val();
                    if (v && roles.indexOf(v) == -1) {
                        roles.push(v);
                    }
                });
            $('#modal #tab-content-knowledge .iwb-dynamic-box').find('.form-control[name="knowledgeNo"]').each(
                function () {
                    var v = $(this).val();
                    if (v && knowledges.indexOf(v) == -1) {
                        knowledges.push(v);
                    }
                });
            $('#modal #tab-content-environment .iwb-dynamic-box').find('.form-control[name="environment"]').each(
                function () {
                    if ($(this).val()) {
                        environments.push($(this).val());
                    }
                });
            data.behaviorRoleNos = roles;
            data.knowledgeNos = knowledges;
            data.environResourceNos = environments;
            data.keyword = "";
            data.weight = "";
            console.log(data);
            return data;
        }
        //解析知识角色
        function ParseRoles(nos) {
            if (!nos) {
                return;
            }
            var noArr = nos.split(",");
            for (var i = 0; i < noArr.length; i++) {
                var no = noArr[i];
                var $that = i === 0 ? $('#modal #tab-content-role .iwb-dynamic-box').eq(1) : AddDynamicBox($('#modal #tab-content-role .iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="behaviorRoleNo"]').val(no).select2();

            }
        }
        //解析知识信息
        function ParseKnowledges(nos) {
            if (!nos) {
                return;
            }
            var noArr = nos;//.split(",");
            for (var i = 0; i < noArr.length; i++) {
                var no = noArr[i];
                var $that = i === 0 ? $('#modal #tab-content-knowledge .iwb-dynamic-box').eq(1) : AddDynamicBox($('#modal #tab-content-knowledge .iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="knowledgeNo"]').val(no).select2();

            }
        }
        //解析环境资源
        function ParseEnvironments(nos) {
            if (!nos || nos.length <= 0) {
                return;
            }
            var noArr = nos;//.split(",");
            for (var i = 0; i < noArr.length; i++) {
                var no = noArr[i];
                var $that = i === 0 ? $('#modal #tab-content-environment .iwb-dynamic-box').eq(1) : AddDynamicBox($('#modal #tab-content-environment .iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="environment"]').val(no).select2();

            }
        }
        function ParseKeywords(words) {
            if (!words || words.length <= 0) {
                return;
            }
            console.log(words);
            for (var i = 0; i < words.length; i++) {
                var keywords = words[i];
                var $that = i === 0 ? $('#modal #tab-content-keyword .iwb-dynamic-box').eq(1) : AddDynamicBox($('#modal #tab-content-keyword .iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="keyword"]').val(keywords.keyword);
                $that.find('.form-control[name="weight"]').val(keywords.weight);
            }
        }

        //格式化关键字
        function FormatterKeyword() {
            var str = "";
            $('#tab-content-keyword .keywords').each(function () {
                var $that = $(this);
                var word = $that.find('input[name="keyword"]').val();
                //var reg = /[`~!@@#$%^&*()_\-+=<>?:"{}|,.\/;'\\\[\]·~！@@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
                //if (reg.test(word)) {
                //}
                var weight = $that.find('input[name="weight"]').val();
                if (word && weight) {
                    str += (str === "" ? "" : ",") + "[" + word + "]:" + weight;
                }
            });


            return "[" + str + "]";
        }

        //复位modal
        function Reset() {
            $('#modal .iwb-dynamic-box-delete').remove();
            $('#behavior-tab li').eq(0).find('a').tab('show');
        }
    </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>