瀏覽代碼

配置页面 添加光标插入内容

jiayufei 4 年之前
父節點
當前提交
92522983bf

+ 22 - 55
src/views/modules/account-config/account-config.vue

@@ -46,13 +46,13 @@
                 </span>
                 <span slot="action" slot-scope="text, record">
                     <a @click="handleEdit(record)">编辑</a>
-                    <a-divider type="vertical" />
+                    <a-divider type="vertical"/>
                     <a @click="handleListDelete(record)">删除</a>
-                    <a-divider type="vertical" />
-                    <a-popover v-model="record.visible" title="" trigger="click">
+                    <a-divider type="vertical"/>
+                    <a-popover v-model="record.visible" trigger="click">
                         <template slot="content">
-                            <p class="handle-p">
-                                <a-input v-model="modContent" placeholder="请输入" style="width: 140px;"/>
+                            <div><a-input v-model="modContent" placeholder="请输入" style="width: 140px;"/></div>
+                            <div style="margin-top: 10px;">
                                 <a-button
                                     size="small"
                                     type="primary"
@@ -61,26 +61,16 @@
                                 >
                                     确定
                                 </a-button>
-                            </p>
-                            <!-- <p>
-                                <a-button
-                                    size="small"
-                                    type="primary"
-                                    style="margin-left: 15px;margin-right: 15px;"
-                                    @click="handlePopoverSure(record, 'mod')"
-                                >
-                                    确定
-                                </a-button>
-                                <!-- <a-button size="small" @click="handleModPopover">取消</a-button> -->
-                            <!-- </p> -->
+                                <a-button size="small" @click="handleModPopover(record)">取消</a-button>
+                            </div>
                         </template>
-                        <a @click="handleModBid(record)">修改出价</a>
+                        <a>修改出价</a>
                     </a-popover>
-                    <a-divider type="vertical" />
-                    <a-popover v-model="record.show" title="" trigger="click">
+                    <a-divider type="vertical"/>
+                    <a-popover v-model="record.show" trigger="click">
                         <template slot="content">
-                            <p class="handle-p">
-                                <a-input v-model="budgetContent" placeholder="请输入" style="width: 140px;"/>
+                            <div><a-input v-model="budgetContent" placeholder="请输入" style="width: 140px;"/></div>
+                            <div style="margin-top: 10px;">
                                 <a-button
                                     size="small"
                                     type="primary"
@@ -89,20 +79,10 @@
                                 >
                                     确定
                                 </a-button>
-                            </p>
-                            <!-- <p>
-                                <a-button
-                                    size="small"
-                                    type="primary"
-                                    style="margin-left: 15px;margin-right: 15px;"
-                                    @click="handlePopoverSure(record, 'budget')"
-                                >
-                                    确定
-                                </a-button> -->
-                                <!-- <a-button size="small" @click="handleBudgetPopover">取消</a-button> -->
-                            <!-- </p> -->
+                                <a-button size="small" @click="handleBudgetPopover(record)">取消</a-button>
+                            </div>
                         </template>
-                        <a @click="handleBudgetRevision(record)">修改预算</a>
+                        <a>修改预算</a>
                     </a-popover>
                 </span>
             </a-table>
