@model string
<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>
    @*<template>
        <el-tabs type="card" v-model="queryData.roleType"  @@tab-click="loadData">
            <el-tab-pane label="所有角色" name="-1"></el-tab-pane>
            <el-tab-pane label="菜单权限角色" name="0"></el-tab-pane>
            <el-tab-pane label="信息权限角色" name="1"></el-tab-pane>
        </el-tabs>
    </template>*@

    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-tooltip class="item" effect="dark" content="添加角色" placement="bottom-start">
                        <el-button size="small" v-on:click="dialog({title:'添加角色',url:'@Url.ActionUrl("add")',width:'600px',height:'300px'})">
                            添加
                        </el-button>
                    </el-tooltip>
                    <el-button style="margin-left:0px;" size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:loadData,beforeExecute:function(){return checkSelectedItems(selectList)},})">
                        删除
                    </el-button>
                </td>
                <td align="right">
                    <el-select v-model="queryData.searchField" size="mini" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-input size="mini" v-model.trim="queryData.searchKeyword" style="width:150px;" placeholder="输入关键词"  clearable v-on:clear="loadData(false)"></el-input>
                    <el-button size="mini" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>

        <el-table ref="multipleTable" :data="dataList" row-key="Id" tooltip-effect="dark" border highlight-current-row style="width: 100%" v-on:selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" :selectable="selectInit"></el-table-column>
            <el-table-column prop="Name" label="名称" min-width="100"></el-table-column>

            <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true" min-width="150"></el-table-column>

            <el-table-column prop="Remark" label="菜单权限设置" align="center">
                <template slot-scope="scope">
                    <el-button v-on:click="dialog({title:scope.row.Name+':管理菜单权限',url:'@Url.ActionUrl("MenuPermission")?roleId='+scope.row.Id,width:'90%',height:'95%'})" size="small"><span class="fa fa-navicon"> 设置</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="el-button-group">
                        <el-button v-on:click="dialog({title:scope.row.Name,url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'600px',height:'300px'})" size="small">修改</el-button>
                        <el-button :disabled="scope.row.IsSuperadmin==1" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:loadData})" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <ui-page-panel v-if="pageInfo.RecordCount>0" v-model="pageInfo" v-on:change="loadData"></ui-page-panel>
</div>
<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            selectList:[],
            pageInfo: { PageSize:15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList: [],
            queryData: {roleType:"-1",searchField: "name", searchKeyword: "" },
            options: [{ value: 'name', label: '按名称搜索' }, { value: 'remark', label: '按备注搜索' }],
        },
        methods: {
            loadData: function () {
                var vue = this;
                serverData = extend(vue.pageInfo, vue.queryData);
                vue.ajax({
                    url: "@Url.ActionUrl("PageListData")",
                    data: serverData,
                    success: function (responseData) {
                        if (responseData != "")
                        {
                            vue.dataList = responseData.Data;
                            vue.pageInfo = responseData.PageInfo;
                        }
                    }
                });
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            selectInit: function (row, index) {
                if (row.IsSuperadmin == 1) {
                    return false  //不可勾选
                } else {
                    return true  //可勾选
                }
            }
        }
    });
    vue.loadData();
</script>



