caimei365-www/src/main/resources/static/js/supplier-center/article/article-list.js

"use strict";

var articleList = new Vue({
    el: '#articleList',
    data: {
        name: 'supplier-article-list',
        refreshType: '',
        hidden: '',
        visibilityChange: '',
        listRecord: 0,
        shopId: GLOBAL_SHOP_ID || 0,
        listQuery: {
            articleId: '',
            title: '',
            publisher: '',
            auditStatus: '',
            status: '',
            onlineStatus: '',
            typeId: '',
            pageNum: 1,
            pageSize: 10
        },
        pageInput: 1,
        pageTotal: 0,
        articleList: [],
        articleTypeList: []
    },
    computed: {
        pageTotal: function pageTotal() {
            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
            return total > 0 ? total : 1;
        },
        showPageBtn: function showPageBtn() {
            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
            total = total > 0 ? total : 1;
            var index = this.listQuery.pageNum,
                arr = [];

            if (total <= 6) {
                for (var i = 1; i <= total; i++) {
                    arr.push(i);
                }

                return arr;
            }

            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
        }
    },
    filters: {
        // 时间格式化
        formatDate: function formatDate(date) {
            if (!date) return '---';
            return dateFormat(new Date(date));
        }
    },
    created: function created() {
        this.getArticleList();
        this.fetchArticleCatagory();
    },
    mounted: function mounted() {
        window.name = this.name;
        // this.bindWindowHiddenOrVis();
        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
        $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
    },
    methods: {
        // 获取文章列表
        getArticleList: function getArticleList() {
            var that = this;
            this.listQuery.shopId = this.shopId;
            SupplierApi.GetArticleList(this.listQuery, function (res) {
                // console.log(res);
                if (res.code === 0) {
                    that.listRecord = res.data.total;
                    that.articleList = res.data.list;
                    that.pageTotal = res.data.pages;
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        //表格操作按钮点击
        clickOption: function clickOption(article, type) {
            var handles = {
                1: this.toEdit,
                2: this.changeStatus,
                3: this.toDetail,
                4: this.handleDelete
            };
            handles[type](article);
        },
        //跳转编辑页面
        toEdit: function toEdit(article) {
            localStorage.setItem('articleId', article.articleId);
            window.open('/supplier/article/edit.html');
        },
        //修改状态
        changeStatus: function changeStatus(article) {
            var newStatus = 1;

            if (article.status === 1) {
                newStatus = 0;
            }

            SupplierApi.ArticleStatusChange({
                articleId: article.articleId,
                shopId: this.shopId,
                status: newStatus
            }, function (res) {
                if (res.code === 0) {
                    // 不刷新数据更新
                    article.status = newStatus;
                    const tip = newStatus ? '文章已发布' : '文章已存入草稿箱';
                    CAIMEI.dialog(tip);
                } else {
                    CAIMEI.dialog('修改文章状态失败!');
                }
            });
        },
        //查看
        toDetail: function toDetail(article) {
            if (article.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
            if (article.onlineStatus !== 2) return CAIMEI.dialog('请等待文章上线后查看!');
            if (!article.status) return CAIMEI.dialog('请发布后查看!');
            window.open('/info/detail-' + article.articleId + '-1.html');
        },
        // 跳转添加文章页面
        handleAddArticle: function handleAddArticle() {
            window.open('/supplier/article/edit.html');
        },
        // 查询文章列表
        handleSearchList: function handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getArticleList();
        },
        // 获取文章列表
        fetchArticleCatagory: function fetchArticleCatagory() {
            var that = this;
            SupplierApi.ArticleCategory({}, function (res) {
                if (res.code === 0) {
                    that.articleTypeList = res.data;
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        //删除确认
        handleDelete: function handleDelete(article) {
            var that = this;
            var params = {
                content: '确认删除改文章?',
                cancelBtnText: '取消',
                confitmBtnText: '删除',
                closeIcon:true
            };
            CAIMEI.Popup(params, function () {
                that.articleDelete(article);
            });
        },
        // 删除文章
        articleDelete: function articleDelete(article) {
            var that = this;
            SupplierApi.ArticleRemove({
                articleId: article.articleId
            }, function (res) {
                if (res.code === 0) {
                    that.getArticleList();
                    CAIMEI.dialog('删除文章成功!');
                } else {
                    CAIMEI.dialog('删除文章失败!');
                }
            });
        },
        //页码跳转
        toPagination: function toPagination(pageNum) {
            if (pageNum <= this.pageTotal) {
                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
                this.getArticleList();
                $('html ,body').animate({scrollTop: 0}, 400, 'linear'); // 页面置顶
            }
        },
        // 输入框设置页码
        checkNum: function checkNum() {
            if (this.pageInput > this.pageTotal) {
                this.pageInput = this.pageTotal;
            } else if (this.pageInput < 1) {
                this.pageInput = 1;
            }
        },
        bindWindowHiddenOrVis: function bindWindowHiddenOrVis() {
            // 设置隐藏属性和改变可见属性的事件的名称
            if (typeof document.hidden !== "undefined") {
                // Opera 12.10 and Firefox 18 and later support
                this.hidden = "hidden";
                this.visibilityChange = "visibilitychange";
            } else if (typeof document.msHidden !== "undefined") {
                this.hidden = "msHidden";
                this.visibilityChange = "msvisibilitychange";
            } else if (typeof document.webkitHidden !== "undefined") {
                this.hidden = "webkitHidden";
                this.visibilityChange = "webkitvisibilitychange";
            } // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告


            if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {
                console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
            } else {
                // 处理页面可见属性的改变
                document.addEventListener(this.visibilityChange, this.handleVisibilityChange, false);
            }
        },
        // 如果页面是展示状态 && 需要刷新列表，则刷新列表
        handleVisibilityChange: function handleVisibilityChange() {
            var that = this;
            this.refreshType = window.localStorage.getItem('refreshType');

            if (document[that.hidden]) {
                console.log(this.refreshType);
                console.log('article list page is show');

                if (this.refreshType) {
                    that.listQuery.pageNum = 1;
                    window.localStorage.removeItem('refreshType');
                    that.getArticleList();
                }
            }
        }
    }
});