采美文章，采美百科关联标签库接口调试

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -13,6 +13,15 @@ var PublicApi = {
                 json:false,
             })
         },
+        // 获取搜索关键词
+        fetchLabelKeywordList: function(params){
+            return Http.AjaxService({
+                url:'/commodity/search/query/keyword/list',
+                type:'get',
+                data:params,
+                json:false,
+            })
+        },
         // oss 初始化 （临时凭证获取）
         fetchOssInitData: function(params){
             return Http.AjaxService({

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

@@ -88,22 +88,8 @@ var articleEdit = new Vue({
         },
         formValidate: {},
         variable: '',
-        keywordList: [{
-            id: '选项1',
-            name: '黄金糕'
-        }, {
-            id: '选项2',
-            name: '双皮奶'
-        }, {
-            id: '选项3',
-            name: '蚵仔煎'
-        }, {
-            id: '选项4',
-            name: '龙须面'
-        }, {
-            id: '选项5',
-            name: '北京烤鸭'
-        }]
+        remoteLoading: false,
+        labelList: []
     },
     watch: {
         chooseLabels: function chooseLabels(newVal) {
@@ -133,6 +119,7 @@ var articleEdit = new Vue({
         init: function init() {
             var articleId = localStorage.getItem('articleId') || 0;
             this.formData.articleId = articleId;
+            this.fetchQueryKeywordList()
             this.fetchArticleCatagory(); // 文章id就是修改文章
             this.fetchFormList();
             this.watchFormData()
@@ -157,7 +144,11 @@ var articleEdit = new Vue({
         // 设置表单初始数据
         setFormData: function setFormData(shopArticle) {
             for (var key in this.formData) {
-                this.formData[key] = shopArticle[key];
+                if(key === 'labelIds' && shopArticle[key]){
+                    this.formData[key] = shopArticle[key].split(',').map(v => parseInt(v));
+                }else{
+                    this.formData[key] = shopArticle[key];
+                }
             }
             // 初始化引导图
             if (this.formData.guidanceImage) {
@@ -214,7 +205,8 @@ var articleEdit = new Vue({
             this.$refs.ruleForm.validate(valide=>{
                 if(!valide) return;
                 // _this.save();
-                _this.sensitiveWordsValidate(_this.formData)
+                const params = {..._this.formData, labelIds: _this.formData.labelIds.join(',')}
+                _this.sensitiveWordsValidate(params)
             });
         },
 
@@ -255,17 +247,14 @@ var articleEdit = new Vue({
                         const target = JSON.stringify(params[key])
                         const bool = new RegExp(res.data, 'g').test(target)
                         if (bool) {
-                            console.log(key, true)
                             const value = self.matchWords(target, res.data)
                             self.formValidate[key] = value
                             flag = false
                         } else {
-                            console.log(key, false)
                             self.formValidate[key] = ''
                         }
                     }
                 }
-                console.log(self.formValidate)
                 if(flag) return self.onReallySave(params)
                 const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
                 self.$confirm(tip, '提示', { confirmButtonText: '保存', cancelButtonText: '取消' }).then(function(){
@@ -315,6 +304,16 @@ var articleEdit = new Vue({
                 }, 800)
             })
         },
+        async fetchQueryKeywordList(keyword){
+            try {
+                this.remoteLoading = true
+                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
+                this.labelList = res.data
+                this.remoteLoading = false
+            }catch (e){
+                console.log(e);
+            }
+        },
         async autoInputCallback(keyword){
             try {
                 const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});

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

@@ -179,7 +179,7 @@ const edit = new Vue({
             image: '', // 头图地址
             typeId: '', // 分类id
             seoKeyword: '', // seo关键字
-            labelIds: '', // 标签库
+            labelIds: [], // 标签库
             status: 0, // 状态0保存草稿箱  1已发布
             infoList: [], //  信息栏集合
             referenceList: [], // 参考资料集合
@@ -222,26 +222,13 @@ const edit = new Vue({
         // 敏感词校验数据
         formValidate: {},
         referenceImageList: [],
-        keywordList: [{
-            id: '选项1',
-            name: '黄金糕'
-        }, {
-            id: '选项2',
-            name: '双皮奶'
-        }, {
-            id: '选项3',
-            name: '蚵仔煎'
-        }, {
-            id: '选项4',
-            name: '龙须面'
-        }, {
-            id: '选项5',
-            name: '北京烤鸭'
-        }]
+        labelList: [],
+        remoteLoading: false
     },
     created() {
-        this.formData.id = CAIMEI.getUrlParam('id')
+        this.formData.id = CAIMEI.getUrlParam('id') || ''
         this.fetchTypeList()
+        this.fetchQueryKeywordList()
         // 如果是编辑就获取表单数据
         if(this.formData.id){
             this.fetchEntryData()
@@ -267,7 +254,11 @@ const edit = new Vue({
         initFormData(data){
             for (const key in this.formData) {
                 if(data.hasOwnProperty(key)){
-                    this.formData[key] = data[key]
+                    if(key === 'labelIds' && data[key]){
+                        this.formData[key] = data[key].split(',').map(v => parseInt(v));
+                    }else{
+                        this.formData[key] = data[key]
+                    }
                 }
             }
             const imageList = this.formData.imageList.map(item =>{
@@ -328,6 +319,7 @@ const edit = new Vue({
                     textInfoListStr: JSON.stringify(this.formData.textInfoList),
                     imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
                     videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds.join(',') // 关联标签库列表
                 };
                 this.sensitiveWordsValidate(params)
             } catch (e) {
@@ -504,7 +496,6 @@ const edit = new Vue({
             const whiteList = [];
             const self = this;
             SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
-                console.log(res)
                 let flag = true
                 for (const key in params) {
                     if (!whiteList.includes(key)) {
@@ -554,6 +545,17 @@ const edit = new Vue({
             })
         },
 
+        async fetchQueryKeywordList(keyword){
+            try {
+                this.remoteLoading = true
+                const res = await PublicApi.fetchLabelKeywordList({keyword: keyword});
+                this.labelList = res.data
+                this.remoteLoading = false
+            }catch (e){
+                console.log(e);
+            }
+        },
+
         initAutoInput(el, variable){
             const self = this
             new AutoComplete({

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

@@ -69,8 +69,20 @@
                             </el-form-item>
                             <!-- 关联标签库 -->
                             <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
-                                <el-select v-model="formData.labelIds" multiple placeholder="请选择" class="max-width" :multiple-limit="6" clearable>
-                                    <el-option v-for="item in keywordList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                                <el-select
+                                        v-model="formData.labelIds"
+                                        multiple
+                                        placeholder="请选择标签"
+                                        class="max-width"
+                                        :multiple-limit="6"
+                                        clearable
+                                        filterable
+                                        remote
+                                        reserve-keyword
+                                        :remote-method="fetchQueryKeywordList"
+                                        :loading="remoteLoading"
+                                >
+                                    <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
                                 </el-select>
                                 <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
                             </el-form-item>

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

@@ -136,8 +136,20 @@
                         </el-form-item>
                         <!-- 关联标签库 -->
                         <el-form-item label="关联标签库" prop="labelIds" class="mint-filter">
-                            <el-select v-model="formData.labelIds" multiple placeholder="请选择" class="max-width" :multiple-limit="6" clearable>
-                                <el-option v-for="item in keywordList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                            <el-select
+                                    v-model="formData.labelIds"
+                                    multiple
+                                    placeholder="请选择标签"
+                                    class="max-width"
+                                    :multiple-limit="6"
+                                    clearable
+                                    filterable
+                                    remote
+                                    reserve-keyword
+                                    :remote-method="fetchQueryKeywordList"
+                                    :loading="remoteLoading"
+                            >
+                                <el-option v-for="item in labelList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
                             </el-select>
                             <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
                         </el-form-item>