
<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>
    <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")',width:'60%',height:'80%'})">
                            添加
                        </el-button>
                    </el-tooltip>
                </div>
            </td>
            <td align="right">
                <el-select size="mini" v-model="searchData.searchField" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-input size="mini" style="width:150px;" v-model.trim="searchData.searchKeyword" placeholder="请输入内容" clearable v-on:clear="loadData"></el-input>
                <el-button size="mini" v-on:click="loadData()">搜索</el-button>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" highlight-current-row style="width: 100%" border>
                <el-table-column label="表名" prop="Name" align="center"></el-table-column>
                <el-table-column label="备注" prop="Remark" align="center"></el-table-column>
                <el-table-column label="创建时间" prop="Thedate" 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.DeleteProtect" v-on:change="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=pa_category_table',data:{ids:scope.row.Id,setField:'DeleteProtect',setValue:scope.row.DeleteProtect},showSuccessMsg:false})"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="数据管理" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" v-on:click="dialog({title:scope.row.Remark+'-数据管理',url:'@Url.ActionUrl("index","CategoryDataAdmin")?table='+scope.row.Name,width:'100%',height:'100%'})">管理</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="字段管理" 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,size:'100%'})">管理</el-button>
                    </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:scope.row.Remark,url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'60%',height:'80%',target:'self'})">修改</el-button>
                            <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()',cancel:scope.row.DeleteProtect==1,cancelMsg:'保护中，不能删除'})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <ui-page-panel v-model="pageInfo" v-if="pageInfo.RecordCount>0" v-on:change="loadData()"></ui-page-panel>
</div>
<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            searchData: { searchField:"name",searchKeyword:""},
            pageInfo: { PageSize:15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList: [],
            options: [{ value: 'name', label: '按表名搜索' }, { value: 'remark', label: '按备注搜索' }],
        },
        methods: {
            loadData: function () {
                loadData();
            },
        }
    });

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

