采美文章，采美百科标签库关联

src/main/resources/static/js/auto-input.js

@@ -67,18 +67,18 @@ class AutoCompleteBase {
         var style = document.createElement('style');
         style.textContent = `
         @media screen and (min-width: 768px) {
-            .auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:50px;width:50%;padding:8px 0;background:#fff; z-index: 999;box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1);max-height: 420px;overflow-y:auto;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar { width: 8px; background-color: #fff;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e2e2e2;}
-            .auto-input ul.auto-select-list li{padding:0 16px;font-size:14px;line-height:36px;height:36px;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-            .auto-input ul.auto-select-list li:hover{background:#FEF6F3;}
+            ${this.options.el} ul.auto-select-list{margin: 0;position:absolute;left:0;top:50px;width:50%;padding:8px 0;background:#fff; z-index: 999;box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1);max-height: 420px;overflow-y:auto;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar { width: 8px; background-color: #fff;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e2e2e2;}
+            ${this.options.el} ul.auto-select-list li{padding:0 16px;font-size:14px;line-height:36px;height:36px;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+            ${this.options.el} ul.auto-select-list li:hover{background:#FEF6F3;}
         }
         @media screen and (max-width: 768px) {
-            .auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:5vw;width:50%;padding:2.4vw 0;background:#fff; z-index: 999;box-shadow: 0px 0.6vw 1.2vw 0.1vw rgba(0,0,0,0.1);max-height:82vw;overflow-y:auto;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar { width: 1.6vw; background-color: #fff;}
-            .auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 0.8vw; background-color: #e2e2e2;}
-            .auto-input ul.auto-select-list li{padding:0 3.2vw;font-size:3.4vw;line-height:8vw;height:8vw;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-            .auto-input ul.auto-select-list li:hover{background:#ecf0f1;}
+            ${this.options.el} ul.auto-select-list{margin: 0;position:absolute;left:0;top:5vw;width:50%;padding:2.4vw 0;background:#fff; z-index: 999;box-shadow: 0px 0.6vw 1.2vw 0.1vw rgba(0,0,0,0.1);max-height:82vw;overflow-y:auto;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar { width: 1.6vw; background-color: #fff;}
+            ${this.options.el} ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 0.8vw; background-color: #e2e2e2;}
+            ${this.options.el} ul.auto-select-list li{padding:0 3.2vw;font-size:3.4vw;line-height:8vw;height:8vw;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+            ${this.options.el} ul.auto-select-list li:hover{background:#ecf0f1;}
         }
         `
         this.container.appendChild(style);
@@ -112,7 +112,7 @@ class AutoCompleteBase {
     renderList() {
         this.list.forEach((text) => {
             const li = document.createElement('li');
-            li.innerHTML = text.replace(this.keyword, '<span style="color: #E15616;">' + this.keyword + '</span>');
+            li.innerHTML = text.replace(new RegExp(this.keyword, 'ig'), (match)=> '<span style="color: #E15616;">' + match + '</span>');
             li.addEventListener('click', () => this.listItemClick(text));
             this.ul.appendChild(li);
         });
@@ -176,4 +176,4 @@ class AutoComplete extends  AutoCompleteBase {
         this.ul.style.display = 'none';
         this.options.itemClick(text);
     }
-}
+}

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

@@ -24,6 +24,8 @@ var articleEdit = new Vue({
             guidanceImage: '',
             // seo关键词
             keyword: '',
+            // 关联标签库
+            labelIds: '',
             // 标签
             label: '',
             // 发布人
@@ -84,7 +86,24 @@ var articleEdit = new Vue({
                 {required: true, message: '请选择文章所属分类', trigger: 'change'}
             ]
         },
-        formValidate: {}
+        formValidate: {},
+        variable: '',
+        keywordList: [{
+            id: '选项1',
+            name: '黄金糕'
+        }, {
+            id: '选项2',
+            name: '双皮奶'
+        }, {
+            id: '选项3',
+            name: '蚵仔煎'
+        }, {
+            id: '选项4',
+            name: '龙须面'
+        }, {
+            id: '选项5',
+            name: '北京烤鸭'
+        }]
     },
     watch: {
         chooseLabels: function chooseLabels(newVal) {
@@ -104,6 +123,7 @@ var articleEdit = new Vue({
     mounted: function mounted() {
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        this.initAutoInput('.seo-auto-input', 'keyword')
     },
     beforeDestroy: function beforeDestroy() {
         localStorage.removeItem('articleId');
@@ -295,6 +315,33 @@ var articleEdit = new Vue({
                 }, 800)
             })
         },
+        async autoInputCallback(keyword){
+            try {
+                const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                if(!res.data) return [];
+                return res.data.map(item => item.keyword);
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        initAutoInput(el, variable){
+            const self = this
+            new AutoComplete({
+                el: el,
+                callback:async function(keyword){
+                    try {
+                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                        if(!res.data) return [];
+                        return res.data.map(item => item.keyword);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                },
+                itemClick: function (keyword) {
+                    self.formData[variable] = keyword
+                }
+            });
+        },
     }
 });
 

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

@@ -179,6 +179,7 @@ const edit = new Vue({
             image: '', // 头图地址
             typeId: '', // 分类id
             seoKeyword: '', // seo关键字
+            labelIds: '', // 标签库
             status: 0, // 状态0保存草稿箱  1已发布
             infoList: [], //  信息栏集合
             referenceList: [], // 参考资料集合
@@ -220,7 +221,23 @@ const edit = new Vue({
         typeList: [],
         // 敏感词校验数据
         formValidate: {},
-        referenceImageList: []
+        referenceImageList: [],
+        keywordList: [{
+            id: '选项1',
+            name: '黄金糕'
+        }, {
+            id: '选项2',
+            name: '双皮奶'
+        }, {
+            id: '选项3',
+            name: '蚵仔煎'
+        }, {
+            id: '选项4',
+            name: '龙须面'
+        }, {
+            id: '选项5',
+            name: '北京烤鸭'
+        }]
     },
     created() {
         this.formData.id = CAIMEI.getUrlParam('id')
@@ -236,6 +253,7 @@ const edit = new Vue({
     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(0).addClass("on");
+        this.initAutoInput('.seo-auto-input', 'seoKeyword')
     },
     methods: {
         // 获取表单数据
@@ -535,5 +553,24 @@ const edit = new Vue({
                 }, 800)
             })
         },
+
+        initAutoInput(el, variable){
+            const self = this
+            new AutoComplete({
+                el: el,
+                callback:async function(keyword){
+                    try {
+                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
+                        if(!res.data) return [];
+                        return res.data.map(item => item.keyword);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                },
+                itemClick: function (keyword) {
+                    self.formData[variable] = keyword
+                }
+            });
+        },
     }
 })

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

@@ -64,9 +64,16 @@
                             </el-form-item>
                             <!-- SEO关键词 -->
                             <el-form-item label="SEO关键词" prop="keyword" class="mint-filter">
-                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词"></el-input>
+                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词" class="seo-auto-input"></el-input>
                                 <div class="mint-message" v-if="formValidate.keyword">{{formValidate.keyword}}</div>
                             </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>
+                                <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
+                            </el-form-item>
                             <!-- 发布人 -->
                             <el-form-item label="发布人" prop="publisher" class="mint-filter">
                                 <el-input v-model="formData.publisher" placeholder="请填写发布人姓名"></el-input>

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

@@ -131,9 +131,16 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item label="SEO关键词：">
-                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜"></el-input>
+                            <el-input v-model="formData.seoKeyword" placeholder="例如：面膜" class="seo-auto-input"></el-input>
                             <div class="el-form-item__error" v-if="formValidate.seoKeyword">敏感词：{{formValidate.seoKeyword}}</div>
                         </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>
+                            <div class="mint-message" v-if="formValidate.labelIds">{{formValidate.labelIds}}</div>
+                        </el-form-item>
                         <el-form-item prop="status">
                             <div class="bk-status">
                                 <label class="el-form-item__label">状态：</label>