@{
    CurrentUser user = ViewBag.CurrentUser;
    IEnumerable<dynamic> fieldData = Html.GetFieldList((string)ViewBag.Table, "list", user);
    string enTable = "pa_department";
}
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>部门管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <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="openDrawer({title:'添加',url:'@Url.ActionUrl("Add")?xuhao='+(dataList.length+1),width:'95%',height:'95%',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)" class="ui-dialog" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{ids:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)}})">删除</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </td>
            </tr>
        </table>
        <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" width="40" align="center"></el-table-column>
            <el-table-column label="部门" 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="部门ID" prop="Id" align="center" width="90"></el-table-column>
            <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.Xuhao" size="small" readonly style="width:120px">
                        <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 :disabled="scope.row.IsFinal==1" v-on:click="openDrawer({title:scope.row.Name+'：添加子部门',url:'@Url.ActionUrl("Add")?parentId='+scope.row.Id,width:'90%',height:'90%',target:'self'})" size="small">添加</el-button>
                </template>
            </el-table-column>
            <el-table-column label="菜单权限" align="center" v-if="false">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.IsFinal==0" v-on:click="openDrawer({title:scope.row.Name+'：菜单权限设置',url:'@Url.ActionUrl("menuPermissions")?departmentId='+scope.row.Id,width:'90%',height:'95%'})" size="small">设置</el-button>
                </template>
            </el-table-column>
            <el-table-column label="信息发布权限" align="center">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.IsFinal==0" v-on:click="openDrawer({title:scope.row.Name+'：信息权限设置',url:'@Url.ActionUrl("InfoPermission")?departmentId='+scope.row.Id,width:'90%',height:'95%'})" size="small"><span class="fa fa-pencil-square"> 设置</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="openDrawer({title:scope.row.Name+'-修改', url:'@Url.ActionUrl("Edit")?id='+scope.row.Id+'&guid={guid}',width:'90%',height:'95%'})" size="small">修改</el-button>
                        <el-button 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>
    <div class="help-block">
        <i class="el-icon-warning"></i> 注：同一个信息表同时设置会员组、部门和管理员信息发布权限时，优先级顺序：管理员>部门>会员组
    </div>
    <el-drawer :style="{display:(drawerConfig.show?'block':'none')}" :modal="drawerConfig.modal"  :title="drawerConfig.title" v-on:close="drawerConfig.url=''" v-on:opened="openDrawerCallBack" :visible.sync="drawerConfig.show" :with-header="true" :size="drawerConfig.size">
        <div style="width:100%;height:100%;overflow:hidden;" v-loading="drawerConfig.loading">
            <iframe ref="drawerIframe" :src="drawerConfig.url" style="width:100%;height:100%" scrolling="auto" frameborder="0"></iframe>
        </div>
    </el-drawer>
</div>

<script type="text/javascript">
    var loadUrl = "@Url.ActionUrl("ListData")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            drawerConfig: { show: false, title: "", modal: true, url: "", loading: true, size: "94%" },
            dataList:[],
            expandKeys:[],//展开的ids
            selectList: [],
        },
        methods: {
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            loadData: function () {
                loadData();
            },
            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>
