采美百科自动保存

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

@@ -156,25 +156,23 @@ var articleEdit = new Vue({
         },
         // 自动保存校验
         validFormRule() {
-            let allow = true
-            const ruleData = Object.keys(this.rules)
-            for(let i of ruleData){
-                if (!this.formData[i]) {
-                    allow = false
-                    break
-                }
-            }
-            if (allow) {
-                this.validTime = null
-                clearTimeout(this.validTime)
-                this.validTime = setTimeout(() => {
-                    if (this.validTime) {
-                        this.handleSave()
-                    }
-                    clearTimeout(this.validTime)
+            this.$refs.ruleForm.validate(valide=>{
+                if(valide){
                     this.validTime = null
-                }, 5000)
-            }
+                    clearTimeout(this.validTime)
+                    this.validTime = setTimeout(() => {
+                        if (this.validTime) {
+                            this.handleSave()
+                        }
+                        clearTimeout(this.validTime)
+                        this.validTime = null
+                    }, 2000)
+                }
+            })
+        },
+        handlerTypeId() {
+            this.onFocused()
+            this.onBlured()
         },
         // 设置表单初始数据
         setFormData: function setFormData(shopArticle) {
@@ -228,6 +226,8 @@ var articleEdit = new Vue({
         handleUploadSuccess: function handleUploadSuccess(response, file, fileList) {
             this.formData.guidanceImage = response.data;
             this.articleImageList = fileList;
+            this.onFocused()
+            this.onBlured()
             console.log(fileList)
         },
         // 图片移除

src/main/resources/static/js/supplier-center/encyclopedia/components/content-edit/index.js

@@ -5,7 +5,7 @@ const contentEdit = {
     <div class="el-input" :id="editId">
         <div class="bk-toolbar" @click="handleToolBarClick" v-show="isFocus"></div>
         <div class="bk-bubble" @click="handleBubbleClick" v-show="bubbleNum>0">{{bubbleNum}}</div>
-        <div class="el-input__inner bk-input" contenteditable="plaintext-only" @focus="isFocus = true" @blur="onBlur" v-html="value"></div>
+        <div class="el-input__inner bk-input" contenteditable="plaintext-only" @focus="onFocus" @blur="onBlur" v-html="value"></div>
         <ul class="bk-literature" v-show="showBubble && bubbleNum>0">
             <li v-for="item in refList" :key="item.ctrlId">
                 <div>{{item | reference}}</div>
@@ -77,9 +77,14 @@ const contentEdit = {
         // 失去焦点
         onBlur() {
             setTimeout(() => {
+                this.$parent.$parent.$parent.onBlured && this.$parent.$parent.$parent.onBlured() // 调用父组件方法
                 this.isFocus = false
             }, 200)
         },
+        onFocus() {
+            this.isFocus = true
+            this.$parent.$parent.$parent.onFocused() && this.$parent.$parent.$parent.onFocused() // 调用父组件方法
+        },
         // 工具栏点击
         handleToolBarClick() {
             this.$emit('toolbar', this.contentEdit)

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

@@ -275,6 +275,15 @@ const edit = new Vue({
         $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
         this.initAutoInput('.seo-auto-input', 'seoKeyword')
     },
+    watch: {
+        referenceDialog(val) {
+            if (val) {
+                setTimeout(() => {
+                    this.onFocused()
+                }, 500)
+            }
+        },
+    },
     methods: {
         onFocused() {
             this.validTime = null
@@ -288,26 +297,25 @@ const edit = new Vue({
         },
         // 自动保存校验
         validFormRule() {
-            let allow = true
-            const ruleData = Object.keys(this.rules)
-            for(let i of ruleData){
-                if (!this.formData[i]) {
-                    allow = false
-                    console.log('数据未填写完成')
-                    break
-                }
-            }
-            if (allow) {
-                this.validTime = null
-                clearTimeout(this.validTime)
-                this.validTime = setTimeout(() => {
-                    if (this.validTime) {
-                        this.handleConfirm()
-                    }
-                    clearTimeout(this.validTime)
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
                     this.validTime = null
-                }, 5000)
-            }
+                    clearTimeout(this.validTime)
+                    this.validTime = setTimeout(() => {
+                        if (this.validTime) {
+                            this.handleConfirm()
+                        }
+                        clearTimeout(this.validTime)
+                        this.validTime = null
+                    }, 2000)
+                }
+            })
+        },
+        handlerDiscrip() {
+            this.onFocused()
+        },
+        handlerTypeId() {
+            this.onBlured()
         },
         // 获取表单数据
         fetchEntryData(){
@@ -486,6 +494,7 @@ const edit = new Vue({
                 this.referenceData = initReferenceData()
                 this.$refs.referenceForm.clearValidate()
                 this.referenceDialog = false
+                this.onBlured()
             } catch (e) {
                 console.log(e)
             }
@@ -518,6 +527,7 @@ const edit = new Vue({
             if(this.referenceData.imageUrl){
                 this.referenceImageList = [{ url: this.referenceData.imageUrl, type: 'image' }]
             }
+            console.log(1111)
         },
         // 参考资料删除
         handleReferenceDelete(item) {
@@ -540,10 +550,12 @@ const edit = new Vue({
         // 新增信息栏
         handleInfoAdd() {
             this.formData.infoList.push(this.genereateInfo())
+            this.onFocused()
         },
         // 删除信息栏
         handleInfoRemove(index) {
             this.formData.infoList.splice(index, 1)
+            this.onFocused()
         },
         // 正文目录数据
         genereateTextInfo(type, index) {
@@ -564,14 +576,17 @@ const edit = new Vue({
         // 添加正文目录
         handleAddTextInfo(index, type) {
             this.formData.textInfoList.splice(index + 1, 0, this.genereateTextInfo(type, index + 1))
+            this.onFocused()
         },
         // 删除正文目录
         handleRemoveTextInfo(index, type) {
             this.formData.textInfoList.splice(index, 1)
+            this.onFocused()
         },
         // 文件上传成功
         handleUploadSuccess(fileList) {
             this.fileList = [...this.fileList, ...fileList]
+            this.onBlured()
         },
         // 文件移除
         handleFileRemove(file) {
@@ -581,6 +596,7 @@ const edit = new Vue({
         handleCoverUploadSuccess(fileList) {
             this.coverList = fileList
             this.formData.image = fileList[0].url
+            this.onBlured()
         },
         // 封面删除
         handleCoverRemove(file) {

src/main/resources/templates/supplier-center/article/article-edit.html

@@ -103,12 +103,12 @@
                             <!-- 文章内容 -->
                             <el-form-item label="文章内容" prop="articleContent" class="mint-filter">
                                 <el-input v-model="formData.articleContent" v-show="false" @focus="onFocused" @blur="onBlured"></el-input>
-                                <editor v-model="formData.articleContent" placeholder="请输入文章内容"></editor>
+                                <editor v-model="formData.articleContent" placeholder="请输入文章内容" @focus="onFocused" @blur="onBlured"></editor>
                                 <div class="mint-message" v-if="formValidate.articleContent">{{formValidate.articleContent}}</div>
                             </el-form-item>
                             <!-- 文章分类 -->
                             <el-form-item label="文章分类" prop="typeId">
-                                <el-select v-model="formData.typeId" class="max-width">
+                                <el-select v-model="formData.typeId" class="max-width" @change="handlerTypeId">
                                     <template v-for="(typeInfo, index) in articleTypeList">
                                         <el-option :label="typeInfo.typeName" :value="typeInfo.typeId" :key="typeInfo.typeId"></el-option>
                                     </template>

src/main/resources/templates/supplier-center/encyclopedia/edit.html

@@ -30,7 +30,7 @@
         <div class="wrap clear">
             <!--左侧导航-->
             <template th:replace="supplier-center/components/tableft"></template>
-            <div class="right ">
+            <div class="right " >
                 <div class="top-tip">温馨提示：在采美百科发布词条能提升您的品牌关键词在搜索中的曝光率。（注：未填写的信息项将不会显示在词条页）</div>
                 <div class="valide-form">
                     <el-form :rules="rules" :model="formData" ref="ruleForm" label-position="top">
@@ -44,7 +44,6 @@
                                     @reference-edit="handleReferenceEdit"
                                     @toolbar="handleToolbarClick"
                                     v-model="formData.alias"
-                                    @focus="onFocused" @blur="onBlured"
                             ></content-edit>
                             <el-input v-model="formData.alias" placeholder="请输入义项名，简要说明该事物区别于同名事物的显著特征"
                                       v-show="false"></el-input>
@@ -56,7 +55,6 @@
                                     @reference-edit="handleReferenceEdit"
                                     @toolbar="handleToolbarClick"
                                     v-model="formData.discription"
-                                    @focus="onFocused" @blur="onBlured"
                             ></content-edit>
                             <el-input v-model="formData.discription" placeholder="请输入词条概述" v-show="false"></el-input>
                             <div class="el-form-item__error" v-if="formValidate.discription">敏感词：{{formValidate.discription}}</div>
@@ -64,14 +62,14 @@
                         <el-form-item>
                             <label class="el-form-item__label">概述图册：<span>（注：未上传图片将不会显示在词条页上，最多上传6张）</span></label>
                             <input type="file" v-show="false"/>
-                            <file-upload @upload-success="handleUploadSuccess" @remove="handleFileRemove" :list="fileList" :limit="6"></file-upload>
+                            <file-upload @upload-success="handleUploadSuccess" @remove="handleFileRemove" :list="fileList" :limit="6" @click.native="handlerDiscrip"></file-upload>
                         </el-form-item>
                         <!-- 信息栏 -->
                         <div class="bk-label">信息栏<span></span><span class="bk-info-add" @click="handleInfoAdd">增加信息项</span></div>
                         <div class="bk-form-item-group" v-for="(item, index) in formData.infoList" :key="index">
                             <span class="bk-info-remove" v-if="formData.infoList.length > 4" @click="handleInfoRemove(index)">删除</span>
                             <el-form-item>
-                                <el-input v-model="item.infoName" :placeholder="getInfoNamePlaceHolder(index)"></el-input>
+                                <el-input v-model="item.infoName" :placeholder="getInfoNamePlaceHolder(index)" @focus="onFocused" @blur="onBlured"></el-input>
                                 <div class="el-form-item__error" v-if="formValidate.infoList">敏感词：{{formValidate.infoList}}</div>
                             </el-form-item>
                             <el-form-item>
@@ -90,7 +88,7 @@
                         <el-form-item v-for="(item, index) in formData.textInfoList" :key="index">
                             <div class="bk-form-item">
                                 <template v-if="item.dictionaryType !== 3">
-                                    <el-input v-model="item.dictionaryContent" :placeholder="item.placeholder"></el-input>
+                                    <el-input v-model="item.dictionaryContent" :placeholder="item.placeholder" @focus="onFocused" @blur="onBlured"></el-input>
                                 </template>
                                 <template v-else>
                                     <content-edit
@@ -124,17 +122,17 @@
                         <div class="bk-label"><em>*</em>头图<i>（建议图片尺寸210px*210px，并上传白底图片）</i></div>
                         <el-form-item prop="image">
                             <el-input v-show="false" v-model="formData.image"></el-input>
-                            <file-upload @upload-success="handleCoverUploadSuccess" @remove="handleCoverRemove" :list="coverList"></file-upload>
+                            <file-upload @click.native="handlerDiscrip" @upload-success="handleCoverUploadSuccess" @remove="handleCoverRemove" :list="coverList"></file-upload>
                         </el-form-item>
                         <el-form-item label="分类：" prop="typeId">
-                            <el-select class="max-width" v-model="formData.typeId">
+                            <el-select class="max-width" v-model="formData.typeId" @click.native="handlerDiscrip" @change="handlerTypeId">
                                 <template v-for="item in typeList">
                                     <el-option :label="item.name" :value="item.typeId"></el-option>
                                 </template>
                             </el-select>
                         </el-form-item>
                         <el-form-item label="SEO关键词：">
-                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"></el-input>
+                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"  @focus="onFocused" @blur="onBlured"></el-input>
                             <div class="el-form-item__error" v-if="formValidate.seoKeyword">敏感词：{{formValidate.seoKeyword}}</div>
                         </el-form-item>
                         <!-- 关联标签库 -->
@@ -151,6 +149,8 @@
                                     reserve-keyword
                                     :remote-method="fetchQueryKeywordList"
                                     :loading="remoteLoading"
+                                    @click.native="handlerDiscrip"
+                                    @change="handlerTypeId"
                             >
                                 <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
                             </el-select>