采美百科自动保存

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

@@ -76,16 +76,14 @@ const contentEdit = {
         },
         // 失去焦点
         onBlur() {
-            this.$parent.$parent.$parent.onBlured && this.$parent.$parent.$parent.onBlured() // 调用父组件方法
             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() // 调用父组件方法
-            setTimeout(() => {
-                this.isFocus = true
-            }, 300)
         },
         // 工具栏点击
         handleToolBarClick() {

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

@@ -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>
@@ -151,7 +149,8 @@
                                     reserve-keyword
                                     :remote-method="fetchQueryKeywordList"
                                     :loading="remoteLoading"
-                                    @visible-change="changeVisible"
+                                    @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>