@@ -133,11 +113,8 @@ export default {
     },
     data() {
         return {
-            modBidTypeId: '',
             modContent: '',
             budgetContent: '',
-            isBudgetVisible: false,
-            isModVisible: false,
             acountId: undefined, // 搜索的账户ID
             totalAll: 0,
             tablePag: {
@@ -204,9 +181,6 @@ export default {
     },
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
-        changeTag(data) {
-            console.log(data);
-        },
         handlePopoverSure(record, type) {
             const defaultList = {
                 accountId: record.accountId,
@@ -218,6 +192,7 @@ export default {
             let paramsData = new FormData();
             if (type === 'mod') {
                 record.visible = false;
+                this.modContent = '';
                 paramsData.append('accountId', defaultList.accountId);
                 paramsData.append('adId', defaultList.adId);
                 paramsData.append('type', 1);
@@ -226,8 +201,9 @@ export default {
             }
             else if (type === 'budget') {
                 record.show = false;
+                this.budgetContent = '';
                 paramsData.append('accountId', defaultList.accountId);
-                paramsData.append('adId', record.adId);
+                paramsData.append('adId', defaultList.adId);
                 paramsData.append('type', 2);
                 paramsData.append('budget', defaultList.budget);
                 paramsData.append('id', defaultList.id);
@@ -237,8 +213,6 @@ export default {
         handlePopoverChange(data) {
             putAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/updStaOrCpaOrBudgetById', data).then(result => {
                 if (result.code === 0) {
-                    this.modContent = '';
-                    this.budgetContent = '';
                     this.$message.success(result.message);
                     this.handleInitTable();
                 }
@@ -296,18 +270,11 @@ export default {
                 }
             });
         },
-        handleBudgetPopover() {
-            this.isBudgetVisible = false;
-        },
-        handleBudgetRevision(data) {
-            this.isBudgetVisible = true;
-        },
-        handleModPopover() {
-            this.isModVisible = false;
+        handleBudgetPopover(record) {
+            record.show = false;
         },
-        handleModBid(data) {
-            this.isModVisible = true;
-            this.modBidTypeId = data.id;
+        handleModPopover(record) {
+            record.visible = false;
         },
         handleQueryList(event) {
             event.preventDefault();

+ 159 - 29
src/views/modules/account-config/components/configuration-modal.vue

@@ -12,23 +12,51 @@
                 <p class="separate-title-header">{{ modalTitle === 'add' ? '新增' : '编辑'}}配置信息</p>
                 <div class="separate-module-con">
                     <a-form-model-item label="广告账户">
-                        <acount-search :disabled="modalTitle === 'edit'" class="acount-search-class" :appId.sync="configForm.accountId" :multiple="false" request="1,3"></acount-search>
+                        <acount-search
+                            class="acount-search-class"
+                            :disabled="modalTitle === 'edit'"
+                            :appId.sync="configForm.accountId"
+                            :multiple="false"
+                            request="1,3"
+                        >
+                        </acount-search>
                     </a-form-model-item>
                     <a-form-model-item label="dp链接范围" class="dp-link-start" prop="dpLinkStartIndex">
-                        <a-input-number class="common-input" placeholder="请输入" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkStartIndex" :min="0"/>
+                        <a-input-number
+                            class="common-input"
+                            v-model="configForm.dpLinkStartIndex"
+                            :disabled="modalTitle === 'edit'"
+                            :min="0"
+                            placeholder="请输入"
+                        />
                         <span>~</span>
                     </a-form-model-item>
-                    <a-form-model-item label="" class="dp-link-end" prop="dpLinkEndIndex">
-                        <a-input-number class="common-input" placeholder="请输入" :disabled="modalTitle === 'edit'" v-model="configForm.dpLinkEndIndex" :min="getEndIndex"/>
+                    <a-form-model-item class="dp-link-end" prop="dpLinkEndIndex">
+                        <a-input-number
+                            class="common-input"
+                            v-model="configForm.dpLinkEndIndex"
+                            :disabled="modalTitle === 'edit'"
+                            :min="getEndIndex"
+                            placeholder="请输入"
+                        />
                     </a-form-model-item>
                     <a-form-model-item label="预算方式">
-                        <a-radio-group v-model="configForm.accountBudgetMode" button-style="solid" @change="handleAccountMode">
+                        <a-radio-group
+                            v-model="configForm.accountBudgetMode"
+                            button-style="solid"
+                            @change="handleAccountMode"
+                        >
                             <a-radio-button value="1">不限</a-radio-button>
                             <a-radio-button value="2">指定预算</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item v-if="configForm.accountBudgetMode === '2'" label="账户日预算" prop="accountBudget">
-                        <a-input-number v-model="configForm.accountBudget" :min="1000" :max="9999999.99" :step="0.01"/> 元
+                        <a-input-number
+                            v-model="configForm.accountBudget"
+                            :min="1000"
+                            :max="9999999.99"
+                            :step="0.01"
+                        /> 元
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
@@ -50,12 +78,30 @@
                 <div class="separate-module-con">
                     <p class="rock-title">基础信息</p>
                     <a-form-model-item label="广告组名称" prop="campaignName">
-                        <a-input class="common-input-long" v-model="configForm.campaignName" allow-clear placeholder="请输入广告组名称"/>
+                        <a-input
+                            class="common-input-long"
+                            v-model="configForm.campaignName"
+                            allow-clear
+                            placeholder="请输入广告组名称"
+                        />
                     </a-form-model-item>
                     <a-form-model-item label="广告计划名称" prop="adName">
-                        <a-input class="common-input-long" id="groupName" v-model="configForm.adName" allow-clear placeholder="请输入广告计划名称"/>
+                        <a-input
+                            class="common-input-long"
+                            id="groupName"
+                            v-model="configForm.adName"
+                            allow-clear
+                            placeholder="请输入广告计划名称"
+                        />
                         <div>
-                            <a-tag v-for="item in adNameTags" :key="item" color="#1890ff" @click="handleGetChangeAll(item, 'groupName')">+ {{ item }}</a-tag>
+                            <a-tag
+                                v-for="item in adNameTags"
+                                :key="item"
+                                color="#1890ff"
+                                @click="handleGetChangeAll(item, 'groupName')"
+                            >
+                                + {{ item }}
+                            </a-tag>
                         </div>
                     </a-form-model-item>
                     <a-form-model-item label="创建数量: 广告组数量" class="campaign-cnt-class" prop="campaignCnt">
@@ -83,28 +129,63 @@
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item label="下载方式">
-                        <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adDownloadType" button-style="solid" @change="handleAdDownLoadType">
+                        <a-radio-group
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adDownloadType"
+                            button-style="solid"
+                            @change="handleAdDownLoadType"
+                        >
                             <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
                             <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="落地页链接" prop="adExternalUrl">
-                        <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adExternalUrl" placeholder="请输入落地页链接" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adExternalUrl"
+                            placeholder="请输入落地页链接"
+                            allow-clear
+                        />
                     </a-form-model-item>
                     <a-form-model-item v-if="configForm.adDownloadType === 'EXTERNAL_URL'" label="直达链接内容">
-                        <a-input class="common-input-long" v-model="configForm.adOpenUrl" placeholder="请输入直达链接内容" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            v-model="configForm.adOpenUrl"
+                            placeholder="请输入直达链接内容"
+                            allow-clear
+                        />
                     </a-form-model-item>
                     <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="下载链接" prop="adDownloadUrl">
-                        <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adDownloadUrl" placeholder="请输入下载链接" allow-clear @change="handleDownloadLink"/>
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adDownloadUrl"
+                            placeholder="请输入下载链接"
+                            allow-clear
+                            @change="handleDownloadLink"
+                        />
                     </a-form-model-item>
                     <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="应用包名" prop="adPackage">
-                        <a-input class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adPackage" placeholder="请输入应用包名" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adPackage"
+                            placeholder="请输入应用包名"
+                            allow-clear
+                        />
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
                     <p class="rock-title">优化目标</p>
                     <a-form-model-item label="转化跟踪方式" :prop="configForm.launchTarget === 'OCPM' ? 'adConvertType' : ''">
-                        <a-select class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adConvertType" placeholder="请选择" @change="handleConvertTypeChange">
+                        <a-select
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adConvertType"
+                            placeholder="请选择"
+                            @change="handleConvertTypeChange"
+                        >
                             <a-select-option value="AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD">应用下载API</a-select-option>
                             <a-select-option value="AD_CONVERT_SOURCE_TYPE_SDK">应用下载SDK</a-select-option>
                             <a-select-option value="AD_CONVERT_SOURCE_TYPE_OPEN_URL">应用直达API(应用直达链接)</a-select-option>
@@ -112,7 +193,13 @@
                         </a-select>
                     </a-form-model-item>
                     <a-form-model-item label="优化目标" :prop="configForm.launchTarget === 'OCPM' ? 'adConvertId' : ''">
-                        <a-select class="common-input-long" :disabled="modalTitle === 'edit'" v-model="configForm.adConvertId" placeholder="请选择" @change="handleConvertChange">
+                        <a-select
+                            class="common-input-long"
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adConvertId"
+                            placeholder="请选择"
+                            @change="handleConvertChange"
+                        >
                             <a-select-option
                                 v-for="(item, index) in optimizationOption"
                                 :key="index"
@@ -126,14 +213,21 @@
                 <div class="separate-module-con">
                     <p class="rock-title">设置投放位置</p>
                     <a-form-model-item label="广告位置">
-                        <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adverPosition" button-style="solid" @change="handleAdverPosition">
+                        <a-radio-group
+                            :disabled="modalTitle === 'edit'"
+                            v-model="configForm.adverPosition"
+                            button-style="solid"
+                            @change="handleAdverPosition"
+                        >
                             <a-radio-button value="a">系统优选广告位</a-radio-button>
                             <a-radio-button value="b">按媒体指定位置</a-radio-button>
                             <a-radio-button value="c">按场景指定位置</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
                     <div class="adver-position-radio">
-                        <p v-if="configForm.adverPosition === 'a'">系统将根据您设置的定向,选择预估效果最好的广告位进行投放,并触达尽可能多的目标用户</p>
+                        <p v-if="configForm.adverPosition === 'a'">
+                            系统将根据您设置的定向,选择预估效果最好的广告位进行投放,并触达尽可能多的目标用户
+                        </p>
                         <div v-if="configForm.adverPosition === 'c'" class="position-radio-change">
                             <p>位置选择</p>
                             <a-radio-group v-model="configForm.radioChangeValue">
@@ -202,7 +296,6 @@
                             <a-radio-button value="PC" :disabled="!!configForm.adDownloadUrl">PC</a-radio-button>
                         </a-radio-group>
                     </a-form-model-item>
-                    <!-- adAndroidOsv  adAndroidVersion -->
                     <a-form-model-item v-if="configForm.adDownloadUrl" label="安卓版本">
                         <a-radio-group v-model="configForm.adAndroidVersion" button-style="solid" @change="handleAndroidVersion">
                             <a-radio-button value="NONE">不限</a-radio-button>
@@ -263,11 +356,20 @@
                     </a-form-model-item>
                     <a-form-model-item label="预算">
                         <a-input-group compact>
-                            <a-select :disabled="modalTitle === 'edit'" v-model="configForm.adBudgetMode" @change="handleBudgetMode">
+                            <a-select
+                                :disabled="modalTitle === 'edit'"
+                                v-model="configForm.adBudgetMode"
+                                @change="handleBudgetMode"
+                            >
                                 <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
                                 <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
                             </a-select>
-                            <a-input-number class="common-input" v-model="configForm.adBudget" :min="adBudgetNum" :step="0.01"/>
+                            <a-input-number
+                                class="common-input"
+                                v-model="configForm.adBudget"
+                                :min="adBudgetNum"
+                                :step="0.01"
+                            />
                         </a-input-group>
                     </a-form-model-item>
                     <a-form-model-item label="投放时间">
@@ -302,13 +404,24 @@
                         </a-radio-group>
                     </a-form-model-item>
                     <a-form-model-item label="目标转化出价" :prop="configForm.launchTarget === 'OCPM' ? 'adCpaBid' : ''">
-                        <a-input-number class="common-input" v-model="configForm.adCpaBid" :min="0.1" :max="configForm.adBudget" :step="0.01"/> 元
+                        <a-input-number
+                            class="common-input"
+                            v-model="configForm.adCpaBid"
+                            :min="0.1"
+                            :max="configForm.adBudget"
+                            :step="0.01"
+                        /> 元
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
                     <p class="rock-title">第三方检测链接</p>
                     <a-form-model-item label="点击监测">
-                        <a-input class="common-input-long" placeholder="请输入链接地址" v-model="configForm.creativeActionTrackUrl" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            placeholder="请输入链接地址"
+                            v-model="configForm.creativeActionTrackUrl"
+                            allow-clear
+                        />
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
@@ -353,10 +466,17 @@
                         </a-upload>
                     </a-form-model-item>
                     <a-form-model-item label="卡片标题" prop="creativeProductDescription">
-                        <a-input class="common-input-long" placeholder="请输入卡片标题" v-model="configForm.creativeProductDescription" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            placeholder="请输入卡片标题"
+                            v-model="configForm.creativeProductDescription"
+                            allow-clear
+                        />
                     </a-form-model-item>
                     <a-form-model-item label="推广卖点">
-                        <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />推广卖点</a-button>
+                        <a-button type="primary" @click="handleAddOrigin">
+                            <a-icon type="plus" />推广卖点
+                        </a-button>
                     </a-form-model-item>
                     <div class="adver-position-radio">
                         <a-form-model-item
@@ -380,12 +500,22 @@
                         </a-radio-group>
                     </a-form-model-item>
                     <div class="adver-position-radio">
-                        <a-form-model-item label="">
-                            <a-input class="common-input-long" placeholder="请输入" v-model="configForm.creativeCallToAction" allow-clear/>
+                        <a-form-model-item>
+                            <a-input
+                                class="common-input-long"
+                                placeholder="请输入"
+                                v-model="configForm.creativeCallToAction"
+                                allow-clear
+                            />
                         </a-form-model-item>
                     </div>
                     <a-form-model-item label="来源" :prop="getSource">
-                        <a-input class="common-input-long" placeholder="请输入来源" v-model="configForm.creativeSource" allow-clear/>
+                        <a-input
+                            class="common-input-long"
+                            placeholder="请输入来源"
+                            v-model="configForm.creativeSource"
+                            allow-clear
+                        />
                     </a-form-model-item>
                 </div>
                 <div class="separate-module-con">
@@ -402,11 +532,11 @@
                     <a-form-model-item label="创意标签">
                         <a-select
                             v-model="configForm.creativeLabel"
+                            :token-separators="[',', ' ', ',']"
                             mode="tags"
                             style="width: 320px"
                             placeholder="按回车生成标签"
                             dropdownClassName="display-none-selset"
-                            :token-separators="[',', ' ', ',']"
                             @change="handleEnterChang"
                         >
                         </a-select>