@{
    string enTable = "pa_info_table";
}
<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 effect="dark" content="添加信息表" placement="bottom-start">
                        <el-button size="small" type="button" v-on:click="dialog({title:'添加信息表',url:'@Url.ActionUrl("Add")',width:'95%',height:'95%',target:'self'})">添加</el-button>
                    </el-tooltip>
                </td>
                <td align="right">
                    <ui-select size="mini" :options="siteOptions" v-model="searchData.siteId" v-on:change="loadData" clearable placeholder="请选择所属站点">
                    </ui-select>
                    <el-select size="mini" v-model="searchData.searchField" clearable>
                        <el-option value="name" label="按表名搜索"></el-option>
                        <el-option value="urlSymbol" label="按Url标识搜索"></el-option>
                        <el-option value="remark" label="按备注搜索"></el-option>
                    </el-select>
                    <el-input size="mini" style="width:150px;" placeholder="搜索关键词" v-model.trim="searchData.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-button size="mini" onclick="loadData()">确定</el-button>
                </td>
            </tr>
        </table>
    </div>
    <el-table  :data="dataList" row-key="Id" tooltip-effect="dark" border highlight-current-row style="width: 100%" v-on:selection-change="handleSelectionChange">
        <el-table-column prop="Name" label="表名"></el-table-column>
        <el-table-column prop="Remark" label="备注"></el-table-column>
        <el-table-column label="所属站点">
            <template slot-scope="scope">
                {{getSiteName(scope.row.SiteId)}}
            </template>
        </el-table-column>
        <el-table-column label="删除保护" width="120" align="center">
            <template slot-scope="scope">
                <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.DeleteProtect" v-on:change="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:scope.row.Id,setField:'DeleteProtect',setValue:scope.row.DeleteProtect},showSuccessMsg:false})"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="菜单启用" width="120" align="center">
            <template slot-scope="scope">
                <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.ShowMenu" v-on:change="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@enTable',data:{ids:scope.row.Id,setField:'ShowMenu',setValue:scope.row.ShowMenu},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" v-on:change="updateXuhao({row:scope.row,url:'@Url.ActionUrl("UpdataListXuhao", "CommonMethod")?table=@enTable',dataList:dataList})">
                    <template slot="prepend">
                        <el-button v-on:click="updateXuhao({type:'-',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:'+',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 size="small" v-on:click="dialog({title:scope.row.Remark+'：字段管理',url:'@Url.ActionUrl("Index","Field")?table='+scope.row.Name,width:'100%',height:'100%',target:'self'})">管理</el-button>
            </template>
        </el-table-column>

        <el-table-column label="数据" width="220" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small" v-on:click="dialog({title:scope.row.Remark+'：数据管理',url:'@Url.ActionUrl("Index","InfoData")?_from=infotable&table='+scope.row.Name,width:'95%',height:'95%',target:'self'})">数据管理</el-button>
                    <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("ClearInvalidData")',data:{table:scope.row.Name},confirmMsg:'是否确定此操作？',successMsg:'已经提交处理！',callback:''})">清理冗余</el-button>
                </el-button-group>
            </template>
        </el-table-column>

        <el-table-column label="投稿表单" width="120" align="center">
            <template slot-scope="scope">
                <el-button size="small" :disabled="scope.row.GuestSubmit==0" v-on:click="dialog({title:'获取表单html',url:'@Url.ActionUrl("FormHtml")?table='+scope.row.Name,width:'90%',height:'90%',target:'self'})">表单</el-button>
            </template>
        </el-table-column>

        <el-table-column width="300" label="操作" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small" v-on:click="dialog({title:'复制表结构',url:'@Url.ActionUrl("Copy")?id='+scope.row.Id,width:'90%',height:'90%',target:'self'})" >复制</el-button>
                    <el-button size="small" v-on:click="dialog({title:scope.row.Remark,url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'90%',height:'90%',target:'self'})" >修改</el-button>
                    <el-button size="small" :disabled="scope.row.DeleteProtect==1" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()'})">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
</div>

<script type="text/javascript">
        //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            siteOptions:@Html.RawModel(Html.GetOptionsJson("pa_site","remark")),
            selectedItems:[],
            searchData: {siteId:"@ViewBag.CurrentSiteId",searchField:"name",searchKeyword:""},
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList:[],
        },
        methods: {
            getSiteName: function (siteId)
            {
                var siteItem = this.siteOptions.find(function (item) { return item.value == siteId });
                if (siteItem != undefined)
                {
                    return siteItem.label;
                }
                else
                {
                    return "-";
                }
            },
           handleSelectionChange: function (val)
           {
               selectedItems = val;
            },
           loadData: function ()
           {
               loadData();
           }
        }
    });

    //加载数据
    function loadData()
    {
        var serverData = extend({},vue.pageInfo,vue.searchData);
        ajax({
        url: "@Url.ActionUrl("PageListData")",
            data: serverData,
            success: function (responseData) {
                if (responseData != "") {
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                }
            }
        });
    }
    loadData();
</script>