
<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>

    <template>
        <el-tabs type="card" v-model="searchData.state" v-on:tab-click="tabClick">
            <el-tab-pane label="使用中" name="1"></el-tab-pane>
            <el-tab-pane label="已废弃" name="0"></el-tab-pane>
        </el-tabs>
    </template>

    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-button size="small" title="提交处理时间视冗余数据的大小而定!" v-on:click="clearAll">一键清理冗余数据</el-button>
                </td>
                <td align="right">
                    <el-select size="mini" v-model="searchData.searchField">
                        <el-option value="name" label="按表名搜索"></el-option>
                        <el-option value="remark" label="按备注搜索"></el-option>
                        <el-option value="parentTable" 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>

    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered">
        <thead>
            <tr>
                <td align="center" rowspan="2">表名</td>
                <td align="center" rowspan="2">父级表</td>
                <td align="center" rowspan="2">父级字段</td>
                <td align="center" rowspan="2">备注</td>
                <td align="center" rowspan="2">创建日期</td>
                @*<td align="center" rowspan="2">创建人</td>*@
                <td align="center" colspan="3">统计</td>
                <td align="center" rowspan="2">字段管理</td>
                <td align="center" rowspan="2">数据</td>
            </tr>
            <tr>
                <td align="center">使用中</td>
                <td align="center">未使用</td>
                <td align="center">已删除</td>
            </tr>
        </thead>
        <tr class="item list-template-item" v-for="item in dataList">
            <td align="center">{{item.Name}}</td>
            <td align="center">{{item.ParentTable}}</td>
            <td align="center">{{item.ParentField}}</td>
            <td align="center">{{item.Remark}}</td>
            <td align="center">{{item.Thedate}}</td>
            <td align="center">{{item.Count.usingNums}}</td>
            <td align="center">{{item.Count.nousingNums}}</td>
            <td align="center">{{item.Count.deletedNums}}</td>
            <td align="center">
                <el-button size="small"  v-on:click="dialog({title:item.Remark+'：字段管理',url:'@Url.ActionUrl("Index","Field")?table='+item.Name,width:'100%',height:'100%',target:'self'})">管理</el-button>   
            </td>
            <td align="center">
                <el-button-group>
                    <el-button size="small" class="btn btn-default btn-sm ui-dialog" v-on:click="dialog({title:item.Name+'-数据管理',url:'@Url.ActionUrl("index","SubTableDataAdmin")?table='+item.Name,width:'95%',height:'95%'})">管理数据</el-button>
                    <el-button size="small"  v-on:click="submit({url:'@Url.ActionUrl("ClearInvalidData","SubTableDataAdmin")?table='+item.Name,confirmMsg:'是否确定此操作？',successMsg:'已经提交,请等待处理！'})">清理冗余</el-button>
                </el-button-group>
          </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
        //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            selectedItems:[],
            searchData: {state:"1",siteId:"",searchField:"name",searchKeyword:""},
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList:[],
        },
       methods: {
            loadData: function () {
                loadData();
           },
            clearAll: function ()
            {
                this.submit({ url: "@Url.ActionUrl("ClearAllInvalid")", successMsg: '已提交,后台正在处理中!' });
            },
            count: function (table)
            {
                var url = "@Url.ActionUrl("GetCount","SubTableDataAdmin")?table=" + table
                this.ajax({ url: url, type: "get", async: true }, function (data) {
                    data = JsonParse(data);
                    if (data != null) {
                        $lb_deleted.eq(i).removeClass("loading").html(data.deletedNums);
                        $lb_nousing.eq(i).removeClass("loading").html(data.nousingNums);
                        $this.removeClass("loading").html(data.usingNums);
                    }
                });
            },
           tabClick: function(tab, event) {
                //this.searchData.state = tab.name;
                this.loadData();
            }
        }
    });

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