Browse Source

动态词包 work

jiayufei 4 years ago
parent
commit
01f6b196e1
1 changed files with 218 additions and 27 deletions
  1. 218 27
      src/views/modules/creative-copywrit/creative-copywrit.vue

+ 218 - 27
src/views/modules/creative-copywrit/creative-copywrit.vue

@@ -1476,8 +1476,9 @@
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-right">
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
+                        <!-- TODO 暂时功能隐藏 -->
                         <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
-                        <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
+                        <span>已填:{{ titleFiledResult.length || 0 }}</span>
                     </div>
                 </div>
                 <div class="acount-title">
@@ -1496,16 +1497,41 @@
                                     v-decorator="[
                                         item.name,
                                         { rules: [
-                                            {required: true, message: '请输入创意标题', trigger: 'blur'},
-                                            {min: 5, max: 30, message: '创意标题5-30个字', trigger: 'blur'}
+                                            {required: true, message: '请输入创意标题'},
+                                            {validator: validatePass, trigger: 'blur'}
                                         ]}
                                     ]"
                                     class="examin-form-input"
+                                    :id="item.name"
                                     placeholder="请输入"
-                                    @change="handleFormInputChang($event, item)"
+                                    @change="handleFormInputChang($event, item.name, item.id)"
                                 />
-                                <span class="examin-form-num">{{ handleFilterName(item.name) }}/30</span>
+                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                 <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
+                                <div class="ad-name-tags-class">
+                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.updateTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.defaultTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
+                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
+                                </div>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -1534,8 +1560,9 @@
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-right">
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
+                        <!-- TODO 暂时功能隐藏 -->
                         <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
-                        <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
+                        <span>已填:{{ titleFiledResult.length || 0 }}</span>
                     </div>
                 </div>
                 <div class="acount-title">
@@ -1554,16 +1581,40 @@
                                     v-decorator="[
                                         item.name,
                                         { rules: [
-                                            {required: true, message: '请输入创意标题', trigger: 'blur'},
-                                            {min: 5, max: 30, message: '创意标题5-30个字', trigger: 'blur'}
+                                            {required: true, message: '请输入创意标题'},
+                                            {validator: validatePass, trigger: 'blur'}
                                         ]}
                                     ]"
                                     class="examin-form-input"
                                     placeholder="请输入"
-                                    @change="handleFormInputChang($event, item)"
+                                    @change="handleFormInputChang($event, item.name, item.id)"
                                 />
