<div class="main" id="main">
    <el-table ref="multipleTable" class="tree_table" :data="dataList" default-expand-all :tree-props="{children:'Children',hasChildren: 'HasChildren'}" row-key="Id" v-on:select="handleCurrentChange" v-on:selection-change="handleSelectionChange" tooltip-effect="dark" border style="width:100% !important">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column label="菜单权限/展开" width="250">
            <template slot-scope="scope">
                <span class="node fa fa-file-text-o" v-show="scope.row.IsFinal==1"></span>
                <span class="node fa" v-on:click="load(scope.row)" style="cursor:pointer;" v-bind:class="{'fa-folder':scope.row.HasChildren==true,'fa-folder-open':scope.row.HasChildren==false}" v-show="scope.row.IsFinal==0"></span>
                <span>{{scope.row.Name}}</span>
            </template>
        </el-table-column>
        <el-table-column label="页面权限" header-align="center">
            <template slot-scope="scope" v-if="scope.row.IsFinal==1">
                <el-checkbox-group v-model="formData.MenuItemIds">
                    <el-checkbox :label="item.Id" v-if="scope.row.Id==item.MenuId" v-for="item in adminMenuItem" :disabled="formData.MenuIds.indexOf(scope.row.Id)==-1">{{item.Name}}</el-checkbox>
                </el-checkbox-group>
            </template>
        </el-table-column>
    </el-table>
    <div class="help-block" style="margin-top:10px;"><span class="fa fa-info-circle"></span> 部门权限只作用会员中心，设置的权限会和会员组权限合并（并集）。</div>
    <div class="footer-submit-bar" style="padding-left:100px">
        <el-button type="primary" v-on:click="postSubmit">提交</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>
@{
    IEnumerable<dynamic> adminMenuList = JsonHelper.DeserializeObject<IEnumerable<dynamic>>(Html.GetMemberMenuListJson() ?? "[]");
    if (adminMenuList.Count() > 0)
    {
        adminMenuList = adminMenuList.OrderBy(c => c.Xuhao);
    }
}
<script type="text/javascript">
    var adminMenuList =@Html.Raw(JsonHelper.JsonParse(adminMenuList));
    var formData = @Html.Raw(Model);
    if (formData.MenuIds == null || formData.MenuIds=="") {
        formData.MenuIds = [];
    } else {
        formData.MenuIds = formData.MenuIds.split(",").map(Number);
    }
    if (formData.MenuItemIds == null || formData.MenuItemIds == "") {
        formData.MenuItemIds = [];
    } else {
        formData.MenuItemIds = formData.MenuItemIds.split(",").map(Number);
    }
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            adminMenuItem: [],
            formData:formData,
        },
        methods: {
            load: function (itemRow) {
                if (itemRow.HasChildren == true) {
                    itemRow.HasChildren = false;
                } else {
                    itemRow.HasChildren = true;
                }
            },
            getDateList: function (adminMenuLists, parentId, menuIds) {
                var dataList1 = [];
                var _this = this;
                adminMenuLists.forEach(function (item, index) {
                    if (item.ParentId == parentId) {
                        if (item.IsFinal == 0) {
                            item.Children = _this.getDateList(adminMenuLists, item.Id, menuIds);
                            item.HasChildren = true;
                            if (menuIds.indexOf(item.Id) != -1) {
                                item.HasChildren = false;
                            }
                        }
                        dataList1.push(item);
                    }
                });
                return dataList1;
            },
            handleSelectionChange: function(val) {
                this.selectedItems = val;
            },
            handleCurrentChange: function(selection, row)
            {
                this.formData.MenuIds = this.getSelectedPropertys(selection, 'Id');
                if (row.IsFinal==1)
                {
                    if (this.formData.MenuIds.indexOf(row.Id) != -1) {
                        this.adminMenuItem.forEach(function (item, index) {
                            if (item.MenuId == row.Id) {
                                formData.MenuItemIds.push(item.Id);
                            }
                        });
                    } else {
                        this.adminMenuItem.forEach(function (item, index) {
                            if (item.MenuId == row.Id) {
                                if (formData.MenuItemIds.indexOf(item.Id)!=-1)
                                {
                                    formData.MenuItemIds.splice(formData.MenuItemIds.indexOf(item.Id), 1);
                                }
                            }
                        });
                    }
                }
            },
            postSubmit: function () {
                vue.submit({ url: "@Url.ActionUrl("Edit")", data: this.formData });
            },
            toggleRowSelection: function (newDataList) {
                newDataList.forEach(function (row, index) {
                    if (vue.formData.MenuIds.indexOf(row.Id) != -1) {
                        vue.$refs.multipleTable.toggleRowSelection(row);
                    }
                    if (row.IsFinal == 0 && row.Children.length >= 1) {
                        vue.toggleRowSelection(row.Children);
                    }
                });
            }
        },
        watch: {
            dataList: {
                handler: function (newDataList, oldDataList) {
                    vue.$nextTick(function () {
                        vue.$refs.multipleTable.clearSelection();
                        vue.toggleRowSelection(newDataList);
                    });
                },
            }
        }
    });
    vue.dataList = vue.getDateList(JSON.parse(JSON.stringify(adminMenuList)), 0, formData.MenuIds);
    vue.toggleRowSelection(vue.dataList);
    function loadData() {
        vue.ajax({
            url: "@Url.ActionUrl("GetCheckBoxList", "MemberMenuItem")",
            success: function (data) {
                vue.adminMenuItem = data;
            }
        });
    }
    loadData();
</script>
