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

const Editor = window.createEditorComponent()
const FormVideoGroup = window.createFormVideoGroup()

const app = new Vue({
    components: {
        Editor,
        FormVideoGroup
    },

    data() {
        var validateQuestionList = (rule, value, callback) => {
            if (!value) {
                callback(new Error('问答列表不能为空'))
            } else if (value < this.minLimitQuestions) {
                callback(new Error(`请填写至少${this.minLimitQuestions}条问答`))
            } else {
                callback();
            }
        }

        var validateParamList = (rule, value, callback) => {
            if (!value) {
                callback(new Error('参数列表不能为空'))
            } else if (value < this.minLimitParams) {
                callback(new Error(`请填写至少${this.minLimitParams}条参数`))
            } else {
                callback();
            }
        }

        return {
            productId: 0,
            commodityType: 2, // 商品类型 1： 产品  2： 仪器
            shopId: GLOBAL_SHOP_ID,
            action: $('#coreServer').val() + '/tools/image/upload/multi',
            formData: {
                // 仪器名称
                name: '',
                // 仪器别名
                alias: '',
                // 仪器概述
                discription: '',
                // 仪器图片
                image: '',
                // 认证链接
                authLink: '',
                // 认证二维码
                authQrCode: '',
                // 仪器参数
                paramList: '',
                // 仪器优点
                advantage: '',
                // 仪器缺点
                disadvantage: '',
                // 仪器原理
                principle: '',
                // 品牌
                brand: '',
                // 产地
                producePlace: '',
                // 上市时间
                marketTime: '',
                // 供应商
                company: '',
                // NMPA认证时间
                nmpaTime: '',
                // 仪器认证
                authImageList: '',
                // 适应证
                adaptiveMan: '',
                // 不适应人群
                unAdaptiveMan: '',
                // 注意事项
                aroundOperation: '',
                // 效果展示图片列表
                // displayImageList: '',
                // 常见问题
                questionList: '',
                // 仪器类别
                typeId: '',
                // 仪器状态
                status: 1,
                // seo关键词
                seoKeyword: '',
                // 仪器链接
                productLink: '',
            },
            rules: {
                // 仪器名称
                name: [{required: true, message: '仪器名称不能为空', trigger: ['change', 'blur']}],
                // 仪器别名
                alias: [{required: true, message: '仪器别名不能为空', trigger: ['change', 'blur']}],
                // 仪器概述
                discription: [{required: true, message: '仪器概述不能为空', trigger: ['change', 'blur']}],
                // 仪器图片
                image: [{required: true, message: '请上传仪器图片', trigger: 'change'}],
                // 产品链接
                productLink: [{required: true, message: '产品链接不能为空', trigger: ['change', 'blur']}],
                // 产仪器参数
                paramList: [{required: true, validator: validateParamList, trigger: 'change'}],
                // // 认证链接
                // authLink: [{required: true, message: '请输入认证链接', trigger: ['change', 'blur']}],
                // // 认证二维码
                // authQrCode: [{required: true, message: '请上传证二维码', trigger: 'change'}],
                // // 仪器优点
                // advantage: [{required: true, message: '仪器优点不能为空', trigger: 'change'}],
                // // 仪器缺点
                // disadvantage: [{required: true, message: '仪器缺点不能为空', trigger: 'change'}],
                // // 仪器原理
                // principle: [{required: true, message: '仪器原理不能为空', trigger: 'change'}],
                // // 品牌
                // brand: [{required: true, message: '请输入仪器品牌', trigger: ['change', 'blur']}],
                // // 产地
                // producePlace: [{required: true, message: '仪器产地不能为空', trigger: ['change', 'blur']}],
                // // 上市时间
                // marketTime: [{required: true, message: '请填写上市时间', trigger: 'change'}],
                // // 供应商
                // company: [{required: true, message: '公司/厂商不能为空', trigger: ['change', 'blur']}],
                // // NMPA认证时间
                // nmpaTime: [{required: true, message: '请填写NMPA认证时间', trigger: 'change'}],
                // // 仪器认证
                // authImageList: [{required: true, message: '请上传仪器认证图片', trigger: 'change'}],
                // // 适应证
                // adaptiveMan: [{required: true, message: '适应人群不能为空', trigger: 'change'}],
                // // 不适应人群
                // unAdaptiveMan: [{required: true, message: '不适应人群不能为空', trigger: 'change'}],
                // // 术前术后
                // aroundOperation: [{required: true, message: '术前术后不能为空', trigger: 'change'}],
                // // 效果展示图片列表
                // displayImageList: [{required: true, message: '请上传效果展示图片', trigger: 'change'}],
                // // 常见问题
                // questionList: [{required: true, validator: validateQuestionList, trigger: 'change'}],
                // // 仪器类别
                // typeId: [{required: true, message: '请选择仪器类别', trigger: 'change'}],
                // // 仪器状态
                // status: [{required: true, message: '请选择仪器状态', trigger: 'change'}],
            },
            // 仪器类别列表
            typeList: [],
            // 仪器参数
            // paramList: [],
            paramEmptyList: [], // 占位
            minLimitParams: 2,
            // 常见问题
            questionEmptyList: [], // 占位
            minLimitQuestions: 2,
            // 仪器认证
            authImageList: [],
            // 效果展示图片列表
            displayImageList: [],  // 初始化列表
            dialogVisible: false,
            dialogImageUrl: '',
            // 日期选择格式
            marketTimeType: 'year',
            nmpaTimeType: 'year',
            // 空缺数量
            emptyNum: ''
        }
    },
    computed: {
        // 仪器参数
        paramList() {
            const filter = this.paramEmptyList.filter(param => param.content !== '' && param.name !== '')
            if (filter.length > 0) return filter.map(param => ({name: param.name, content: param.content}))
            return []
        },
        // 常见问题
        questionList() {
            const filter = this.questionEmptyList.filter(item => item.question !== '' && item.answer !== '')
            if (filter.length > 0) return filter.map(item => ({question: item.question, answer: item.answer}))
            return []
        }
    },

    mounted: function mounted() {
        $('.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(1).addClass("on");
    },

    created() {
        this.getTypeList();
        this.watchArrayStatus(['paramList', 'questionList', 'authImageList']);
        this.getProductFormData();
    },

    methods: {

        // 返回文章列表页面
        handleBack: function handleBack() {
            localStorage.removeItem('target-name');
            window.open('/supplier/encyclopedia/instrument-list.html', 'supplier-instrument-list');
            window.close();
        },
        // 保存事件
        handleSave() {
            this.$refs.ruleForm.validate(valide => {
                console.log(valide);
                if (!valide) {
                    this.socrllToErrorInput()
                    return;
                }
                this.emptyNum = this.validateEmptyParams(this.formData)
                if( this.emptyNum> 0 && this.formData.status === 1){
                    this.$confirm('您还剩余' + this.emptyNum + '项未完善，将会导致用户对您产品/仪器的认识度不够，确认是否提交？', '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否'
                    }).then(() => {
                        this.saveFormData()
                    })
                } else{
                    this.saveFormData()
                }
            })
        },

        // 校验空参数个数
        validateEmptyParams(params){
            const keys = Object.keys(params)
            console.log(params)
            let count = 0
            keys.forEach(key => {
                if(typeof params[key] === "string"){
                    if(params[key] === '' || params[key].trim().length <= 0){
                        count ++
                    }
                }else if(typeof params[key] === 'number'){
                    console.log(key)
                }else if(typeof params[key] === 'object'){
                    if(params[key] instanceof  Array){
                        if(params[key].length <= 0){
                            count ++
                        }
                    }else {
                        if(params[key] === null){
                            count ++
                        }
                    }
                }else if(typeof params[key] === 'undefined'){
                    count ++
                }
            })
            return count;
        },

        // 裁切时间格式
        sliceDateStr(time, type) {
            if(!time) return ''
            time = dateFormat(time, 'yyyy-MM-dd')
            if (type === 'year') {
                time = time.slice(0, 4)
            } else if (type === 'month') {
                time = time.slice(0, 7)
            }
            return time
        },

        // 保存表单数据
        saveFormData() {
            const that = this;
            const params = {
                ...this.formData,
                shopId: this.shopId,
                commodityType: this.commodityType,
                paramList: JSON.stringify(this.paramList),
                questionList: JSON.stringify(this.questionList),
                // marketTime: dateFormat(this.formData.marketTime, 'yyyy-MM-dd'),
                // nmpaTime: dateFormat(this.formData.nmpaTime, 'yyyy-MM-dd'),
                authImageList: this.authImageList.map(image => (image.response ? image.response.data : image.url)),
                // displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
            };

            /* 处理时间 */
            if(this.formData.marketTime){
                params.marketTime = this.sliceDateStr(this.formData.marketTime, this.marketTimeType)
            }

            /* 处理时间 */
            if(this.formData.nmpaTime){
                params.nmpaTime = this.sliceDateStr(this.formData.nmpaTime, this.nmpaTimeType)
            }

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

            params.emptyNum = this.emptyNum;

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

        // 获取时间类型（年月日）
        getTimeType(time){
            time = time.split('-')
            if(time.length === 1){
                return 'year'
            }else if(time.length === 2){
                return 'month'
            }else {
                return 'date'
            }
        },

		initFormData: function(formData){
			console.log(formData);
			// 初始化this.formData
            for (var key in this.formData) {
                if (formData.hasOwnProperty(key)) {
                	// 如果是数组 就取值length
                	if(formData[key] instanceof  Array){
                		const len = formData[key].length
                		this.formData[key] = len > 0 ? len : ''
                	} else if(['marketTime', 'nmpaTime'].includes(key)){
                		this.formData[key] = new Date(formData[key])
                        if(key === 'marketTime'){
                            this.marketTimeType = this.getTimeType(formData[key])
                        }else{
                            this.nmpaTimeType = this.getTimeType(formData[key])
                        }
                	}
                	else {
                		this.formData[key] = formData[key];
                	}
                }
            }
            // 处理参数
			this.resetEmptyListData(formData.paramList, formData.questionList);
            // 处理图片
            this.authImageList = formData.authImageList.map(image => ({ url: image, name: 'authImage'}))
            // this.displayImageList = formData.displayImageList.map(image => ({ url: image, name: 'authImage'}))
		},


		// 获取表单数据
        getProductFormData() {
            this.productId = localStorage.getItem('productId') || 0;
            localStorage.removeItem('productId');
            if (this.productId > 0) {
				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);
					}
				});
            }else {
            	this.resetEmptyListData([],[])
            }
        },

        // 获取分类列表
        getTypeList() {
            const that = this;
            SupplierApi.ShopBaikeProductTypeList({commodityType: this.commodityType}, function (res) {
                that.typeList = res.data;
                console.log(res);
            })
        },

        //添加一条参数
        addParam() {
            this.paramEmptyList.push({
                name: '',
                content: '',
                p1: '参数名',
                p2: '参数信息',
            })
        },

        // 删除一条参数
        removeParam(index) {
            this.paramEmptyList.splice(index, 1)
        },

        //添加一条问答
        addQuestion() {
            this.questionEmptyList.push({
                question: '',
                answer: '',
                p1: '请输入问题内容',
                p2: '请输入问题解答内容',
            })
        },

        // 删除一条问答
        removeQuestion(index) {
            this.questionEmptyList.splice(index, 1)
        },

        // 初始化可变表单数据
        resetEmptyListData(paramSource, questionSource) {
            this.makeEmptyList({
                target: this.paramEmptyList,
                source: paramSource,
                limit: this.minLimitParams,
                key: 'name',
                value: 'content',
            })
            this.makeEmptyList({
                target: this.questionEmptyList,
                source: questionSource,
                limit: this.minLimitQuestions,
                key: 'question',
                value: 'answer',
            })
        },

        // 创建可变表单占位列表
        makeEmptyList(options) {
            options = {
                target: [], // 目标数组
                source: [], // 数据源数组
                key: '',
                value: '',
                limit: 0, // 最小条数
                argsList: ['参数', '品牌'], // placeholder文本
                ...options,
            }
            let {target, source, limit, argsList, key, value} = options
            let len = 0

            target.push(
                ...source.map(v => {
                    v.p1 = `例如：${argsList[0]}`
                    v.p2 = `请输入：${argsList[0]}信息`
                    return v
                })
            )

            len = limit - target.length
            for (let i = 0; i < len; i++) {
                const obj = {}
                obj[key] = ''
                obj[value] = ''
                if (i <= argsList.length - 1) {
                    obj.p1 = `例如：${argsList[i]}`
                    obj.p2 = `请输入：${argsList[i]}信息`
                } else {
                    obj.p1 = `例如：${argsList[0]}`
                    obj.p2 = `请输入：${argsList[0]}信息`
                }
                target.push(obj)
            }
        },

        handleAuthQrCodeSuccess(response){
            this.$refs.authQrCodeUploader.clearFiles();
        	this.formData.authQrCode = response.data
        },

        // 仪器图片上传成功的回调
        handleImageSuccess(response) {
        	this.$refs.coverUploader.clearFiles();
        	this.formData.image = response.data
        },

        // 认证图片上传成功的回调
        handleAuthImageSuccess(response, file, fileList) {
        	this.authImageList = fileList
        },

        // 移除认证图片
        handleAuthImageRemove(file, fileList) {
        	// console.log(fileList)
            this.authImageList = fileList
        },

        // 效果图片上传成功的回调
        handleDisplayImageSuccess(response, file, fileList) {
        	this.displayImageList = fileList
        },

        // 移除效果图片
        handleDisplayImageRemove(file, fileList) {
            this.displayImageList = fileList
        },

        // 图片上传前的回调
        beforeImageUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isLt2M
        },

        // 预览图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },

        // 预览图片弹窗
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },

        // 监听formData中类型为数组的数据状态
        watchArrayStatus(args = []) {
            args.forEach(arg => {
                if (this[arg] instanceof Array) {
                    this.$watch(
                        arg,
                        (nval, oval) => {
                        	console.log(arg, nval.length);
                        	console.log(this[arg]);
                        	if(nval.length > 0){
                        		this.formData[arg] = nval.length
                        	} else{
                        		this.formData[arg] = ''
                        	}
                        },
                        {deep: true}
                    )
                }
            })
        },

        // 滚动到必填位置
        socrllToErrorInput(){
            this.$nextTick(() => {
                const scrollTop = $('.el-form-item__error').eq(0).parent().siblings('.el-form-item__label').offset().top
                $('body,html').animate({
                    scrollTop: scrollTop - $('#globalHead').height() -  40
                }, 800)
            })
        }
    },
})

app.$mount('#instrumentEdit')