|
@@ -0,0 +1,722 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="copy-library-content">
|
|
|
|
+ <div class="control-con-header">
|
|
|
|
+ <a-form
|
|
|
|
+ class="grid-form"
|
|
|
|
+ layout="inline"
|
|
|
|
+ :form="form"
|
|
|
|
+ hide-required-mark
|
|
|
|
+ >
|
|
|
|
+ <a-row class="grid-form-options">
|
|
|
|
+ <a-form-item
|
|
|
|
+ class="grid-form-item"
|
|
|
|
+ label="账户:"
|
|
|
|
+ :colon="false"
|
|
|
|
+ >
|
|
|
|
+ <acount-search class="acount-search-class" :appId.sync="configForm.acountId" :multiple="false" request="1,3"></acount-search>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ class="grid-form-item"
|
|
|
|
+ label="关键词:"
|
|
|
|
+ :colon="false"
|
|
|
|
+ >
|
|
|
|
+ <a-input v-model="configForm.num" placeholder="请输入关键词"/>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ class="grid-form-item"
|
|
|
|
+ label="选择时间:"
|
|
|
|
+ :colon="false"
|
|
|
|
+ >
|
|
|
|
+ <a-range-picker
|
|
|
|
+ v-model="configForm.launchDateRange"
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
+ @change="handleLaunchData"
|
|
|
|
+ />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item class="form-handle-btn">
|
|
|
|
+ <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
|
|
|
|
+ <a-button type="primary" @click="handleQueryList">查询</a-button>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form>
|
|
|
|
+ <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新增文案</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="control-con-table">
|
|
|
|
+ <a-table
|
|
|
|
+ ref="table"
|
|
|
|
+ size="middle"
|
|
|
|
+ bordered
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="dataSource"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ >
|
|
|
|
+ </a-table>
|
|
|
|
+ <a-pagination
|
|
|
|
+ class="pagin-table-class"
|
|
|
|
+ :total="totalAll"
|
|
|
|
+ :show-total="total => `共 ${totalAll} 条`"
|
|
|
|
+ size="small"
|
|
|
|
+ show-size-changer
|
|
|
|
+ show-quick-jumper
|
|
|
|
+ @change="onShowSizeChange"
|
|
|
|
+ @showSizeChange="onShowSizeChange"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <a-modal
|
|
|
|
+ v-if="causeVisible"
|
|
|
|
+ title="新建文案"
|
|
|
|
+ dialog-class="copywrit-modal"
|
|
|
|
+ :visible="causeVisible"
|
|
|
|
+ @ok="handleCauseSure"
|
|
|
|
+ @cancel="handleCauseCancel"
|
|
|
|
+ >
|
|
|
|
+ <div>
|
|
|
|
+ <div class="acount-title">
|
|
|
|
+ <div class="acount-title-left">文案类型</div>
|
|
|
|
+ <div class="acount-title-right">
|
|
|
|
+ <div class="only-title-mater">
|
|
|
|
+ <a-radio-group v-model="copywrittypeName" button-style="solid" @change="handleFormLayoutChange">
|
|
|
|
+ <a-radio-button value="horizontal">
|
|
|
|
+ 通用
|
|
|
|
+ </a-radio-button>
|
|
|
|
+ <a-radio-button value="vertical">
|
|
|
|
+ 指定素材
|
|
|
|
+ </a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="copywrittypeName === 'horizontal'" class="acount-title">
|
|
|
|
+ <div class="acount-title-left">广告账户</div>
|
|
|
|
+ <div class="acount-title-right">
|
|
|
|
+ <div class="only-title-mater">
|
|
|
|
+ <acount-search :appId.sync="advertisingAccount" request="1,3"></acount-search>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="copywrittypeName === 'vertical'" class="acount-title">
|
|
|
|
+ <div class="acount-title-left">选择素材</div>
|
|
|
|
+ <div class="acount-title-right">
|
|
|
|
+ <div class="only-title-mater">
|
|
|
|
+ <p><a @click="handleSelectMaterial">选择素材</a></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="acount-title push-plate">
|
|
|
|
+ <div class="acount-title-left">创意标题</div>
|
|
|
|
+ <div class="acount-title-right">
|
|
|
|
+ <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
|
|
|
|
+ <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="acount-title">
|
|
|
|
+ <div class="acount-title-left"></div>
|
|
|
|
+ <div class="acount-title-right">
|
|
|
|
+ <a-form :form="examinForm">
|
|
|
|
+ <a-form-item
|
|
|
|
+ v-for="item in defaultFormList"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ class="examin-form-model"
|
|
|
|
+ :label-col="labelCol"
|
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
|
+ label=""
|
|
|
|
+ >
|
|
|
|
+ <a-input
|
|
|
|
+ v-decorator="[
|
|
|
|
+ item.name,
|
|
|
|
+ {rules: [
|
|
|
|
+ {validator: validatePass, trigger: 'blur'}
|
|
|
|
+ ]}
|
|
|
|
+ ]"
|
|
|
|
+ class="examin-form-input"
|
|
|
|
+ :id="item.name"
|
|
|
|
+ placeholder="请输入"
|
|
|
|
+ @change="handleFormInputChang($event, item.name, item.id)"
|
|
|
|
+ />
|
|
|
|
+ <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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <a-modal
|
|
|
|
+ title="选择素材"
|
|
|
|
+ v-model="visibleMatemal"
|
|
|
|
+ dialog-class="select-matermal-modal"
|
|
|
|
+ @ok="handleOkShow"
|
|
|
|
+ @cancel="cancelAll"
|
|
|
|
+ >
|
|
|
|
+ <div class="mater-viedo-content">
|
|
|
|
+ <div class="viedo-header-class">
|
|
|
|
+ <div></div>
|
|
|
|
+ <div>
|
|
|
|
+ 当前选择数量 1/15
|
|
|
|
+ <a-button type="primary" class="refush-btn-mat">刷新素材</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-row class="viedo-serach-class" :gutter="24">
|
|
|
|
+ <a-col :span="9">
|
|
|
|
+ <a-form-item label="日期选择" :labelCol="modalCol" :wrapperCol="modalWrapper">
|
|
|
|
+ <a-range-picker name="buildTime"/>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="9">
|
|
|
|
+ <a-form-item label="唯一标识" :labelCol="modalCol" :wrapperCol="modalWrapper">
|
|
|
|
+ <a-input placeholder="请输入唯一标识,多个以,隔开"/>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="4">
|
|
|
|
+ <a-button style="position: relative;top: 4px;">
|
|
|
|
+ 全选
|
|
|
|
+ </a-button>
|
|
|
|
+ <a-button type="primary" style="position: relative;top: 4px;margin-left:5px">
|
|
|
|
+ 搜索
|
|
|
|
+ </a-button>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <div class="viedo-content-class">
|
|
|
|
+ <a-checkbox-group class="viedo-content-group" v-model="viedoCheckValue">
|
|
|
|
+ <li class="content-modal-li" v-for="(item, index) in viedoDefaultList" :key="index">
|
|
|
|
+ <a-checkbox
|
|
|
|
+ class="viedo-content-checkbox"
|
|
|
|
+ :value="item.id"
|
|
|
|
+ >
|
|
|
|
+ </a-checkbox>
|
|
|
|
+ <img src="@/assets/img/spLbLAbh.jpg"/>
|
|
|
|
+ <div class="checkbox-select-time">时间:{{ item.statDate }}</div>
|
|
|
|
+ <div class="checkbox-select-show"><a>查看视频</a></div>
|
|
|
|
+ </li>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ <a-pagination
|
|
|
|
+ class="pagin-table-class"
|
|
|
|
+ :total="materTotalAll"
|
|
|
|
+ :show-total="total => `共 ${materTotalAll} 条`"
|
|
|
|
+ size="small"
|
|
|
|
+ show-size-changer
|
|
|
|
+ show-quick-jumper
|
|
|
|
+ @change="onShowSizeChange"
|
|
|
|
+ @showSizeChange="onShowSizeChange"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
|
|
|
|
+
|
|
|
|
+import {getAction, putAction, deleteAction} from '@/api/manage';
|
|
|
|
+import {fileCheck, fileEdit, fileEditAll, fileInsertV2, fileEditUpdate, fileEditUpdateBatch} from '@/api/actor';
|
|
|
|
+import {mapGetters} from 'vuex';
|
|
|
|
+import {urlAcount} from './account-config-server.js';
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'copy-library',
|
|
|
|
+ components: {
|
|
|
|
+ AcountSearch
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ materTotalAll: 0,
|
|
|
|
+ viedoCheckValue: [],
|
|
|
|
+ viedoDefaultList: [
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 1,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 2,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 3,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 4,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 5,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 6,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '1123',
|
|
|
|
+ id: 7,
|
|
|
|
+ statDate: '2019-08-08'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ visibleMatemal: false,
|
|
|
|
+ advertisingAccount: [],
|
|
|
|
+ copywrittypeName: 'horizontal',
|
|
|
|
+ adNameTags: [],
|
|
|
|
+ causeVisible: false,
|
|
|
|
+ labelCol: {span: 4},
|
|
|
|
+ wrapperCol: {span: 14},
|
|
|
|
+ modalCol: {
|
|
|
|
+ lg: {span: 6},
|
|
|
|
+ sm: {span: 6},
|
|
|
|
+ xs: {span: 6},
|
|
|
|
+ md: {span: 6}
|
|
|
|
+ },
|
|
|
|
+ modalWrapper: {
|
|
|
|
+ lg: {span: 18},
|
|
|
|
+ sm: {span: 18},
|
|
|
|
+ xs: {span: 14},
|
|
|
|
+ md: {span: 14}
|
|
|
|
+ },
|
|
|
|
+ acountId: undefined, // 搜索的账户ID
|
|
|
|
+ totalAll: 0,
|
|
|
|
+ configForm: {
|
|
|
|
+ acountId: '',
|
|
|
|
+ num: '',
|
|
|
|
+ launchDateRange: []
|
|
|
|
+ },
|
|
|
|
+ tablePag: {
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 10
|
|
|
|
+ },
|
|
|
|
+ dataSource: [],
|
|
|
|
+ columns: [
|
|
|
|
+ {
|
|
|
|
+ title: '文案',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'status'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '相关创意',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'accountId_dictText'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '花费(元)',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'accountId',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '展示数',
|
|
|
|
+ dataIndex: 'createTime',
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均千次展现费用',
|
|
|
|
+ dataIndex: 'validBalance',
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击数',
|
|
|
|
+ dataIndex: 'accountBudget',
|
|
|
|
+ width: 180,
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '平均点击单价',
|
|
|
|
+ dataIndex: 'adCpaBidStr',
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击率',
|
|
|
|
+ dataIndex: 'cost',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150,
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化数',
|
|
|
|
+ dataIndex: 'zhuanhualv',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150,
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化率',
|
|
|
|
+ dataIndex: 'zhuanhuashu',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150,
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化成本',
|
|
|
|
+ dataIndex: 'zhuanhuachengben',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 150,
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ masterPag: {
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 10
|
|
|
|
+ },
|
|
|
|
+ defaultFormList: [],
|
|
|
|
+ titleFiledResult: 0,
|
|
|
|
+ examinForm: this.$form.createForm(this)
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ defaultFormList: {
|
|
|
|
+ deep: true,
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ const result = [];
|
|
|
|
+ this.defaultFormList = n;
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.defaultFormList.forEach(item => {
|
|
|
|
+ if (item.value) {
|
|
|
|
+ result.push(item.value);
|
|
|
|
+ }
|
|
|
|
+ this.examinForm.setFieldsValue({[item.name]: item.value});
|
|
|
|
+ });
|
|
|
|
+ this.titleFiledResult = result;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.form = this.$form.createForm(this);
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.handleInitTable();
|
|
|
|
+ this.handleGetCreativeWord();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
|
+ onShowSizeChange(current, pageSize) {
|
|
|
|
+ this.masterPag = {
|
|
|
|
+ page: current,
|
|
|
|
+ size: pageSize
|
|
|
|
+ };
|
|
|
|
+ this.handleInitTable();
|
|
|
|
+ },
|
|
|
|
+ handleSelectMaterial() {
|
|
|
|
+ console.log('选择素材');
|
|
|
|
+ this.visibleMatemal = true;
|
|
|
|
+ },
|
|
|
|
+ cancelAll() {
|
|
|
|
+ // this.checkVideoAll = []
|
|
|
|
+ // this.checkVideoWei = []
|
|
|
|
+ this.visibleMatemal = false
|
|
|
|
+ this.md5Str = ""
|
|
|
|
+ },
|
|
|
|
+ handleOkShow() {
|
|
|
|
+ // this.checkVideoAll = [...new Set(this.checkVideoAll)]
|
|
|
|
+ // var data = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
|
|
|
|
+ // this.checkVideo = data
|
|
|
|
+ // // console.log(this.checkVideoAll, this.checkVideo)
|
|
|
|
+ // for (let i = 0; i < this.checkVideo.length; i++) {
|
|
|
|
+ // this.setVideUrl(this.checkVideo[i])
|
|
|
|
+ // if (i == this.checkVideo.length - 1) {
|
|
|
|
+ // this.showVideo = true
|
|
|
|
+ // this.visibleMatemal = false
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ handleFormLayoutChange(e) {
|
|
|
|
+ this.copywrittypeName = e.target.value;
|
|
|
|
+ },
|
|
|
|
+ handleFormInputChang(e, field, formId) {
|
|
|
|
+ const changeFiled = [];
|
|
|
|
+ this.defaultFormList.forEach(item => {
|
|
|
|
+ if (item.id === formId) {
|
|
|
|
+ item.value = e.target.value;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.defaultFormList.forEach(item => {
|
|
|
|
+ if (item.value) {
|
|
|
|
+ changeFiled.push(item.value);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ let finallyLenList = this.handleJudgeExec(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;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleJudgeExec(item) {
|
|
|
|
+ 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;
|
|
|
|
+ let finallyLenList = this.handleJudgeExec(txt);
|
|
|
|
+ if (finallyLenList.length >= 2) {
|
|
|
|
+ this.$message.error('最多选择两个词包');
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ 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.handleJudgeExec(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];
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ validatePass(rule, value, callback) {
|
|
|
|
+ let finallyLenList = this.handleJudgeExec(value);
|
|
|
|
+ let resultSelectSize = 0;
|
|
|
|
+ if (finallyLenList.length) {
|
|
|
|
+ const inputDefaultLen = value.length;
|
|
|
|
+ let tagsLen = finallyLenList.length * 4;
|
|
|
|
+ let tagsSureLen = 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;
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ resultSelectSize = value.length;
|
|
|
|
+ }
|
|
|
|
+ if (resultSelectSize === 0) {
|
|
|
|
+ callback(new Error('请输入'));
|
|
|
|
+ }
|
|
|
|
+ else if (resultSelectSize > 30 || resultSelectSize < 5) {
|
|
|
|
+ callback(new Error('创意标题5-30个字'));
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ callback();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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';
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleCauseSure() {
|
|
|
|
+ if (this.defaultFormList && this.defaultFormList.length < 3) {
|
|
|
|
+ this.$message.error('请至少输入3条标题');
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let changeSlogan = this.defaultFormList;
|
|
|
|
+ changeSlogan.forEach(item => {
|
|
|
|
+ item.title = item.value;
|
|
|
|
+ item.creative_word_ids = [];
|
|
|
|
+ });
|
|
|
|
+ // let params = {
|
|
|
|
+ // id: this.currentPageOnlyList.id,
|
|
|
|
+ // auditorId: this.userInfo().id,
|
|
|
|
+ // status: 1,
|
|
|
|
+ // slogans: changeSlogan
|
|
|
|
+ // };
|
|
|
|
+ this.examinForm.validateFields(err => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ // fileEditUpdate(params).then(res => {
|
|
|
|
+ // if (res.code === 200) {
|
|
|
|
+ // this.refuseReason = '';
|
|
|
|
+ // this.causeVisible = false;
|
|
|
|
+ // this.defaultFormList = [];
|
|
|
|
+ // this.$message.success('审核成功');
|
|
|
|
+ // this.loadData();
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleCauseCancel() {
|
|
|
|
+ this.causeVisible = false;
|
|
|
|
+ this.defaultFormList = [];
|
|
|
|
+ },
|
|
|
|
+ handleGetCreativeWord() {
|
|
|
|
+ getAction('/ctop/ByteDanceCreativeWordPackage/list').then(result => {
|
|
|
|
+ if (result.code === 0) {
|
|
|
|
+ this.adNameTags = result.result.records;
|
|
|
|
+ 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: '',
|
|
|
|
+ lenSize: 0,
|
|
|
|
+ tabStatus: 'alone',
|
|
|
|
+ defaultTagsList: this.adNameTags,
|
|
|
|
+ updateTagsList: this.adNameTags.slice(0, 4)
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.$message.error(result.message);
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.log(error, 'eeee');
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleAddOrigin() {
|
|
|
|
+ const randomNum = new Date().getTime() + Math.ceil(Math.random() * 1000);
|
|
|
|
+ this.defaultFormList.push({
|
|
|
|
+ id: randomNum,
|
|
|
|
+ name: 'username' + randomNum,
|
|
|
|
+ value: '',
|
|
|
|
+ lenSize: 0,
|
|
|
|
+ tabStatus: 'alone',
|
|
|
|
+ defaultTagsList: this.adNameTags,
|
|
|
|
+ updateTagsList: this.adNameTags.slice(0, 4)
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleDelOrigin(list) {
|
|
|
|
+ let formData = this.defaultFormList;
|
|
|
|
+ this.defaultFormList = formData.filter(item => list.id !== item.id);
|
|
|
|
+ },
|
|
|
|
+ handleAddAccountConfig() {
|
|
|
|
+ this.causeVisible = true;
|
|
|
|
+ },
|
|
|
|
+ handleLaunchData(date, dateString) {
|
|
|
|
+ this.configForm.launchDateRange = dateString;
|
|
|
|
+ },
|
|
|
|
+ handleQueryList() {
|
|
|
|
+ console.log(this.configForm, '---000--00');
|
|
|
|
+ },
|
|
|
|
+ handleResetList() {
|
|
|
|
+ console.log(this.configForm, '重置操作');
|
|
|
|
+ },
|
|
|
|
+ handleInitTable() {
|
|
|
|
+ const paramsData = {
|
|
|
|
+ accountId: this.acountId,
|
|
|
|
+ loginUserId: this.userInfo().id,
|
|
|
|
+ pageNo: this.tablePag.page,
|
|
|
|
+ pageSize: this.tablePag.size
|
|
|
|
+ };
|
|
|
|
+ // getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/list', paramsData).then(result => {
|
|
|
|
+ // if (result.code === 0) {
|
|
|
|
+ // result.result.records.forEach(item => {
|
|
|
|
+ // item.show = false;
|
|
|
|
+ // item.visible = false;
|
|
|
|
+ // if (item.accountBudgetMode === '1') {
|
|
|
|
+ // item.accountBudget = '不限';
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // this.dataSource = result.result.records;
|
|
|
|
+ // this.totalAll = result.result.total;
|
|
|
|
+ // }
|
|
|
|
+ // else {
|
|
|
|
+ // this.$message.error(result.message);
|
|
|
|
+ // }
|
|
|
|
+ // }).catch(error => {
|
|
|
|
+ // console.log(error, 'eeee');
|
|
|
|
+ // });
|
|
|
|
+ },
|
|
|
|
+ onShowSizeChange(current, pageSize) {
|
|
|
|
+ this.tablePag = {
|
|
|
|
+ page: current,
|
|
|
|
+ size: pageSize
|
|
|
|
+ };
|
|
|
|
+ this.handleInitTable();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+ @import "copy-library";
|
|
|
|
+</style>
|