VUE客户端分页

@{
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    ViewBag.Title = "标签管理";
}

<div class="header">
    <ul class="breadcrumb">
        <li><a href="/">首页</a> </li>
        <li class="active">标签管理</li>
    </ul>
</div>

<div class="main-content" id="app">
    <ul class="nav nav-tabs" id="myTab">
        <li class="" v-for="category in tagCategorys">
        <a href="#" v-on:click="switchCategory(category.Id)" :id="category.Id">{{category.Name}}</a>
        </li>
        <li><a href="#" v-on:click="showAddCategory">+</a></li>        
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="">
            <div class="col-lg-12" style="margin-top:10px;">
                <div class="row">
                    <div class="col-lg-3 col-sm-2" role="alert">总标签数：{{filteredTags.length}}</div>
                    <div class="col-lg-3 col-sm-2">
                        每页显示：
                        <select v-model="pageSize">
                                <option v-for="o in pageSizeOption"  :value="o">{{o}}</option>
                        </select>
                    </div>
                    <div class="col-lg-3 col-sm-4">
                        <a href="#" class="btn btn-default" v-on:click="showAddTag"><i class="fa fa-edit"></i>&nbsp;增加</a>

                        <a href="#" class="btn btn-primary" v-on:click="addContentTag"><i class="fa fa-tag"></i>&nbsp;内容自动打标签</a>
                    </div>
                    <div class="col-lg-3 col-sm-4">检索：<input type="text" v-model="tagKey" /></div>
                </div>
                
                <div class="row">
                    <div class="col-lg-2 col-md-3 col-sm-4" v-for="tag in pagedTags">
                        <div style="float:left;margin-top:10px;">
                            {{tag.Name}}
                            <i class="fa fa-remove close" style="padding:3px 0 0 5px;" aria-hidden="true" v-on:click="removeTag(tag.Id,tag.Name)" title="点击删除该标签"></i>
                            <i class="fa fa-pencil close" style="padding:3px 0 0 5px;" aria-hidden="true" v-on:click="showEditTag(tag.Id)" title="点击修改该标签名"></i>
                        </div>
                        <!--
            <div style="float:left;margin-top:10px;width:50px;padding-left:10px;" v-on:click="">修改</div>
            <div style="float:left;margin-top:10px;width:50px;">删除</div>
                -->
                    </div>
                </div>
                <div class="row">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li :class="{disabled : pageIndex==1}">
                                <a href="#" v-on:click="move(-1)" aria-label="向前">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="page in pages" v-bind:class="{ active: page==pageIndex }">
                            <a href="#" v-on:click="moveTo(page)">{{page}}</a>
                            </li>
                            <li :class="{disabled : pageIndex==pages}">
                                <a href="#" v-on:click="move(1)" aria-label="向后">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>            
        </div>
    </div>
</div>


@section scripts{
    @{Html.RegisterMvcPagerScriptResource();}

    <script type="text/javascript">

        var vm = new Vue({
            el: "#app",
            data: {
                tagCategorys: [{ Name: '加载中......', Id: 0 }],
                tags: [{ Name: '加载中......', Id: 0 }],
                currentCategoryId: -1,
                tagKey: "",
                pageSizeOption: [50,100],
                pageSize: 50,
                pageIndex: 1
            },
            methods: {
                showAddCategory: function () {
                    var self = this;
                    var name = prompt("输入标签分类名", "")
                    if (name != null && name != "") {
                        //add in backend
                        $.post('@Url.Action("AddCategory", "Tag")', {
                            name: name
                        }, function (res) {
                            if (res.IsSuccess) {
                                self.tagCategorys.push(res.newCategory);
                            } else {
                                noty({ text: '增加失败！' + res.Message, type: 'information', timeout: 2000 });
                            }
                        });
                    }
                },
                showAddTag: function () {
                    var self = this;
                    var name = prompt("输入标签名", "")
                    if (name != null && name != "") {
                        //add in backend
                        $.post('@Url.Action("AddTag", "Tag")', {
                            name: name,
                            categoryId: self.currentCategoryId
                        }, function (res) {
                            if (res.IsSuccess) {
                                self.tags.unshift(res.newTag);
                            } else {
                                noty({ text: '增加失败！' + res.Message, type: 'information', timeout: 2000 });
                            }
                        });
                    }
                },
                showEditTag: function (tagId) {
                    var tag = null;
                    for (var index = 0; index < this.tags.length; index++) {
                        var _tag = this.tags[index];
                        if (_tag.Id == tagId) {
                            tag = _tag;
                            break;
                        }
                    }
                    var name = prompt("输入新标签名", tag.Name)
                    if (name != null && name != "" && name != tag.Name) {
                        //update in backend
                        $.post('@Url.Action("ModifyTag", "Tag")', {
                            name: name,
                            id:tagId
                        }, function (res) {
                            tag.Name = res.Tag.Name;
                        });
                    }
                },
                switchCategory: function (_tagCategoryId) {
                    this.loadCategory(_tagCategoryId);
                    $('#myTab a').css('');
                    $('#' + _tagCategoryId).css('active');
                    $('#' + _tagCategoryId).tab('show');
                },
                removeTag: function (tagId,name) {
                    if (confirm("确定要删除标签: " + name + " 吗？")) {
                        var self = this;
                        $.post('@Url.Action("DeleteTag", "Tag")', {
                            id: tagId
                        }, function (res) {
                            if (res.IsSuccess) {
                                var index = self.tags.findIndex(function (t) {
                                    return t.Id == tagId
                                });
                                if (index > -1) {
                                    self.tags.splice(index, 1);
                                }
                            } else {
                                noty({ text: '删除失败！' + res.Message, type: 'information', timeout: 2000 });
                            }
                        });
                    }
                },
                addContentTag: function () {
                    $.post('@Url.Action("AutoUpdateContentTag", "ContentTag")', function () {
                        noty({ text: '内容自动打标签成功！', type: 'success', timeout: 2000 });
                    })
                },
                move: function (length) {
                    var moveTo = this.pageIndex + length;
                    if (moveTo < 1) {
                        moveTo = 1;
                    } else if (moveTo > this.pages) {
                        moveTo = this.pages;
                    }
                    this.pageIndex = moveTo;
                },
                moveTo: function (to) {
                    this.pageIndex = to;
                },
                loadCategory(_tagCategoryId) {
                    var self = this;
                    self.tagKey = "";
                    self.pageIndex = 1;
                    $.post('@Url.Action("GetCategoryAndTag","Tag")', {
                        tagCategoryId: _tagCategoryId
                    }, function (res) {
                        self.tags = res.tags;
                        self.tagCategorys = res.tagCategorys;
                        self.currentCategoryId = res.currentCategoryId;
                    });
                }
            },
            created: function () {
                this.loadCategory(-1);
            },
            mounted: function () {
                this.$nextTick(function () {
                    $('#myTab a:first').css('active');
                    $('#myTab a:first').tab('show');
                })
            },
            watch: {
                tagKey: function (newKey) {
                    this.pageIndex = 1;
                }
            },
            computed: {
                filteredTags: function () {
                    var self = this;
                    var keyTags = this.tags.filter(function (t) {
                        return self.tagKey == "" || t.Name.indexOf(self.tagKey.trim())>=0
                    });
                    return keyTags;
                },
                pagedTags: function () {
                    var self = this;
                    var start = (self.pageIndex - 1) * self.pageSize;
                    return self.filteredTags.slice(start, start + self.pageSize);
                },
                pages: function () {
                    var self = this;
                    var total = self.filteredTags.length;
                    return Math.ceil(total / self.pageSize)
                }
            }
        });


    </script>
}