|
@@ -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,
|