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

const Radio = createnRadio();
const Select = createSelect();
const Option = createOption();
const UploadImage = createUploadImage();
const Editor = createEditorComponent();
const InputGroup = createInputGroup();
const QuestionGroup = createQuestionGroup()

new Vue({
    el: '#productEdit',
    mixins: [validFormMixin],
    components: {
        'cm-radio': Radio,
        'cm-select': Select,
        'cm-option': Option,
        'cm-upload-image': UploadImage,
        'cm-editor': Editor,
        'cm-input-group': InputGroup,
        'cm-question-group': QuestionGroup
    },
    data: {
        // 商品类型 1： 产品  2： 仪器
        productId: 0,
        commodityType: 1,
        shopId: GLOBAL_SHOP_ID,
        formData: {
            // 产品名称
            name: '',
            // 产品别名
            alias: '',
            // 产品概述
            discription: '',
            // 产品图片
            image: '',
            // 产品参数
            paramList: [],
            // 产品优点
            advantage: '',
            // 产品缺点
            disadvantage: '',
            // 产品原理
            principle: '',
            // 品牌
            brand: '',
            // 产地
            producePlace: '',
            // 上市时间
            marketTime: '',
            // 公司/厂商
            company: '',
            // NMPA认证时间
            nmpaTime: '',
            // 产品认证
            authImageList: [],
            // 适应人群
            adaptiveMan: '',
            // 不适应人群
            unAdaptiveMan: '',
            // 术前术后
            aroundOperation: '',
            // 效果展示图片列表
            displayImageList: [],
            // 常见问题
            questionList: [],
            // 产品类别
            typeId: '',
            // 产品状态
            status: 1,
        },
        // 预览图片列表
        imageList: [],
        authImageList: [],
        displayImageList: [],
        // 产品分类
        typeList: [],

        // 产品参数表单数据
        paramsPlaceholderList: [{
            label: '例如：名牌',
            value: '请输入名牌信息'
        }],
        paramsMinLimit: 2,
        paramskeyMap: {
            key: 'name',
            value: 'content'
        },

        // 问题数据表单列表
        questionPlaceHolderList: [{
            label: '请输入问题',
            value: '请输入回答'
        }],
        questionMinLimit: 2,
        questionkeyMap: {
            key: 'question',
            value: 'answer'
        },
        // 表单校验规则
        rules: {
            // 产品名称
            name: [{
                type: 'string',
                required: true,
                message: '名称不能为空',
                trigger: ['blur','change']
            }],
            // 产品别名
            alias: [{
                type: 'string',
                required: true,
                message: '别名不能为空',
                trigger: ['blur','change']
            }],
            // 产品概述
            discription: [{
                type: 'string',
                required: true,
                message: '概述不能为空',
                trigger: ['blur','change']
            }],
            // 产品图片
            image: [{
                type: 'string',
                required: true,
                message: '图片不能为空',
                trigger: 'change'
            }],
            // 产品参数
            paramList: [{
                type: 'array',
                required: true,
                message: '参数信息不能为空',
                trigger: ['change', 'blur'],
                valid: ['name', 'content']
            }],
            // 产品优点
            advantage: [{
                type: 'string',
                required: true,
                message: '优点不能为空',
                trigger: 'change'
            }],
            // 产品缺点
            disadvantage: [{
                type: 'string',
                required: true,
                message: '缺点不能为空',
                trigger: 'change'
            }],
            // 产品原理
            principle: [{
                type: 'string',
                required: true,
                message: '原理不能为空',
                trigger: 'change'
            }],
            // 品牌
            brand: [{
                type: 'string',
                required: true,
                message: '品牌不能为空',
                trigger: ['change','blur']
            }],
            // 产地
            producePlace: [{
                type: 'string',
                required: true,
                message: '产地不能为空',
                trigger: ['change','blur']
            }],
            // 上市时间
            marketTime: [{
                type: 'string',
                required: true,
                message: '上市时间不能为空',
                trigger: ['change','blur']
            }],
            // 公司/厂商
            company: [{
                type: 'string',
                required: true,
                message: '公司/厂商不能为空',
                trigger: ['change','blur']
            }],
            // NMPA认证时间
            nmpaTime: [{
                type: 'string',
                required: true,
                message: 'NMPA认证时间不能为空',
                trigger: ['change','blur']
            }],
            // 产品认证
            authImageList: [{
                type: 'array',
                required: true,
                message: '产品认证图片不能为空',
                trigger: 'change'
            }],
            // 适应人群
            adaptiveMan: [{
                type: 'string',
                required: true,
                message: '适应人群不能为空',
                trigger: 'change'
            }],
            // 不适应人群
            unAdaptiveMan: [{
                type: 'string',
                required: true,
                message: '不适应人群不能为空',
                trigger: 'change'
            }],
            // 术前术后
            aroundOperation: [{
                type: 'string',
                required: true,
                message: '术前术后内容不能为空',
                trigger: 'change'
            }],
            // 效果展示
            displayImageList: [{
                type: 'array',
                required: true,
                message: '效果展示图片不能为空',
                trigger: 'change'
            }],
            // 常见问题
            questionList: [{
                type: 'array',
                required: true,
                message: '常见问题不能为空',
                trigger: ['change','blur'],
                valid: ['question', 'answer']
            }],
            // 产品类别
            typeId: [{
                type: 'number',
                required: true,
                message: '产品类别不能为空',
                trigger: 'change'
            }],
            // 产品状态
            status: [{
               type: 'number',
                required: true,
                message: '状态不能为空',
                trigger: 'change'
            }],
        },
    },
    created() {
        this.getTypeList();
        this.getProductFormData();
        this.resetQuestionListLimit();
        this.resetParamsListLimit();
        this.registerForm(this.formData, this.rules);
    },
    mounted: function () {
        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
    },
    methods: {
        // 获取分类列表
        getTypeList() {
            const that = this;
            SupplierApi.ShopBaikeProductTypeList({commodityType: this.commodityType}, function (res) {
                that.typeList = res.data;
                console.log(res);
            })
        },

        // 初始化表单数据
        initFormData(formData){
            console.log(formData);
            // 初始化this.formData
            for (var key in this.formData) {
                if (formData.hasOwnProperty(key)) {
                    // this.$set(this.formData, key, formData[key]);
                    this.formData[key] = formData[key];
                }
            }

            this.formData.marketTime = dateFormat(new Date(this.formData.marketTime), 'yyyy-MM-dd');
            this.formData.nmpaTime = dateFormat(new Date(this.formData.nmpaTime), 'yyyy-MM-dd');

            // 初始化图片列表 imageList  authImageList  displayImageList
            this.imageList = this.initPreviewImageList([formData.image], { name: '授权图片' });
            this.authImageList = this.initPreviewImageList(formData.authImageList, { name: '授权图片' });
            this.displayImageList = this.initPreviewImageList(formData.displayImageList, { name: '效果图' });
        },

        // 初始化图片
        initPreviewImageList(imageList, options){
            if(!options){
                options.name = '图片'
            }

            return imageList.map(function(item){
                return {
                    name: options.name,
                    url: item
                }
            });
        },


        // 获取表单数据
        getProductFormData() {
            this.productId = localStorage.getItem('productId');
            localStorage.removeItem('productId');

            if(!this.productId) return;

            const that = this;
            SupplierApi.GetShopBaikeProductForm({ productId: this.productId }, function(res){
                if(res.code === 0){
                    that.initFormData(res.data);
                }else{
                    CAIMEI.dialog('获取产品数据失败', false);
                    setTimeout(function () {
                        that.handleBack();
                    }, 2000);
                }
            });
        },
        // 保存表单数据
        saveFormData() {
            const that = this;
            const params = {
                ...this.formData,
                shopId: this.shopId,
                commodityType: this.commodityType,
                paramList: JSON.stringify(this.formData.paramList),
                questionList: JSON.stringify(this.formData.questionList)
            };

            if(this.productId) params.productId = this.productId;

            SupplierApi.ShopBaikeProductSave(params, function(res){
                if(res.code === 0) {
                    CAIMEI.dialog('保存成功', false);
                    setTimeout(function () {
                        that.handleBack();
                    }, 2000);
                }else{
                    CAIMEI.Alert(res.msg, '确认', false)
                }
            })
        },

        // 返回文章列表页面
        handleBack: function handleBack() {
            localStorage.removeItem('target-name');
            window.open('/supplier/encyclopedia/product-list.html', 'supplier-product-list');
            window.close();
        },

        // 保存事件
        handleSave() {
            console.log(this.formData);
            const that = this;
            // that.saveFormData();
            this.validFormData(this.formData, this.rules).then(res=>{
                that.saveFormData()
            }).catch(()=>{
                CAIMEI.dialog('必填项不能为空', false)
            })
        },

        // 上传封面图片
        handleUploadProductImage(files){
            this.uploadImage(files[0]).then(res=>{
                this.formData.image = res;
                this.imageList.push({ url: res , name: '封面'})
            }).catch(err=>{
                console.log(err)
            })
        },

        // 删除上传的封面图片
        handleRemoveProductImage(){
            this.formData.image = ''
        },

        // 上传授权图片
        handleUploadAuthImage(files){
            const that = this;
            files.forEach(function (file) {
                if(file.type){
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    that.uploadImage(file).then(function (res) {
                        that.formData.authImageList.push(res);
                        that.authImageList.push({ url: res, name: '图片' })
                    });
                }
            });
        },
        // 删除上传的授权图片
        handleRemoveAuthImage(index){
             this.formData.authImageList.splice(index, 1);
             this.authImageList.splice(index, 1);
             console.log(this.formData.authImageList);
             console.log(this.authImageList);
        },

        // 上传效果展示图片
        handleUploadDisplayImageList(files){
            const that = this;
            files.forEach(function (file) {
                if(file.type){
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    that.uploadImage(file).then(function (res) {
                        that.formData.displayImageList.push(res);
                        that.displayImageList.push({ url: res, name: '图片' })
                    });
                }
            });
        },
        // 删除上传的效果展示图片
        handleRemoveDisplayImageList(index){
             this.formData.displayImageList.splice(index, 1);
             this.displayImageList.splice(index, 1);
        },



        // 上传图片
        uploadImage: function uploadImage(file) {
            var formData = new FormData();
            formData.append('file', file);
            return new Promise(function (resolve, reject) {
                PublicApi.uploadimg(formData, function (res) {
                    if (res.code === 0) {
                        resolve(res.data);
                    }
                    reject();
                });
            });
        },

        // 初始化问题表单个数
        resetParamsListLimit() {
            for (let i = 0; i < this.paramsMinLimit; i++) {
                this.formData.paramList.push({
                    name: '',
                    content: ''
                });
            }
        },
        // 移除参数
        handleRemoveParams(params) {
            console.log(params);
            this.formData.paramList.splice(params.index, 1);
        },
        // 添加参数
        handleAddParams() {
            this.formData.paramList.push({
                name: '',
                content: ''
            });
            this.registerForm(this.formData, this.rules);
        },


        // 初始化问题表单个数
        resetQuestionListLimit() {
            for (let i = 0; i < this.questionMinLimit; i++) {
                this.formData.questionList.push({
                    question: '',
                    answer: '',
                });
            }
        },
        // 移除问题
        handleRemoveQuestion(question) {
            this.formData.paramList.splice(question.index, 1);
        },
        // 添加问题
        handleAddQuestion() {
            this.formData.questionList.push({
                question: '',
                answer: '',
            });
            this.registerForm(this.formData, this.rules);
        },
    }
});