@{
    string layerIndex = Request.QueryString["layerIndex"];
    string table = ViewBag.Table;
    string action = ViewContext.RouteData.Values["action"].ToString();
    CurrentUser currentUser = ViewBag.CurrentUser;
    IEnumerable<dynamic> fieldData = Html.GetFieldList((string)ViewBag.Table, "list", currentUser);
}
<div class="main" id="main" v-cloak>
    <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")?table=@(table)&xuhao='+dataList.length,target:'self',width:'90%',height:'90%'})">
                            添加
                        </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=@table',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=@table',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("Transfer","CommonMethod")?table=@(table)&tableType=3&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("Delete")?table=@table',data:{ids:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',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="loadData">刷新</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table class="tree_table" ref="multipleTable" :data="dataList" default-expand-all :tree-props="{children:'Children'}" row-key="Id" v-on:selection-change="handleSelectionChange" tooltip-effect="dark" highlight-current-row border style="width: 100%">
                <el-table-column type="selection" align="center" width="40"></el-table-column>
                @{
                    int i = 0;
                    foreach (var item in fieldData)
                    {
                        int fieldId = item.Id;
                        int listWords = StringHelper.Format<int>(item.ListWords);
                        string remark = item.Remark;
                        string field = StringHelper.FirstCharUpper(item.Name);
                        string fieldType = item.FieldType;
                        string valueType = item.ValueType;
                        string width = item.ListWidth;
                        if (!string.IsNullOrEmpty(width) && width != "0")
                        {
                            width = " width=\"" + width + "\" ";
                        }
                        else
                        {
                            width = "";
                        }
                        <el-table-column align="left" label="@remark" @Html.Raw(width) :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                @if (new string[] { "subtable" }.Contains(fieldType))
                                {
                                    string subTableType = item.SubTableType;
                                    string bt_text = StringHelper.Format<string>(item.BtText);
                                    string win_width = StringHelper.Format<string>(item.WinWidth);
                                    string win_height = StringHelper.Format<string>(item.WinHeight);
                                    <span>
                                        <el-button size="mini" v-on:click="dialog({title:'@(remark)',url:'/E/SubData/@(subTableType=="multiple"?"":"Set")?parentId='+scope.row.Id+'&fieldId=@fieldId',width:'@win_width',height:'@win_height',target:'self'})">@(bt_text)</el-button>
                                    </span>
                                }
                                else if (fieldType == "image" || fieldType == "images")
                                {
                                    <ui-list-attachment-display display-type="image" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                                }
                                else if (fieldType == "file" || fieldType == "files")
                                {
                                    <ui-list-attachment-display display-type="file" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                                }
                                else if (fieldType == "radio" || fieldType == "checkbox" || fieldType == "select" || fieldType == "cascader" || fieldType == "datapicker")
                                {
                                    <span>{{left(@listWords,scope.row["_@field"])}}</span>
                                }
                                else
                                {
                                    if (i == 0)
                                    {
                                        <span v-show="scope.row.IsFinal==1">
                                            <i class="el-icon-empty"></i> {{left(@listWords,scope.row["@field"])}}
                                        </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> {{left(@listWords,scope.row["@field"])}}
                                        </span>
                                    }
                                    else
                                    {
                                        <span>{{left(@listWords,scope.row["@field"])}}</span>
                                    }

                                }

                            </template>
                        </el-table-column>
                        i++;
                    }
                }
                <el-table-column label="Id" prop="Id" width="100" align="center"></el-table-column>
                <el-table-column label="启用" align="center" width="120">
                    <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=@(table)',data:{ids:scope.row.Id,setField:'State',setValue:scope.row.State},showSuccessMsg:false})"></el-checkbox>
                    </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" style="width:120px" maxlength="4" class="xuhao" v-on:change="updateXuhao({row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@table',dataList:dataList})">
                            <template slot="prepend">
                                <el-button v-on:click="updateXuhao({type:-1,row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@table',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=@table',dataList:dataList})">↓</el-button>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="添加下级" width="150" 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")?table=@table&xuhao=0&parentId='+scope.row.Id,width:'90%',height:'90%',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="300" align="center">

                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="small" v-on:click="dialog({title:'修改',url:'@Url.ActionUrl("Edit")?table=@table&id='+scope.row.Id,target:'self',width:'90%',height:'90%'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("delete")?table=@table',confirmMsg:'是否确定删除？',data:{id:scope.row.Id},success:loadData})">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="help-block"><i class="el-icon-warning"></i> 带箭头图标的节点可点击展开</div>
    <div class="footer-submit-bar" style="padding-left:12px">
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
   var loadUrl = "@Url.ActionUrl("ListData")?table=@table";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            refreshKey:0,
            selectList: [],
            dataList: [],
            expandKeys:[],//展开的ids
        },
        methods: {
            left: function (len, txt) {
                if (isNullOrEmpty(txt)) {
                    return "";
                } else {
                    txt = txt.toString();
                }
                if (isNullOrEmpty(len) || len == "0") {
                    return txt;
                } else {
                    return txt.left(len);
                }
            },
            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.refreshKey++;
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();
</script>


