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

"use strict";
const Editor = window.createEditorComponent();

var articleEdit = new Vue({
    el: '#articleEdit',
    components: {
        Editor
    },
    data: {
        // 供应商id
        shopId: GLOBAL_SHOP_ID,
        // 图片上传
        action: $('#coreServer').val() + '/tools/image/upload/multi',
        /* 表单提交数据 */
        formData: {
            // 文章id
            articleId: 0,
            // 标题
            title: '',
            // 内容
            articleContent: '',
            // 引导图
            guidanceImage: '',
            // seo关键词
            keyword: '',
            // 标签
            label: '',
            // 发布人
            publisher: '',
            // 推荐语
            recommendContent: '',
            // 来源
            source: '',
            // 状态
            status: 1,
            // 文章分类
            typeId: ''
        },
        // 图片列表
        articleImageList: [],
        // 文章标签列表
        articleLabels: [],
        // 已选择标签列表
        chooseLabels: [],
        // 文章分类列表
        articleTypeList: [],
        // 待添加标签名
        addLabelName: '',
        /* 表单验证规则 */
        rules: {
            // 标题
            title: [
                {required: true, message: '文章标题不能为空', trigger: 'blur'},
                {maxLength: 9999, message: '标题字数超过最大限制(9999)', trigger: 'blur'},
            ],
            // 内容
            articleContent: [
                {required: true, message: '文章内容不能为空', trigger: 'change'},
                {maxLength: 999999, message: '标题字数超过最大限制(999999)', trigger: 'change'},
            ],
            // 引导图
            guidanceImage: [
                {required: true, message: '请上传文章引导图', trigger: 'change'}
            ],
            // seo关键词
            keyword: [
                {required: true, message: 'SEO关键词不能为空', trigger: 'blur'}
            ],
            // 标签
            label: [
                {required: true, message: '文章标签不能为空', trigger: ['change', 'blur']}
            ],
            // 发布人
            publisher: [
                {required: true, message: '发布人信息不能为空', trigger: 'blur'}
            ],
            // 推荐语
            recommendContent: [
                {required: true, message: '推荐语/描述不能为空', trigger: 'blur'}
            ],
            // 文章分类
            typeId: [
                {required: true, message: '请选择文章所属分类', trigger: 'change'}
            ]
        },

    },
    watch: {
        chooseLabels: function chooseLabels(newVal) {
            this.formData.label = newVal.join(',');
        },
        'formData.label': function formDataLabel(newVal, oldVal) {
            if (!newVal.trim()) {
                return this.chooseLabels = [];
            }
            if (newVal === oldVal) return;
            this.chooseLabels = newVal.split(',');
        }
    },
    created: function created() {
        this.init();
    },
    mounted: function mounted() {
        $('.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");
    },
    beforeDestroy: function beforeDestroy() {
        localStorage.removeItem('articleId');
    },
    methods: {
        // 页面初始化
        init: function init() {
            var articleId = localStorage.getItem('articleId') || 0;
            this.formData.articleId = articleId;
            this.fetchArticleCatagory(); // 文章id就是修改文章
            this.fetchFormList();
        },
        // 获取标签列表和分类列表
        fetchFormList: function fetchFormList() {
            var that = this;
            SupplierApi.GetArticleForm({
                articleId: this.formData.articleId
            }, function (res) {
                if (res.code === 0) {
                    console.log(res);
                    that.articleLabels = res.data.articleLabels.split(','); // 初始化表单数据
                    if (res.data.shopArticle) {
                        that.setFormData(res.data.shopArticle);
                    }
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        // 设置表单初始数据
        setFormData: function setFormData(shopArticle) {
            for (var key in this.formData) {
                this.formData[key] = shopArticle[key];
            }
            // 初始化引导图
            if (this.formData.guidanceImage) {
                this.articleImageList = [{url: this.formData.guidanceImage}]
            }
        },
        // 获取文章分类
        fetchArticleCatagory: function fetchArticleCatagory() {
            var that = this;
            SupplierApi.ArticleCategory({}, function (res) {
                if (res.code === 0) {
                    // console.log(res);
                    that.articleTypeList = res.data;
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        // 选择文章标签
        labelClick: function labelClick(index) {
            var newLabel = this.articleLabels[index];
            var popIndex = this.chooseLabels.indexOf(newLabel);

            if (popIndex > -1) {
                this.chooseLabels.splice(popIndex, 1);
            } else {
                this.chooseLabels.push(newLabel);
            }
        },
        // 手动添加文章标签
        addLabel: function addLabel() {
            if (!this.addLabelName.trim()) return;
            if (this.chooseLabels.indexOf(this.addLabelName) > -1) return this.addLabelName = '';
            this.chooseLabels.push(this.addLabelName);
            this.addLabelName = '';
        },
        // 判断标签是否被选
        checkLabel: function checkLabel(index) {
            return this.chooseLabels.indexOf(this.articleLabels[index]) > -1;
        },
        // 图片上传成功
        handleUploadSuccess: function handleUploadSuccess(response, file, fileList) {
            this.formData.guidanceImage = response.data;
            this.articleImageList = fileList;
        },
        // 图片移除
        handleImageRemove: function handleImageRemove(response, file, fileList) {
            this.formData.guidanceImage = "";
            this.articleImageList = [];
        },
        // 保存 提交表单
        handleSave: function handleSave() {
            var _this = this;
            this.$refs.ruleForm.validate(valide=>{
                if(!valide) return;
                _this.save();
            });
        },
        // 保存接口
        save: function save() {
            var _this = this;
            this.formData.shopId = this.shopId;
            SupplierApi.ArticleSubmitSave(this.formData, function (res) {
                if (res.code === 0) {
                    CAIMEI.dialog('保存成功');
                    setTimeout(function () {
                        _this.handleBack();
                    }, 2000);
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        // 表单数据转为对象
        serializeArrayToObj: function serializeArrayToObj(serializeArray) {
            var obj = Object.create(null);
            serializeArray.forEach(function (item) {
                obj[item.name] = item.value;
            });
            return obj;
        },
        // 返回文章列表页面
        handleBack: function handleBack() {
            localStorage.removeItem('articleId');
            window.open('/supplier/article/list.html', 'supplier-article-list');
            window.close();
        }
    }
});