@{
    string enTable = "pa_admin_menu";
}
<style>
    .el-input-group__append, .el-input-group__prepend, .el-input__inner {
        padding: 0px 10px;
    }
</style>
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i><a href="javascript:void(0)" onclick="location.href=location.href">管理菜单</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
        <tr>
            <td>
                <div class="btn-group btn-group-sm">
                    <el-tooltip effect="dark" content="添加一级菜单" placement="bottom-start">
                        <el-button size="small" v-on:click="dialog({title:'添加顶部菜单',url:'@Url.ActionUrl("Add")?xuhao='+dataList.length,width:'90%',height:'90%',target:'self'})">
                            添加
                        </el-button>
                    </el-tooltip>
                    <el-dropdown>
                        <el-button size="small">
                            功能菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'IsFinal',setValue:1},success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">转为最终分类</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'IsFinal',setValue:0},success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">转为非最终分类</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="dialog({title:'菜单转移',url:'@Url.ActionUrl("Transfer","CommonMethod")?table=@enTable&selectedIds='+getSelectedPropertys(selectList,'Id'),beforeExecute:function(){return checkSelectedItems(selectList)},width:'600px',height:'90%',target:'self'})">转移</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("ClearInvalid")'})">清理冗余菜单项</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </td>
        </tr>
    </table>

    <div class="table-list-box">
        <template>
            <el-table class="tree_table" :data="dataList" tooltip-effect="dark" highlight-current-row style="width: 100%" default-expand-all row-key="Id" :tree-props="{children: 'Children'}" v-on:selection-change="handleSelectionChange" border>
                <el-table-column type="selection" align="center" width="40"> </el-table-column>
                <el-table-column label="菜单名称" header-align="center" prop="Name" min-width="200">
                    <template slot-scope="scope">
                        <span v-show="scope.row.IsFinal==1">
                            <i class="el-icon-empty"></i>{{scope.row.Name}}
                        </span>
                        <span v-on:click="load(scope.row)" style="cursor:pointer;" v-show="scope.row.IsFinal==0">
                            <i v-bind:class="{'el-icon-arrow-right':scope.row.OpenChildren==false,'el-icon-arrow-down':scope.row.OpenChildren==true}"></i>{{scope.row.Name}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="系统菜单" width="100" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-success" v-if="scope.row.IsSys==1"></i>
                        <span v-else>‐</span>
                    </template>
                </el-table-column>
                <el-table-column label="启用" width="100" align="center">
                    <template slot-scope="scope">
                        <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.State" v-on:change="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:scope.row.Id,setField:'State',setValue:scope.row.State},showSuccessMsg:false})"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.Xuhao" size="small"  style="width:120px" maxlength="4" v-on:change="updateXuhao({row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@enTable',dataList:dataList})">
                            <template slot="prepend">
                                <el-button v-on:click="updateXuhao({type:-1,row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@enTable',dataList:dataList})">↑</el-button>
                            </template>
                            <template slot="append">
                                <el-button slot="append" v-on:click="updateXuhao({type:1,row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@enTable',dataList:dataList})">↓</el-button>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="子菜单添加" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" :disabled="scope.row.IsFinal==1?true:false" v-on:click="dialog({title:'子菜单添加：'+scope.row.Name,url:'@Url.ActionUrl("Add")?parentId='+scope.row.Id,width:'90%',height:'90%',target:'self'})">添加</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="菜单项" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" :disabled="scope.row.IsFinal==0?true:false" v-on:click="dialog({title:'菜单项目管理：'+scope.row.Name,url:'@Url.ActionUrl("index","AdminMenuItem")?menuId='+scope.row.Id,width:'95%',height:'95%',target:'self'})">管理</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div class="el-button-group">
                            <el-button size="small" v-on:click="dialog({title:scope.row.Name,url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'90%',height:'90%',target:'self'})">修改</el-button>
                            <el-button size="small" v-bind:disabled="scope.row.IsSys==1" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()'})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="help-block"><i class="el-icon-warning"></i> 带箭头图标的节点可点击展开</div>
</div>
<script type="text/javascript">
    var loadUrl = "@Url.ActionUrl("ListData")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            selectList: [],
            dataList: [],
            expandKeys:[],//展开的ids
        },
        methods: {
            loadData: function () {
                loadData();
            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            },
            load: function (itemRow){
                var vue = this;
                var parentId = itemRow.Id;
                if (itemRow.OpenChildren == false) {
                    vue.expandKeys.push(parentId);
                    itemRow.OpenChildren  = true;
                    vue.ajax({
                        url: loadUrl,
                        data: { parentId: parentId},
                        success: function (data) {
                            if (Array.isArray(data)) {
                                vue.$set(itemRow,"Children", data); //必须采用vue的设置方式才能进行跟踪
                            }
                        }
                    });
                } else {
                    vue.expandKeys.remove(function (item) { return item == parentId })
                    vue.$set(itemRow, "Children",[]);
                    itemRow.OpenChildren = false;
                }

            },
        }
    });

    //加载数据
    function loadData()
    {
        vue.ajax({
            url: loadUrl,
            data: { parentId: 0, expandKeys: vue.expandKeys.join(",") },
            success: function (data) {
                if (Array.isArray(data)) {
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();
</script>