-                                <span class="examin-form-num">{{ handleFilterName(item.name) }}/30</span>
+                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                 <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
+                                <div class="ad-name-tags-class">
+                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.updateTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.defaultTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
+                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
+                                </div>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -1604,6 +1655,7 @@ export default {
     },
     data() {
         return {
+            adNameTags: [],
             materTitltStatus: false,
             accountMaster: {
                 height: '35px',
@@ -1881,6 +1933,7 @@ export default {
             }
         });
         this.getHangye();
+        this.handleGetCreativeWord();
     },
     watch: {
         $route(n, o) {
@@ -1933,6 +1986,110 @@ export default {
     },
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
+        handleMoreTagsShow(val, type) {
+            if (type === 'more') {
+                this.defaultFormList.forEach(item => {
+                    if (item.id === val) {
+                        item.tabStatus = 'all';
+                    }
+                });
+            }
+            else if (type === 'little') {
+                this.defaultFormList.forEach(item => {
+                    if (item.id === val) {
+                        item.tabStatus = 'alone';
+                    }
+                });
+            }
+        },
+        handleGetCreativeWord() {
+            getAction('/ctop/ByteDanceCreativeWordPackage/list').then(result => {
+                if (result.code === 0) {
+                    this.adNameTags = result.result.records;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        validatePass(rule, value, callback) {
+            let finallyLenList = this.judge(value);
+            const inputDefaultLen = value;
+            let tagsLen = finallyLenList.length * 4;
+            let tagsSureLen = 0;
+            let resultSelectSize = 0;
+            this.adNameTags.forEach(item => {
+                finallyLenList.forEach(val => {
+                    if (item.name === val) {
+                        tagsSureLen += item.maxWordLen;
+                    }
+                });
+            });
+            finallyLenList.forEach(item => {
+                tagsLen += item.length;
+            });
+            resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+            if (resultSelectSize < 30 && resultSelectSize > 5) {
+                callback();
+            }
+            else {
+                callback(new Error('创意标题5-30个字'));
+            }
+        },
+        judge(item) {
+            // let re = /{{(.*?)}}/g;
+            let re = /\{\{(.+?)\}\}/g;
+            let array = [];
+            let temp;
+            while ((temp = re.exec(item))) {
+                array.push(temp[1]);
+            };
+            return array;
+        },
+        // 点击获取光标位置进行字段插入
+        handleGetChangeAll(item, field, formId) {
+            let node = document.getElementById(field);
+            let startPos = node.selectionStart; // input 第0个字符到选中的字符
+            let endPos = node.selectionEnd; // 选中的字符到最后的字符
+            let txt = node.value;
+            if (startPos === 0 || endPos === 0) {
+                txt += '{{' + item + '}}';
+                this.examinForm.setFieldsValue({[field]: txt});
+            }
+            else {
+                this.examinForm.setFieldsValue({[field]: txt.substring(0, startPos) + '{{' + item + '}}' + txt.substring(endPos)});
+                node.selectionStart = startPos + item.length + 6;
+                node.selectionEnd = startPos + item.length + 6;
+            }
+            node.focus();
+            node.blur();
+            this.$nextTick(() => {
+                let finallyLenList = this.judge(this.examinForm.getFieldsValue()[field]);
+                const inputDefaultLen = this.examinForm.getFieldsValue()[field].length;
+                let tagsLen = finallyLenList.length * 4;
+                let tagsSureLen = 0;
+                let resultSelectSize = 0;
+                this.adNameTags.forEach(item => {
+                    finallyLenList.forEach(val => {
+                        if (item.name === val) {
+                            tagsSureLen += item.maxWordLen;
+                        }
+                    });
+                });
+                finallyLenList.forEach(item => {
+                    tagsLen += item.length;
+                });
+                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                this.defaultFormList.forEach(item => {
+                    if (item.id === formId) {
+                        item.lenSize = resultSelectSize;
+                        item.value = this.examinForm.getFieldsValue()[field];
+                    }
+                });
+            });
+        },
         handleMaterTitleClick() {
             this.materTitltStatus = !this.materTitltStatus;
             if (this.materTitltStatus) {
@@ -1957,17 +2114,16 @@ export default {
             });
             this.modalShowBatchList = batchList;
             this.batchVisible = true;
-            this.materTitltStatus = false;
-            this.accountMaster = {
-                height: '35px',
-                overflow: 'hidden'
-            };
             for (let i = 0; i < 3; i++) {
                 const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
                 this.defaultFormList.push({
                     id: randomNum,
                     name: 'username' + randomNum,
-                    value: ''
+                    value: '',
+                    lenSize: 0,
+                    tabStatus: 'alone',
+                    defaultTagsList: this.adNameTags,
+                    updateTagsList: this.adNameTags.slice(0, 4)
                 });
             }
         },
@@ -2003,7 +2159,6 @@ export default {
             });
         },
         handleBatchCancel() {
-            console.log('批量取消按钮');
             this.batchVisible = false;
         },
         handleFodderWind() {
@@ -2051,7 +2206,6 @@ export default {
                     this.showUrlWater = res.result.watermarkUrl;
                     this.name = res.result.watermarkCode;
                     this.materialName = res.result.materialName;
-                    // 0317淘特除螨仪.mp4     0317幸福里 没钱 高清版.mp4    0316幸福里来北京五年 高清  大妈和美女2高清.mp4  WIFIAQZS2004JYL.mp4
                     res.result.slogans.forEach(item => {
                         item.name = 'username' + item.id;
                     });
@@ -2111,10 +2265,10 @@ export default {
                 this.solganForm.setFieldsValue({[data.name]: data.slogan});
             });
         },
-        handleFormInputChang(e, data) {
+        handleFormInputChang(e, field, formId) {
             const changeFiled = [];
             this.defaultFormList.forEach(item => {
-                if (item.id === data.id) {
+                if (item.id === formId) {
                     item.value = e.target.value;
                 }
             });
@@ -2123,7 +2277,30 @@ export default {
                     changeFiled.push(item.value);
                 }
             });
-            this.titleFiledResult = changeFiled;
+            this.$nextTick(() => {
+                let finallyLenList = this.judge(this.examinForm.getFieldsValue()[field]);
+                const inputDefaultLen = this.defaultFormList.filter(item => item.id === formId)[0].value.length;
+                let tagsLen = finallyLenList.length * 4;
+                let tagsSureLen = 0;
+                let resultSelectSize = 0;
+                this.adNameTags.forEach(item => {
+                    finallyLenList.forEach(val => {
+                        if (item.name === val) {
+                            tagsSureLen += item.maxWordLen;
+                        }
+                    });
+                });
+                finallyLenList.forEach(item => {
+                    tagsLen += item.length;
+                });
+                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                this.defaultFormList.forEach(item => {
+                    if (item.id === formId) {
+                        item.lenSize = resultSelectSize;
+                    }
+                });
+                this.titleFiledResult = changeFiled;
+            });
         },
         handleCheckBoxChang(data) {
             this.applyTypeOption = data;
@@ -2181,7 +2358,10 @@ export default {
                 this.defaultFormList.push({
                     id: dateTime,
                     name: name,
-                    value: item
+                    value: item,
+                    tabStatus: 'alone',
+                    defaultTagsList: this.adNameTags,
+                    updateTagsList: this.adNameTags.slice(0, 4)
                 });
             });
             this.titleResult = [];
@@ -2204,7 +2384,11 @@ export default {
             this.defaultFormList.push({
                 id: randomNum,
                 name: 'username' + randomNum,
-                value: ''
+                value: '',
+                lenSize: 0,
+                tabStatus: 'alone',
+                defaultTagsList: this.adNameTags,
+                updateTagsList: this.adNameTags.slice(0, 4)
             });
         },
         handleDelOrigin(list) {
@@ -2221,6 +2405,10 @@ export default {
                         res.result.slogans.forEach(item => {
                             item.name = 'username' + item.id;
                             item.value = item.slogan;
+                            item.lenSize = item.slogan.length,
+                            item.tabStatus = 'alone';
+                            item.defaultTagsList = this.adNameTags;
+                            item.updateTagsList = this.adNameTags.slice(0, 4);
                         });
                         this.defaultFormList = res.result.slogans;
                         this.$nextTick(() => {
@@ -2235,7 +2423,11 @@ export default {
                             this.defaultFormList.push({
                                 id: randomNum,
                                 name: 'username' + randomNum,
-                                value: ''
+                                value: '',
+                                lenSize: 0,
+                                tabStatus: 'alone',
+                                defaultTagsList: this.adNameTags,
+                                updateTagsList: this.adNameTags.slice(0, 4)
                             });
                         }
                     }
@@ -2623,8 +2815,6 @@ export default {
             }
         },
         onChangeCheck(checkedList, data) {
-            console.log(data, 'data--data');
-            console.log(checkedList, this.checkArr, this.dataSource, '-------');
             if (data.value === '0') {
                 this.showTabsTitle = '0';
             }
@@ -2835,7 +3025,8 @@ export default {
                         this.visibleDetail = false;
                         closeAllVideoFun();
                     });
-                } else {
+                }
+                else {
                     fileEdit({
                         id: this.id,
                         status: editStatus,