@{
    ViewBag.Title = "内容模板内容列表";
}
@section scripts{
    <script src="~/Content/Scripts/vue.min.js"></script>
    <script src="~/Content/Scripts/Content/contentList.js"></script>
}
<div class="row">
    <div class="col-xs-12">
        <h3 class="header smaller lighter blue">内容列表</h3>

        <div class="table-responsive" id="table-list">
            <template id="grid-template">
                <table v-if="gridData.length" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <td>内容</td>
                            <td>状态</td>
                            <td>创建时间</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="entry in gridData">
                            <td>{{entry.fContent}}</td>
                            <td>{{entry.fState|convertState}}</td>
                            <td>{{entry.fDate}}</td>
                        </tr>
                    </tbody>
                </table>
                <p v-else>暂无数据.</p>
            </template>
        </div>
    </div>
</div>

$(function () {
    loadGridData("", -1);
});
function loadGridData(fTmplId, fState) {
    axios.post('/admin/content/GetContentList', { "fTmplId": fTmplId, "fState": fState })
        .then(function (res) {
            var data = res.data.data;
            new Vue({
                el: "#table-list",
                data: { gridData: data },
                template: "#grid-template",
                filters: {
                    convertState: function (value) {
                        return value == "0" ? "已删除" : "使用中";
                    }
                }
            });
        })
        .catch(function (err) {
            layer.alert(err.message);
        });
}