@{
    Layout = "~/Areas/Admin/Views/_LayoutFramePage.cshtml";
    ViewBag.CurrentMenuId = "#CustomRouteCategory";
    ViewBag.MenuPath = "../Menu";
}
<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>
    <div class="menu-bar-box">
        <el-tooltip effect="dark" content="添加路由分类" placement="bottom-start">
            <el-button size="small" v-on:click="dialog({title:'添加',url:'@Url.ActionUrl("Add")',width:'700px',height:'400px',target:'self'})">
                添加
            </el-button>
        </el-tooltip>
    </div>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" border>
                <el-table-column label="分类备注" prop="Remark" align="left"></el-table-column>
                <el-table-column label="分类文件" prop="Name"></el-table-column>
                <el-table-column label="创建日期" prop="CreationTime" align="center"></el-table-column>
                <el-table-column label="修改日期" prop="LastWriteTime" align="center"></el-table-column>
                <el-table-column label="文件大小" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.FileLength}}kb</span>
                    </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:'修改',url:'@Url.ActionUrl("Edit")?formData=parent.vue.dataList['+scope.$index+']',width:'700px',height:'400px',target:'self'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{FullName:scope.row.FullName},confirmMsg:'确定删除吗？',success:loadData})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="help-block"><span class="fa fa-info-circle"></span> 每个文件将会在模板目录下创建一个*Route.Config的文件</div>
</div>


<script type="text/javascript">
    //注册列表常用方法
    var rootPath = "/Templates/@(ViewBag.CurrentTemplateDirectory)";
    var loadUrl = "@Url.ActionUrl("ListData")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            rootPath: rootPath,
        },
        methods: {
            loadData: function () {
                loadData();
            },
        },
        watch: {
        }
    });
    //加载数据
    function loadData() {
        vue.ajax({
            url: loadUrl,
            data: { path: vue.rootPath },
            success: function (data) {
                if (Array.isArray(data)) {
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();
</script>