@{
    string enTable = "pa_column";
    var blockset = StringHelper.Format<int>(Request.QueryString["blockSet"]);//可视化区块传递
}
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>@ViewBag.CurrentSiteName</el-breadcrumb-item>
            <el-breadcrumb-item>栏目管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="menu-bar-box">
        <el-tooltip class="item" effect="dark" content="添加栏目" placement="bottom-start">
            <el-button size="small" v-on:click="dialog({title:'栏目添加',url:'@Url.ActionUrl("Add")?xuhao='+dataList.length,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:0},beforeExecute:function(){return checkSelectedItems(selectList)},success:function(){loadData()},})">转为分类节点</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:1},beforeExecute:function(){return checkSelectedItems(selectList)},success:function(){loadData()},})">转为最终栏目</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("SetMultiple")?selectedIds='+getSelectedPropertys(selectList,'Id'),width:'800px',height:'90%',target:'self',beforeExecute:function(){return checkSelectedItems(selectList)},success:function(){loadData()}})">批设属性</a></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("clearRelativeInvalidate")'})">清理相关冗余数据</a></el-dropdown-item>
                <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{ids:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)}})">删除</a></el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div class="table-list-box">
        <template>
            <el-table class="tree_table" :data="dataList" default-expand-all :tree-props="{children:'Children',hasChildren: 'HasChildren'}" row-key="Id" v-on:selection-change="handleSelectionChange" tooltip-effect="dark" border style="width: 100%">
                <el-table-column type="selection" align="center" width="40"></el-table-column>
                <el-table-column label="栏目" class-name="fa-eye-hover">
                    <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>
                        <a :href="'/e/preview/column?id='+scope.row.Id" target="_blank" title="预览"><span class="el-icon-view"></span></a>
                    </template>
                </el-table-column>
                <el-table-column label="Id" prop="Id" width="100" align="center"></el-table-column>
                <el-table-column label="类型/模型" prop="_ColumnType" width="200" align="center"></el-table-column>
                <el-table-column label="显示" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.Show" :active-value="1" :inactive-value="0" v-on:change="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:scope.row.Id,setField:'Show',setValue:scope.row.Show},showSuccessMsg:false})"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="顺序" width="150" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.Xuhao" size="small" v-on:change="updateXuhao({row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@enTable',dataList:dataList})" style="width:120px" maxlength="4" class="xuhao">
                            <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="添加子栏目" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="small" v-on:click="dialog({title:scope.row.Name+'：添加子栏目',url:'@Url.ActionUrl("Add")?parentId='+scope.row.Id,width:'95%',height:'95%',target:'self'})" v-show="scope.row.IsFinal==0" title="添加子栏目">添加</el-button>
                            <el-button size="small" disabled v-show="scope.row.IsFinal==1">添加</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="small" v-on:click="dialog({title:'栏目修改',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,target:'self'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("delete")',confirmMsg:'是否确定删除？',data:{id:scope.row.Id},success:function(){deleteItem(dataList,scope.row)},})">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="help-block"><i class="el-icon-warning"></i> 带箭头的栏目可点击展开子节点</div>
    </div>
    <div class="footer-submit-bar" style="padding-left:20px" v-if="@blockset==1">
        <el-button type="primary" onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
    var loadUrl = "@Url.ActionUrl("ListData")";
    var expandKeys = "@ViewBag.ExpandKeys";//可视化界面传递id过来，默认展开传递过来的栏目
    if (isNullOrEmpty(expandKeys)) {
        expandKeys = [];
    } else {
        expandKeys = expandKeys.split(",");
    }
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            selectList: [],
            dataList: [],
            expandKeys: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.toString() == parentId.toString() })
                    vue.$set(itemRow, "Children",[]);
                    itemRow.OpenChildren = false;
                }

            },
        },
        filters: {
            getColumnTypeName: function (value) {
                value = value.toString();
                var stateName = ["首页", "信息页", "单页面","自定义链接"];
                if (!isInt(value)) {
                    value = 0;
                }
                value = parseInt(value.toString());
                return stateName[value];
            },
        },
    });

    //加载数据
    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>
